c# - JSON .append @Html.Partial

Question

在创建订单表时，需要加号，这会在订单中添加一个新行。表格的第一行始终存在。问题是第一个字段是 Html.Partial View ，它处理所有可选项目的下拉列表。

问题:如何将 @Html.Partial 附加到 JSON 函数？ 问题:@ 符号。

function addOrderRow() {
        $("#btnAddOrderRow").click(function () {
              var newRow = '<tr style="height:50px;"><td class="col-md-6"><div class="row"><div id="SupplierItems" class="col-md-6">' +
                    '@Html.Partial("SupplierItems", Model)' +
                    '</div><div class="col-md-6"><input id="Description" type="text" class="form-control" style="width:100%" /></div></div></td><td class="col-md-3"><input id="Partnumber" type="text" style="width:100%" class="form-control" /></td><td class="col-md-2"><div class="form-inline"><strong>£&nbsp;</strong><input id="Cost" type="number" min="0" step="0.01" style="width:93%" class="form-control text-right" /></div></td><td class="col-md-1"><input id="Quantity" type="number" min="1" step="1" class="form-control text-center" value="1" style="width:100%" /></td><td class="col-md-1 text-center"><button class="btn btn-danger btn-sm" type="button"> <span class="glyphicon glyphicon-minus"></span></button></td></tr>';
              $("#orderTable > tbody:last-child").append(newRow);
        })
  };

如果我用 @ 转义 @，该函数只是将 @Html.Partial("SupplierItems", Model) 文本放入相关的 <td> 中.

Answer 1

您可以将 View 渲染到一个变量中，然后使用它来添加行，即

var view = '@Html.Raw(@Html.Partial('Your partial'))';

然后使用字符串连接添加 View

function addOrderRow() {
    var view = '@Html.Raw(@Html.Partial("SupplierItems", Model))';
    $("#btnAddOrderRow").click(function () {
          var newRow = '<tr style="height:50px;"><td class="col-md-6"><div class="row"><div id="SupplierItems" class="col-md-6">' +
                view +
                '</div><div class="col-md-6"><input id="Description" type="text" class="form-control" style="width:100%" /></div></div></td><td class="col-md-3"><input id="Partnumber" type="text" style="width:100%" class="form-control" /></td><td class="col-md-2"><div class="form-inline"><strong>£&nbsp;</strong><input id="Cost" type="number" min="0" step="0.01" style="width:93%" class="form-control text-right" /></div></td><td class="col-md-1"><input id="Quantity" type="number" min="1" step="1" class="form-control text-center" value="1" style="width:100%" /></td><td class="col-md-1 text-center"><button class="btn btn-danger btn-sm" type="button"> <span class="glyphicon glyphicon-minus"></span></button></td></tr>';
          $("#orderTable > tbody:last-child").append(newRow);
    })
};

请注意，这会创建一个静态 View ，它将为每个添加的行呈现相同的内容，我发现某些 View 依赖于提供给 Inputs 的 ID特别是在使用 ModelBinding 时