ASP.NET Webforms Custom Controls

Seit Ewigkeiten habe ich keine Web Forms Controls mehr geschrieben. Mit Angular.JS Direktiven wird HTML erweitert und man erhält funktionell ein HTML Control. Das kann man natürlich auch Server gerendert, mit ASP.NET.

Die Programmieraufgabe lautet ein Validierungs Control selber zu schreiben. Eine übliche Aufgabe ist ein Prompt der die Daten eventuell noch einmal anzeigt und per JA und Nein bestätigt werden kann.

Dafür benötigt man allerdings einen Mix aus Server und Client Code. Um eine einheitliche Programmier Experience zu haben, wird JavaScript um eine String.format Funktion ala .net erweitert. Das ist geklauter Code, oder wie man auch gerne sagt Open Source.

   1:   String.format = function () {
   2:              var theString = arguments[0];
   3:   
   4:              for (var i = 1; i < arguments.length; i++) {
   5:                  // "gm" = RegEx options for Global search (more than one instance)
   6:                  // and for Multiline search
   7:                  var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
   8:                  theString = theString.replace(regEx, arguments[i]);
   9:              }
  10:              return theString;

 

Als nächstes wird eine Klasse von CustomValidator geerbt. Im Kern muss nur die Prerender Methode überschrieben werden, die HTML und JavaScript in den Client rendert.

   1:  Imports System.ComponentModel
   2:   
   3:  <DefaultProperty("PromptMessage")>
   4:  Public NotInheritable Class PromptValidator
   5:      Inherits CustomValidator
   6:      <DefaultValue("")>
   7:      Public Property PromptMessage() As String
   8:   
   9:   
  10:      Protected Overrides Sub OnPreRender(e As EventArgs)
  11:          Dim message = String.Concat("""", Me.PromptMessage, """")
  12:   
  13:          If PromptMessage.Contains("{0}") AndAlso Me.ControlToValidate <> "" Then
  14:              message = String.Concat("String.format(""", Me.PromptMessage, """, args.Value)")
  15:          End If
  16:   
  17:          Me.ClientValidationFunction = String.Concat("
new Function('sender', 'args', 'args.IsValid = confirm("
, message, ")')")
  18:          Me.EnableClientScript = True
  19:          MyBase.OnPreRender(e)
  20:      End Sub

 

Bereits ab diesem Zeitpunkt  befindet sich das neue Control in der Werkzeugleiste von Visual Studio und kann per Drag&Drop auf das Web Formular gezogen werden.

image

Auch wenn der Designer nicht perfekt ist, zeigt er das Steuerlement korrekt an. Im Quellecode kann man das registrierte Präfix erkennen.

   1:  <%@ Register Assembly="WebApplication5" Namespace="WebApplication5" TagPrefix="ppedv" %>
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head runat="server">
   4:  ...    </head>
   5:   
   6:  <body>
   7:  <form id="form1" runat="server">
   8:  <asp:TextBox runat="server" ID="text1"></asp:TextBox>
   9:  <ppedv:PromptValidator runat="server" PromptMessage="Ihr Wert {0}?"
  10:           ErrorMessage="Ganz falsch" ControlToValidate="text1" 
  11:          ValidateEmptyText="true"/>
  12:          

Profis werden Ihre Controls in Assemblys kompilieren und das registrieren zentral in der web.config vornehmen. Alles in allem trotz fehlender Übung schnell und einfach von der Hand gegangen.

Übrigens werden Web Forms Schulungen noch immer gebucht.

Kommentare sind geschlossen