ASP.NETでお手軽Ajax実装

ASP.NETで
お手軽Ajax実装
2014年12月22日
©越後屋 1
JAZUG 福岡(ふくあず) 年末勉強会

はじめに
©越後屋 2
こへだ[LINEスタンプ販売中]@koeda
https://twitter.com/koeda/status/507491537744191488
←ここらへん
意識高い系の人wなので
やさしく見守ってください

自己紹介
©越後屋 3
長濱義道
別名、越後屋です。
主にBtoBプロジェクトのPMをやっています。
PMP(Project Management Professional) #1416635
コーディングは好きですが、第一線は退いています。(という体)
プレイングマネージャなんてものは身も心もプロジェクトも潰します。
最近は技術者のはずなのにしゃべって食べている感がとてもあります。
Twitter：gnanormal
真面目に仕事関係のつぶやきをしています。

あらためまして…
©越後屋 4
修羅の国からこんばんは！
Homage to Naohiro Chikita, MS MVP

なぜ今頃Ajaxの話？
Azureの勉強会なのですが、
Azureを採用する場合は
Webサイト(サービス)がAzure上で稼働し、
そのWebサイトの開発に採用されるのは
ASP.NETが多いかと思います。※
(忘年会から参加予定のとあるMS MVPはOSSでの開発に力を入れていますが…)
そこで当然のように実装されるようになった
Ajaxについてお話したいと思います。
※エンタープライズにおけるAzure開発調査越後屋 2014.12
©越後屋 5

余談ですが…
今回の内容はASP.NETのAjaxお手軽実装であり、
ASP.NET MVCのAjaxお手軽実装ではありません。
とあるMS MVPさんが
「WebForm(ASP.NET)ｵﾜﾀｰｽ」(超訳)と
言われていましたが、
個人的にはMV*で開発するなら
ASP.NET MVCに拘る必要がなく、
他の言語(フレームワーク)でもいいと思いますし、
今までの経緯から察すると
MicrosoftがWebFormをなくすというのは
考えにくいと思っています。
©越後屋 6

■質問
最近の越後屋さんは
SPAやTypeScriptの話ばかりしているのに
今回に限ってASP.NETを押すって
なにか腑に落ちません。
■回答
ﾀﾞﾏｯﾃﾛ
この後の忘年会でお酒が入って
(ご要望があれば)いろいろと詳しく話します！
©越後屋 7

いや、真面目な話…
2014年春頃にAzureが大幅な値下げ
↓
保守的な企業内においても
クラウドでの開発、運用に対して
かなり現実味を帯び始める
↓
ASP.NETやAjaxに関しての問い合わせや
講習、研修依頼が各企業から格段に増える
©越後屋 8

ここ最近の話①
■とある顧客との会話(要約)
顧客「VS2008まであったControl Toolkit※が
VS2010では使えなくなっていて
Ajaxの実装が面倒になったんですよね。
なんでなくなったんですかねぇ…」
越「VS2010から標準機能になりましたよ？」
顧客「！！！」
※正確にはASP.NET AJAX Control Toolkit
©越後屋 9

ここ最近の話②
■とある修羅イバーとの会話(要約)
越「ASP.NETでAjaxの実装は楽ですよね。
あれを知るとjQueryなんかで
実装するってとても面倒に感じますよね。」
修羅「え？そんなに簡単なんですか？」
越「ええ、VSのGUIでこうやってこうやって…」
修羅「！！！」
©越後屋 10

ここ最近の話③
■とある顧客との会話(要約)
顧客「ASP.NETでAjaxを実装すると
意図しない動きをするので助けて！」
越「Ajaxコントロールの範囲、
間違ってませんか？」
顧客「！！！」
©越後屋 11

ここまでのまとめ
©越後屋 12
・とても簡単なASP.NETのAjax実装が
予想以上に普及していない
・実装の仕方があまり理解されていない
・参考にできる文献などが少なく※
エンジニアが自己解決できていない
※その環境に適した有用な情報かどうか判断しづらい状況

代表的な問題を解決します！
• 消えたControl Toolkit
• 実装方法
• 注意点
※このスライド以降、
Ajaxと非同期処理いう文言が混在していますが、
同義として扱っていますのでご注意ください
©越後屋 13

• 実装方法
• 注意点
©越後屋 14

Control Toolkitはどこに？
VS2008まではASP.NET AJAXや
Control Toolkitのインストールが
必要でした。
しかし、VS2010以降は
標準機能となっています。
©越後屋 15

最新のVS
VS2013とVS2015 Preview※は
Azureを使用して
確認してみましょう。
※Connect();でVisual Studio 14が
正式にVisual Studio 2015となり、
Previewがリリースされています
(日本語対応版あります！)
©越後屋 18

• 実装方法
• 注意点
©越後屋 19

実装方法
①ScriptManagerの配置
②UpdatePanelの配置
③非同期させるコントールを
②で配置したUpdatePanel内に配置
④UpdatePanelのプロパティで
Triggersに非同期イベントを追加
⑤非同期イベントの実装
⑤以外はすべてGUI操作で完結します！
©越後屋 20

ということで…
©越後屋 21
やりましょう(違)
Homage to Masayoshi Son

IEちゃん！
©越後屋 22
漢語太郎/3日目東レ13a@kngtr
https://twitter.com/kngtr/status/404478911368531968/photo/1

おまけ
• 非同期処理中になにか表示したい場合、
(「お待ちください」などの表示)
BlockUIを使わずにUpdateProgressを
配置することで簡単に実装できます。
※もちろんGUI操作です
※BlockUIでの実装は結構手間が
かかります
©越後屋 23

注意点①
• 非同期でもPageLoadは発生します
例：非同期処理が走ると表示していた
内容が消えた
IsPostBackだけの分岐では
初期化処理などが想定外の動きをします。
⇒ScriptManager.IsInAsyncPostBackで
分岐するロジックを追加する
©越後屋 25

注意点③
• 必要以上に使わない
例：UpdatePanelを多数配置して
Ajaxを実装したらとても遅くなった
ページデータをすべてサーバ側に送って
該当UpdatePanel内のコントールのみを
ブラウザ更新する処理です。
©越後屋 27

注意点③’
ViewStateも送受信の対象になります！
何も考えずに何でもViewStateに
突っ込んでいると遅くなります
⇒必要なものだけViewStateに入れる！
また、ViewStateModeを
正しく設定しておく！
©越後屋 28

参考
・UpdatePanel コントロールの概要
http://msdn.microsoft.com/ja-
jp/library/bb386454.aspx
・2つのAJAX：「jQuery AJAX API」と「ASP.NET
AJAX」
http://codezine.jp/article/detail/6898
・クライアントスクリプト内の UpdateProgress コ
ントロールのプログラミング
http://msdn.microsoft.com/ja-
jp/library/bb386518%28v=vs.100%29.aspx
©越後屋 32

ASP.NETでお手軽Ajax実装

More Related Content

What's hot (20)

Viewers also liked (6)