Question

我正在尝试使用在此处标记为答案的提示动态地向表中添加新行Add table row in 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>');

Answer 1

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

在剃刀视图的<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);

如何使用MVC razor语法动态地将行添加到html表

1 个答案: