pro aspnetmvc3framework chap19

@84zume

Pro ASP.NET MVC 3 Framework CHAPTER 19

Unobtrusive Ajax

目次

1. About Unobtrusive Ajax

2. Working with Ajax

1. Ajaxとは

2. Ajax Forms

3. Ajax Links

3. Working with JSON

4. おわりに

2

About Unobtrusive Ajax

3

Unobtrusive Ajaxとは

4

“Unobtrusive JavaScript (控えめな JavaScript) とは、 Web アプリケーションで JavaScript、CSS、HTML 要素を分離する手法です。 この 3 つの要素を分離してアプリケーションを編成することで、 アプリケーションの管理が容易になり、プラットフォームや Web ブラウザーの種類が違っても、 アプリケーションが一貫して同じように振る舞うようになります。”

「控えめな JavaScript と Ajax を作成するためのガイド」より

• JavaScript を使用してアプリケーションのプログレッシブ・エンハンスメントを行う (コア機能には JavaScript を使用しない)

• 繰り返しを減らし、適切な構造を保ち、

読みやすく保守しやすい構造を維持する

• Web およびアクセシビリティー標準に準拠する

いいやつには、いいものを。

Graceful Degradationを保証する

5

OK

NG

だめなやつにも、

それなりを。

JavaScriptが無効であるブラウザーでの挙動

Ajaxを使わず サーバー処理

Working with Ajax • Ajax Forms

• Ajax Links

6

Ajaxとは

＝Asynchronous JavaScript + XML の略。

ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。

7

Ajax Forms 使い方(基礎)

8

• HTML フォームの内容をAjax通信でサーバーに送りたい→@Ajax.BeginForms()を利用する

出力されるHTML

@{ var ajaxOptions = new AjaxOptions { UpdateTargetId = "tabledata",

Url=Url.Action("PersonData") }; } <h2> Person List</h2> @using (Ajax.BeginForm("PersonData", ajaxOptions)) { <table> <thead> <th> ...

<form action="/Home/PersonData" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tabledata" data-ajax-url="/Home/PersonData" id="form0" method="post">

Ajax Formsの動作原理

1. Html描画時

1. Ajax.BeginFormヘルパーが、Html属性にAjax用の情報を出力

※余分なJavaScriptや、CSSは埋め込まれない

2. 実行時

1. jquery.unobtrusive-ajaxがDOMをスキャン

2. 「data-ajax=“true”」となっているformを探す

3. Ajax通信を開始する

9

Ajax Forms 使い方(応用)

• 拡張したい場合は、AjaxOptions Propertyを利用

10

Property 説明 利用頻度(私見)

Conifrm Ajax通信を始める前に確認ダイアログを出す あまり使わない

HttpMethod Httpメソッド(Get or Post)を指定 必須

InsertionMode サーバーから受け取ったDataのHtmlへの追加方法 (InsertAfter or InsertBefore or Replace)

必要に応じて

LoadingElementId 通信開始時に表示する要素のID値 あまり使わない

LoadingElementDuration 受け取ったデータを読み込むまでに遅延させる時間 (ミリ秒)

あまり使わない

UpdateTargetId サーバーからの処理結果を反映させる要素のId 必須

Url リクエスト先のURL 必須

OnXXXX OnBegin, OnComplete, OnSuccess, OnFailure時に呼び出すJavaScriptのコールバック関数

必要に応じて

Ajax Links 使い方(基礎)

11

• ActionLinkでAjax通信によってサーバーとやりとりしたい

→@Ajax.ActionLink()を利用する

出力されるHTML

<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 })

})

…

<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>…

Working with JSON

12

JSONとは

13

=JavaScript Object Notationの略。

JavaScriptにおけるオブジェクトの表記法をベースとした軽量なデータ記述言語。

• フォーマット

• 配列

["milk", "bread", "eggs"]

• オブジェクト

[{"name": "John", "age": 33}]

• オブジェクトのリスト

[{"name": "John", "age": 33}, {"name": “Taro", "age": 23}]

MVCでJSONを扱うには？

14

クライアント側 サーバー側

４

３

１

２

ブラウザー （≒View）

Webサーバー （≒Controller）

サーバーで受信 ①

• 普通に受信できる！

• AjaxでPost/Getされた場合も、モデルバインダーが解決する

15

public ActionResult JsonData(Person person) { … }

サーバーから送信 ②

• 戻り値をJsonResult型にして送信する。

• Contoroller.Jsonヘルパーを利用

注意

• JavaScriptSerializerがオブジェクトからJSONに変換する。

これの仕様を把握しておくべき。 http://msdn.microsoft.com/ja-jp/library/system.web.script.serialization.javascriptserializer.aspx

16

public JsonResult JsonData(string place) { … return Json(result, JsonRequestBehavior.AllowGet); }

クライアントで受信 ③

• $.ajaxで自分で定義する。

• 「サーバーから送信② 」のアクションにアクセス

• OnSuccess時に画面に描画するコールバック関数を定義

• JSON.stringifyにてJsonを文字列に変換

17

クライアントから送信 ④

• $.ajaxで自分で定義する。 ※Ajax.BeginFormを使うのではない。

これだとHTMLが戻ってくる。

クライアントから送受信

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), 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>

POSTの情報

レスポンス の処理

おわりに

19

まとめ

1. Ajaxを使って効率的な通信を実現すべし

2. JSONを使ってモジュールを疎結合にすべし

3. JSONを処理するJSライブラリーを把握すべし

20

参考文献

• 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

21