Asp.net Core 根据模型值在特定位置动态插入 HTML 元素答案

【问题标题】：Asp.net Core Dynamically inserting HTML elements in a specific position based on model valuesAsp.net Core 根据模型值在特定位置动态插入 HTML 元素
【发布时间】：2020-03-25 10:16:10
【问题描述】：

我已经找到了一种方法，可以根据模型中的 status 属性将子元素动态插入到特定的父 div 元素中。我的版本的问题是我使用 4 个循环来实现这一点。有没有更好的方法来实现这一目标？像 1 个循环。

这是我的代码：

    <div class="col-lg-3">
        @foreach (var item in Model)
        {
            if (item.Status == OrderStatus.New)
            {
                <div class="order"></div>
            }
        }
    </div>
    <div class="col-lg-3">
        @foreach (var item in Model)
        {
            if (item.Status == OrderStatus.Preparing)
            {
                <div class="order"></div>
            }
        }
    </div>
    <div class="col-lg-3">
        @foreach (var item in Model)
        {
            if (item.Status == OrderStatus.Delivering)
            {
                <div class="order"></div>
            }
        }
    </div>
    <div class="col-lg-3">
        @foreach (var item in Model)
        {
            if (item.Status == OrderStatus.Delivered)
            {
                <div class="order"></div>
            }
        }
    </div>
</div>

如您所见，我根据状态将一堆 div 标签添加到 4 列之一中。我为每个人使用一个循环来实现这一点。

【问题讨论】：

我的回答对你有帮助吗？如果有，你能accept我的回答吗？

标签： html asp.net-core razor

【解决方案1】：

只需将此循环放在此元素之外并检查项目是否具有预期状态。这就是你要找的东西吗？

    @foreach(var item in Model)
    {  
        <div class="col-lg-3">
                if (item.Status == OrderStatus.New)
                {
                    <div class="order"></div>
                }
        </div>
        <div class="col-lg-3">
                if (item.Status == OrderStatus.Preparing)
                {
                    <div class="order"></div>
                }
        </div>
        <div class="col-lg-3">
                if (item.Status == OrderStatus.Delivering)
                {
                    <div class="order"></div>
                }
        </div>
        <div class="col-lg-3">
                if (item.Status == OrderStatus.Delivered)
                {
                    <div class="order"></div>
                }
        </div>
    }
</div>

编辑版本：

    @foreach(var item in Model)
    {  
        if (item.Status == OrderStatus.New)
        {
            <div class="col-lg-3">
                <div class="order"></div>
            </div>
        }
        if (item.Status == OrderStatus.Preparing)
        {
            <div class="col-lg-3">
                <div class="order"></div>
            </div>
        }
        if (item.Status == OrderStatus.Delivering)
        {
            <div class="col-lg-3">
                <div class="order"></div> 
            </div>
         }
        if (item.Status == OrderStatus.Delivered)
        {
            <div class="col-lg-3">
                <div class="order"></div>
            </div>
        }
    }
</div>

【讨论】：

这不会在每个循环上创建 3 列吗？这是我遇到的问题。
因此您可以在 div 之外获取语句。我编辑了答案以向您展示想法。
这仍然是一个问题。我想要 4 个固定的列，就是这样。我希望用订单填充这 4 列。您编辑的方式仍然不起作用，因为可能有 20 个订单，它将创建 20 列。我只需要 4 列。

【解决方案2】：

将break 添加到您的条件中，如下所示：

<div class="col-lg-3">
    @foreach (var item in Model)
    {
        if (item.Status == OrderStatus.New)
        {
            <div class="order"></div>
            break;                
        }
    }
</div>
<div class="col-lg-3">
    @foreach (var item in Model)
    {
        if (item.Status == OrderStatus.Preparing)
        {
            <div class="order"></div>
            break;
        }
    }
</div>
<div class="col-lg-3">
    @foreach (var item in Model)
    {
        if (item.Status == OrderStatus.Delivering)
        {
            <div class="order"></div>
            break;
        }
    }
</div>
<div class="col-lg-3">
    @foreach (var item in Model)
    {
        if (item.Status == OrderStatus.Delivered)
        {
            <div class="order"></div>
            break;
        }
    }
</div>

【讨论】：