在购物车索引视图（Razor 视图引擎）中需要有关 Razor 语法的帮助

Question

第一次使用时我很喜欢它，感觉比 webforms <%: %> 等视图引擎更简洁，但是在进一步使用它时，我不禁注意到它对“{”括号的位置非常敏感，并且其他场景。 它在旧视图引擎不那么挑剔的地方给出错误。

例如，下面的代码将产生错误，因为表单助手右括号 } 位于</table>标记下。 如果我把它放在</tbody>的上方，它就可以工作。 但我不需要它，因为提交按钮输入必须嵌套在其中，我不想将按钮输入放入表中。

@model CartTest.Models.Cart

@{
    ViewBag.Title = "Index";
}

<h2>Cart Index</h2>

<table width="80%" align="center">
  <thead>
    <tr>
      <th align="center">Quantity</th>
      <th align="left">Item</th>
      <th align="right">Price</th>
      <th align="right">Subtotal</th>
    </tr>
  </thead>
  <tbody>
  @{int index = 0;}
  @using (Html.BeginForm("UpdateCart","Cart"))
  {
    foreach (var line in Model.Lines)
    {
      <tr>
        @Html.Hidden("Lines.Index", index)
        <td align="center">@Html.TextBox("Lines[" + index + "].Quantity", line.Quantity)</td>
        <td align="left">@line.Product.Name</td>
        <td align="right">@line.Product.Price</td>
        <td align="right">@(line.Quantity * line.Product.Price)</td>
        <td align="right">@Html.ActionLink("Remove", "RemoveItem", new { productId = line.Product.ProductID }, null)</td>
      </tr>
      index++;
    }
  </tbody>
  <tfoot></tfoot>
</table>

<input type="submit" value="Update Cart" />
}

Answer 1

它在</tbody>之上工作的原因是因为您在开头的<tbody>中声明了 BeginForm。 它们必须正确嵌套才能工作。 如果您不想将输入按钮放在表格内，则将 BeginForm 移到表格元素外，使左大括号和右大括号处于同一水平。

    @using (Html.BeginForm("UpdateCart","Cart"))
    {

    <table width="80%" align="center">

    <thead><tr>
    <th align="center">Quantity</th>
    <th align="left">Item</th>
    <th align="right">Price</th>
    <th align="right">Subtotal</th>
    </tr></thead>

    <tbody>

    @{int index = 0;}

    foreach (var line in Model.Lines)
    {
    <tr>
    @Html.Hidden("Lines.Index", index)
    <td align="center">@Html.TextBox("Lines[" + index + "].Quantity", line.Quantity)</td>
    <td align="left">@line.Product.Name</td>
    <td align="right">@line.Product.Price</td>
    <td align="right">@(line.Quantity * line.Product.Price)</td>
    <td align="right">@Html.ActionLink("Remove", "RemoveItem", new { productId = line.Product.ProductID }, null)</td>

    </tr>
        index++;

} 
    </tbody>
    <tfoot>
    </tfoot>
    </table>

    <input type="submit" value="Update Cart" />
    }

Answer 2

移动

@{int index = 0;}
@using (Html.BeginForm("UpdateCart","Cart"))
{

在你的桌子上方分开，所以整个桌子都在表单标签内。