1. Pro ASP.NET MVC 3 Framework
CHAPTER 19
Unobtrusive Ajax
@84zume

2. 2
目次
1. About Unobtrusive Ajax
2. Working with Ajax
1. Ajaxとは
2. Ajax Forms
3. Ajax Links
3. Working with JSON
4. おわりに

3. 3
About Unobtrusive Ajax

4. 4
Unobtrusive Ajaxとは
“Unobtrusive JavaScript (控えめな JavaScript) とは、
Web アプリケーションで JavaScript、CSS、HTML 要素を分離する手法です。
この 3 つの要素を分離してアプリケーションを編成することで、
アプリケーションの管理が容易になり、プラットフォームや
Web ブラウザーの種類が違っても、
アプリケーションが一貫して同じように振る舞うようになります。”
「控えめな JavaScript と Ajax を作成するためのガイド」より
• JavaScript を使用してアプリケーションのプログレッシブ・エンハンスメントを行う
(コア機能には JavaScript を使用しない)
• 繰り返しを減らし、適切な構造を保ち、 いいやつには、
読みやすく保守しやすい構造を維持する いいものを。
• Web およびアクセシビリティー標準に準拠する

5. 5
Graceful Degradationを保証する
だめなやつにも、
それなりを。
OK
Ajaxを使わず
サーバー処理
NG
JavaScriptが無効であるブラウザーでの挙動

6. 6
Working with Ajax
• Ajax Forms
• Ajax Links

7. 7
Ajaxとは
＝Asynchronous JavaScript + XML の略。
ウェブブラウザ内で非同期通信とインターフェイスの構築
などを行う技術の総称。

8. 8
Ajax Forms 使い方(基礎)
• HTML フォームの内容をAjax通信でサーバーに送りたい
→@Ajax.BeginForms()を利用する
@{
var ajaxOptions = new AjaxOptions
{
UpdateTargetId = "tabledata",
Url=Url.Action("PersonData")
};
}
<h2> Person List</h2>
@using (Ajax.BeginForm("PersonData", ajaxOptions)) {
<table>
<thead>
<th>
...
出力されるHTML
<form action="/Home/PersonData" data-ajax="true"
data-ajax-mode="replace" data-ajax-update="#tabledata"
data-ajax-url="/Home/PersonData" id="form0" method="post">

9. 9
Ajax Formsの動作原理
1. Html描画時
1. Ajax.BeginFormヘルパーが、Html属性にAjax用の情報を出力
※余分なJavaScriptや、CSSは埋め込まれない
2. 実行時
1. jquery.unobtrusive-ajaxがDOMをスキャン
2. 「data-ajax=“true”」となっているformを探す
3. Ajax通信を開始する

10. 10
Ajax Forms 使い方(応用)
• 拡張したい場合は、AjaxOptions Propertyを利用
Property 説明 利用頻度(私見)
Conifrm Ajax通信を始める前に確認ダイアログを出す あまり使わない
HttpMethod Httpメソッド(Get or Post)を指定 必須
サーバーから受け取ったDataのHtmlへの追加方法
InsertionMode 必要に応じて
(InsertAfter or InsertBefore or Replace)
あまり使わない
LoadingElementId 通信開始時に表示する要素のID値
受け取ったデータを読み込むまでに遅延させる時間
LoadingElementDuration あまり使わない
(ミリ秒)
UpdateTargetId サーバーからの処理結果を反映させる要素のId 必須
Url リクエスト先のURL 必須
OnBegin, OnComplete, OnSuccess, OnFailure時に
OnXXXX 必要に応じて
呼び出すJavaScriptのコールバック関数

11. 11
Ajax Links 使い方(基礎)
• ActionLinkでAjax通信によってサーバーとやりとりしたい
→@Ajax.ActionLink()を利用する
<ul>
@foreach (var str in new[] { "All", "Tokyo", "Nagoya", "Hokkaido" })
{
<li>@Ajax.ActionLink(str, "Index", new { place = str },
new AjaxOptions
{
UpdateTargetId = "tabledata",
LoadingElementId = "loading",
LoadingElementDuration = 2000,
Url = Url.Action("PersonData", new { place = str })
})
…
出力されるHTML
<ul> <li>
<a data-ajax="true" data-ajax-loading="#loading" data-ajax-loading-duration="2000"
data-ajax-mode="replace" data-ajax-update="#tabledata“
data-ajax-url="/Home/PersonData?place=All" href="/?place=All">All</a>
</li>…

12. 12
Working with JSON

13. 13
JSONとは
=JavaScript Object Notationの略。
JavaScriptにおけるオブジェクトの表記法をベースとした
軽量なデータ記述言語。
• フォーマット
• 配列
["milk", "bread", "eggs"]
• オブジェクト
[{"name": "John", "age": 33}]
• オブジェクトのリスト
[{"name": "John", "age": 33}, {"name": “Taro", "age": 23}]

14. 14
MVCでJSONを扱うには？
４ １
クライアント側 サーバー側
３ ２
ブラウザー Webサーバー
（≒View） （≒Controller）

15. 15
サーバーで受信 ①
• 普通に受信できる！
• AjaxでPost/Getされた場合も、モデルバインダーが解決
する
public ActionResult JsonData(Person person) {
…
}

16. 16
サーバーから送信 ②
• 戻り値をJsonResult型にして送信する。
• Contoroller.Jsonヘルパーを利用
public JsonResult JsonData(string place) {
…
return Json(result, JsonRequestBehavior.AllowGet);
}
注意
• JavaScriptSerializerがオブジェクトからJSONに変換する。
これの仕様を把握しておくべき。
http://msdn.microsoft.com/ja-jp/library/system.web.script.serialization.javascriptserializer.aspx

17. 17
クライアントで受信 ③
• $.ajaxで自分で定義する。
• 「サーバーから送信② 」のアクションにアクセス
• OnSuccess時に画面に描画するコールバック関数を定義
• JSON.stringifyにてJsonを文字列に変換
クライアントから送信 ④
• $.ajaxで自分で定義する。
※Ajax.BeginFormを使うのではない。
これだとHTMLが戻ってくる。

18. 18
クライアントから送受信
<script type="text/javascript">
$(document).ready(function () {
$('form').submit(function (e) {
var person = {
Name: $('#Name').val(),
Birthday: $('#Birthday').val(),
Birthplace: $('#Birthplace').val()
};
$.ajax({
url: '@Url.Action("Index")',
type: 'POST',
data: JSON.stringify(person), POSTの情報
dataType: 'json',
processData: false,
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('#nameTarget').text(data.Name); レスポンス
$('#dateTarget').text(data.Birthday);
$('#placeTarget').text(data.Birthplace); の処理
}
});
});
});
</script>

19. 19
おわりに

20. 20
まとめ
1. Ajaxを使って効率的な通信を実現すべし
2. JSONを使ってモジュールを疎結合にすべし
3. JSONを処理するJSライブラリーを把握すべし

21. 21
参考文献
• CodePlex
「ASP.NET MVC 3 RTM」
http://aspnet.codeplex.com/releases
• IBM Developer Center
「控えめな JavaScript と Ajax を作成するためのガイド」
http://www.ibm.com/developerworks/jp/web/library/wa-aj-
unobtrusive/
• JSON の紹介
http://www.json.org/json-ja.html