Arbeiten mit HTML-Formularen auf ASP.NET Web Pages Websites (Razor)

Artikel
07/13/2023

In diesem Artikel wird beschrieben, wie Sie ein HTML-Formular (mit Textfeldern und Schaltflächen) verarbeiten, wenn Sie auf einer ASP.NET Web Pages -Website (Razor) arbeiten.

Was Sie lernen:

Erstellen eines HTML-Formulars

Lesen von Benutzereingaben aus dem Formular

Überprüfen der Benutzereingabe.

Wiederherstellen von Formularwerten nach dem Übermitteln der Seite

Dies sind die ASP.NET Programmierkonzepte, die im Artikel vorgestellt werden:

Das Request-Objekt.

Eingabevalidierung.

HTML-Codierung.

Im Tutorial verwendete Softwareversionen

ASP.NET Web Pages (Razor) 3

Dieses Tutorial funktioniert auch mit ASP.NET Web Pages 2.

Erstellen eines einfachen HTML-Formulars

Erstellen Sie eine neue Website.

Erstellen Sie im Stammordner eine Webseite mit dem Namen Form.cshtml , und geben Sie das folgende Markup ein:

<!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <fieldset>
          <legend>Add Customer</legend>
          <div>
            <label for="CompanyName">Company Name:</label>
            <input type="text" name="CompanyName" value="" />
          </div>
          <div>
            <label for="ContactName">Contact Name:</label>
            <input type="text" name="ContactName" value="" />
          </div>
          <div>
            <label for="Employees">Employee Count:</label>
            <input type="text" name="Employees" value="" />
          </div>
          <div>
            <label>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

Starten Sie die Seite in Ihrem Browser. (Klicken Sie in WebMatrix im Arbeitsbereich Dateien mit der rechten Maustaste auf die Datei, und wählen Sie dann Im Browser starten aus.) Es wird ein einfaches Formular mit drei Eingabefeldern und einer Schaltfläche "Senden " angezeigt.

Wenn Sie an diesem Punkt auf die Schaltfläche Übermitteln klicken, geschieht nichts. Um das Formular nützlich zu machen, müssen Sie Code hinzufügen, der auf dem Server ausgeführt wird.

Lesen von Benutzereingaben aus dem Formular

Um das Formular zu verarbeiten, fügen Sie Code hinzu, der die übermittelten Feldwerte liest und etwas mit ihnen ausführt. In diesem Verfahren erfahren Sie, wie Sie die Felder lesen und die Benutzereingabe auf der Seite anzeigen. (In einer Produktionsanwendung erledigen Sie in der Regel interessantere Dinge mit Benutzereingaben. Dies wird im Artikel über die Arbeit mit Datenbanken beschrieben.)

Geben Sie oben in der Datei Form.cshtml den folgenden Code ein:
```
@{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}
```
Wenn der Benutzer die Seite zum ersten Mal anfordert, wird nur das leere Formular angezeigt. Der Benutzer (der Sie sein wird) füllt das Formular aus und klickt dann auf Senden. Dadurch wird die Benutzereingabe an den Server übermittelt (veröffentlicht). Standardmäßig wird die Anforderung an dieselbe Seite (nämlich Form.cshtml) weitergeleitet.

Wenn Sie die Seite dieses Mal übermitteln, werden die eingegebenen Werte direkt über dem Formular angezeigt:

Sehen Sie sich den Code für die Seite an. Sie verwenden zunächst die IsPost -Methode, um zu bestimmen, ob die Seite veröffentlicht wird, d. h. ob ein Benutzer auf die Schaltfläche Senden geklickt hat. Wenn dies ein Beitrag ist, IsPost gibt true zurück. Dies ist die Standardmethode in ASP.NET Web Pages, um zu bestimmen, ob Sie mit einer anfänglichen Anforderung (einer GET-Anforderung) oder einem Postback (einer POST-Anforderung) arbeiten. (Weitere Informationen zu GET und POST finden Sie in der Randleiste "HTTP GET and POST and the IsPost Property" in Introduction to ASP.NET Web Pages Programming Using the Razor Syntax.)

Als Nächstes erhalten Sie die Werte, die der Benutzer aus dem Request.Form -Objekt eingegeben hat, und fügen Sie sie für später in Variablen ein. Das Request.Form -Objekt enthält alle Werte, die mit der Seite übermittelt wurden, die jeweils durch einen Schlüssel identifiziert wurden. Der Schlüssel entspricht dem name Attribut des Formularfelds, das Sie lesen möchten. Zum Lesen des companyname Felds (Textfeld) verwenden Request.Form["companyname"]Sie beispielsweise .

