Embed Size (px)
Citation preview
付録 1
付録B jQueryVisual Studio 2010のASP.NETから、jQueryが正式にサポートされました。ASP.NET MVCアプリケーションを作成する際にも、［Scripts］フォルダに jQueryのライブラリ（jquery-1.4.1.js）が配置されています。ここではユーザー登録のページで jQueryを使ったユーザー名チェックを実装してみましょう。
jQueryとはjQueryとは、JavaScriptで作成したフリーのクラスライブラリです。JavaScriptはブラウザ上で動作する
スクリプト言語ですが、ブラウザの表示をきめ細かく制御できる半面、コーディングやデバッグに非常に手間が掛かっていました。
jQueryは、ブラウザでよく扱う操作やAjaxの機能を集めた高機能なライブラリです。このライブラリを利用すると、HTMLタグの表示や動的な追加などが非常に簡単に行えます。
統合開発環境（Visual Studio 2010）では、この jQueryを扱う高機能なコーディングの環境が揃えられています。通常、JavaScriptのコーディングにはメモ帳などのテキストエディターが使われるので、JavaScriptの関数や jQueryの各種メソッドは、マニュアルなどを参照しながら1つ1つ記述しなければなりませんでした。しかし、Visual Studio 2010では、C#のコーディングと同様にインテリセンスの機能が用意されています。これにより、非常に手早く、JavaScriptのコーディングが可能になっています。
図B-1 jQureyとブラウザの関係
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門2
Ajaxとは通常、Webアプリケーションは、ユーザーが何かの操作をするごとにサーバーに問い合わせをします。これを画面遷移といいますが、ユーザーがリンクをクリックしたり、フォームのボタンをクリックする度にサーバーにデータが送信され、サーバーが画面のデータを返しています。
図B-2 Visual studio 2010のインテリセンス
図B-3 通常のC/Sの図
この方法の場合、1回ごとに画面を再描画するためにユーザーの操作感が悪くなります。Windowsアプリケーションのように一画面で、色々な操作（入力チェックや、データの自動変換など）を実現することができません。この画面遷移を極力少なくするための技術がAjaxになります。ボタンをクリックしたときの画面の再描画を、全画面ではなく、一部分だけを更新するという方法が取られています。Ajaxは、jQueryのライブラリの一部として配布されています。
付録 3
ASP.NET MVCアプリケーションでも、このAjaxを使って画面の一部だけを更新することが可能です。ここでは、ショッピングサイトのユーザー登録時に、あらかじめユーザー名をチェックする機能を追加します。このチェックの方法に、画面の一部だけを変更するAjaxの機能を利用します。
図B-4 Ajaxを使った場合
最初のユーザーチェック最初に、ユーザー名を登録するためのビュー（Register.aspx）に jQueryのスクリプトを組み込んでいき
ましょう。
<asp:Content ID="registerContent" ContentPlaceHolderID="MainContent" runat="server"><script src="../../Scripts/jquery-1.4.1.js"></script> ...<script language="javascript"> function check() { $('#message').load("/Account/UserCheck" ); return false; } </script><div class="editor-field"> <%: Html.TextBoxFor(m => m.UserName) %> <input type="button" onclick="check()" value="チェック" /> <span id="message"></span> <%: Html.ValidationMessageFor(m => m.UserName) %></div>
1
23
45
❶コードエディターにViews/Account/Register.aspxファイルを表示する。
❷Index.aspxファイルに次のコードを記述する（色文字部分）。
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門4
<script src="../../Scripts/jquery-1.4.1.js"></script>1
<script language="javascript">2
function check() { $('#message').load("/Account/UserCheck" ); return false; }
3
<input type="button" onclick="check()" value="チェック" />4
<span id="message"></span>5
jQueryのスクリプトファイルを読み込みます。
JavaScriptを記述するタグです。本来であれば、HEAD部に記述するのですが、ここでは説明のためにユーザー名のテキストボックスの直前に記述しています。
jQueryでは、$(＜ id名＞ )として、簡単に IDを持つタグを指定できます。Ajaxの呼び出しは、loadメソッドにURLを指定します。フォームが実行されないように、メソッドの戻り値を falseに設定します。
ユーザー名のチェックするためのボタンを配置します。
Ajaxで呼び出した戻り値を表示するための場所です。
コードの解説
ビューを追加するAjaxの応答を返すためのビューを作成します。
❶［ソリューションエクスプローラー］で［View］－［Account］を右クリックして、［追加］－［ビュー］をクリックする。
→ ［ビューの追加］ダイアログボックスが表示される。
❷［ビュー名］に、UserCheckと入力する。
❸［追加］ボタンをクリックする。
→ 新しいビュー（UserCheck.aspx）が作成される。
❹内容をすべて削除したのち、UserCheck.aspxファイルに次のコードを記述する（色文字部分）。
付録 5
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> OK
1
public ActionResult UserCheck(){ return View();}
1
戻り値を表示するために、OKと記述します。これがAjaxの呼び出しに対する応答になります。
ここでは、ビューを呼び出すためだけのメソッドを書きます。後から、ユーザーテーブルから読み込む記述をします。
コードの解説
コードの解説
コントローラーを修正するビューを表示するためのコントローラーを追加します。
❶コードエディターにControllers/AccountController.csファイルを表示する。
❷AccountController.csファイルに次のコードを記述する（色文字部分）。
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> OK
1
public ActionResult UserCheck() { return View();}
1
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門6
動作の確認
❶［標準］ツールバーの［デバッグ開始］ボタンをクリックする。
❷Internet Explorerが表示されることを確認する。
❸トップ画面で［ログオン］ボタンをクリックする。
❹ログオン画面で［登録］ボタンをクリックする。
❺［チェック］ボタンをクリックする。
→ メッセージに「OK」と表示されることを確認する。
❻Internet Explorerの閉じるボタンをクリックする。
→ プログラムが終了し、統合開発環境に戻る。
2
5
3
6
付録 7
アカウントのデータベースでチェックするAjaxの確認ができたので、具体的にデータベースに接続してユーザー名をチェックします。ログオンのチェックをするデータベースは、［App_Data］フォルダーにあるASPNETDB.mdfファイルになります。最初に、［サーバーエクスプローラー］にデータベースを登録します。
❶［サーバーエクスプローラー］ウィンドウの［データ接続］を右クリックして、［接続の追加］をクリックする。
→ ［接続の追加］ダイアログボックスが表示される。
❷［データソース］の［変更］ボタンをクリックする。
→ ［データソースの変更］ダイアログボックスが表示される。
❸［データソース］のリストから［Microsoft SQL
Server データベース ファイル］を選択し、［OK］ボタンをクリックする。
❹［接続の追加］ダイアログボックスに戻り、［データベースファイル名］で、［MvcShopping
¥App_Data］フォルダー内にある「aspnetdb.
mdf」ファイルを選択する。
1
2
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門8
❺［テスト接続］ボタンをクリックして、接続確認を行う。「テスト接続に成功しました。」という表示を確認して［OK］ボタンをクリックする。
❻［接続の追加］ダイアログボックスに戻り、［OK］ボタンをクリックする。
→ ［サーバーエクスプローラー］にデータベースが追加されることを確認する。
4
5 6
3
付録 9
データクラスを作成［サーバーエクスプローラー］を利用してデータクラス（LINQ to SQLクラス）を作成します。このデータクラスを使って、ユーザーテーブルをチェックします。
❶［ソリューションエクスプローラー］で［Model］を右クリックして、［追加］－［新しい項目］をクリックする。
→ ［新しい項目の追加］ダイアログボックスが表示される。
❷［インストールされたテンプレート］リストから［Visual C#］－［データ］をクリックする。
❸中央のリストで、［LINQ to SQLクラス］を選択する。
❹ファイル名を［DataASPNETDB.dbml］とする。
❺［追加］ボタンをクリックする
→ ［ソリューションエクスプローラー］にデータクラスが追加される。
❻［サーバーエクスプローラー］を表示させ、［データ接続］－［aspnetdb.mdf］－［テーブル］のツリーを開く。
❼［aspnet_Users］テーブルを、データクラスの上にドラッグアンドドロップする。
❽［aspnet_Users］テーブルのデータクラスが作成されることを確認する。
86
4
2
5
7
3
1
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門10
コントローラーを修正するaspnet_Usersテーブルに接続してユーザー名をチェックします。
❶コードエディタにControllers/AccountController.csファイルを表示する。
❷AccountController.csファイルに次のコードを記述する（色文字部分）。
using System.Configuration;using System.Data.Linq;
public ActionResult UserCheck( string user ){ if (user == null) { ViewData["result"] = "NG"; } else { // web.config から接続文字列を取得 string cnstr = ConfigurationManager.ConnectionStrings[ "ApplicationServices"].ConnectionString; // データベースに接続する DataContext dc = new DataContext(cnstr); // ユーザー一覧よりチェック var item = from u in dc.GetTable<aspnet_Users>() where u.UserName == user select u; if ( item.Count() == 0 ) { ViewData["result"] = "OK"; } else { ViewData["result"] = "NG"; } } return View();}
1
2
3
4
if (user == null) { ViewData["result"] = "NG"; }
1
念のため、ユーザー名が指定されていない場合は、「NG」にします。ビューに表示するためにViewDataコレクションを使います。
コードの解説
付録 11
ビューを修正する応答を返すためのビューを変更します。
❶コードエディターにViews/Account/UserCheck.aspxファイルを表示する。
❷UserCheck.aspxファイルに次のコードを記述する（色文字部分）。
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><%: ViewData["result"] %> 1
// web.config から接続文字列を取得 string cnstr = ConfigurationManager.ConnectionStrings[ "ApplicationServices"].ConnectionString; // データベースに接続する DataContext dc = new DataContext(cnstr);
2
// ユーザー一覧よりチェック var item = from u in dc.GetTable<aspnet_Users>() where u.UserName == user select u;
3
if ( item.Count() == 0 ) { ViewData["result"] = "OK"; } else { ViewData["result"] = "NG"; }
4
ログイン用のデータベースに接続します。web.configにある「ApplicationServices」の設定から、データベース接続文字列を取得します。
Ajaxから渡されたユーザー名がテーブル内のデータと一致するかを検索します。
一致しない場合（0件の場合）は、登録可能なので「OK」を返します。既にユーザー名が存在している場合は、「NG」を返します。
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門12
<%: ViewData["result"] %>1
コントローラーが設定した値を表示します。この文字列がAjaxのコールバック関数に渡されます。解析の都合上、「%>」の右側には改行を入れないように注意してください。
コードの解説
ビューを修正するアカウントを登録するためのビューを修正します。Ajaxの戻り値をチェックして、メッセージを表示します。
❶コードエディターにViews/Account/Register.aspxファイルを表示する。
❷Register.aspxファイルに次のコードを記述する（色文字部分）。
<script language="javascript"> function check() { // ユーザー名を取得 var username = $('#UserName').val(); if (username == "" ) { alert("ユーザー名を入力してください"); return false; } // サーバーでチェック $('#message').load("/Account/UserCheck", { user: username }, function (text, status) { if (text == "OK") { $(this).text("利用できます"); $(this).css("color", ""); } else { $(this).text("利用できません"); $(this).css("color", "red"); } }); return false; }</script>
12
3
4
付録 13
var username = $('#UserName').val();1
ユーザー名を取得します。テキストボックスから値を取得する場合は、valメソッドを使います。HTMLのタグは、ID名を使って、「$(＜ ID名＞ )」のように簡単に指定できます。
コードの解説
if (username == "" ) { alert("ユーザー名を入力してください"); return false; }
2
$('#message').load("/Account/UserCheck", { user: username },
3
function (text, status) { if (text == "OK") { $(this).text("利用できます"); $(this).css("color", ""); } else { $(this).text("利用できません"); $(this).css("color", "red"); } });
4
ユーザー名が空白だった場合は、エラーメッセージを表示します。
ユーザー名をチェックするためのAjaxを呼び出します。loadメソッドを使い、URLを指定します。ここでは、パラメーターとしてユーザー名を渡しています。「http://localhost/Account/UserCheck?user=
＜ユーザー名＞」として呼び出します。
loadメソッドでは、Ajaxの戻り値をコールバック関数で受け取ることが可能です。ここでは、受け取った戻り値が「OK」の場合は「利用できます」とメッセージを表示します。「NG」の場合は「利用できません」と赤色で表示します。
ひと目でわかるMicrosoft ASP.NET MVCアプリケーション開発入門14
動作の確認
❶［標準］ツールバーの［デバッグ開始］ボタンをクリックする。
❷Internet Explorerが表示されることを確認する。
❸トップ画面で［ログオン］ボタンをクリックする。
❹ログオン画面で［登録］ボタンをクリックする。
❺ユーザー名が空白のまま［チェック］ボタンをクリックする。
→ 警告メッセージが表示されることを確認する。
❻ユーザー名にadminと入力して、［チェック］ボタンをクリックする。
→ 「利用できません」とメッセージが表示されることを確認する。
❼未登録のユーザー名を入力して、［チェック］ボタンをクリックする。
→ 「利用できます」とメッセージが表示されることを確認する。
❽Internet Explorerの閉じるボタンをクリックする。
→ プログラムが終了し、統合開発環境に戻る。
5
6
7
2
5
3
8
