在ASP.NET MVC中使用HTML助手动态添加行

Question

以下是我使用HTML助手程序添加新行的代码。

我正在为我的应用程序制作材料清单视图，需要一个结构，在主要父项（主要材料）下有许多子项（成分）。

我的方法是在td中使用html助手程序，并通过按钮点击添加行和添加子项（成分）。

在我的以下代码中，当我单击按钮时，无法获取新行。请帮忙，并请建议是否有其他适当的方法来完成我的材料清单视图。

我参考了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>

- user2998990

Answer 1

请按照以下方式更改您的代码。

注意：重要的是，您需要在单引号之间提及razer代码（Html helpers），例如 ('@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);
}

你只需要在你的操作方法中添加值，然后该值就会自动返回到你的页面。 接下来，您可以使用以下代码来返回该值。

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>';

- Aravindan

---

现在错误已经消失了，但我仍然无法获取新行。 - user2998990

抱歉耽搁了，我已经检查并运行了代码，发现我们无法从HTML助手中分配值。如果您现在尝试更新的代码，则可以正常工作，我已经检查过了。 - Aravindan

你能发布已编辑的代码吗？因为我在我的问题中已经编辑了相同的代码，但仍然无法工作。 - user2998990

你是否使用了<input>标签而不是@Html.TextBox？这是我在这里使用的。请使用<input>标签，就像我给出的那样。刷新页面，您可以看到我现在更新的代码，并且我已经检查过它，它完美地工作。请刷新页面并复制粘贴代码。谢谢。 - Aravindan

目前我还没有任何操作方法，我将编写Post操作方法，但在此之前，如果视图按照我的要求工作，那么我才会为其编写相应的Post方法。目前我只有一个包含return View()语句的Get视图。 - user2998990