ナオキさんのサイトで取り上げられていたので、流行りに乗っかっていこうと思います！ ASP.NET MVC Preview 4からAjaxが少しとりいれられてます。
クライアントサイドはMicrosoft Ajax Libraryがベース。 これの使いどころはやっぱり部分更新ですよね。ASP.NET AJAXならUpdatePanelのような動きと言えばわかりやすいかな？
とにかく動かしてみることにしましょう。 まずは、Preview 4のプロジェクトテンプレートで新しいプロジェクトを作成。 そしたら、AccountControllerとHomeContoroller、Views/AccoutとViews/Homeとか出てきます。 Views/Homeの中には最初に表示されるIndex.aspxとAboutページのAbout.aspxが出来てます。 とりあえずHomeControllerのIndexアクションとViews/Home/Index.aspxだけを使って試してみることにします。
初期のIndexアクションは↓。
public ActionResult Index()
{
ViewData["Title"] = "Home Page";
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}Index.aspxは↓。
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</asp:Content>なんとまぁ、スッキリしたものが出てきますわ。 ※ViewData["Title"]はShared/Site.Masterで使ってますよ。 で、ページにFORMを張り付けてPOSTさせてみよう！ IndexアクションでPOSTした値を取得してViewDataに入れようじゃないですか。
public ActionResult Index()
{
ViewData["Title"] = "Home Page";
ViewData["Message"] = "Welcome to ASP.NET MVC!";
ViewData["result"] = "";
if (Request.HttpMethod.ToLower() == "post")
{
ViewData["result"] = string.Format("こんにちは、{0} さん！", Request.Form["yourName"]);
}
return View();
} ↓これをIndex.aspxに追加(</p>の後に)。
<% using (Html.Form("Home", "Index"))
{ %>
名前は？<%= Html.TextBox("yourName") %>
<input type="submit" value="ぼたん" />
<span id="result"><%= ViewData["result"] %></span>
<%} %>こんな感じですね。POSTしたyourNameをViewData["result"]入れて、それをspanタグ内に表示するものです。ここまではすんなりです。
↑こんな表示になるんで、テキストボックスに適当になんか入れて「ぼたん」押すと、↓こんな感じでボタンの横に表示されます。
ここからです！ IndexアクションへのPOSTが発生した場合、ブラウザからのものなのかXMLHttpRequestからのものなのかを簡単に判別する方法として、Request.IsMvcAjaxRequest()というのがあるので、それを使うことにします。 なので、Indexアクションを変更。
public ActionResult Index()
{
ViewData["Title"] = "Home Page";
ViewData["Message"] = "Welcome to ASP.NET MVC!";
ViewData["result"] = "";
if (Request.HttpMethod.ToLower() == "post")
{
ViewData["result"] = string.Format("こんにちは、{0} さん！", Request.Form["yourName"]);
if (Request.IsMvcAjaxRequest())
return Content((string)ViewData["result"]);
}
return View();
} ↑太字の部分が追加したコードです。 差を分かりやすくするのに、Index.aspxには追加でAjax.Formを入れることにします。 なので、Index.aspxの全体は↓。
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication5.Views.Home.Index" %>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="/Content/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="/Content/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<% using (Html.Form("Home", "Index"))
{ %>
名前は？<%= Html.TextBox("yourName") %>
<input type="submit" value="ぼたん" />
<span id="result"><%= ViewData["result"] %></span>
<%} %>
<% using (Ajax.Form("Index", new AjaxOptions { UpdateTargetId = "result2" }))
{ %>
名前は？<%= Html.TextBox("yourName") %>
<input type="submit" value="ぼたん" />
<span id="result2"><%= ViewData["result"] %></span>
<% } %>
</asp:Content>これを実行すると2つのテキストボックスとボタンが表示されます。
フォームも２つあるからそりゃそうですね。 最初に上段のテキストボックスとボタンに”さる”と入れて上段のボタンを押します。
ボタンの横に両方とも”さる”と出ます。 続いて、下段のテキストボックスに”いぬ”と入れて下段のボタンを押します。
