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

我用Ajax重新加载部分视图时有一个有趣的问题。我在主视图中以下设置：重新加载部分视图和Ajax - ASP.NET MVC

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

子视图通常是如下表中的项目清单：

<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操作控制器确实基本上是以下：

[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代码...

我是比较新的是东西，我有点困惑这是怎么回事。所有第三方脚本都在Layout.cshtml中呈现

来源

2016-08-22 Myar

请张贴您DeleteItem完整代码以及 –

补充说，因为我说这很简单 – Myar

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

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

来源

2016-08-22 17:21:06

谢谢，那是缺少的部分。与我发布的代码相同，在以前的项目中工作过，但是我的脚本直接在我的主视图中 - 这可能就是它的原因。 – Myar

这是因为动态创建的项目在第一次加载文档时不是DOM的一部分，这是绑定发生的时间。上面的代码将'.click（）'事件附加到'document'中。 –

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

试试像这样编辑你的DeleteItem函数。

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

来源

2016-08-22 17:23:45

不幸的是，没有任何改变 – Myar

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

回答

相关问题