重新加載部分視圖和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

回答

相關問題