Erstellung eines Benutzersteuerelements

Okay, wir werden ein UserControl erstellen, um Informationen über einen Community-Benutzer anzuzeigen. Fügen wir zunächst ein Benutzersteuerelement zu unserem Projekt hinzu. In Ihrem Visual Studio sollten Sie in der Lage sein, mit der rechten Maustaste auf Ihr Projekt zu klicken und Neues Element hinzufügen auszuwählen. Ein Dialogfeld wird geöffnet, und Sie sollten das Webbenutzersteuerelement aus der Liste der möglichen hinzuzufügenden Elemente auswählen. Nennen wir unser Benutzersteuerelement UserInfoBoxControl mit dem Dateinamen UserInfoBoxControl.ascx. Stellen Sie sicher, dass Sie das Kontrollkästchen aktiviert haben, das den Code in einer separaten Datei, der sogenannten CodeBehind-Datei, ablegt.

Sie sollten jetzt eine UserInfoBoxControl.ascx und eine UserInfoBoxControl.ascx.cs in Ihrem Projekt haben. Das erste ist, wo wir unser Markup ablegen, und das zweite ist unsere CodeBehind-Datei. Wenn UserInfoBoxControl.ascx noch nicht geöffnet und ausgewählt ist, tun Sie dies jetzt. Sie sehen nur eine Codezeile, die UserControl-Deklaration. Wie bereits erwähnt, zeigt dieses Steuerelement Informationen zu einem Benutzer an. Fügen Sie dazu zunächst einige Markups hinzu:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserInfoBoxControl.ascx.cs" Inherits="UserInfoBoxControl" %>
<b>Information about <%= this.UserName %></b>
<br /><br />
<%= this.UserName %> is <%= this.UserAge %> years old and lives in <%= this.UserCountry %>

Wie Sie sehen, ist alles sehr einfach. Wir haben eine Deklaration, einige Standard-Tags, einen Text und dann eine Art von Variablen. Wo kommen sie her? Nun, jetzt kommen sie aus dem Nichts, da wir sie noch nicht deklariert haben. Wir machen das besser sofort. Öffnen Sie die CodeBehind-Datei für das UserControl, dh die Datei, die auf .cs endet.

Wie Sie sehen, sieht es genauso aus wie eine CodeBehind-Datei für eine reguläre Seite, nur dass es von UserControl anstelle von Page erbt. Wir deklarieren die in unserem Markup verwendeten Baumeigenschaften und stützen sie auf drei entsprechende Felder.

private string userName;
private int userAge;
private string userCountry;

public string UserName
{
    get { return userName; }
    set { userName = value; }
}

public int UserAge
{
    get { return userAge; }
    set { userAge = value; }
}

public string UserCountry
{
    get { return userCountry; }
    set { userCountry = value; }
}

Es ist alles sehr einfach und funktioniert genauso wie ein regulärer Unterricht. Sie können sogar Methoden hinzufügen, wenn Sie Lust dazu haben! Unser Benutzersteuerelement ist jetzt tatsächlich fertig, aber wie Sie vielleicht schon erlebt haben, können wir es noch nicht verwenden. Ein Benutzersteuerelement kann nicht direkt im Browser angezeigt werden - es muss auf einer Seite enthalten sein. Wir werden das im nächsten Kapitel tun.