刷新Partialview使用jQuery和Ajax

Question

一個DIV裏面這是我的部分觀點：

@model UADDPortal.ViewModels.DatabaseInfoViewModel 

<table class="table table-bordered table-striped"> 
<tr> 
    <td><h5> Status: @Model.CurrentStatus </h5> </td> 
    <td><input type="submit" class="btn btn-success" name="RefreshResourceStatus@(Model.CheckoutID)" id="RefreshResourceStatus@(Model.CheckoutID)" value="Refresh" /></td> 
</tr> 

這是我的主頁：

<div id="ResourceStatus@(item.CheckoutID)"> 
    @Html.Partial("ResourceStatus", item) 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#RefreshResourceStatus@(item.CheckoutID)').click(function (e) { 
     e.preventDefault(); // stop the links default behavior 
     $('#ResourceStatus@(item.CheckoutID)').load('/Home/GetCurrentStatus/@(item.CheckoutID)'); 
    }); 
}); 
</script> 

最後，這是我的ajax方法在我的主MVC控制器中：

#region ajax calls 
    public PartialViewResult GetCurrentStatus(string Id) 
    { 
     var viewModel = new DatabaseInfoViewModel(null); 
     viewModel.CheckoutID = Convert.ToInt32(Id); 
     viewModel.CurrentStatus = viewModel.GetCurrentStatus(Convert.ToInt32(Id)); 

     return PartialView("ResourceStatus", viewModel); 
    } 

    #endregion ajax calls 

問題是，在DIV部分生成的刷新按鈕似乎隨機工作...有時工作...大部分時間沒有做任何事情......我無法弄清楚爲什麼....

Answer 1

如果您有多個項目，最好使用data-*屬性作爲網路羣體。

@model UADDPortal.ViewModels.DatabaseInfoViewModel 

<table class="table table-bordered table-striped"> 
<tr> 
    <td><h5> Status: @Model.CurrentStatus </h5> </td> 
    <td><input type="submit" class="btn btn-success btn-checkout" 
     data-chekout-id="@(Model.CheckoutID)" value="Refresh" /></td> 
</tr> 

然後

$(document).ready(function() { 

    $('.btn-checkout').click(function(e){ 

     var checkoutId=$(this).data("chekout-id"); 
     var targetDiv='#ResourceStatus'+checkoutId; 

     $.post('url',{Id:checkoutId},function(result){ 

     $(targetDiv).html(result); 

     }); 
    }); 
}); 

Answer 2

正如在評論中提到通過菲德對他的問題

$.ajaxSetup({ cache: false }); 

解決這個問題對我來說。