ASP.NET MVC 3 Razor - Ajax.BeginForm
第 7 回 JavaScript と jQuery を利用するを参考に、RazorのViewにてAjaxHelperを使ってみました。
今回はAjax.BeginForm()メソッドを呼び出し、非同期でサーバーに通信し、結果を画面に表示しました。
以下、画面とソースです。
1.画面と仕様
「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.結果
「Next Message」ボタンを押すと、非同期通信で取得したメッセージが表示されました。
この時、メッセージのみが切り替わり、画面全体は再ロードされません。