jquery - 在 asp.net mvc 中动态添加行 hainf html 帮助器

Question

以下是我的代码，我用它在每个 td 中添加带有 html 帮助程序的新行。

我正在我的应用程序中查看 Material list ，我需要有一个结构，其中主父项(主要 Material )下有许多子项(成分)。

我的方法是在 td 中添加 html 帮助程序，然后使用按钮单击“添加行”并添加子项(成分)。

当我单击以下代码中的按钮时，我无法获得新行。请帮助并建议是否有任何其他正确的方法来完成我的 Material list View 。

我正在引用this link .

$("#myButton").click(function () {
    debugger;
    // Create elements dynamically
    var newRow = "<tr><td>'@Html.TextBoxFor(x => x.Id, new { @Value = "1" })'</td><td>'@Html.TextBoxFor(x => x.Name, new { @Value = "Abcd" })'</td></tr>";
    alert(newRow);
    // Add the new dynamic row after the last row
    $('#aliasTable tr:last').after(newRow);
});


<h2>Index</h2>

<table id="aliasTable">
    <tr>
        <td>
            @Html.TextBoxFor(Model => Model.Id, new { @Value = "1" })
        </td>

        <td>
            @Html.TextBoxFor(Model => Model.Name, new { @Value = "Abcd" })
        </td>
    </tr>
</table>

<button id="myButton">Add New Row</button>

Answer 1

请更改您的代码，如下所示。

注意:重要的是您需要在单引号之间提及 razer 代码(Html 帮助程序)，例如 ('@Html.TextBoxFor(Model => Model.Id') 。

如果您必须需要强类型手段，请使用以下代码。

[HttpGet]
public ActionResult ActionMethodName()
{
    Test testData = new Test();
    testData.Id = 1 // if Id is integet else testData.Id = "1"
    testData.Name = "Abcd"
    return View("ViewName", testData);
}

您只需添加操作方法中的值。然后该值会自动返回到您的页面。

然后您可以在 Java 脚本中使用以下代码来返回该值。

var newRow = "<tr><td>" + '@Html.TextBoxFor(x => x.Id)' + "</td><td>" + '@Html.TextBoxFor(x => x.Name)' + "</td></tr>";

否则，如果您不需要强类型，请使用以下代码

var newRow = '<tr><td><input type="text" value ="1" name ="Id" /><input type="text" value ="1" name ="Name" /></td></tr>';