ASP.NET Web Forms-Tutorial: Beispiele für Benutzersteuerelemente

In ASP.Net ist es möglich, wiederverwendbaren Code zu erstellen. Der wiederverwendbare Code kann an vielen Stellen verwendet werden, ohne dass der Code erneut geschrieben werden muss.

Der wiederverwendbare Code trägt dazu bei, den Zeitaufwand des Entwicklers nach dem Schreiben des Codes zu reduzieren. Es kann einmal durchgeführt und an mehreren Stellen wiederverwendet werden.

Erstellen Sie eine Benutzersteuerung in ASP.Net

ASP.Net bietet die Möglichkeit, Websteuerelemente zu erstellen. Diese Steuerelemente enthalten Code, der wiederverwendet werden kann. Es kann je nach Anforderung anwendungsübergreifend eingesetzt werden.

Schauen wir uns ein Beispiel an, wie wir in ASP.Net ein Webbenutzersteuerelement erstellen können

In unserem Beispiel,

  • Wir werden ein Web-Control erstellen.
  • Es wird zum Erstellen einer Header-Komponente verwendet.
  • Es enthält den unten genannten Text. „Guru99-Tutorials“ Dieses Tutorial ist für ASP.Net.

Lassen Sie uns mit unserer aktuellen Webanwendung arbeiten, die in den vorherigen Abschnitten erstellt wurde. Führen Sie die folgenden Schritte aus, um ein Webbenutzersteuerelement zu erstellen.

Schritt 1) Der erste Schritt besteht darin, ein Webbenutzersteuerelement zu erstellen und es unserer Visual Studio-Lösung hinzuzufügen.

Erstellen Sie eine Benutzersteuerung in ASP.Net

  1. Gehen Sie in Visual Studio zum Solution Explorer und klicken Sie mit der rechten Maustaste auf die DemoApplication-Lösung
  2. Wählen Sie den Menüpunkt Hinzufügen->Neues Element

Schritt 2) Im nächsten Schritt müssen wir die Option zum Erstellen einer Webbenutzersteuerung auswählen

Erstellen Sie eine Benutzersteuerung in ASP.Net

  1. Im Projektdialogfeld werden verschiedene Optionen zum Erstellen unterschiedlicher Komponententypen angezeigt. Klicken Sie auf der linken Seite auf die Option „Web“.
  2. Wenn wir auf die Option „Web“ klicken, sehen Sie eine Option für „Web Forms-Benutzersteuerung“. Klicken Sie auf diese Option.
  3. Anschließend geben wir dem Web Control einen Namen „Guru99Control“.
  4. Klicken Sie abschließend auf die Schaltfläche „Hinzufügen“, damit Visual Studio das Webbenutzersteuerelement zu unserer Lösung hinzufügt.

Sie werden sehen, dass „Guru99Control“ zur Lösung hinzugefügt wurde.

Erstellen Sie eine Benutzersteuerung in ASP.Net

Schritt 4) Jetzt ist es an der Zeit, den benutzerdefinierten Code zum Web-Benutzersteuerelement hinzuzufügen. Unser Code basiert auf reiner HTML-Syntax. Fügen Sie den folgenden Code zur Datei „Guru99Control.ascx“ hinzu

Erstellen Sie eine Benutzersteuerung in ASP.Net

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

Code-Erklärung:-

  1. In unserer Web Control-Datei erstellen wir zunächst ein Tabellenelement. Hier werden zwei Textzeilen gespeichert, die zur Anzeige verwendet werden
  • „Guru99-Tutorials“ und
  • „Dieses Tutorial ist für ASP.Net.“
  1. Als nächstes definieren wir unsere erste Tabellenzeile und geben den Text als „Guru99 Tutorials“ ein.
  2. Anschließend definieren wir unsere zweite Tabellenzeile und geben den Text als „Dieses Tutorial ist für ASP.Net“ ein.

HINWEIS: Jetzt können wir diesen Code nicht ausführen und die Ausgabe anzeigen. Die einzige Möglichkeit, herauszufinden, ob dies funktioniert, besteht darin, es in unsere Anwendung (ASPX-Datei) einzubinden. Wir werden dies im folgenden Thema sehen.

