ASP.NET MVC 3 Razor - Ajax.BeginForm

第 7 回 JavaScript と jQuery を利用するを参考に、RazorのViewにてAjaxHelperを使ってみました。

今回はAjax.BeginForm()メソッドを呼び出し、非同期でサーバーに通信し、結果を画面に表示しました。

以下、画面とソースです。

1.画面と仕様
f:id:UnderSourceCode:20130504103404j:plain
「Next Message」ボタンを押すと、メッセージをサーバーより取得し、「Welcome to ASP.NET MVC!」の部分を更新します。
サーバーへの通信を非同期で行うため、メッセージのみが切り替わるような動きとなります。

2.Index.cshtml


@{
ViewBag.Title = "Home Page";
}

<h2 id="message">@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <
</p>
@using (Ajax.BeginForm("GetMessage",
new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "message" }))
{
<input type="submit" value="Next Message" />
}


テンプレートで作成されるIndex.cshtmを修正しています。
まず、メッセージを表示する<h2>タグにid="message"を追加し、タグのidを定義しました。

次に@usingディレクティブ以降で、非同期通信を行うためのフォームを定義しています。
フォームの追加にはAjax.BeginForm()を使います。
第一引数で呼び出すActionメソッド名がGetMessage()であることを指定します。
第二引数のAjaxOptionsインスタンス作成で、更新対象のタグが"message"であると指定しています。
そしてフォーム内で「Next Message」ボタンを定義しています。


3._Layout.cshtml


<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"
></script>
</head>

ヘッダー部でjquery.unobtrusive-ajax.min.jsを参照するように追加します。
これを参照しないと、サーバー側で非同期通信と判定できません。
この判定については、下で説明します。

4.HomeController.cs


[HttpPost]
public ActionResult GetMessage(FormCollection collection)
{
var messages = new List{
"Hello!",
"Good morning!",
"Hi!",
"Good night!",
"Good evening!"
};

if (Request.IsAjaxRequest())
{
var random = new System.Random();
var result = random.Next(5);

return Content(messages[result]);
}
return new EmptyResult();
}


「Next Message」ボタンが押されたときに呼び出されるGetMessage()メソッドを
HomeController.csに追加しました。

まずPost時に呼び出されるため、[HttpPost]属性を付与しています。

そしてAjaxによる非同期通信で呼び出されたかを判定するため
Request.IsAjaxRequest()メソッドを使用しています。

非同期通信時、つまりRequest.IsAjaxRequest()がtrueの場合はランダムでメッセージを選択し
return Content()で画面にメッセージを返しています。

5.結果
f:id:UnderSourceCode:20130504103418j:plain
「Next Message」ボタンを押すと、非同期通信で取得したメッセージが表示されました。
この時、メッセージのみが切り替わり、画面全体は再ロードされません。