ASP.net MVC Webgrid

Question

WebGridに簡単に接続し、デフォルト設定を使用してajaxを追加することができます。しかし、私が把握することに苦労してきたことの1つは、グリッドがajax経由で並べ替えやページングを行っているときにローディングインジケータを追加する方法です。

コールバック関数が組み込まれています。これはajaxローディングインジケータをオフにするのに最適ですが、どうすれば簡単にオンにすることができますか？

以下は現在私のwebgridのコードです。

@{ 
    var grid = new WebGrid(rowsPerPage: Model.CountPerPage, ajaxUpdateContainerId: "GridArea"); 
    grid.Bind(Model.Users, 
       autoSortAndPage: false, 
       rowCount: Model.TotalCount 
      ); 
    grid.Pager(WebGridPagerModes.All); 
} 
<div id="GridArea"> 
    @grid.GetHtml(htmlAttributes: new {id ="UserGrid"}, 
     columns: new [] { 
     grid.Column("ID", canSort: false), 
     grid.Column("FirstName"), 
     grid.Column("LastName"), 
     grid.Column("Email"), 
     grid.Column("FullName", canSort: false) 
     } 
    ) 
</div> 

私は以下を使用しようとしましたが、どちらも機能しませんでした。

<script> 
    $(function() { 
     $("#UserGrid").live("ajaxStart", function() { 
      alert("start"); 
     }); 
    }); 
</script> 

これは初めて動作しますが、グリッドの最初のAjaxリフレッシュ後は動作しません。

<script> 
    $(function() { 
     $('#UserGrid').ajaxStart(function() { 
      alert("start"); 
     }); 
    }); 
</script> 

Answer 1

これは動作するはずです。

$(document).ajaxStart(function(){ 
    //Show your progressbar here 
}).ajaxStop(function(){ 
    //Hide your progressbar here 
}); 

最初Ajaxの応答の後、DOMが再作成され、.ajaxStartがさえ結合が失われているので、あなたの第2のアプローチは機能していません。それをグローバルドキュメントオブジェクトと結びつけ、それは常にそこに存在します。

Answer 2

はい、上記の回答が役に立ちます。基本的には、クライアントからサーバーへのすべてのajaxリクエストを処理するJquery APIがあります。だからあなたは何かajax操作を行うと、それは関数をトリガーします。 ajax操作でインジケータとして呼び出すことができるカスタムCSSや画像、またはいくつかの機能を配置できます。