4

RazorビューエンジンとJqueryを使用するASP.Net MVC 3 Webサイトに取り組んでいます

ホームページ (またはそれに関する任意のページ) で、 iGoogle のようなajaxを使用してコンテンツのセクションをロードしたいと考えています。

つまり、ページの読み込み時に

  • Html コンテンツを返すいくつかの HttpGet アクション メソッドを呼び出したい

  • 応答が得られるまで、これらの Div は「読み込み中」のグラフィックを表示します。

私は Ajax.BeginForm と Ajax.ActionLink を認識していますが、どちらの場合も UI 要素をクリックする必要があります。ページの読み込み/ドキュメントでそれらを使用する方法がわかりません。準備はできましたか?

正確な/完全なコードではなく、何らかの方向性が得られたとしても感謝します。

4

1 に答える 1

9

さて、方向性を示しましょう。簡単なので、jquery のコードをいくつか示します。さあ行こう。

HTML

<div id="SomeContent"> </div>

あなたの見解では

$(function(){ // this runs on on page load
    LoadData('#SomeContent', @Url.Action("ActionName","ControllerName"));
});

JavaScriptライブラリファイルで

function LoadData(target, url){
  $.ajax({  
   beforeSend: startAnimation(target),
   url : url,
   success : function(result){ $(target).html(result); },
   complete  : stopAnimation(target)   
});
}

function startAnimation(target){
  //..add a loading image on top of the target  
}

function stopAnimation(target){
  // remove the animation gif or stop the spinning, etc.
}

サーバー側のコード

public ActionResult ActionName() {
    ... do things to get your model populated ...
    return PartialView("SomeView", yourmodel);
}

追加の考え:

  • この大まかなコードは、部分ビューを div にロードします。DOM の準備ができると、非同期呼び出しが開始されます。
  • jquery ajax のドキュメントについては、 http: //api.jquery.com/jQuery.ajax/ を参照してください。
  • とても簡単で小さいので、spin.js を使用して読み込みアイコンを表示するのが好きです。
于 2013-07-01T03:52:29.780 に答える