Registrieren von Benutzersteuerelementen in einem ASP.NET-Webformular

Im vorherigen Abschnitt haben wir gesehen, wie wir ein benutzerdefiniertes Websteuerelement erstellen können. Dies kann verwendet werden, um die folgenden zwei Zeilen in einem Webformular anzuzeigen

  • „Guru99-Tutorials“
  • „Dieses Tutorial ist für ASP.Net.“

Sobald das benutzerdefinierte „Steuerelement“ erstellt ist, müssen wir es in unserer Webanwendung verwenden. Der erste Schritt besteht darin, die Komponente in unserer Anwendung (Demo.aspx) zu registrieren. Dies ist die Voraussetzung für die Verwendung in jeder benutzerdefinierten Websteuerung in einer ASP.Net-Anwendung.

Registrieren von Benutzersteuerelementen auf einem ASP.NET

Schauen wir uns an, wie wir dies erreichen können. Die folgenden Schritte sind eine Fortsetzung des vorherigen Abschnitts. Im vorherigen Abschnitt haben wir unser benutzerdefiniertes Steuerelement erstellt. In diesem Abschnitt verwenden wir das Steuerelement in unserem Demo.aspx Web-Formular.

Zuerst registrieren wir unser benutzerdefiniertes „Steuerelement“ in der Datei Demo.aspx.

Schritt 1) Stellen Sie sicher, dass Sie an der Datei demo.aspx arbeiten. In dieser Datei wird das Webbenutzersteuerelement registriert. Dies können Sie tun, indem Sie im Solution Explorer Ihrer .Net-Lösung auf die Datei demo.aspx doppelklicken.

Registrieren von Benutzersteuerelementen auf einem ASP.NET

Wenn Sie auf das Formular doppelklicken, wird Ihnen wahrscheinlich der folgende Code im Formular angezeigt. Dies ist der Standardcode, der von Visual Studio hinzugefügt wird, wenn einem ASP.Net-Projekt ein Webformular hinzugefügt wird.

Der Standardcode besteht aus Schritten, die erforderlich sind, um sicherzustellen, dass das Formular als ASP.Net-Webformular im Browser ausgeführt werden kann.

Registrieren von Benutzersteuerelementen auf einem ASP.NET

Schritt 2) Fügen wir nun unseren Code hinzu, um die Benutzersteuerung zu registrieren. Der Screenshot unten zeigt die Registrierung des Benutzersteuerelements für den obigen Basiscode.

Registrieren von Benutzersteuerelementen auf einem 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>

Code-Erklärung:-

  1. Der erste Schritt besteht darin, die Webbenutzersteuerung zu registrieren. Dies umfasst die folgenden Grundparameter
    1. Das Schlüsselwort „Register“ wird zum Registrieren der Webbenutzersteuerung verwendet.
    2. Der Parameter src wird verwendet, um den Namen des Steuerelements zu definieren, in unserem Fall Guru99Control.ascx.
    3. Der Tagname und das Tagprefix sind individuelle Namen, die dem Steuerelement zugewiesen werden. Dies geschieht, damit sie als normales HTML-Steuerelement auf HTML-Seiten verweisen können.
  2. Als Nächstes verweisen wir über den zuvor zugewiesenen TagPrefix:TagName auf unser Web-Benutzersteuerelement. Der TagPrefix:TagName ist ein Indikator dafür, dass wir unser benutzerdefiniertes Websteuerelement verwenden möchten. Wenn die Seite vom Webserver verarbeitet wird, können Sie sehen, dass wir das Tag TWebControl:WebControl verwendet haben. Anschließend wird das „Guru99Control“ entsprechend verarbeitet. In unserem Beispiel ist es TWebControl:WebControl.
    1. Dem Steuerelement „Header“ wird eine optionale ID zugewiesen. Im Allgemeinen empfiehlt es sich, einem HTML-Steuerelement eine ID zuzuweisen.
    2. Zum Schluss noch das Attribut runat=server, damit das Steuerelement auf dem Webserver ausgeführt wird. Für alle ASP.Net-Steuerelemente ist dies das Standardattribut. Alle ASP.Net-Steuerelemente (auch benutzerdefinierte Steuerelemente) müssen auf dem Server ausgeführt werden. Ihre Ausgabe wird dann vom Server an den Client gesendet und entsprechend im Browser angezeigt.

Wenn der obige Code festgelegt ist und das Projekt mit ausgeführt wird Visual Studio. Sie erhalten die folgende Ausgabe.

Ausgabe:-

Registrieren von Benutzersteuerelementen auf einem ASP.NET

Die im Browser angezeigte Ausgabemeldung zeigt, dass das Web-Benutzersteuerelement erfolgreich ausgeführt wurde.

Registrieren Sie asp.net-Steuerelemente global in der Webkonfigurationskonfigurationsdatei asp

Manchmal möchte man möglicherweise Benutzersteuerelemente auf mehreren Seiten einer .NET-Anwendung verwenden. An diesem Punkt möchten Sie nicht weiterhin Benutzersteuerelemente auf jeder einzelnen ASP.Net-Seite registrieren.

  • In .Net können Sie die Registrierung in der Datei „web.config“ durchführen.
  • Die Datei web.config ist eine gemeinsame Konfigurationsdatei, die von allen Webseiten im .Net-Projekt verwendet wird.
  • Es enthält die erforderlichen Konfigurationsdetails für das ASP.Net-Webprojekt. Eine häufige Konfiguration in der Datei web.config ist beispielsweise die Ziel-Framework-Parameter.
  • Dieser Parameter wird verwendet, um die von der Anwendung verwendete .Net-Framework-Version zu identifizieren.

Unten finden Sie eine Momentaufnahme des Standardcodes in der Datei web.config. Der hervorgehobene Teil ist der Ziel-Framework-Teil.

Registrieren Sie asp.net-Steuerelemente global in der Webkonfiguration

Mal sehen, wie wir unser Guru99Control in der web.config-Datei registrieren können.

Schritt 1) Öffnen Sie die Datei web.config im Lösungs-Explorer, indem Sie auf die Datei doppelklicken.

Registrieren Sie asp.net-Steuerelemente global in der Webkonfiguration

Wenn Sie die Datei web.config öffnen, sehen Sie möglicherweise die folgende Konfiguration. Die Datei „web.config“ wird von Visual Studio automatisch hinzugefügt, wenn das Projekt erstellt wird. Dies ist die grundlegende Konfiguration, die erforderlich ist, damit das ASP.Net-Projekt ordnungsgemäß funktioniert.

Registrieren Sie asp.net-Steuerelemente global in der Webkonfiguration

Schritt 2) Registrieren wir nun unsere Komponente in der Datei web.config. Dazu müssen wir die folgenden Zeilen hinzufügen.

Registrieren Sie asp.net-Steuerelemente global in der Webkonfiguration

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

Die Registrierung umfasst die folgenden Teilschritte

  1. Fügen Sie ein Tag mit dem Namen hinzu . Dies bedeutet, dass die gesamte Konfiguration der Steuerelemente auf alle ASP.Net-Seiten in der Lösung anwendbar ist.
  2. Der Tag bedeutet, dass Sie eine Konfiguration für die Benutzersteuerung hinzufügen.
  3. Anschließend registrieren wir das Benutzersteuerelement mit dem zusätzlichen Tag. Die übrigen Parameter von tagPrefix, tagName und src bleiben die gleichen wie zuvor.

Schritt 3) Denken Sie daran, die Seite „demo.aspx“ aufzurufen und die Kontrollzeilen zu entfernen, die die Registrierung der Guru99-Komponente enthielten. Wenn Sie diesen Schritt nicht ausführen, wird die Datei „Guru99Control.ascx“ aus der Datei „demo.aspx“ statt aus der Datei „web.config“ ausgeführt.

Registrieren Sie asp.net-Steuerelemente global in der Webkonfiguration

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

