Добавить новую строку в таблицу, используя скрипт Java - MVC - PullRequest
0 голосов
/ 10 сентября 2018

Я получил представление с таблицей и частичное представление с информацией о строке. Когда я нажимаю кнопку, она должна добавить новую строку в таблицу. Мой код работает, как ожидалось, но новая добавленная строка появляется без какого-либо стиля. Добавлена ​​новая строка без стилей родительской таблицы.

@model List<LandPortal.Models.AdditionalLeaseInfo>
@using LandPortal.Models;

<table id='myAdditionalLeaseInfoNewTable' class="table table-striped">
    <thead>
        <tr>
            <th colspan="10" scope="colgroup" style="background-color:lightgray; text-align:center; width:100%">Lease Depth Info</th>
        </tr>
        <tr style="background-color:whitesmoke">
            <th>Landman</th>
            <th>Review Complete Date</th>
            <th>All Depths</th>
            <th>Burket</th>
            <th>Marcellus</th>
            <th>Utica</th>
            <th>Point Pleasants</th>
            <th>Depth Summary</th>
            <th>Additional Depth Summary</th>
            <th>
                <button id="loadAdditionalLeaseInfoView" data-url='@Url.Action("NewAdditionalLeaseInfo","Leases")' type="button" class="btn btn-success" onclick="addNewRowPrepend('#loadAdditionalLeaseInfoView','#myAdditionalLeaseInfoNewTable')">
                    <span class="glyphicon glyphicon-plus-sign"></span>
                </button>
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (AdditionalLeaseInfo item in Model)
        {
            { Html.RenderPartial("~/Views/Shared/Lease/_LeaseDepthInfo.cshtml", item); }
        }
    </tbody>
</table>

частичный вид

@model LandPortal.Models.AdditionalLeaseInfo


@using (Html.BeginCollectionItem("AdditionalLeaseInfos"))
{
    <tr>
        <td>
            @Html.TextBoxFor(m => m.Landman)
            @Html.HiddenFor(m => m.Id)
        </td>
        <td>
            @Html.TextBoxFor(m => m.ReviewCompletedDate)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.AllDepths)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.Burket)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.Marcellus)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.Utica)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.PointPleasant)
        </td>
        <td>
            @Html.TextAreaFor(m => m.DepthSummary, 3, 3, htmlAttributes: new { style = "width: 300px; max-width: 300px;" })
        </td>
        <td>
            @Html.TextAreaFor(m => m.AdditionalDepthSummary, 3, 3, htmlAttributes: new { style = "width: 300px; max-width: 300px;" })
        </td>
    </tr>

}

Вот мой Java-скрипт для добавления новой строки при нажатии кнопки

function addNewRowPrepend(btnID, tableID) {

    var myurl = $(btnID).attr('data-url');
    $.ajax({
        url: myurl,
        success: function (result) {
            $(tableID).find('tbody:first').prepend(result);
        }
    });

}

Вот мой контроллер, который вызывается при нажатии кнопки.

 [HttpGet]
        public ActionResult NewAdditionalLeaseInfo()
        {
            return PartialView("~/Views/Shared/Lease/_LeaseDepthInfo.cshtml", new AdditionalLeaseInfo());
        }

Вот как это выглядит, я нажимаю кнопку добавления

После обновления моего частичного представления все это работало как положено

@model LandPortal.Models.AdditionalLeaseInfo
<tr>
@using (Html.BeginCollectionItem("AdditionalLeaseInfos"))
{
        <td>
            @Html.TextBoxFor(m => m.Landman)
            @Html.HiddenFor(m => m.Id)
        </td>
        <td>
            @Html.TextBoxFor(m => m.ReviewCompletedDate)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.AllDepths)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.Burket)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.Marcellus)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.Utica)
        </td>
        <td>
            @Html.CheckBoxFor(m => m.PointPleasant)
        </td>
        <td>
            @Html.TextAreaFor(m => m.DepthSummary, 3, 3, htmlAttributes: new { style = "width: 300px; max-width: 300px;" })
        </td>
        <td>
            @Html.TextAreaFor(m => m.AdditionalDepthSummary, 3, 3, htmlAttributes: new { style = "width: 300px; max-width: 300px;" })
        </td>
}
    </tr>
...