Formularwerte werden im Request.Form Objekt als Zeichenfolgen gespeichert. Wenn Sie also mit einem Wert als Zahl oder datum oder einem anderen Typ arbeiten müssen, müssen Sie ihn aus einer Zeichenfolge in diesen Typ konvertieren. Im Beispiel wird die AsInt -Methode von Request.Form verwendet, um den Wert des Mitarbeiterfelds (das eine Mitarbeiteranzahl enthält) in eine ganze Zahl zu konvertieren.
Starten Sie die Seite in Ihrem Browser, füllen Sie die Formularfelder aus, und klicken Sie auf Übermitteln. Auf der Seite werden die eingegebenen Werte angezeigt.

Tipp

HTML-Codierung für Darstellung und Sicherheit

HTML hat spezielle Verwendungsmöglichkeiten für Zeichen wie <, >und &. Wenn diese Sonderzeichen dort angezeigt werden, wo sie nicht erwartet werden, können sie das Erscheinungsbild und die Funktionalität Ihrer Webseite ruinieren. Beispielsweise interpretiert der Browser das < Zeichen (es sei denn, es folgt ein Leerzeichen) als Anfang eines HTML-Elements, z. B <b> . oder <input ...>. Wenn der Browser das Element nicht erkennt, verwirft er einfach die Zeichenfolge, die mit < beginnt, bis er etwas erreicht, das er wieder erkennt. Natürlich kann dies zu einem seltsamen Rendering auf der Seite führen.

Die HTML-Codierung ersetzt diese reservierten Zeichen durch einen Code, den Browser als das richtige Symbol interpretieren. Beispielsweise wird das < Zeichen durch < und das > Zeichen durch >ersetzt. Der Browser rendert diese Ersatzzeichenfolgen als die Zeichen, die Angezeigt werden sollen.

Es empfiehlt sich, die HTML-Codierung jedes Mal zu verwenden, wenn Sie Zeichenfolgen (Eingaben) anzeigen, die Sie von einem Benutzer erhalten haben. Andernfalls kann ein Benutzer versuchen, ihre Webseite dazu zu bringen, ein böswilliges Skript auszuführen oder etwas anderes zu tun, das die Sicherheit Ihrer Website gefährdet oder das ist einfach nicht das, was Sie beabsichtigen. (Dies ist besonders wichtig, wenn Sie Benutzereingaben übernehmen, sie irgendwo speichern und sie später anzeigen – z. B. als Blogkommentar, Benutzerüberprüfung oder ähnliches.)

Um diese Probleme zu vermeiden, codiert ASP.NET Web Pages automatisch alle Textinhalte, die Sie aus Ihrem Code ausgeben. Wenn Sie beispielsweise den Inhalt einer Variablen oder eines Ausdrucks mithilfe von Code wie @MyVaranzeigen, codiert ASP.NET Web Pages die Ausgabe automatisch.

Überprüfen der Benutzereingabe

Benutzer machen Fehler. Sie bitten sie, ein Feld auszufüllen, und sie vergessen dies, oder Sie bitten sie, die Anzahl der Mitarbeiter einzugeben, und geben stattdessen einen Namen ein. Um sicherzustellen, dass ein Formular vor der Verarbeitung ordnungsgemäß ausgefüllt wurde, überprüfen Sie die Eingabe des Benutzers.

In diesem Verfahren wird gezeigt, wie Sie alle drei Formularfelder überprüfen, um sicherzustellen, dass der Benutzer sie nicht leer gelassen hat. Außerdem überprüfen Sie, ob der Wert für die Mitarbeiteranzahl eine Zahl ist. Wenn Fehler vorhanden sind, wird eine Fehlermeldung angezeigt, die dem Benutzer mitteilt, welche Werte die Überprüfung nicht bestanden haben.

Ersetzen Sie in der Datei Form.cshtml den ersten Codeblock durch den folgenden Code:

@{
    Validation.RequireField("companyname", "Company name is required.");
    Validation.RequireField("contactname", "Contact name is required.");
    Validation.RequireField("employees", "Employee count is required.");
    Validation.Add("employees", Validator.Integer());

    if (IsPost)  {
        var companyname = Request.Form["companyname"];
        var contactname = Request.Form["contactname"];
        var employeecount = Request.Form["employees"];
        if(Validation.IsValid()){
            <text>
              You entered: <br />
              Company Name: @companyname <br />
              Contact Name: @contactname <br />
              Employee Count: @employeecount <br />
            </text>
        }
    }
}

