如何使用 MVC 剃刀语法将行动态添加到 html 表中

How to dynamically add rows to an html table using MVC razor syntax

本文关键字：添加 动态 html 表中 何使用 MVC 剃刀 语法      更新时间：2023-09-26

我正在尝试使用此处标记为答案的想法将新行动态添加到表中 在jQuery中添加表行

到目前为止，我已经为我的表要求之一实现了它，如下所示

    function onAddItem() {
    $('#myDynamicTable tr:last').after('<tr><td style="width: 78%;" class="itemName"><input type="text" style="width: 97%;" /></td><td style="width: 20%;" class="itemQty"><input type="text" style="width: 87%;" /></td></tr>');
    $("#myDynamicTable").show();
}

我现在正在尝试为下面的<tr>..</tr>定义实现相同的内容，但我无法使其正常工作。 

<tr class="tdBorder">
                    <td class="tdBorder">
                        @Html.TextBox("Id", null, new { @width = 60 })
                    </td>
                    <td>
                        @Html.TextBox("Name", null, new { @width = 150 })
                    </td>
                    <td>
                        @Html.DropDownList("ddlCountries", new SelectList(ViewBag.CountryList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60 })
                    </td>
                    <td>
                        @Html.TextBox("Event", null, new { @width = 60 })
                    </td>
                    <td>
                        @Html.DropDownList("ddlRegions", new SelectList(ViewBag.RegionList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })
                    </td>
                    <td>
                        @Html.TextBox("Remarks", null, new { @width = 700 })
                    </td>
                </tr>

我以为我会尝试下面的行，但这压垮了jQuery。

$('#myDynamicTable tr:last').after('<tr class="tdBorder"><td class="tdBorder">@Html.TextBox("Id", null, new { @width = 60 })</td><td>@Html.TextBox("Name", null, new { @width = 150 })</td><td>@Html.DropDownList("ddlCountries", new SelectList(ViewBag.CountryList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60 })</td><td>@Html.TextBox("Event", null, new { @width = 60 })</td><td>@Html.DropDownList("ddlRegions", new SelectList(ViewBag.RegionList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })</td><td>@Html.TextBox("Remarks", null, new { @width = 700 })</td></tr>');

正如注释中指出的，您不能在单独的javascript文件中使用razor html助手。然后，您有两个选择：

在 Razor 视图的 <script> 标记中使用特定于页面的 JavaScript。您使用的任何帮助程序都将以相同的方式呈现，并且您现有的代码应该没问题。

或者，您可以在视图中呈现列表，并根据需要在 javascript 中复制它。

类似的东西

// Your normal view markup here
<div id='countries' style='display:none'>
    @Html.DropDownList("ddlCountries", new SelectList(ViewBag.CountryList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60 })
</div>
<div id='regions'>
    @Html.DropDownList("ddlRegions", new SelectList(ViewBag.RegionList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })
</div>

然后javascript看起来像这样

var countries = $('#countries').html();
var regions = $('#regions').html();
var html = '<tr class="tdBorder">'
        + '<td class="tdBorder"><input name="Id", type="text" /></td>'
        + '<td><input name="Name" type="text" /></td>'
        + '<td>' + countries + '</td>'
        + '<td>input name="Event" type="text" /></td>'
        + '<td>' + regions +'</td>'
        + '<td><input name="Remarks" type="text" /></td></tr>'
$('#myDynamicTable tr:last').after(html);
相关文章：