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>

我希望我的partialview的结果在包含id“addRow”的元素之前插入，但是我的partialview的结果被插入到tr元素中！：/

这是我现在得到的结果

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

控制台中没有javascript错误.. 我如何修复我的代码，以便我的partialview的结果插入到具有id addRow的tr元素之前？

Answer 1

如果使用InsertMode.InsertBefore，它将在'addRow'元素的内容（=“innerHTML”）之前插入ajax调用的结果。

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

Answer 2

请使用如下

注意：这里我将UpdateTargetId传递给表体看清楚你和我的代码之间的区别

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

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

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

Ajax.BeginForm（）InsertionMode.InsertBefore不按预期工作

2 个答案: