1 付録b jquery - ec.nikkeibp.co.jpec.nikkeibp.co.jp/nsp/dl/09438/94380apndxb.pdf ·...
Post on 02-Sep-2019
0 Views
Preview:
TRANSCRIPT
付録 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
top related