Pro aspnetmvc3framework chap19
21
@84zume Pro ASP.NET MVC 3 Framework CHAPTER 19 Unobtrusive Ajax
-
Upload
hideki-hashizume -
Category
Technology
-
view
534 -
download
1
description
Transcript of 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
