使用jQuery在ASP.NET MVC 3中使用BeginCollectionItem将行动态添加到html表中时，行和列对齐

Question

I have the following html table definition in my main view

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

I want to be able to add new rows using the BeginCollectionItem concept explained in here http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ and Add row in table with jquery whic connected with model in mvc

Below is the definition of my partial view which i want to use as a template to add new rows. @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>
}

In my main view, i'm trying to add new rows like below

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

The problem is, it appears like the rows are being added after the table body but not inside the body after the last row.

The other issue i'm having is the new row columns not aligning with the existing first row as well as also not picking the style sheets applied to the controls in the existing first row.

Below is the screenshot of what i'm so far getting and i'm struggling to alight these new rows with the existing first row.

Answer 1

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

change your jquery code as above. Then remove tr wrapper from partial view

@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>

}