Question

问题是我试图根据foreach中的IF条件更改div的背景颜色，我不想为每个条件（实际上是3个条件）进行代码的完整复制。

我的想法是做一些事情：

@foreach (var item in Model.Models)
{

        @if (item.Status == "COMPLETED")
        {
            <div class="card teal darken-2 white-text">
                }
        @if (item.Status == "NOT STARTED")
                {
             <div class="card grey white-text">
                        }
        @if (item.Status == "RUNNING")
        {
            <div class="card blue white-text">
                }
                <div class="card content">

                </div>

            </div>
     </div>
}

但似乎HTML检测到没有闭包的3个div并且它压缩说foreach需要一个结尾}。

有什么想法吗？

Answer 1

您当前的代码失败了，因为您正在尝试将C＃代码与纯文本混合使用。

if条件打开一个C＃代码块。因此，如果您想在其中混合纯文本或html，则需要使用@:前缀。 @:告诉razor以下不是C＃代码，而是纯文本。它与<text></text>代码

相同

你还有一个额外的结束div。

这应该有用。

@foreach (var item in Model.SomeCollection)
{
    if (item.Status == "COMPLETED")
    {
        @:div class="card teal darken-2 white-text">
    }
    if (item.Status == "RUNNING")
    {
        @:div class="card grey white-text">
    }
    <div class="card content">@item.Name</div>
    @:</div>
}

我个人更喜欢在视图中添加更少的C＃代码。我喜欢让我的观点更加充实。我会创建一个单独的方法，它可以根据Status值返回你需要的css类。

这是一种扩展方法。

public static class UiExtensionMethods
{
    public static IHtmlString GetStatusClass(this string item)
    {
        switch (item)
        {
            case "COMPLETED":
                return MvcHtmlString.Create("teal darken-2 white-text");
            case "RUNNING":
                return MvcHtmlString.Create("blue white-text");
            default:
                return MvcHtmlString.Create("gray white-text");
        }
    }
}

现在你要做的就是在你的视图中调用这个方法。

<div>
    @foreach (var item in Model.Tags)
    {
        <div class="card @item.Status.GetStatusClass()">
            <div class="card content">
                @item.Status
            </div>
        </div>    
    }
</div>

我在string上创建了扩展方法。您可以在更具体的类型上创建它（您的状态类/状态类型（枚举？）/集合中每个项目的类型。）

Razor查看IF到部分div

1 个答案: