Question

以下是我的代码，我用它在每个td中添加带有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>

Answer 1

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

注意：重要的是你需要在单引号之间提及razer代码（Html助手），如（'@ Html.TextBoxFor（Model =＆gt; 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>';

在asp.net mvc中动态添加行hainf html helper

1 个答案: