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

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

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

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

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

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

この例では、

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

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

ステップ1) 最初のステップは、Web ユーザー コントロールを作成し、それを Visual Studio 溶液。

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

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

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

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

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

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

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

ステップ4) 次に、カスタム コードを Web ユーザー コントロールに追加します。 私たちのコードは純粋な HTML 構文に基づいています。 以下を追加wing 「Guru99Control.ascx」ファイルへのコード

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

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

コードの説明:-

  1. Web コントロール ファイルでは、まずテーブル要素を作成します。 これは、表示に使用される 2 行のテキストを保持するために使用されます。
  • 「Guru99 チュートリアル」と
  • 「このチュートリアルは ASP.Net 用です。」
  1. 次に、テーブルの最初の行を定義し、テキストを「Guru99 Tutorials」として配置します。
  2. 次に、テーブルの XNUMX 行目を定義し、「このチュートリアルは ASP.Net 用です」というテキストを入力します。

注意: 現在、このコードを実行して出力を表示することはできません。 これが機能するかどうかを確認する唯一の方法は、それをアプリケーション (aspx ファイル) に含めることです。 これについては後続のトピックで説明します。

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

前のセクションでは、カスタム Web コントロールを作成する方法を説明しました。 これは以下を表示するために使用できますwing Web フォーム内の XNUMX 行

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

カスタム「コントロール」を作成したら、それを Web アプリケーションで使用する必要があります。 最初のステップは、アプリケーション (Demo.aspx) にコンポーネントを登録することです。 これは、ASP.Net アプリケーションのカスタム Web コントロールで使用するための前提条件です。

ASP.NET へのユーザー コントロールの登録

これを実現する方法を見てみましょう。 以下の手順は前のセクションの続きです。 前のセクションでは、カスタム コントロールを作成しました。 このセクションでは、コントロールを使用します。 デモ.aspx ウェブフォーム。

まず、カスタムの「コントロール」を Demo.aspx ファイルに登録します。

ステップ1) 必ず、demo.aspx ファイルを操作してください。このファイルに Web ユーザー コントロールが登録されます。これは次の方法で行うことができます double- .Net ソリューションのソリューション エクスプローラーで、demo.aspx ファイルをクリックします。

ASP.NET へのユーザー コントロールの登録

いったん double フォームをクリックすると、おそらくフォーム内に以下のコードが表示されるでしょう。これは、によって追加されたデフォルトのコードです。 Visual Studio Web フォームが ASP.Net プロジェクトに追加されるとき。

デフォルトのコードは、フォームがブラウザーで ASP.Net Web フォームとして実行できるようにするために必要なステップで構成されています。

ASP.NET へのユーザー コントロールの登録

ステップ2) 次に、ユーザー コントロールを登録するコードを追加しましょう。 以下のスクリーンショットは、上記の基本コードへのユーザー コントロールの登録を示しています。

ASP.NET へのユーザー コントロールの登録

<%@ 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>

コードの説明:-

  1. 最初の手順は、Web ユーザー コントロールを登録することです。 これは以下の基本パラメータで構成されます
    1. 「Register」キーワードは、Web ユーザー コントロールを登録するために使用されます。
    2. src パラメーターは、コントロールの名前を定義するために使用されます。この場合、それは Guru99Control.ascx です。
    3. タグ名とタグプレフィックスは、コントロールに与えられる個別の名前です。 これは、HTML ページ内を通常の HTML コントロールとして参照できるようにするために行われます。
  2. 次に、前に割り当てた 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。 以下の出力が得られます。

出力:-

ASP.NET へのユーザー コントロールの登録

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

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

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

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

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

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

Guru99Control を web.config ファイルに登録する方法を見てみましょう。

ステップ1) ソリューション エクスプローラーから web.config ファイルを開きます。 double- ファイルをクリックします。

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

web.config ファイルを開くと、次の構成が表示される場合があります。 「web.config」は次によって自動的に追加されます。 Visual Studio プロジェクトの作成時。これは、ASP.Net プロジェクトが適切に動作するために必要な基本構成です。

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

ステップ2) 次に、コンポーネントを web.config ファイルに登録しましょう。 そのためには以下の行を追加する必要があります。

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

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src ="~/Guru99Control.ascx" tagName="WebControl"/>
		</controls>
	</pages>
	</system.web>
</configuration>

登録は以下のサブステップで構成されます

  1. というタグを追加します。 これは、コントロールのすべての構成がソリューション内のすべての ASP.Net ページに適用されることを意味します。
  2. のタグは、ユーザー コントロールの構成を追加することを意味します。
  3. 次に、追加のタグを使用してユーザー コントロールを登録します。 tagPrefix、tagName、および src の残りのパラメータは以前と同じままです。

ステップ3) 忘れずに「demo.aspx」ページに移動し、Guru99 コンポーネントが登録されている制御用の行を削除してください。 この手順を実行しない場合、「Guru99Control.ascx」ファイルは「web.config」ファイルではなく「demo.aspx」ファイルから実行されます。

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

<%@ 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 構成で asp.net コントロールをグローバルに登録する

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

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

プロパティは、任意のコントロールに関連付けられたキーと値のペアです。 簡単な例を見てみましょうHTMLタグ。 タグがどのように表示されるかを示すスクリーンショットを以下に示します。

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

<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 プロパティを追加するコードを追加します。

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

<%@ 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 を割り当てることだけです。

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

!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 ユーザー コントロールに追加することもできます。