Der obige Code wird festgelegt und das Projekt mit Visual Studio ausgeführt. Sie erhalten die folgende Ausgabe.

Ausgabe:-

Registrieren Sie asp.net-Steuerelemente global in der Webkonfiguration

Die Ausgabemeldung zeigt, dass die Webbenutzersteuerung erfolgreich ausgeführt wurde.

Öffentliche Eigenschaften zu einem Websteuerelement hinzufügen

Eine Eigenschaft ist ein Schlüssel-Wert-Paar, das einem beliebigen Steuerelement zugeordnet ist. Nehmen wir ein Beispiel des Einfachen HTML-Tag. Unten sehen Sie einen Screenshot, wie das Tag aussieht.

Öffentliche Eigenschaften zu einem Websteuerelement hinzufügen

<html>
<body>
	<div style="color:#0000FF">
		  
		Demo Form
			
	</div>	
		
<body>
</html>

Mit dem div-Tag wird ein Abschnitt in einem HTML-Dokument erstellt. Der div-Tag hat eine Eigenschaft namens Stileigenschaft. Diese kann verwendet werden, um dem im div-Tag angezeigten Text einen anderen Stil zu geben. Normalerweise sehen Sie den Code für den div-Tag wie unten dargestellt.

<div style="color:#0000FF">

Das Farbattribut ist also nichts anderes als ein Schlüssel-Wert-Paar, das weitere Informationen über das Tag selbst liefert. Im obigen Fall lautet der Schlüsselname „style“ und der Schlüsselwert „color:#0000FF“.

Ebenso können Sie für Benutzersteuerelemente eigene Eigenschaften erstellen, die das Steuerelement beschreiben.

Nehmen wir ein einfaches Beispiel und bauen auf unserem „Guru99Control“ auf, das in den vorherigen Abschnitten erstellt wurde.

In unserem Beispiel fügen wir eine einfache Ganzzahleigenschaft namens MinValue hinzu. Dieser Wert stellt die Mindestanzahl von Zeichen im Text dar, der im Benutzersteuerelement angezeigt wird.

Führen wir die unten aufgeführten Schritte aus, um dies in die Tat umzusetzen.

Schritt 1) Öffnen Sie die Datei Guru99Control.ascx. Fügen Sie den Code zum Hinzufügen der MinValue-Eigenschaft hinzu.

Öffentliche Eigenschaften zu einem Websteuerelement hinzufügen

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

Code-Erklärung:-

Das Attribut „script runat=server“ wird verwendet, um anzuzeigen, dass wir einen.Net-spezifischen Code hinzufügen und dieser auf dem Webserver ausgeführt werden muss.

Dies ist für die Verarbeitung aller zum Benutzersteuerelement hinzugefügten Eigenschaften erforderlich. Anschließend fügen wir unsere Eigenschaft MinValue hinzu und geben ihr den Standardwert 0.

Schritt 2) Lassen Sie uns nun auf diese Eigenschaft in unserer Datei demo.aspx verweisen. Jetzt referenzieren wir nur noch die MinValue-Eigenschaft und weisen einen neuen Wert von 100 zu.

Öffentliche Eigenschaften zu einem Websteuerelement hinzufügen

!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>

HINWEIS: – Wenn Sie diesen Code ausführen, wird keine Ausgabe angezeigt. Dies liegt daran, dass die Ausgabe unter die Grenze von 100 Zeichen fällt.

Zusammenfassung

  • ASP.Net bietet die Möglichkeit, Benutzersteuerelemente zu erstellen. Benutzersteuerelemente werden verwendet, um Code zu haben, der in einer Anwendung mehrfach verwendet wird. Die Benutzersteuerung kann dann in der gesamten Anwendung wiederverwendet werden.
  • Das Benutzersteuerelement muss auf der ASP.Net-Seite registriert werden, bevor es verwendet werden kann.
  • Um die Benutzersteuerung auf allen Seiten einer Anwendung zu verwenden, registrieren Sie sie in der Datei web.config.
  • Eigenschaften können auch zu einem Webbenutzersteuerelement hinzugefügt werden.