狠狠撸

狠狠撸Share a Scribd company logo
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
代表的な問題を解決します!
? 消えたControl Toolkit
? 実装方法
? 注意点
?越後屋 14
Control Toolkitはどこに?
VS2008まではASP.NET AJAXや
Control Toolkitのインストールが
必要でした。
しかし、VS2010以降は
標準機能となっています。
?越後屋 15
VS2010
?越後屋 16
VS2012
?越後屋 17
最新のVS
VS2013とVS2015 Preview※は
Azureを使用して
確認してみましょう。
※Connect();でVisual Studio 14が
正式にVisual Studio 2015となり、
Previewがリリースされています
(日本語対応版あります!)
?越後屋 18
代表的な問題を解決します!
? 消えたControl Toolkit
? 実装方法
? 注意点
?越後屋 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
代表的な問題を解決します!
? 消えたControl Toolkit
? 実装方法
? 注意点
?越後屋 24
注意点①
? 非同期でもPageLoadは発生します
例:非同期処理が走ると表示していた
内容が消えた
IsPostBackだけの分岐では
初期化処理などが想定外の動きをします。
?ScriptManager.IsInAsyncPostBackで
分岐するロジックを追加する
?越後屋 25
注意点②
? 部分更新するもの以外を
UpdatePanelに配置しない
例:非同期処理が走ると表示していた
内容が消えた
注意点①との複合的な問題となり
ViewStateに格納した内容が
消えたりします
?越後屋 26
注意点③
? 必要以上に使わない
例:UpdatePanelを多数配置して
Ajaxを実装したらとても遅くなった
ページデータをすべてサーバ側に送って
該当UpdatePanel内のコントールのみを
ブラウザ更新する処理です。
?越後屋 27
注意点③’
ViewStateも送受信の対象になります!
何も考えずに何でもViewStateに
突っ込んでいると遅くなります
?必要なものだけViewStateに入れる!
また、ViewStateModeを
正しく設定しておく!
?越後屋 28
注意点④
? UpdatePanel内で想定外の部分が
更新される
例:UpdatePanel内でUpdatePanelを
入れ子にしている
親子関係により更新対象が決まります。
?親子のUpdateModeを設定する
?越後屋 29
まとめ
ASP.NETでUpdatePanelを使用した
Ajax実装はとても簡単です。
正しい使用方法や陥りやすいワナ事象を
抑えておけば問題なく使えます。
これを機にAjaxをお手軽実装しませんか?
?越後屋 30
?越後屋 31
ご清聴ありがとうございました。
なにかありましたら
お気軽に声をかけてください。
参考
?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

More Related Content

What's hot (20)

