Exemplarische Vorgehensweise: Konvertieren einer Web Forms-Seite in ein Benutzersteuerelement mit Hilfe von Visual J#

Artikel
04/01/2008

Wenn Sie eine Web Forms-Seite entwickelt haben und in der gesamten Anwendung auf deren Funktionalität zugreifen möchten, können Sie einige kleinere Änderungen an der Datei vornehmen, um die Seite in ein Benutzersteuerelement umzuwandeln. Webbenutzersteuerelemente sind Web Forms-Seiten sehr ähnlich und werden mit denselben Techniken erstellt. Wenn Sie eine Web Forms-Seite in ein Webbenutzersteuerelement konvertieren, erstellen Sie eine wiederverwendbare Benutzeroberflächenkomponente, die Sie in anderen Web Forms-Seiten verwenden können.

Bei dieser exemplarischen Vorgehensweise erstellen Sie eine Web Forms-Basisseite, auf der eine personalisierte Willkommensmeldung für Benutzer angezeigt wird. Wenn Sie die Seite in ein Webbenutzersteuerelement konvertieren möchten, müssen Sie einige Änderungen am Code vornehmen:

Ändern Sie die CodeBehind-Basisklasse von Page in UserControl.
Löschen Sie die Tags <html>, <head>, <body> und <form> aus der ASPX-Datei.
Ändern Sie den Typ der ASP.NET-Direktive von @ Page in @ Control.
Ändern Sie das Codebehind-Attribut, um auf die CodeBehind-Klassendatei (ascx.jsl) zu verweisen.
Ändern Sie die Dateierweiterung .aspx in .ascx.

Erstellen Sie zum Testen des Steuerelements eine neue Web Forms-Seite, fügen Sie das Steuerelement auf dieser Seite ein, und öffnen Sie die Seite in einem Browser.

Erstellen der Web Forms-Seite

Der erste Schritt besteht darin, eine Webanwendung und eine Web Forms-Seite zu erstellen.

So erstellen Sie das Projekt und das Formular

Zeigen Sie im Menü Datei auf Neu, und klicken Sie anschließend auf Projekt.
Führen Sie im Dialogfeld Neues Projekt Folgendes aus:
1. Wählen Sie im Bereich Projekttypen die Option Visual J#-Projekte.
2. Klicken Sie im Bereich Vorlagen auf ASP.NET-Webanwendung.
3. Geben Sie im Feld Speicherort den vollständigen URL der Anwendung einschließlich der Zeichenfolge http:// an, sowie den Namen des Servers. Der letzte Teil des URLs ist der Name des Projekts. Geben Sie dem Projekt für diese exemplarische Vorgehensweise den Namen Conversion. Auf dem Webserver muss IIS Version 5 oder höher sowie .NET Framework installiert sein. Wenn auf dem Computer IIS installiert ist, können Sie https://localhost als Server angeben.
  
  Tipp Wenn Sie bereits eine Projektmappe geöffnet haben, wählen Sie Projektmappe schließen aus, so dass das neue Web Forms-Projekt eine eigene Projektmappe erhält.
Wenn Sie auf OK klicken, wird im Stammverzeichnis des angegebenen Webservers ein neues Web Forms-Projekt erstellt. Zusätzlich wird im Web Forms-Designer in der Entwurfsansicht eine neue Web Forms-Seite mit der Bezeichnung WebForm1.aspx angezeigt.

Sie können jetzt einige Steuerelemente hinzufügen und Code schreiben, damit eine personalisierte Willkommensmeldung angezeigt wird.

So fügen Sie Steuerelemente hinzu und programmieren diese

Ziehen Sie von der Registerkarte Web Forms in der Toolbox ein TextBox-Steuerelement in den Designer.
Ziehen Sie ein Label-Steuerelement links neben das Textfeld. Ändern Sie im Fenster Eigenschaften die Text-Eigenschaft des Label-Steuerelements in Namen eingeben:.
Ziehen Sie ein Button-Steuerelement unter das Textfeld, und ändern Sie die Text-Eigenschaft in Eingeben.
Ziehen Sie ein zweites Label-Steuerelement unter die Schaltfläche, und löschen Sie den Standardtext, so dass die Text-Eigenschaft leer ist.
Doppelklicken Sie auf das Button-Steuerelement, um die Codeansicht mit einem hinzugefügten Button_Click-Ereignishandler zu öffnen.
Fügen Sie der Button1_Click-Prozedur folgenden Code hinzu:
```
// Visual J#
Label2.set_Text("Hi " + TextBox1.get_Text() + ", welcome to Visual Studio .NET!");
```
Schließen Sie diese Datei nicht, da Sie diese in dieser exemplarischen Vorgehensweise noch einmal verwenden.
Drücken Sie STRG+F5, um die Web Forms-Seite auszuführen und zu testen. Wenn Sie das Testen abgeschlossen haben, schließen Sie den Browser, der beim Testen der Seite geöffnet wurde.

Sie verfügen jetzt über eine Web Forms-Basisseite, die Sie in ein Webbenutzersteuerelement konvertieren können.

Konvertieren der Seite in ein Benutzersteuerelement

