2

我的主视图中有以下 html 表定义

<table id="myDynamicTable" cellpadding="0" cellspacing="0" class="burTable" width="964px">
        <thead>
            <tr>
                <th style="white-space: nowrap;display: inline;width: 40px" >
                    ColOne
                </th>
                <th style="white-space: nowrap;display: inline;width: 90px">
                    ColTow
                </th>
                <th style="white-space: nowrap;display: inline;width: 54px">
                    ColThree
                </th>
                <th style="white-space: nowrap;display: inline;width: 60px">
                    ColFour
                </th>
                <th style="white-space: nowrap;display: inline;width: 399px">
                    ColFive
                </th>
                <th style="white-space: nowrap;display: inline;width: 474px">
                    ColSix
                </th>
            </tr>
        </thead>
        <tbody>
          @if (Model.myViewModel.Count() > 0)
            {
                int i = 1;
                foreach (var item in Model.myViewModel)
                {
                    <tr >
                        <td class="tdBorder">
                            @Html.DisplayFor(x => item.AutoNumber, new { @readonly = "readonly" })
                            @Html.HiddenFor(x => item.Code, new { id = "Code" + @i })
                        </td>
                        <td>
                            @Html.TextBoxFor(x => item.SerialNumber, new { id = "SerialNumber" + @i, @Class = "numberOnly", maxlength = 15 })
                        </td>
                        <td>
                            @Html.DropDownList("ddlItemType" + @i, new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text", item.ItemTypeId))
                        </td>
                        <td>
                            @Html.TextBoxFor(x => item.Date, new { id = "Date" + @i })
                        </td>
                        <td>
                            @Html.DropDownList("ddlUnit" + @i, new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text", item.UnitId))
                        </td>
                        <td>
                            @Html.TextBoxFor(x => item.Comment, new { id = "Comment" + @i, @class = "Comment RestrictCharacters", maxlength = 1000 })
                        </td>
                    </tr>
                    i += 1;
                }

            }
            else
            {
                <tr id="FirstRow" class="tdBorder">
                    <td class="tdBorder">
                       @Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
                    </td>
                    <td>
                        @Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
                    </td>
                    <td>
                         @Html.DropDownList("ddlItemType", new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60, id = "ddlItemType" })
                    </td>
                    <td>
                        @Html.TextBox("Date", null, new { @width = 60, id = "Date" })
                    </td>
                    <td>
                        @Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
                    </td>
                    <td>
                        @Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
                    </td>
                </tr>
            }
        </tbody>
    </table>

我希望能够使用此处解释的 BeginCollectionItem 概念添加新行http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/并使用与 mvc 中的模型连接的 jquery 在表中添加行

下面是我想用作添加新行的模板的部分视图的定义。@using MyProject.Utilities @model MyProject.ViewModel.ReportDetailsViewModel

@using (Html.BeginCollectionItem("NewRow"))
{
    <tr id="NewRow" class="tdBorder">
        <td class="tdBorder">
            @Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
        </td>
        <td>
            @Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
        </td>
        <td>
            @Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" })
        </td>
        <td>
            @Html.TextBox("Date", null, new { @width = 60, id = "Date" })
        </td>
        <td>
            @Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
            @Html.DropDownListFor(model => model.UnitId, Model.UnitList)
        </td>
        <td>
            @Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
        </td>
    </tr>
}

在我的主视图中，我正在尝试添加新行，如下所示

 var tableBody = $('#myDynamicTable tbody');
    var url = '@Url.Action("Add", "Report")';
    $('#btnAddRow').click(function () {
        $.get(url, function (response) {
            tableBody.append(response);
        });
    });

问题是，看起来行是在表格主体之后添加的，而不是在最后一行之后的主体内部。

我遇到的另一个问题是新行列不与现有的第一行对齐，也没有选择应用于现有第一行中的控件的样式表。

下面是我到目前为止得到的截图，我正在努力用现有的第一行来点亮这些新行。

表格截图

4

1 回答 1

0 
var tableBody = $('#myDynamicTable tbody');
        var url = '@Url.Action("Add", "Report")';
        $('#btnAddRow').click(function () {
            $.get(url, function (response) {
    $('#myDynamicTable tbody <tr />').html(response).appendTo(tableBody);          
            }); 
        });

如上所述更改您的 jquery 代码。然后从局部视图中删除 tr 包装器

@using MyProject.Utilities 
@model MyProject.ViewModel.ReportDetailsViewModel

@using (Html.BeginCollectionItem("NewRow"))
{

        <td class="tdBorder">
            @Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
        </td>
        <td>
            @Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
        </td>
        <td>
            @Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" })
        </td>
        <td>
            @Html.TextBox("Date", null, new { @width = 60, id = "Date" })
        </td>
        <td>
            @Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
            @Html.DropDownListFor(model => model.UnitId, Model.UnitList)
        </td>
        <td>
            @Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
        </td>

}
于 2017-08-16T18:04:04.720 回答