Login Control Aussehen und Output per Template anpassen
ASP.NET hat diverse Steuerelemente für den Login- und Registrierungsprozess.
In vielen Fällen hat man das Problem, dass die Ausgabe oder der resultierende Quelltext nicht dem entspricht, was man möchte.
Im ersten Moment gibt es da ein paar Optionen:
- Ein CustomControl vom Login Control ableiten, und die Render Methoden überschreiben
- Ein vollkommen eigenes Login Control entwickeln, evt. Membership Unterstützung einbauen
- Control Adapter benutzen
- Selber einen Control Adapter schreiben
Okay, irgendwie ist das alles zu viel Aufwand, das muss doch einfacher gehen? Ja das geht auch einfacher!
ASP.NET und die Steuerelemente an sich bieten schon von sich aus Template Unterstützung, das ohne grossen Aufwand und weitgehenst flexibel.
Ich möchte euch anhand eines kurzen Beispiels zeigen, wie einfach und doch genial diese Unterstützung ist.
Wir brauchen dazu ein Login Steuerelement, das wir je nach Belieben per Maus auf den Designer ziehen oder es selber im ASPX Code deklarieren:
<asp:Login id="loginTest" runat="server" />
Um die Template Möglichkeit zu nutzen, brauchen wir einen Tag der nicht selbstschliessend ist.
Innerhalb dieses Tags bietet uns Visual Studio die Eigenschaft "LayoutTemplate".
<asp:Login id="loginTest" runat="server">
<LayoutTemplate>
<!-- Template goes here -->
</LayoutTemplate>
</asp:Login>
In diesem Template kann man die benötigten oder optionalen Controls für das Login, und den gewünschten Html Code selber setzen.
Wir verpassen den Controls eine ID, die in der MSDN zu finden ist. Somit findet das Login Control das entsprechende Control.
Der Benutzernamen-TextBox verpassen wir die ID "UserName". Die verfügbaren IDs sind in der MSDN dokumentiert, und für das Login Control hier zu finden: Login.LayoutTemplate-Eigenschaft.
ASP.NET baut hier auf Interfaces (Schnittstellen). Für "UserName" muss das verwendete Control das Interface IEditableTextControl implementieren.
Unsere ASPX Deklaration sieht schlussendlich z.B so aus:
<asp:Login id="loginTest" runat="server">
<LayoutTemplate>
Benutzername:<br />
<br ID="UserName" Width="150" runat="server" />
Passwort:<br />
<br ID="Password" Width="150" runat="server" />
<asp:CheckBox ID="RememberMe" runat="server" />
<asp:Label
ID="lblRememberMe"
AssociatedControlID="RememberMe"
Text="Passwort speichern?"
runat="server" />
<br />
<asp:Button ID="btnSubmit" Text="Anmelden" CommandName="Login" runat="server" />
</LayoutTemplate>
</asp:Login>
Der resultierende Html Quellcode sieht jetzt um einiges sauberer aus.
Wenn die "AssociatedControlID" Eigenschaft gessetzt ist, passiert zusätzlich folgendes:
Das Label wird als "Label"-Tag und nicht als "Span"-Tag gerendert. Damit kann man das Label anklicken und die CheckBox damit bedienen.
Andere Anwendungsfälle:
Genau so wie im oben stehenden Beispiel können auch alle Steuerelemente verwendet werden, die Vorlagen unterstützen.
Bei den Login Steuerelementen sind dies zusätzlich zu dem Login Control auch noch die PasswordRecovery, CreateUserWizard und ChangePassword Controls.
Alle Steuerelemente, welche die entsprechende Schnittstelle implementieren, können im Template verwendet werden. So können wir auch eigene Steuerelemente einsetzen.
In unserem Beispiel könnten wir bspw. ein neues Control von TextBox ableiten, zusätzliche Funktionalität hinzufügen und dieses im Template nutzen.
Somit ist diese Lösung extrem flexibel einsetzbar.
Quellen und zusätzliche Links:
Korrektur:
Die CommandName Eigenschaft des Buttons muss auf "Login" gesetzt sein,
damit es erkannt wird. Ich habe den ASPX Code dahingehend angepasst.
Danke für den Hinweis an Jürgen Gutsch.