Übung: Erstellen der Beispielanwendung

5 Minuten

Nun beginnen Sie mit der Implementierung des Entwurfs für die App, indem Sie ein neues Projekt erstellen und die Benutzeroberfläche zum Eingeben des Projektnamens angeben.

Erstellen einer Projektmappe

Die .NET-CLI ist die einfachste Möglichkeit zum Erstellen einer ASP.NET Core-Web-API. Die CLI ist vorinstalliert, wenn Sie das .NET SDK installiert haben.

In dieser Lerneinheit nutzen Sie die .NET-CLI, um eine Web-API lokal zu erstellen. Sie erhalten außerdem einen Überblick über das resultierende Projekt.

Erstellen und Erkunden eines Web-API-Projekts

Wir verwenden Visual Studio Code, um ein .NET-Projekt für die Arbeit mit einer Web-API einzurichten. Visual Studio Code enthält ein integriertes Terminal, mit dem das Erstellen eines neuen Projekts ganz einfach ist. Wenn Sie keinen anderen Code-Editor verwenden möchten, können Sie die Befehle in diesem Modul in einem Terminal ausführen.

Klicken Sie in Visual Studio Code auf Datei>Ordner öffnen.
Erstellen Sie einen Ordner namens AccessibleWeb an einem Speicherort Ihrer Wahl, und wählen Sie dann Ordner auswählen aus.
Öffnen Sie das integrierte Terminal in Visual Studio Code, indem Sie im Hauptmenü auf Ansicht>Terminal klicken.
Kopieren Sie den folgenden Befehl, und fügen Sie ihn in das Terminalfenster ein:
```
dotnet new webapp
```
Dieser Befehl erstellt die Dateien für ein einfaches Web-API-Projekt. Zu diesen Dateien gehört eine C#-Projektdatei namens AccessibleWeb.csproj, die einige Seiten für den Einstieg enthält.

Möglicherweise erhalten Sie eine Aufforderung von Visual Studio Code, Objekte hinzuzufügen, um das Projekt zu debuggen. Wählen Sie im Dialogfeld Ja aus.

Sie sollten jetzt Zugriff auf die Dateien haben.
```
-| obj
-| Pages
  -| Shared
  -| _ViewImports.cshtml
  -| _ViewStart.cshtml
  -| Error.cshtml
  -| Error.cshtml.cs
  -| Index.cshtml
  -| Index.cshtml.cs
  -| Privacy.cshtml
  -| Privacy.cshtml.cs
-| Properties
-| appsettings.Development.json
-| appsettings.json
-| ContosoPizza.csproj
-| Program.cs
-| Startup.cs
```

Erstellen des Dateneingabeformulars

Öffnen Sie Index.cshtml.

Ersetzen Sie den Inhalt der Seite durch das folgende Markup.

@page
@model IndexModel
@{
  ViewData["Title"] = "Home page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>We hope you like pizza. That's what we make here.</p>
</div>

<style>
  div.button {
    width: 200px;
    height: 50px;
    border-radius: 20px;
    background-color: lightgray;
    text-align: center;
    padding: 10px;
    margin: 50px;
  }
</style>


<h1 class="display-6">Join our mailing list</h1>
<p>Sign up to hear about all our special offers!</p>

<form name="CustomerInfo">
  <div class="container w-50 p-3">
    <div class="row">
      <div class="col-4 text-primary">
        First Name
      </div>
      <div class="col-8">
        <input type="text" id="Name">
      </div>
    </div>
    <div class="row">
      <div class="col-4 text-primary">
        Last Name
      </div>
      <div class="col-8">
        <input type="text" id="Name">
      </div>
    </div>
    <div class="row text-black-50">
      <div class="col-4">
        Phone
      </div>
      <div class="col-8">
        <input type="text" id="Phone">
      </div>
    </div>
    <div class="row text-black-50">
      <div class="col-4">
        Birthday
      </div>
      <div class="col-8">
        <input type="text" id="Birthday">
      </div>
    </div>
    <div class="row text-primary">
      <div class="col-4">
        Email Address
      </div>
      <div class="col-8">
        <input type="text" id="Email">
      </div>
    </div>
    <div class="button">
      <a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
        Submit Form
      </a>
    </div>
  </div>
</form>

<p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>
<p class="bg-light text-muted">We make it fresh every day, sometimes up to two or three times a day!<br><br>
We love to make pizza!
</p>

<div class="text-center">
  <img width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 
16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">
</div>

<p style="font-size: 30px"><b>We take your privacy seriously!</b></p>
<p class="bg-light text-muted">Unlike other pizza restaurants that share your pizza preferences, we care about your privacy.<br><br>
Want to know more? <a href="/Privacy">Click here.</a>
</p>

<p style="font-size: 30px"><b>Delivery options</b></p>
<p class="bg-light text-muted">There are a few ways we can get the pizza to you:<br>
  - Postal mail<br>
  - Dog sled<br>
  - Drone (experimental!)
</p>

Ausführen der Anwendung

Führen Sie die Anwendung aus, indem Sie den folgenden Befehl im Terminalfenster eingeben.
```
dotnet run
```
Wechseln Sie in Ihrem Webbrowser zu https://localhost:5001. Sie sollten nun die Startseite der Website für die Pizzeria angezeigt bekommen. Diese Seite mag auf den ersten Blick tadellos aussehen, weist jedoch zahlreiche Probleme auf, die die Barrierefreiheit einschränken. In den folgenden Lerneinheiten werden wir diese Probleme finden und beheben.

Weiter

Erstellen einer Projektmappe

Erstellen und Erkunden eines Web-API-Projekts

Erstellen des Dateneingabeformulars

Ausführen der Anwendung

Feedback