付録
B
jQuery
Visual 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とブラウザの関係
Ajaxとは
通常、Webアプリケーションは、ユーザーが何かの操作をするごとにサーバーに問い合わせをします。こ れを画面遷移といいますが、ユーザーがリンクをクリックしたり、フォームのボタンをクリックする度に サーバーにデータが送信され、サーバーが画面のデータを返しています。 図B-2 Visual studio 2010のインテリセンス 図B-3 通常のC/Sの図 この方法の場合、1回ごとに画面を再描画するためにユーザーの操作感が悪くなります。Windowsアプリ ケーションのように一画面で、色々な操作（入力チェックや、データの自動変換など）を実現することがで きません。 この画面遷移を極力少なくするための技術が Ajaxになります。ボタンをクリックしたときの画面の再描 画を、全画面ではなく、一部分だけを更新するという方法が取られています。Ajaxは、jQueryのライブラリ の一部として配布されています。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
2
3
4
5
❶
コードエディターにViews/Account/Register.aspxファイルを表示する。❷
Index.aspx ファイルに次のコードを記述する（色文字部分）。<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ファイルに次のコードを記述する（色文字部分）。<%@ 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(); }
動作の確認
❶
［標準］ツールバーの［デバッグ開始］ボタン をクリックする。❷
Internet Explorer が表示されることを確認す る。❸
トップ画面で［ログオン］ボタンをクリックす る。❹
ログオン画面で［登録］ボタンをクリックする。❺
［チェック］ボタンをクリックする。 → メッセージに「OK」と表示されることを確 認する。❻
Internet Explorer の閉じるボタンをクリック する。 → プログラムが終了し、統合開発環境に戻る。2
5
3
6
アカウントのデータベースでチェックする
Ajax の確認ができたので、具体的にデータベースに接続してユーザー名をチェックします。ログオンの チェックをするデータベースは、［App_Data］フォルダーにあるASPNETDB.mdfファイルになります。 最初に、［サーバーエクスプローラー］にデータベースを登録します。❶
［サーバーエクスプローラー］ウィンドウの ［データ接続］を右クリックして、［接続の追 加］をクリックする。 →［接続の追加］ダイアログボックスが表示さ れる。❷
［データソース］の［変更］ボタンをクリック する。 →［データソースの変更］ダイアログボックス が表示される。❸
［データソース］のリストから［Microsoft SQL Server データベース ファイル］を選択し、 ［OK］ボタンをクリックする。❹
［接続の追加］ダイアログボックスに戻り、 ［データベースファイル名］で、［MvcShopping ¥App_Data］フォルダー内にある「aspnetdb. mdf」ファイルを選択する。1
2
［テスト接続］ボタンをクリックして、接続確 認を行う。「テスト接続に成功しました。」とい う表示を確認して［OK］ボタンをクリックす る。
❻
［接続の追加］ダイアログボックスに戻り、 ［OK］ボタンをクリックする。 →［サーバーエクスプローラー］にデータベー スが追加されることを確認する。4
5
6
3
データクラスを作成
［サーバーエクスプローラー］を利用してデータクラス（LINQ to SQLクラス）を作成します。このデータ クラスを使って、ユーザーテーブルをチェックします。❶
［ソリューションエクスプローラー］で［Model］ を右クリックして、［追加］−［新しい項目］を クリックする。 →［新しい項目の追加］ダイアログボックスが 表示される。❷
［インストールされたテンプレート］リストか ら［Visual C#］−［データ］をクリックする。❸
中央のリストで、［LINQ to SQLクラス］を選 択する。❹
ファイル名を［DataASPNETDB.dbml］とする。❺
［追加］ボタンをクリックする →［ソリューションエクスプローラー］にデー タクラスが追加される。❻
［サーバーエクスプローラー］を表示させ、 ［データ接続］−［aspnetdb.mdf］−［テーブル］ のツリーを開く。❼
［aspnet_Users］テーブルを、データクラスの 上にドラッグアンドドロップする。❽
［aspnet_Users］テーブルのデータクラスが作 成されることを確認する。8
6
4
2
5
7
3
1
コントローラーを修正する
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 コレクションを使います。コードの解説
ビューを修正する
応答を返すためのビューを変更します。❶
コードエディターに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」を返します。<%: 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>
1
2
3
4
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"); } });
