［ASP.NET］ログイン・コントロールのレイアウトをテンプレート定義するには？［2.0のみ、C#、VB］

.NET TIPS

［ASP.NET］ログイン・コントロールのレイアウトをテンプレート定義するには？［2.0のみ、C#、VB］

山田祥寛
2006/06/02

　「TIPS：［ASP.NET］セキュリティ・コントロールでログイン機能を作成するには？」でも紹介したように、ASP.NET 2.0ではセキュリティ・コントロールを利用することで、ログイン・ページやパスワードの問い合わせのような定型的な機能を限りなくコーディングレスで実現できる。Visual Studio 2005（以降、VS 2005）のオートフォーマット機能を利用すれば、それこそレイアウトやデザインを意識する必要すらない。コントロールを貼り付け、あらかじめ用意されたデザインを選択するだけで、それなりに見栄えがするページができてしまうというわけだ。

　もっとも、アプリケーションを構築するうえでは「手軽なだけでは済まないよ」というご意見もあるかもしれない。例えば、ログイン・ページのレイアウト1つを取っても、アプリケーション内でのデザインの統一性を考慮すれば、お仕着せのものではなく、一からレイアウトを決定したいというケースも少なくないだろう。

　そのような場合には、ログイン・コントロールが使えず、一からログインの仕組みを作り直さなければならないのか。いやいや、そのようなことはない。ログイン・コントロール（に限らず、ASP.NETのサーバ・コントロールの多く）には、テンプレートという仕組みが備わっており、あらかじめ決められたいくつかの緩いルールにさえ従っていれば、自前で用意したテンプレートを適用することが可能だ。

　もちろん、メンバシップ・フレームワークへのアクセス（認証処理やパスワード検索、通知メールの生成などの処理）は、コントロール側で管理してくれるので、標準的な認証機能を実現する分には一切のコーディングは必要ないというわけだ。

Loginコントロールのテンプレート化

　具体的な例として、本稿では前掲のTIPSで作成したLoginコントロールをテンプレート化してみることにしよう。

　VS 2005を使用している場合、テンプレートを作成することはさほどに難しくない。Loginコントロールの標準的なプロパティを利用して、大まかな外観を作成したうえで、右上のスマートタグをクリックすると開く［Login タスク］メニューから［テンプレートに変換］を選択するだけだ。

　これによって、現在のLoginコントロールの内容が展開され、テンプレートとして編集することが可能になる。

テンプレート化されたLoginコントロール

［Login タスク］メニューから［テンプレートに変換］を選択する。一度、テンプレート化されたコントロールを元に戻すには、同じくタスクメニューから［リセット］を選択すればよい。

　以下が［テンプレートに変換］を行うことによりVS 2005によって自動生成されたコードだ（ただし、<%--～--%>は筆者によるコメント）。

<asp:Login ID="Login1" runat="server">

  <%--<LayoutTemplate>要素配下にログイン・ページのテンプレートを定義--%>

  <LayoutTemplate>

    <table border="0" cellpadding="1" cellspacing="0"

      style="border-collapse: collapse">

    <tr>

    <td>

      <table border="0" cellpadding="0">

      <tr>

      <td align="center" colspan="2">ログイン</td>

      </tr>

      <%--ユーザー名入力ボックスと検証コントロール--%>

      <tr>

      <td align="right">

        <asp:Label ID="UserNameLabel" runat="server"

          AssociatedControlID="UserName">ユーザー名:</asp:Label>

      </td>

      <td>

      <asp:TextBox ID="UserName" runat="server"></asp:TextBox>

      <asp:RequiredFieldValidator ID="UserNameRequired"

        runat="server" ControlToValidate="UserName"

        ErrorMessage="ユーザー名が必要です。"

        ToolTip="ユーザー名が必要です。"

        ValidationGroup="Login1">*</asp:RequiredFieldValidator>

      </td>

      </tr>

      <%--パスワード入力ボックスと検証コントロール--%>

      <tr>

      <td align="right">

        <asp:Label ID="PasswordLabel" runat="server"

          AssociatedControlID="Password">パスワード:</asp:Label>

      </td>

      <td>

        <asp:TextBox ID="Password" runat="server"

          TextMode="Password"></asp:TextBox>

        <asp:RequiredFieldValidator ID="PasswordRequired"

          runat="server" ControlToValidate="Password"

          ErrorMessage="パスワードが必要です。"

          ToolTip="パスワードが必要です。"

          ValidationGroup="Login1">*</asp:RequiredFieldValidator>

      </td>

      </tr>

      <%--ログイン情報を永続化するかどうかを決定するチェック・ボックス--%>

      <tr>

      <td colspan="2">

        <asp:CheckBox ID="RememberMe" runat="server"

          Text="次回のために保存" />

      </td>

      </tr>

      <%--ログインエラー時のメッセージ表示場所--%>

      <tr>

      <td align="center" colspan="2" style="color: red">

        <asp:Literal ID="FailureText" runat="server"

          EnableViewState="False"></asp:Literal>

      </td>

      </tr>

      <%--［ログイン］ボタン--%>

      <tr>

      <td align="right" colspan="2">

         <asp:Button ID="LoginButton" runat="server"

           CommandName="Login" Text="ログイン" ValidationGroup="Login1" />

      </td>

      </tr>

      </table>

    </td>

    </tr>

    </table>

  </LayoutTemplate>

