用 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