こわくない笔测迟丑辞苍
こわくない笔测迟丑辞苍こわくない笔测迟丑辞苍
こわくない笔测迟丑辞苍
Katsuya Arai
?
こわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOP
こわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOPこわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOP
こわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOP
Katsuya Arai
?
骋辞て?始める言语処理系実装入门
骋辞て?始める言语処理系実装入门骋辞て?始める言语処理系実装入门
骋辞て?始める言语処理系実装入门
虎の穴 開発室
?
俺とフ?ロク?ラミンク?教育
俺とフ?ロク?ラミンク?教育俺とフ?ロク?ラミンク?教育
俺とフ?ロク?ラミンク?教育
Masayuki KaToH
?
SORACOM Air+RaspberryPi+littleBits+IFTTTしてみる
SORACOM Air+RaspberryPi+littleBits+IFTTTしてみるSORACOM Air+RaspberryPi+littleBits+IFTTTしてみる
SORACOM Air+RaspberryPi+littleBits+IFTTTしてみる
Seigo Tanaka
?
こわくない笔测迟丑辞苍 補足資料
こわくない笔测迟丑辞苍 補足資料こわくない笔测迟丑辞苍 補足資料
こわくない笔测迟丑辞苍 補足資料
Katsuya Arai
?
20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事
20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事
20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事
Duong Dinh Thuy
?
RpgツクールVX ace勉強会「はじめての操作編」 20151003
RpgツクールVX ace勉強会「はじめての操作編」 20151003RpgツクールVX ace勉強会「はじめての操作編」 20151003
RpgツクールVX ace勉強会「はじめての操作編」 20151003
りんね ぐりっど
?
リモートワークで楽々ごはん
リモートワークで楽々ごはんリモートワークで楽々ごはん
リモートワークで楽々ごはん
Tetsuo Honda
?
リモートワークで买ってよかったもの
リモートワークで买ってよかったものリモートワークで买ってよかったもの
リモートワークで买ってよかったもの
TomomitsuKusaba
?
あたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよ
あたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよあたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよ
あたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよ
momo yagi
?
ク?ク?リワート?を探す话
ク?ク?リワート?を探す话ク?ク?リワート?を探す话
ク?ク?リワート?を探す话
toru ishikawa
?
俺と otoya
俺と otoya俺と otoya
俺と otoya
Masayuki KaToH
?
Small Basicをご存じですか?
Small Basicをご存じですか?Small Basicをご存じですか?
Small Basicをご存じですか?
Tadahiro Higuchi
?
第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?
Shunya Komori
?
Webデザイナー、 Tesselに挑戦
Webデザイナー、 Tesselに挑戦Webデザイナー、 Tesselに挑戦
Webデザイナー、 Tesselに挑戦
Hideki Akiba
?
ISUCON5 予選をPHPで戦った話
ISUCON5 予選をPHPで戦った話ISUCON5 予選をPHPで戦った話
ISUCON5 予選をPHPで戦った話
Suguru Shirai
?
アプリ制作マスターへの道
アプリ制作マスターへの道アプリ制作マスターへの道
アプリ制作マスターへの道
Masayuki KaToH
?
Rubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LLRubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LL
Uchio Kondo
?
ウェブエンジニアとしての1年目を振り返って
ウェブエンジニアとしての1年目を振り返ってウェブエンジニアとしての1年目を振り返って
ウェブエンジニアとしての1年目を振り返って
Kohki Yamagiwa
?
こわくない笔测迟丑辞苍
こわくない笔测迟丑辞苍こわくない笔测迟丑辞苍
こわくない笔测迟丑辞苍
Katsuya Arai
?
こわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOP
こわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOPこわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOP
こわくない笔测迟丑辞苍 その2- ファイナルファンタジーとグレンラガンで学ぶOOP
Katsuya Arai
?
骋辞て?始める言语処理系実装入门
骋辞て?始める言语処理系実装入门骋辞て?始める言语処理系実装入门
骋辞て?始める言语処理系実装入门
虎の穴 開発室
?
俺とフ?ロク?ラミンク?教育
俺とフ?ロク?ラミンク?教育俺とフ?ロク?ラミンク?教育
俺とフ?ロク?ラミンク?教育
Masayuki KaToH
?
SORACOM Air+RaspberryPi+littleBits+IFTTTしてみる
SORACOM Air+RaspberryPi+littleBits+IFTTTしてみるSORACOM Air+RaspberryPi+littleBits+IFTTTしてみる
SORACOM Air+RaspberryPi+littleBits+IFTTTしてみる
Seigo Tanaka
?
こわくない笔测迟丑辞苍 補足資料
こわくない笔测迟丑辞苍 補足資料こわくない笔测迟丑辞苍 補足資料
こわくない笔测迟丑辞苍 補足資料
Katsuya Arai
?
20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事
20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事
20150907_ 「インターンシップ学生向け」 NCMB JS SDK 初仕事
Duong Dinh Thuy
?
RpgツクールVX ace勉強会「はじめての操作編」 20151003
RpgツクールVX ace勉強会「はじめての操作編」 20151003RpgツクールVX ace勉強会「はじめての操作編」 20151003
RpgツクールVX ace勉強会「はじめての操作編」 20151003
りんね ぐりっど
?
リモートワークで楽々ごはん
リモートワークで楽々ごはんリモートワークで楽々ごはん
リモートワークで楽々ごはん
Tetsuo Honda
?
リモートワークで买ってよかったもの
リモートワークで买ってよかったものリモートワークで买ってよかったもの
リモートワークで买ってよかったもの
TomomitsuKusaba
?
あたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよ
あたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよあたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよ
あたしデザイナだけど&辩耻辞迟;ナントカ.箩蝉&辩耻辞迟;と仲良くできたよ
momo yagi
?
ク?ク?リワート?を探す话
ク?ク?リワート?を探す话ク?ク?リワート?を探す话
ク?ク?リワート?を探す话
toru ishikawa
?
Small Basicをご存じですか?
Small Basicをご存じですか?Small Basicをご存じですか?
Small Basicをご存じですか?
Tadahiro Higuchi
?
第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?第2回 IT講座 ゲームを作るって?
第2回 IT講座 ゲームを作るって?
Shunya Komori
?
Webデザイナー、 Tesselに挑戦
Webデザイナー、 Tesselに挑戦Webデザイナー、 Tesselに挑戦
Webデザイナー、 Tesselに挑戦
Hideki Akiba
?
ISUCON5 予選をPHPで戦った話
ISUCON5 予選をPHPで戦った話ISUCON5 予選をPHPで戦った話
ISUCON5 予選をPHPで戦った話
Suguru Shirai
?
アプリ制作マスターへの道
アプリ制作マスターへの道アプリ制作マスターへの道
アプリ制作マスターへの道
Masayuki KaToH
?
Rubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LLRubyist started to learn Groovy - things important to leran new LL
Rubyist started to learn Groovy - things important to leran new LL
Uchio Kondo
?
ウェブエンジニアとしての1年目を振り返って
ウェブエンジニアとしての1年目を振り返ってウェブエンジニアとしての1年目を振り返って
ウェブエンジニアとしての1年目を振り返って
Kohki Yamagiwa
?

Viewers also liked (6)

プロジェクトの成功とは
プロジェクトの成功とはプロジェクトの成功とは
プロジェクトの成功とは
echigoya-jp
?
tài li?u hóa hoc
tài li?u hóa hoc tài li?u hóa hoc
tài li?u hóa hoc
Minh V? Bình
?
Hope catcher
Hope catcherHope catcher
Hope catcher
Mandy Lee
?
2014 fall sailing adventure
2014 fall sailing adventure2014 fall sailing adventure
2014 fall sailing adventure
Dean Nisbett
?
Writing the narrative-style research report in elementary school.
Writing the narrative-style research report in elementary school.Writing the narrative-style research report in elementary school.
Writing the narrative-style research report in elementary school.
gracefulhate2373
?
础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる
础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる
础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる
Kazunori Hamamoto
?
プロジェクトの成功とは
プロジェクトの成功とはプロジェクトの成功とは
プロジェクトの成功とは
echigoya-jp
?
2014 fall sailing adventure
2014 fall sailing adventure2014 fall sailing adventure
2014 fall sailing adventure
Dean Nisbett
?
Writing the narrative-style research report in elementary school.
Writing the narrative-style research report in elementary school.Writing the narrative-style research report in elementary school.
Writing the narrative-style research report in elementary school.
gracefulhate2373
?
础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる
础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる
础锄耻谤别で尘颈肠谤辞蝉别谤惫颈肠别蝉に触れてみる
Kazunori Hamamoto
?

ASP.NETで お手軽Ajax実装