</asp:Login>

VS 2005によって自動生成されたログイン・コントロールのテンプレート・コード

　テンプレート化されたLoginコントロール内の個々の部品は、フォーム・デザイナ上から通常のWebフォームを編集するのと同様の要領で編集が可能だ。用途に応じて、必要なコンテンツを追加したり、既存のコントロールを移動したりすることができる。

　編集に際してポイントとなるのは、上記コード内で示した太字の部分だけだ。ごく緩いID値やコマンド名の命名規則にさえ則っていれば、自由にテンプレートを編集できるのがお分かりになるだろう。

　以下に、コントロールをテンプレート化するうえで最低限守らなければならないID値／コマンド名の命名規則をまとめておく。逆に、テンプレート内では以下の命名規則にさえ従っていれば、そのほかの部分は自由に設計して構わない。

ID値、CommandName	概要	必須
UserName	ユーザー名を表す入力ボックス	○
Password	パスワードを表す入力ボックス	○
RememberMe	永続クッキーの有効／無効を表すチェック・ボックス	×
FailureText	エラー・メッセージを出力するラベル	×
Login	ログイン・ボタン（コマンド名）	×

Loginコントロールのテンプレートで利用可能な要素（命名規則）

　ちなみに、Loginコントロールとまったく同じ要領で、そのほかのログイン・コントロールについてもレイアウトをテンプレート化することが可能だ。

　最後に、主なログイン・コントロールで利用可能な主なテンプレートとその中で利用可能なコントロール要素の命名規則をまとめておこう。

コントロール	テンプレートのビュー名	ID値、もしくはCommandName値	概要
ChangePassword	パスワードの変更	CurrentPassword*	パスワード（現在）を表す入力ボックス
		NewPassword*	パスワード（変更後）を表す入力ボックス
		ConfirmNewPassword	パスワード（変更後確認）を表す入力ボックス
		FailureText	エラー・メッセージを出力するラベル
		ChangePassword	［パスワードの変更］ボタン
		Cancel	［キャンセル］ボタン
		UserName**	ユーザー名を表す入力ボックス（DisplayUserNameプロパティがTrueの場合のみ表示）
	正常に完了	Continue	［続行］ボタン
CreateUserWizard	ユーザーの作成ステップ	UserName*	ユーザー名を表す入力ボックス
		Password**	パスワードを表す入力ボックス
		ConfirmPassword	パスワード（確認）を表す入力ボックス
		Email**	E-Mailアドレスを表す入力ボックス
		Question	秘密の質問を表す入力ボックス
		Answer	秘密の解答を表す入力ボックス
		ErrorMessage	エラー・メッセージを出力するラベル
		CreateUser	［ユーザーの作成］ボタン
		Cancel	［キャンセル］ボタン
PasswordRecovery	ユーザー名入力	UserName	ユーザー名を表す入力ボックス
	ユーザー名入力	Submit	［送信］ボタン
	質問	Answer*	「返答」（＝秘密の質問に対する解答）入力ボックス
	質問	Submit	［送信］ボタン

ログイン・コントロールの各テンプレートにおける命名規則
は必須要素、*はDisplayUserNameプロパティがTrueの場合のみ必須、の項目を表す。

　ただし、「TIPS：［ASP.NET］セキュリティ・コントロールでログイン機能を作成するには？」でも示したように、ログイン・コントロールではスタイルやレイアウトを定義するための多くのプロパティを公開しており、プロパティ設定を行うだけでもかなり柔軟に見栄えをカスタマイズすることができる。

　後々の保守性を考慮しても、安易にテンプレート化するのではなく、まずはプロパティ設定で賄えないかどうかを検討するようにしていただきたい。

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：クライアント・コールバック
使用ライブラリ：ICallbackEventHandlerインターフェイス（System.Web.UI名前空間）
関連TIPS：［ASP.NET］セキュリティ・コントロールでログイン機能を作成するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET］セキュリティ・コントロールでログイン機能を作成するには？
		［ASP.NET］ListViewコントロールで非定型のリストを表示するには？
		［ASP.NET］Repeater／DataListコントロールのテンプレートを別ファイルで管理するには？
		［ASP.NET］PasswordRecoveryコントロールのパスワード通知メールをカスタマイズするには？
		独自の項目テンプレートを作成するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT