用 JS function 附加 HTML 的正确语法是什么？

Question

在我的实体框架 .NET MVC 应用程序中，我想 append 在带有 JS 的表中添加一个新行，但我希望能够进行数据验证。 因此我需要使用Html.EditorFor 。

这是当前的 JS 代码：

$("#add_btn").on('click', function (e) {
        var table = $("#element_table");
        var idx = $(table).find("tbody>tr").length;
        var htmlToAppend = `<tr>
                                <td><input name="item.Elements[${idx}].Name" id="Elements[${idx}].Name" /></td>
                                <td><input name="item.Elements[${idx}].Quantity" id="Elements[${idx}].Quantity" /></td>
                            </tr>`;
        $("#element_table").append(htmlToAppend);
    });

我想要这样的东西：

var htmlToAppend = `<tr>
                        <td> @Html.EditFor(model => model.Elements[${idx}].Name </td>
                        <td> @Html.EditFor(model => model.Elements[${idx}].Quantity</td>
                    </tr>`

但我找不到正确的语法。

Answer 1

你不能在没有渲染视图的情况下使用 razor。

解决此问题的最佳方法是使用 html 代码。 例子：

$('tr#id td:first').append($('<input type="text" id="textfield" name="fieldName" value="your value" />'));

或尝试一下：

将您的 model 项目传递给具有 ajax 请求的操作并创建一个操作，然后返回部分视图：

public ActionResult yourAction(Model model)
{
    return PartialView(model);
}

并在此视图中插入您的 razor 代码：

@Html.EditFor(model => model.Elements[${idx}].Name
@Html.EditFor(model => model.Elements[${idx}].Quantity