Da die Elemente <html>, <body> und <form> nicht in Benutzersteuerelementen enthalten sind, müssen Sie diese Elemente entfernen und sie stattdessen in die übergeordnete Web Forms-Seite einfügen. Außerdem müssen Sie den Typ der ASP.NET-Direktive auf der Web Forms-Seite von @ Page in @ Control ändern. Diese ASP.NET-Direktiven geben Einstellungen an, die vom Seiten- und Benutzersteuerelementcompiler verwendet werden. Weitere Informationen finden Sie unter Direktivensyntax.

So konvertieren Sie die Web Forms-Seite in ein Benutzersteuerelement

Wechseln Sie im Designer zu WebForm1.aspx, und wechseln Sie in die HTML-Ansicht, indem Sie am unteren Rand des Designer-Fensters auf die Registerkarte HTML klicken.

Löschen Sie die <html>-Tags, das <!doctype>-Tag, die <head>-Tags und den eingeschlossenen Inhalt sowie die <body>-Tags und die <form>-Tags aus der ASPX-Datei. Wenn Sie Visual J#verwenden, sieht der HTML-Code folgendermaßen aus:

// Visual J#
<%@ Page language="VJ#" Codebehind="WebForm1.aspx.jsl" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 168px; POSITION: absolute; TOP: 80px" runat="server"></asp:TextBox>
<asp:Label id="Label1" style="Z-INDEX: 102; LEFT: 56px; POSITION: absolute; TOP: 80px" runat="server">Enter Name:</asp:Label>
<asp:Button id="Button1" style="Z-INDEX: 104; LEFT: 216px; POSITION: absolute; TOP: 136px" runat="server" Text="Enter"></asp:Button>
<asp:Label id="Label2" style="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 200px" runat="server"></asp:Label>

Hinweis Der Code-Editor fügt Unterstreichungen ein, die normalerweise auf Probleme im Code hinweisen. Diese Markierungen werden nach Abschluss der Konvertierung nicht mehr angezeigt.

Ändern Sie den Typ der ASP.NET-Direktive von @ Page in @ Control. In einem Visual J#-Projekt sieht dies folgendermaßen aus:

// Visual J#
<%@ Control Language="VJ#" Codebehind="WebForm1.aspx.jsl" AutoEventWireup="false"
      Inherits="Conversion.WebForm1">

Ändern Sie den Codebehind-Attributverweis auf die Direktive, um anzugeben, dass die Erweiterung .aspx in .ascx geändert wird, wobei es sich um die Erweiterung für Benutzersteuerelemente handelt. In dieser exemplarischen Vorgehensweise ändern Sie den Namen des Benutzersteuerelements im Folgenden in welcome.ascx. Legen Sie daher das Codebehind-Attribut auf welcome.ascx.jsl fest.
Ändern Sie ebenso das Inherits-Attribut der Direktive, um auf <Projektname>.welcome zu verweisen.
Kehren Sie zur Datei WebForm1.aspx.jsl zurück.
Ändern Sie die Basisklasse von System.Web.UI.Page in System.Web.UI.UserControl, und ändern Sie die Public Class-Deklaration von WebForm1 in welcome.
```
// Visual J#
public class welcome extends System.Web.UI.UserControl
```
Speichern und schließen Sie die CodeBehind-Datei und die ASPX-Datei.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf WebForm1.aspx, und klicken Sie im Kontextmenü auf Umbenennen.
Ändern Sie den Dateinamen in welcome.ascx, um die neue Funktion wiederzuspiegeln. Beachten Sie, dass Sie die Dateierweiterung von .aspx in .ascx ändern müssen. Klicken Sie im Bestätigungsdialogfeld auf Ja.

Die Datei ist nun ein Webbenutzersteuerelement und kann von Web Forms-Seiten im gesamten Projekt verwendet werden.

Testen des Benutzersteuerelements

Sie können das Benutzersteuerelement testen, indem Sie eine neue Web Forms-Seite erstellen und das Steuerelement in diese einfügen.

So testen Sie das Benutzersteuerelement

Klicken Sie im Menü Projekt auf Web Form hinzufügen. Das Dialogfeld Neues Element hinzufügen wird angezeigt, in dem die Option Web Form ausgewählt ist.
Ändern Sie Name in WelcomeTest.aspx, und klicken Sie auf Öffnen. Die neue Web Forms-Seite wird im Designer geöffnet.
Ziehen Sie welcome.ascx aus dem Projektmappen-Explorer auf die Entwurfsoberfläche.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf WelcomeTest.aspx, und klicken Sie im Kontextmenü auf Als Startseite festlegen.
Drücken Sie F5, um die Web Forms-Seite auszuführen und zu testen.

Siehe auch

Einführung in Webbenutzersteuerelemente | Empfehlungen für Webbenutzersteuerelemente oder benutzerdefinierte Websteuerelemente | Entwickeln von Benutzersteuerelementen in einer CodeBehind-Datei | Exemplarische Vorgehensweisen für Web Forms

Freigeben über

Exemplarische Vorgehensweise: Konvertieren einer Web Forms-Seite in ein Benutzersteuerelement mit Hilfe von Visual J#

Erstellen der Web Forms-Seite

Konvertieren der Seite in ein Benutzersteuerelement

Testen des Benutzersteuerelements

Siehe auch

Zusätzliche Ressourcen