重新加载部分视图和 Ajax - ASP.NET MVC答案

【问题标题】：Reloading partial views and Ajax - ASP.NET MVC重新加载部分视图和 Ajax - ASP.NET MVC
【发布时间】：2016-08-22 17:08:59
【问题描述】：

我在使用 ajax 重新加载部分视图时遇到了一个有趣的问题。我在主视图中有以下设置：

<div>
    <div id="items">
        @Html.Partial("SubView", Model.Items);
    </div>
<div>

SubView一般是一个表中的item列表如下：

<table class="table table-striped">
    <tr>
        <th>Date</th>
        <th>Time</th>
        <th></th>
</tr>
@foreach (var item in Model)
{
    <tr>
        @Html.HiddenFor(modelItem => item.Id)
        <td>@Html.DisplayFor(modelItem => item.Date)</td>
        <td>@Html.DisplayFor(modelItem => item.Time)</td>
        <td>
           @Html.ActionLink("Delete", "Delete", new { itemId= item.Id, page = Model.PageNumber }, new { @class = "deleteItem" })
    </td>
</tr>
}

控制器中的DeleteItem Action基本上做了以下事情：

    [HttpDelete]
    public ActionResult DeleteItem(int itemId, int page)
    {
        this.dbService.DeletItem(expenseId);
        return PartialView("SubView", this.GetPagedList(page));
    }

在我在主视图中引用的脚本中，我有以下代码：

$(document).ready(function () {
// delete expense
$(".deleteItem").click(function () {

    $.ajax({
        url: this.href,
        type: 'delete',
        success: function (result) {
            $("#items").html(result);
        }
    });

    return false;
});

这第一次工作正常，但第二次它只加载部分视图 -> 因为 JavaScript 代码没有被执行......

我对这些东西比较陌生，我有点困惑这里发生了什么。所有 3rd 方脚本都在 Layout.cshtml 中呈现

【问题讨论】：

请把DeleteItem的完整代码也发给你
加了，我说的很简单

标签： javascript c# asp.net-mvc asp.net-mvc-4

【解决方案1】：

您不能将.click() 事件附加到动态生成的项目。您必须以这种方式构建它：

$(document).on('click', '.deleteItem', function() {
    // Deletey stuff here.
});

【讨论】：

谢谢，这是缺少的部分。与我发布的相同代码在以前的项目中工作，但我的主视图中直接有脚本 - 这可能就是它工作的原因。
这是因为当文档第一次加载时动态创建的项目不是 DOM 的一部分，也就是绑定发生的时候。上面的代码将.click() 事件附加到document。

【解决方案2】：

要渲染部分视图，您必须将返回类型设为 PartialViewResult 而不是 ActionResult。因为 ActionResult 会导致重定向。

尝试像这样编辑您的 DeleteItem 函数。

[HttpDelete]
    public PartialViewResult DeleteItem(int itemId, int page)
    {
        this.dbService.DeletItem(expenseId);
        return PartialView("SubView", this.GetPagedList(page));
    }

【讨论】：

不幸的是，这根本没有改变