Ajax.BeginForm() InsertionMode.InsertBefore 没有按预期工作

Question

使用 Ajax.BeginForm 我正在尝试插入从我的操作返回的内容。调用操作并返回正确的元素，但是 InsertionMode.InsertBefore 没有按预期工作。

我的观点

@model DynamicTable.Models.BtwViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<table class="table table-striped">
    <thead>
        <tr>
            <th>@Html.DisplayFor(x => x.BtwShowList.First().Description)</th>
            <th>@Html.DisplayFor(x => x.BtwShowList.First().Percentage)</th>
            <th>@Html.DisplayFor(x => x.BtwShowList.First().Info)</th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in @Model.BtwShowList)
        {
            Html.RenderPartial("_BtwRow", item);
        }

        <tr  id="addRow" style="display:none"></tr>
        @using (@Ajax.BeginForm("InsertData",new AjaxOptions() { InsertionMode= InsertionMode.InsertBefore, UpdateTargetId="addRow" }))
        {         
            <tr >
                <td>@Html.TextBoxFor(model => model.BtwToBeAdded.Description, new { @class = "form-control" })</td>
                <td>@Html.TextBoxFor(model => model.BtwToBeAdded.Percentage, new { @class = "form-control" })</td>
                <td>
                        @Html.TextBoxFor(model => model.BtwToBeAdded.Info, new { @class = "form-control col-md-10" })
                </td>
                <td>
                    <input value="Add" class="btn btn-default"  type="submit" />
                </td>
            </tr>
        }

    </tbody>
</table>


@section Scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
}

我的控制器

[HttpPost]
public PartialViewResult InsertData(BtwViewModel btwViewModel)
{
    if (ModelState.IsValid)
    {
        var list = HttpContext.Session[SessionKey] as List<Btw>;
        list.Add(btwViewModel.BtwToBeAdded);
    }
    return PartialView("_BtwRow", btwViewModel.BtwToBeAdded);
}

我的局部视图

@model DynamicTable.Models.Btw
<tr>
    <td>@Model.Description</td>
    <td>@Model.Percentage</td>
    <td>@Model.Info</td>
    <td></td>
</tr>

我希望我的部分视图的结果插入到包含 id "addRow" 的元素之前，但是我的部分视图的结果被插入到 tr 元素中！ :/

这是我现在得到的结果

<tr id="addRow" style="display:none">
    <tr>
      <td>Whosebug</td>
      <td>5</td>
      <td>please help me</td>
      <td></td>
    </tr>
</tr>

控制台中也没有 javascript 错误.. 我该如何修复我的代码，以便我的部分视图的结果插入到 ID 为 addRow 的 tr 元素之前？

Answer 1

如果您使用 InsertMode.InsertBefore，它将在您的 'addRow' 元素的内容 (="innerHTML") 之前插入您的 ajax 调用的结果。

解决方案是：将您的表单放在标签内（因此在 tbody 之外），然后给您一个 ID，例如 "table-results"。现在更新您的 AjaxOptions 并设置 UpdateTargetId="table-results" 和 InsertMode = InsertMode.InsertAfter。您的 ajax 结果现在将添加到行的底部，而您的表单将保留在 table.

的底部

Answer 2

请像下面这样使用

注意：这里我把UpdateTargetId传给了tablebody 看清楚你和我代码的区别

<tbody id="addRow">
    @foreach (var item in @Model.BtwShowList)
    {
        Html.RenderPartial("_BtwRow", item);
    }

    <tr style="display:none"></tr>

它会自动更新所有行之前的行。

Ajax.BeginForm() InsertionMode.InsertBefore 没有按预期工作

Ajax.BeginForm() InsertionMode.InsertBefore not working as expected

ajax

forms

dom

asp.net-mvc-5