ASP.NET Web フォームのチュートリアル: ユーザーコントロールの例

ASP.Net では、再利用可能なコードを作成できます。再利用可能なコードは、コードを再度記述する必要がなく、さまざまな場所で使用できます。

再利用可能なコードは、開発者がコードを作成した後に費やす時間を短縮するのに役立ちます。一度実行すれば、複数の場所で再利用できます。

ASP.Net でユーザーコントロールを作成する

ASP.Net には、Web コントロールを作成する機能があります。これらのコントロールには、再利用できるコードが含まれています。要件に応じてアプリケーション全体で使用できます。

ASP.Net で Web ユーザーコントロールを作成する方法の例を見てみましょう。

この例では、

Web コントロールを作成します。
ヘッダーコンポーネントを作成するために使用されます。
これには、以下のテキストが含まれます。「Guru99 チュートリアル」「このチュートリアルは ASP.Net 用です」

前のセクションで作成した現在の Web アプリケーションを操作してみましょう。以下の手順に従って Web ユーザーコントロールを作成しましょう。

ステップ1） 最初のステップは、Web ユーザーコントロールを作成し、それを Visual Studio ソリューションに追加することです。

Visual Studioのソリューションエクスプローラーに移動し、DemoApplicationソリューションを右クリックします。
メニュー項目の「追加」->「新規項目」を選択します。

ステップ2） 次のステップでは、Web ユーザーコントロールを作成するオプションを選択する必要があります。

プロジェクトダイアログボックスには、さまざまな種類のコンポーネントを作成するためのさまざまなオプションが表示されます。左側の [Web] オプションをクリックします。
「Web」オプションをクリックすると、「Web フォームユーザーコントロール」のオプションが表示されます。このオプションをクリックします。
次に、Web コントロールに「Guru99Control」という名前を付けます。
最後に、「追加」ボタンをクリックして、Visual Studio で Web ユーザーコントロールをソリューションに追加します。

「Guru99Control」がソリューションに追加されていることがわかります。

ステップ4） 次に、Web ユーザーコントロールにカスタムコードを追加します。コードは純粋な HTML 構文に基づいています。次のコードを 'Guru99Control.ascx' ファイルに追加します。

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

コードの説明:-

Web コントロールファイルでは、まずテーブル要素を作成します。これは、表示に使用される 2 行のテキストを保持するために使用されます。

「Guru99 チュートリアル」と
「このチュートリアルは ASP.Net 用です。」

次に、テーブルの最初の行を定義し、テキストを「Guru99 Tutorials」として配置します。
次に、テーブルの 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 ファイルをダブルクリックすることで実行できます。

フォームをダブルクリックすると、フォーム内に以下のコードが表示されます。これは、Web フォームが ASP.Net プロジェクトに追加されたときに 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

コードの説明:-

最初の手順は、Web ユーザーコントロールを登録することです。これは以下の基本パラメータで構成されます
1. 「Register」キーワードは、Web ユーザーコントロールを登録するために使用されます。
2. src パラメーターは、コントロールの名前を定義するために使用されます。この場合、それは Guru99Control.ascx です。
3. タグ名とタグプレフィックスは、コントロールに与えられる個別の名前です。これは、HTML ページ内を通常の HTML コントロールとして参照できるようにするために行われます。
次に、前に割り当てた TagPrefix:TagName を介して Web ユーザーコントロールを参照します。 TagPrefix:TagName は、カスタム Web コントロールを使用することを示すインジケーターです。ページが Web サーバーによって処理されるときに、TWebControl:WebControl タグが使用されていることがわかります。その後、それに応じて「Guru99Control」が処理されます。この例では、それは TWebControl:WebControl です。
1. 「Header」のコントロールには任意のIDが付与されます。一般に、HTML コントロールに ID を与えることをお勧めします。
2. 最後に、コントロールが Web サーバー上で実行されるように、runat=server 属性を設定します。すべての ASP.Net コントロールでは、これが既定の属性です。すべての ASP.Net コントロール (カスタムコントロールを含む) は、サーバー上で実行する必要があります。その後、その出力はサーバーからクライアントに送信され、それに応じてブラウザーに表示されます。

上記のコードを設定し、プロジェクトを実行すると Visual Studioの。以下の出力が得られます。

出力：-

ブラウザに表示される出力メッセージは、Web ユーザーコントロールが正常に実行されたことを示します。

Web 構成構成ファイル asp に asp.net コントロールをグローバルに登録する

.Net アプリケーションの複数のページでユーザーコントロールを使用したい場合があります。この時点では、すべての ASP.Net ページにユーザーコントロールを登録し続ける必要はありません。

.Net では、「web.config」ファイルで登録を実行できます。
web.config ファイルは、.Net プロジェクトのすべての Web ページで使用される共通の構成ファイルです。
ASP.Net Webプロジェクトに必要な構成の詳細が含まれています。たとえば、web.configファイル内の一般的な構成の1つは、 ターゲットフレームワークパラメータ.
このパラメータは、アプリケーションで使用される .Net Framework のバージョンを識別するために使用されます。

以下は、web.config ファイル内のデフォルトコードのスナップショットです。ハイライトされた部分はターゲットフレームワーク部分です。

Guru99Control を web.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" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.ore/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」です。

同様に、ユーザーコントロールの場合、コントロールを説明する独自のプロパティを作成できます。

簡単な例を取り上げ、前のセクションで作成した「Guru99Control」を基に構築してみましょう。

この例では、MinValue という単純な整数プロパティを追加します。この値は、ユーザーコントロールに表示されるテキストの最小文字数を表します。

これを適切に設定するには、以下の手順を実行してみましょう。

ステップ1） 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
	</tr>
</table>

コードの説明:-

スクリプト runat=server 属性は、.Net 固有のコードを追加していること、およびそれを Web サーバーで実行する必要があることを示すために使用されます。

これは、ユーザーコントロールに追加されたプロパティを処理するために必要です。次に、プロパティ MinValue を追加し、デフォルト値 0 を設定します。

ステップ2） 次に、demo.aspx ファイルでこのプロパティを参照してみましょう。ここで行っているのは、MinValue プロパティを参照し、新しい値 100 を割り当てることだけです。

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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 文字の制限に該当しないためです。

まとめ

ASP.Net にはユーザーコントロールを作成する機能があります。ユーザーコントロールは、アプリケーション内で複数回使用されるコードを含めるために使用されます。ユーザーコントロールはアプリケーション全体で再利用できます。
ユーザーコントロールは、使用する前に ASP.Net ページに登録する必要があります。
アプリケーションのすべてのページでユーザーコントロールを使用するには、それを web.config ファイルに登録します。
プロパティは Web ユーザーコントロールに追加することもできます。

よろしければ：

ASP.Net でユーザー コントロールを作成する

ASP.NET Web フォームへのユーザー コントロールの登録

Web 構成構成ファイル asp に asp.net コントロールをグローバルに登録する

関連記事

Web コントロールへのパブリック プロパティの追加

まとめ

ASP.Net でユーザーコントロールを作成する

ASP.NET Web フォームへのユーザーコントロールの登録

Web コントロールへのパブリックプロパティの追加