web-dev-qa-db-ja.com

単純なIf / Else Razor構文

このコードを使用してforeach内で簡単なIf/Elseを実行しようとしています。

@{
var count = 0;
foreach (var item in Model)
{
    if (count++ % 2 == 0)
    {
        @:<tr class="alt-row">
    } else { 
        @:<tr>
    }
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.Truncate(item.Details, 75)
        </td>
        <td>
            <img src="@Url.Content("~/Content/Images/Projects/")@item.Images.Where(i => i.IsMain == true).Select(i => i.Name).Single()" 
                alt="@item.Images.Where(i => i.IsMain == true).Select(i => i.AltText).Single()" class="thumb" />
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ProjectId }) |
            @Html.ActionLink("Details", "Details", new { id = item.ProjectId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ProjectId })
        </td>
    </tr>
}
}

解析エラー「一致する開始タグのない終了タグ「tr」が発生しました。開始タグと終了タグのバランスは適切ですか？」が表示されます。 ifステートメントが機能しないようです。

c#asp.net-mvcrazorhtml-table
36
Shane LeBlanc

終了タグにこれを使用するだけです：

  @:</tr>

そして、if/elseはそのままにします。

Ifステートメントが機能しないようです。

正常に動作します。ここでは2つの言語空間で作業していますが、オープンサンドイッチとクローズサンドイッチを境界線で分割しないのが適切なようです。

43
Henk Holterman

私はただ行くだろう

<tr @(if (count++ % 2 == 0){<text>class="alt-row"</text>})>

またはさらに良い

<tr class="alt-row@(count++ % 2)">

これはあなたに次のような行を与えます

<tr class="alt-row0">
<tr class="alt-row1">
<tr class="alt-row0">
<tr class="alt-row1">
11
Jeff

少し話題から外れているかもしれませんが、最新のブラウザー（IE9以降）では、CSSの奇数/偶数セレクターを使用して望みを実現できます。

tr:nth-child(even) { /* your alt-row stuff */}
tr:nth-child(odd) { /* the other rows */ }

または

tr { /* all table rows */ }
tr:nth-child(even) { /* your alt-row stuff */}
6
Michiel

If/elseの厄介さを取り除くには、usingブロックを使用できます。

@{
    var count = 0;
    foreach (var item in Model)
    {
        using(Html.TableRow(new { @class = (count++ % 2 == 0) ? "alt-row" : "" }))
        {
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.Truncate(item.Details, 75)
            </td>
            <td>
                <img src="@Url.Content("~/Content/Images/Projects/")@item.Images.Where(i => i.IsMain == true).Select(i => i.Name).Single()" 
                    alt="@item.Images.Where(i => i.IsMain == true).Select(i => i.AltText).Single()" class="thumb" />
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ProjectId }) |
                @Html.ActionLink("Details", "Details", new { id = item.ProjectId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.ProjectId })
            </td>
        }
    }
}

属性の追加を容易にする再利用可能な要素：

//Block is take from http://www.codeducky.org/razor-trick-using-block/
public class TableRow : Block
{
    private object _htmlAttributes;
    private TagBuilder _tr;

    public TableRow(HtmlHelper htmlHelper, object htmlAttributes) : base(htmlHelper)
    {
        _htmlAttributes = htmlAttributes;
    }

    public override void BeginBlock()
    {
        _tr = new TagBuilder("tr");
        _tr.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(_htmlAttributes));
        this.HtmlHelper.ViewContext.Writer.Write(_tr.ToString(TagRenderMode.StartTag));
    }

    protected override void EndBlock()
    {
        this.HtmlHelper.ViewContext.Writer.Write(_tr.ToString(TagRenderMode.EndTag));
    }
}

かみそりの構文をより明確にするヘルパーメソッド：

public static TableRow TableRow(this HtmlHelper self, object htmlAttributes)
{
    var tableRow = new TableRow(self, htmlAttributes);
    tableRow.BeginBlock();
    return tableRow;
}
1
Steven Wexler