Question

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

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

SubView通常是表格中的项目列表，如下所示：

<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;
});

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

我对这些东西比较新，我对这里发生的事情感到有些困惑。所有第三方脚本都在Layout.cshtml

中呈现

Answer 1

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

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

Answer 2

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

尝试像这样编辑DeleteItem函数。

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

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

2 个答案: