jQueryとASP.NET MVCで非同期通信 その１

ASP.NET MVCは非同期通信を行うためのフレームワークとしてAjax.BeginForm()とPartialView()が用意されている。これらはDavid HaydenのBlogに詳しく載っているのでそちらを参照して欲しい。

今回はjQueryを使った非同期通信を解説する。また例によってここで記載するサンプルコードはMyClipで実装したコメント投稿を簡易化したものになる。

まずコメントを入力するtextareaと保存ボタンを用意する。

-details.aspx-
<div>
  <div>
    <textarea id="commentArea"></textarea>
  </div>
  <input id="saveButton" type="button" value="Save"/>
</div>

ついで、JavaScriptでsaveButtonのClickイベントをハンドルし、jQueryのajaxメソッドでサーバサイドと非同期通信を行う。

-JavaScript-

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$(document).ready(function() {  $('#saveButton').click(function(){   try {    $.ajax({               type: "POST",               url: "/Clip/Comment",               data: { clipId: _clipId, commentText: $('#commentArea').val() },               contentType: "application/x-www-form-urlencoded",               dataType: "json",               success: function(msg) {                   // code here...               },               error: function(e) {                   // code here...               }           });   }   catch (e) {    // code here...   }  }); });

ここで注意が必要なのがcontentTypeの指定だ。application/jsonを指定するとなぜだか引数が常にnullになる。

ClipControllerの処理は以下の通りだ。

-ClipController.cs-

?

1 2 3 4 5 6 7 8 9 10 11

public ActionResult Comment(    int clipId,    string commentText) {  // saving data code here...    return Json(new  {   // return data here...  }); }

以上で一連の流れは終了だ。いたって簡単に非同期通信を行えるのが分かるだろう。またController側も特別な記述をとくに必要としない。次回はControllerのActionではなく、WebServiceを呼び出す方法を解説する。