Exerciții - Creați aplicația eșantion

5 minute

Să începem implementarea proiectării aplicației prin crearea unui proiect nou și specificarea unei interfețe de utilizator pentru introducerea numelui proiectului.

Crearea unei soluții

.NET CLI este cea mai simplă modalitate de a crea un ASP.NET API web de bază. CLI-ul este preinstalat atunci când instalați SDK -ul .NET.

În această unitate, utilizați .NET CLI pentru a crea local un API web. De asemenea, obțineți o înțelegere a proiectului rezultat.

Crearea și explorarea unui proiect API web

Pentru a configura un proiect .NET pentru a lucra cu un API web, utilizăm Visual Studio Code. Visual Studio Code include un terminal integrat, ceea ce simplifică crearea unui nou proiect. Dacă nu doriți să utilizați un alt editor de cod, puteți utiliza un terminal pentru a rula comenzile din acest modul.

În Visual Studio Code, selectați Fișier>Deschidere folder.
Creați un folder denumit AccesibilWeb în locația dorită, apoi selectați Selectațifolder .
Deschideți terminalul integrat în Visual Studio Code selectând View>Terminal din meniul principal.
În fereastra terminal, copiați și lipiți următoarea comandă:
```
dotnet new webapp
```
Această comandă creează fișierele pentru un proiect API Web de bază. Aceste fișiere includ un fișier proiect C# denumit AccessibleWeb.csproj, care include câteva pagini pentru a începe.

Este posibil să primiți o solicitare de la Visual Studio Code pentru a adăuga active pentru a depana proiectul. Selectați Da în caseta de dialog.

Acum ar trebui să aveți acces la fișiere.
```
-| 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
```

Crearea formularului de introducere a datelor

Deschideți index.cshtml.

Înlocuiți conținutul paginii cu următorul marcaj.

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

Rulați aplicația

Rulați aplicația introducând următoarea comandă în fereastra terminal.
```
dotnet run
```
Accesați https://localhost:5001 în browserul web. Ar trebui să vezi pagina de pornire a site-ului restaurantului pizza. Această pagină poate arăta OK la prima vedere, dar conține multe probleme care limitează accesibilitatea. În următoarele unități, găsiți și remediați aceste probleme.

Feedback

Această pagină a fost utilă?