使用jquery和Ajax刷新DIV中的Partialview

Question

這是我的部分觀點：

@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>

最后，這是我的主要MVC控制器內部的ajax方法：

    #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-*屬性用於checkoutid填充。

@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

正如Fede在對他的問題的評論中提到的那樣

 $.ajaxSetup({ cache: false });

為我解決了這個問題。