Question

创建订单表时，需要加号，这会在订单中添加新行。表的第一行总是在那里。问题是第一个字段是Html.Partial视图，它处理所有可选项的下拉列表。

问题：如何将@ 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（＆＃34; SupplierItems＆＃34;，Model）文本放入相关的<td>。

Answer 1

您可以将视图渲染为变量，然后使用它来添加行，即

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

然后使用字符串连接添加视图

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);
    })
};

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

Answer 2

原来问题的答案似乎是：

var view = String.raw`@Html.Partial("SupplierItems", Model)`;

注意标记，不是'！

但这对我没有帮助，因为部分视图包含另一个<script>，它会弄乱页面。我需要找到一个解决方法。问题回答了。

JSON .append @ Html.Partial

2 个答案: