使用Java脚本将新行添加到表-MVC

Question

我有一个带有表的视图和一个带有行信息的局部视图。当我单击一个按钮时，应该在表中添加新行。我的代码按预期工作，但是添加的新行没有任何样式出现。添加的新行没有父表样式。

@Module
abstract class MyContributesModule {
    @ContributesAndroidInjector(modules = [MyFragmentModule::class])
    internal abstract fun myFragment(): MyFragment
}

@Module
abstract class MyFragmentModule {
    @Binds
    internal abstract fun myFragmentInteractor(myFragmentInteractorImpl: MyFragmentInteractorImpl): MyFragmentInteractor
}

interface MyFragmentInteractor {
    fun doSomething()
}

class MyFragmentInteractorImpl @Inject constructor(private val myFragment : MyFragment) : MyFragmentInteractor {
    override fun doSomething() {
        // doSomething with myFragment
    }
}

class MyFragment : Fragment() {

    @Inject
    lateinit var interactor: MyFragmentInteractor

    override fun onAttach(context: Context?) {
        AndroidSupportInjection.inject(this)
        super.onAttach(context)
    }

局部视图

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

这是我的Java脚本，可以在单击按钮时添加新行

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

}

这是我的控制器，只需单击按钮即可调用。

function addNewRowPrepend(btnID, tableID) {

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

}

This how it looks with I click add button

像这样更新我的局部视图后，一切都按预期工作

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