在 ASP.Net MVC Razor 中使用 jquery 附加 c# 字符串答案

【问题标题】：Append c# string using jquery in ASP.Net MVC Razor在 ASP.Net MVC Razor 中使用 jquery 附加 c# 字符串
【发布时间】：2015-07-11 14:46:43
【问题描述】：

我正在使用 ASP.Net MVC Razor。我尝试了以下方法在我的表格主体中添加一个不起作用的表格行：

<script>
            $(document).ready(function() {

            @foreach (var billdetail in Model.BillDetails)
            {
                var row = "<tr class='productTableRow'><td>" + billdetail.ModelName + "</td><td class='price' >" + billdetail.Price + " </td><td><input type='text' class='form-control unit' data-validation='Unit' nonZero='true' currentStockAmount=" + billdetail.CurrentAmount + " /></td><td class='total'>"+(billdetail.Price*billdetail.Price)+"</td><td><input type='button' class='btn btn-danger removeRow' data-modelId=" + billdetail.ModelId + " value='Remove'  / ></td><td style='visibility:hidden;'>" +
                                   "<input type='hidden' class='hiddenModel' value='" + billdetail.ModelId + "'>" +
                                   "<input type='hidden' class='hiddenPrice' value='" + billdetail.Price + "'>" +
                                   "</td></tr>";

                @:$("#productBody").append(@row);
            }

        });
    </script>

显示错误：Uncaught SyntaxError: Unexpected token & 正确的做法是什么。

【问题讨论】：

标签： javascript c# jquery asp.net-mvc razor

【解决方案1】：

我不明白您为什么要生成将在加载时附加此内容的 javascript。为什么不简单地在视图中使用 Razor 生成表格标记，如下所示：

<table id="productBody">
   @foreach (var billdetail in Model.BillDetails)
   {
   <tr class="productTableRow">
      <td>@(billdetail.ModelName)</td>
      <td class="price">@(billdetail.Price)</td>
      <td><input type="text" class="form-control unit" data-validation="Unit" nonZero="true" currentStockAmount="@(billdetail.CurrentAmount)" /></td>
      <td class="total">@(billdetail.Price*billdetail.Price)</td>
      <td><input type="button" class="btn btn-danger removeRow" data-modelId="@(billdetail.ModelId)" value="Remove" / ></td>
      <td style="visibility:hidden;"><input type="hidden" class="hiddenModel" value="@(billdetail.ModelId)"><input type="hidden" class="hiddenPrice" value="@(billdetail.Price)"></td>
   </tr>
   }
</table>

【讨论】：

【解决方案2】：

您应该只检查客户端的输出，从源头上我会得出结论，您的代码会在客户端产生类似的结果：

//...
$("#productBody").append(<tr class='productTableRow'>...);
//...

我认为没有引号是这里的主要问题。

【讨论】：

【解决方案3】：

由于 razor 中的自动 html 编码，您实际上可以将@:$("#productBody").append(@row); 更改为以下内容以使其工作。

HtmlString s = new HtmlString(row);
@:$("#productBody").append("@s");

【讨论】：

【解决方案4】：

应该没问题

@:$("#productBody").append("@row");

【讨论】：