使用jquery和Ajax刷新DIV内的部分视图

时间:2014-02-25 13:31:40

标签: c# javascript jquery asp.net-mvc asp.net-mvc-4

这是我的部分观点:

@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部分生成的刷新按钮似乎是随机工作的...有时可行......大部分时间都没有做任何事情......我无法弄清楚为什么...... ..

2 个答案:

答案 0 :(得分: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);

       });
    });
});

答案 1 :(得分:0)

联邦在他的问题评论中提到

 $.ajaxSetup({ cache: false });

为我解决了这个问题。