Zum Überprüfen der Benutzereingabe verwenden Sie das Validation Hilfsprogramm. Sie registrieren erforderliche Felder, indem Sie aufrufen Validation.RequireField. Sie registrieren andere Validierungstypen, indem Sie das zu überprüfende Feld und den Typ der durchzuführenden Überprüfung aufrufen Validation.Add und angeben.

Wenn die Seite ausgeführt wird, führt ASP.NET die gesamte Überprüfung für Sie durch. Sie können die Ergebnisse überprüfen, indem Validation.IsValidSie aufrufen, was true zurückgibt, wenn alles übergeben wurde, und false, wenn ein Feld die Überprüfung fehlgeschlagen ist. In der Regel rufen Sie auf Validation.IsValid , bevor Sie eine Verarbeitung für die Benutzereingabe ausführen.

Aktualisieren Sie das <body> Element, indem Sie drei Aufrufe der Html.ValidationMessage -Methode wie folgt hinzufügen:

<body>
  <form method="post">
    <fieldset>
      <legend>Add Customer</legend>
      <div>
         <label for="CompanyName">Company Name:</label>
         <input type="text" name="CompanyName" value="" />
         @Html.ValidationMessage("companyname")
      </div>
      <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName" value="" />
         @Html.ValidationMessage("contactname")
      </div>
      <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees" value="" />
         @Html.ValidationMessage("employees")
      </div>
      <div>
         <label>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

Um Validierungsfehlermeldungen anzuzeigen, können Sie Html aufrufen.ValidationMessage und übergeben Sie den Namen des Felds, für das Sie die Nachricht verwenden möchten.

Führen Sie die Seite aus. Lassen Sie die Felder leer, und klicken Sie auf Übermitteln. Fehlermeldungen werden angezeigt.
Fügen Sie dem Feld Mitarbeiteranzahl eine Zeichenfolge (z. B. "ABC") hinzu, und klicken Sie erneut auf Übermitteln . Dieses Mal wird ein Fehler angezeigt, der angibt, dass die Zeichenfolge nicht das richtige Format hat, nämlich eine ganze Zahl.

ASP.NET Web Pages bietet mehr Optionen zum Überprüfen von Benutzereingaben, einschließlich der Möglichkeit, die Überprüfung automatisch mithilfe eines Clientskripts durchzuführen, sodass Benutzer sofortiges Feedback im Browser erhalten. Weitere Informationen finden Sie weiter unten im Abschnitt Zusätzliche Ressourcen .

Wiederherstellen von Formularwerten nach Postbacks

Als Sie die Seite im vorherigen Abschnitt getestet haben, haben Sie möglicherweise bemerkt, dass bei einem Validierungsfehler alles, was Sie eingegeben haben (nicht nur die ungültigen Daten), weg war und Sie Werte für alle Felder erneut eingeben mussten. Dies veranschaulicht einen wichtigen Punkt: Wenn Sie eine Seite übermitteln, sie verarbeiten und die Seite dann erneut rendern, wird die Seite von Grund auf neu erstellt. Wie Sie gesehen haben, bedeutet dies, dass alle Werte verloren gehen, die sich auf der Seite befanden, als sie übermittelt wurde.

Sie können dies jedoch problemlos beheben. Sie haben Zugriff auf die übermittelten Werte (im Request.Form -Objekt, sodass Sie diese Werte wieder in die Formularfelder füllen können, wenn die Seite gerendert wird.

Ersetzen Sie in der Datei Form.cshtml die value Attribute der <input> Elemente mithilfe des value Attributs.:

<!DOCTYPE html>
<html>
  <head>
    <title>Customer Form</title>
  </head>
  <body>
    <form method="post">
      <fieldset>
        <legend>Add Customer</legend>
        <div>
          <label for="CompanyName">Company Name:</label>
          <input type="text" name="CompanyName"
                 value="@Request.Form["companyname"]"  />
          @Html.ValidationMessage("companyname")
        </div>
        <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName"
                value="@Request.Form["contactname"]" />
         @Html.ValidationMessage("contactname")
        </div>
        <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees"
                value="@Request.Form["employees"]" />
         @Html.ValidationMessage("employees")
        </div>
        <div>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

Das value Attribut der <input> Elemente wurde so festgelegt, dass der Feldwert dynamisch aus dem Request.Form Objekt gelesen wird. Wenn die Seite zum ersten Mal angefordert wird, sind die Werte im Request.Form Objekt alle leer. Dies ist in Ordnung, da das Formular auf diese Weise leer ist.

Starten Sie die Seite in Ihrem Browser, füllen Sie die Formularfelder aus, oder lassen Sie sie leer, und klicken Sie auf Übermitteln. Eine Seite mit den übermittelten Werten wird angezeigt.

Freigeben über