Øvelse – opret eksempelprogrammet

5 minutter

Lad os begynde at implementere designet til appen ved at oprette et nyt projekt og angive en brugergrænseflade til angivelse af projektnavnet.

Opret en løsning

Kommandolinjegrænsefladen for .NET er den nemmeste måde at oprette en web-API til ASP.NET Core på. Kommandolinjegrænsefladen forudinstalleres, når du installerer .NET SDK.

I dette undermodul skal du bruge kommandolinjegrænsefladen .NET til at oprette en web-API lokalt. Du får også en forståelse af det resulterende projekt.

Opret og udforsk et web-API-projekt

Hvis du vil konfigurere et .NET-projekt til at arbejde med en web-API, bruger vi Visual Studio Code. Visual Studio Code indeholder en integreret terminal, hvilket gør det nemt at oprette et nyt projekt. Hvis du ikke vil bruge en anden kodeeditor, kan du bruge en terminal til at køre kommandoerne i dette modul.

I Visual Studio Code skal du vælge Filer>Åbn mappe.
Opret en mappe med navnet AccessibleWeb på den ønskede placering, og vælg derefter Vælg mappe.
Åbn den integrerede terminal i Visual Studio Code ved at vælge Vis>Terminal- i hovedmenuen.
I terminalvinduet skal du kopiere og indsætte følgende kommando:
```
dotnet new webapp
```
Denne kommando opretter filerne til et grundlæggende web-API-projekt. Disse filer omfatter en C#-projektfil med navnet AccessibleWeb.csproj, som indeholder et par sider til at komme i gang.

Du modtager muligvis en prompt fra Visual Studio Code for at tilføje aktiver for at foretage fejlfinding af projektet. Vælg Ja i dialogboksen.

Du bør nu have adgang til filerne.
```
-| 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
```

Opret formularen til indtastning af data

Åbn Index.cshtml.

Erstat indholdet af siden med følgende markering.

@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>

Kør programmet

Kør programmet ved at angive følgende kommando i terminalvinduet.
```
dotnet run
```
Gå til https://localhost:5001 i webbrowseren. Du bør se startsiden for pizzarestaurantens hjemmeside. Denne side ser muligvis ok ud ved første øjekast, men den indeholder mange problemer, der begrænser dens tilgængelighed. I følgende enheder kan du finde og løse disse problemer.

Feedback

Var denne side nyttig?