ASP.NET Web フォームのチュートリアル: ユーザー コントロールの例
ジェイコブ・リー
⚡ スマートサマリー
ASP.NET Web Formsのユーザーコントロールを使用すると、再利用可能なUIコンポーネントを一度作成して、複数のページで使用できます。このドキュメントでは、ユーザーコントロールの作成方法、ページへの登録方法、web.configファイルへのグローバル登録方法、およびパブリックプロパティの追加方法について説明します。
ASP.Net では、再利用可能なコードを作成できます。 再利用可能なコードは、コードを再度記述する必要がなく、さまざまな場所で使用できます。
再利用可能なコードは、開発者がコードを書いた後の作業時間を短縮するのに役立ちます。一度作成すれば、複数の場所で再利用できます。
ASP.Net でユーザー コントロールを作成する
ASP.NETにはWebコントロールを作成する機能があります。これらのコントロールには再利用可能なコードが含まれており、必要に応じてアプリケーション全体で使用できます。
ASP.NetでWebユーザーコントロールを作成する方法の例を見てみましょう。
私たちの例では:
- Web コントロールを作成します。
- ヘッダーコンポーネントを作成するために使用されます。
- 下記テキストが含まれます。Guru「99のチュートリアル」と「このチュートリアルはASP.Net向けです」。
前のセクションで作成した現在の Web アプリケーションを操作してみましょう。 以下の手順に従って Web ユーザー コントロールを作成しましょう。
ステップ1） 最初のステップは、Web ユーザー コントロールを作成し、それを Visual Studio ソリューションに追加することです。
- Visual Studio のソリューション エクスプローラーを開き、DemoApplication ソリューションを右クリックします。
- メニュー項目「追加」→「新規アイテム」を選択してください。
ステップ2） 次のステップでは、Webユーザーコントロールを作成するオプションを選択する必要があります。
- プロジェクト ダイアログ ボックスには、さまざまな種類のコンポーネントを作成するためのさまざまなオプションが表示されます。左側の [Web] オプションをクリックします。
- 「Web」オプションをクリックすると、「Webフォームユーザーコントロール」というオプションが表示されます。このオプションをクリックしてください。
- 次に、Web コントロールに名前を付けます。Guru99コントロール」
- 最後に、「追加」ボタンをクリックして、Visual Studio で Web ユーザー コントロールをソリューションに追加します。
すると、「」が表示されます。Guruソリューションに「99Control」が追加されました。
ステップ3） さあ、Webユーザーコントロールにカスタムコードを追加しましょう。私たちのコードは純粋なHTML構文に基づいています。次のコードを「Guru99Control.ascx ファイル。
<table> <tr> <td>Guru99 Tutorials</td> </tr> <tr> <td> This Tutorial is for</td> </tr> </table>
Code 説明：-
- Web コントロール ファイルでは、まずテーブル要素を作成します。これは、次のテキストを表示する 2 行を保持するために使用されます。Guru「99 チュートリアル」と「このチュートリアルは ASP.Net 用です。」
- 次に、最初のテーブル行を定義し、テキストを「Guru99のチュートリアル。
- 次に、テーブルの XNUMX 行目を定義し、「このチュートリアルは ASP.Net 用です」というテキストを入力します。
注: このコードを実行して結果を表示することはできません。正しく動作するかどうかを確認する唯一の方法は、アプリケーション（aspxファイル）に組み込むことです。これについては、次のトピックで説明します。
ASP.NET Webフォームにユーザーコントロールを登録する
前のセクションでは、カスタムWebコントロールを作成する方法を見てきました。これを使って、Webフォームに次の2行を表示できます。
- Guru99のチュートリアル
- 「このチュートリアルは ASP.Net 用です。」
カスタムコントロールを作成したら、それをWebアプリケーションで使用する必要があります。最初のステップは、アプリケーション（Demo.aspx）にコンポーネントを登録することです。これは、ASP.NetアプリケーションでカスタムWebコントロールを使用するための前提条件です。
これを実現する方法を見ていきましょう。以下の手順は、カスタムコントロールを作成した前のセクションの続きです。このセクションでは、コントロールを デモ.aspx ウェブフォーム。まず、カスタム「コントロール」を Demo.aspx ファイルに登録します。
ステップ1） demo.aspx ファイルで作業していることを確認してください。Web ユーザー コントロールは、このファイルに登録されます。これは、.NET ソリューションのソリューション エクスプローラーで demo.aspx ファイルをダブルクリックすることで実行できます。
フォームをダブルクリックすると、おそらくフォーム内に以下のコードが表示されます。これは、ASP.NetプロジェクトにWebフォームを追加した際にVisual Studioによって自動的に追加されるコードです。このデフォルトコードには、フォームがブラウザ上でASP.Net Webフォームとして動作するために必要な手順が含まれています。
ステップ2） それでは、ユーザーコントロールを登録するコードを追加しましょう。下のスクリーンショットは、上記の基本コードにユーザーコントロールを登録した状態を示しています。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %> <%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <TWebControl:WebControl ID="Header" runat="server" /> </form> </body> </html>
Code 説明：-
- 最初のステップは、Webユーザーコントロールを登録することです。これには、以下の基本パラメータが含まれます。
- 「Register」キーワードは、Web ユーザー コントロールを登録するために使用されます。
- Src パラメータはコントロールの名前を定義するために使用されます。この場合、 Guru99Control.ascx
- TagNameとTagPrefixは、コントロールに個別に付けられる名前です。これは、HTMLページ内で通常のHTMLコントロールとして参照できるようにするためです。
- 次に、先に割り当てた TagPrefix:TagName を介して Web ユーザー コントロールを参照します。TagPrefix:TagName は、カスタム Web コントロールを使用することを示すインジケーターです。Web サーバーによってページが処理されると、TWebControl:WebControl タグが使用されていることがわかります。その後、'Guruそれに応じて「99Control」を実行します。
- 「Header」コントロールには、オプションでIDを指定できます。HTMLコントロールにIDを指定することは、一般的に推奨される方法です。
- 最後に、`runat="server"`属性を指定することで、コントロールがWebサーバー上で実行されるようになります。これはすべてのASP.Netコントロールのデフォルト属性です。すべてのASP.Netコントロール（カスタムコントロールを含む）はサーバー上で実行する必要があります。そして、その出力はサーバーからクライアントに送信され、ブラウザに表示されます。
上記のコードを設定し、プロジェクトを実行すると Visual Studioの、以下の出力が得られます。
出力：-
ブラウザに表示される出力メッセージは、Web ユーザー コントロールが正常に実行されたことを示します。
web.config構成ファイルでASP.Netコントロールをグローバルに登録する
.NETアプリケーションでは、複数のページでユーザーコントロールを使用したい場合があります。その場合、ASP.NETの各ページにユーザーコントロールを登録し続けるのは避けたいところです。
- .Net では、「web.config」ファイルで登録を実行できます。
- web.configファイルは、.Netプロジェクト内のすべてのWebページで使用される共通の設定ファイルです。
- ASP.Net Webプロジェクトに必要な構成の詳細が含まれています。たとえば、web.configファイル内の一般的な構成の1つは、 ターゲットフレームワークパラメータ.
- このパラメータは、アプリケーションで使用される .Net Framework のバージョンを識別するために使用されます。
以下は、web.config ファイル内のデフォルト コードのスナップショットです。 ハイライトされた部分はターゲット フレームワーク部分です。
登録方法を見ていきましょう Guru99web.config ファイル内のコントロール。
ステップ1） ソリューションエクスプローラーからweb.configファイルをダブルクリックして開きます。
web.config ファイルを開くと、以下の構成が表示されます。 'web.config' は、プロジェクトの作成時に Visual Studio によって自動的に追加されます。 これは、ASP.Net プロジェクトを適切に動作させるために必要な基本構成です。
ステップ2） 次に、コンポーネントを web.config ファイルに登録しましょう。 そのためには以下の行を追加する必要があります。
<configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <pages> <controls> <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" /> </controls> </pages> </system.web> </configuration>
登録は以下の手順で構成されます。
- というタグを追加します。 これは、コントロールのすべての構成がソリューション内のすべての ASP.Net ページに適用されることを意味します。
- のタグは、ユーザー コントロールの構成を追加することを意味します。
- 次に、追加タグを使用してユーザーコントロールを登録します。tagPrefix、tagName、およびsrcの残りのパラメータは以前と同じです。
ステップ3） 「demo.aspx」ページに移動して、コントロールの登録に関する行を削除することを忘れないでください。 Guru99 コンポーネント。この手順を実行しない場合、「Guru99Control.ascx ファイルは、web.config ファイルではなく、demo.aspx ファイルから実行されます。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <TWebControl:WebControl ID="Header" runat="server" /> </form> </body> </html>
上記のコードを設定し、Visual Studio を使用してプロジェクトを実行すると、以下の出力が得られます。
出力：-
出力メッセージは、Web ユーザー コントロールが正常に実行されたことを示します。
Web コントロールへのパブリック プロパティの追加
プロパティとは、任意のコントロールに関連付けられたキーと値のペアです。簡単な例を見てみましょう。 HTMLタグ。タグの表示例を以下に示します。
<html> <body> <div style="color:#0000FF"> Demo Form </div> </body> </html>
「div」タグは、HTML ドキュメントにセクションを作成するために使用されます。「div」タグには、スタイル プロパティと呼ばれるプロパティがあります。これを使用して、div タグ内に表示されるテキストに異なるスタイルを与えることができます。通常、div タグのコードは以下のように表示されます。
<div style="color:#0000FF">
したがって、 color 属性は、タグ自体に関する詳細情報を提供するキーと値のペアにすぎません。 上記の場合、キー名は「style」、キー値は「color:#0000FF」です。
同様に、ユーザー コントロールの場合、コントロールを説明する独自のプロパティを作成できます。
簡単な例を取り上げて、私たちのGuru前のセクションで作成した「99Control」を使用します。今回の例では、MinValue という単純な整数型のプロパティを追加します。この値は、ユーザーコントロールに表示されるテキストの最小文字数を表します。
これを適切に設定するには、以下の手順を実行してみましょう。
ステップ1） Video Cloud Studioで Guru99Control.ascx ファイルを開き、MinValue プロパティを追加するコードを追加してください。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %> <script runat="server"> public int MinValue = 0; </script> <table> <tr> <td>Guru99 Tutorials</td> </tr> <tr> <td> This Tutorial is for</td> </tr> </table>
Code 説明：-
スクリプトの runat="server" 属性は、.NET 固有のコードを追加し、それを Web サーバー上で実行する必要があることを示すために使用されます。これは、ユーザー コントロールに追加されたプロパティを処理するために必要です。次に、プロパティ MinValue を追加し、デフォルト値として 0 を設定します。
ステップ2） 次に、demo.aspx ファイルでこのプロパティを参照してみましょう。 ここで行っているのは、MinValue プロパティを参照し、新しい値 100 を割り当てることだけです。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <TWebControl:WebControl ID="Header" runat="server" MinValue="100" /> </form> </body> </html>
注: このコードを実行しても、何も出力されません。これは、出力が100文字の制限を超えてしまうためです。
