Lezione 6 – HomePage editing HTML/RAZOR
Le caratteristiche essenziali per una HomePage sono: l’aspetto gradevole e funzionale, accesso ai contenuti del sito e velocità di caricamento. Per ottenere questo risultato, ormai da diversi anni, Visual Studio mette a disposizione il potentissimo foglio stile Bootstrap, inizialmente sviluppato per Twitter ed ora aggiornato regolarmente da un team di sviluppatori. Con VS2022 viene utilizzato Bootstrap 5.
In un progetto MVC Core (.Net 6.x) la pagina iniziale o HomePage è la View /Home/Index. Per capire come viene composta e definita dobbiamo entrare nella logica MVC e dobbiamo passare prima per il Controller (HomeController) dove viene eseguito il codice c#, per poi passare alla View dati per la visualizzazione. Le View devono essere nel folder Views/[NomeController] per essere trovate dal Controller ed avere il nome del metodo Action e l’estensione .cshtml. Le View condivise sono nel folder Views/Shared.
Nel HomeController troviamo l’Action Index() che rimanda direttamente a Views/Index.cshtml senza creare o modificare dati di visualizzazione.
Fermiamoci un momento al contenuto di Index.cshtml. Sopra al codice HTML c’è un’assegnazione alla variabile ViewData[“Title”] con il valore “Home Page”. Questa assegnazione è racchiusa all’interno di una dichiarazione “@{ … }” che contraddistingue un blocco Razor. All’interno dei blocchi Razor viene eseguito il codice C# al di fuori del Controller. Il simbolo @ identifica il markup Razor. Inoltre è possibile visualizzare i valori in HTML facendo riferimento al valore con il simbolo @. Modifichiamo semplicemente il codice di Index.cshtml per capire la sintassi.
@{
ViewData["Title"] = "Pagina Home";
}
<div class="text-center">
<h1 class="display-4">@ViewData["Title"]</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
Premiamo il tasto F5 per lanciare il Debug e visualizziamo la HomePage modificata.
Nella pagina la modifica ha comportato che il titolo in alto della scheda nel browser è cambiato, ViewData[“Title”] contiene appunto il valore del titolo della pagina, e la Heading Tag <h1> … </h1> adesso visualizza il valore di ViewData[“Title”].
Un’altra cosa da considerare è il contenuto completo della pagina. Il alto abbiamo una Menu Bar che noi non abbiamo assegnato. Da dove proviene?
Nelle Views ci sono degli automatismi che ci aiutano a ridurre il codice da scrive. I primi sono i file _ViewImports.cshtml che contiene dei rifermenti ai namespace dell’applicazione, e _ViewStart.cshtml che contiene l’assegnazione a Layout dell’oggetto Microsoft.AspNetCore.Mvc.Razor.RazorPageBase del valore “_Layout”. In pratica inseriscono in testa ad ogni View questo codice.
@using FoodShop
@using FoodShop.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_Layout";
}
Il valore “_Layout” fa riferimento alla pagina Views/Shared/_Layout.cshtml che contiene le Tag di testa e coda che contraddistinguono le pagine HTML e che per tutte le pagine da visualizzare devono avere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - FoodShop</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/FoodShop.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">FoodShop</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - FoodShop - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Possiamo vedere la definizione del DOCTYPE. All’interno della tag <head> le <link> tag per caricare i fogli stile bootstrap.min.css, ecc. All’interno della tag <body> quella per la definizione del menu oltre a una tag <partial name="_LoginPartial" /> che permette di includere una Partial View chiamata _LoginPartial.cshtml e più in basso la chiamata Razor “@RenderBody()”per la visualizzazione (inclusione) del contenuto della View (in questo caso Index.cshtml). Sotto quella che sarà visualizzata come barra di footer e le tag script per includere il codice Javascript delle librerie necessarie alla visualizzazione della pagina.
Ultima considerazione sull’esecuzione della Web App MVC. In fondo al file Program.cs troviamo l’indirizzamento (MapControllerRoute) che dà i parametri di default al controller, view, parametro ({controller=Home}/{action=Index}/{id?}") con il quale si definisce il Controller di default come “Home”, la View di default come “Index” e il parametro di default come “id”.
Quindi se accediamo al nostro sito con l’URL “http://www.nomesito.host” l’effetto sarà “http://www.nomesito.host/Home/Index”. Se accediamo ad un’altra pagina accedendo solo al controller “http://www.nomesito.host/Prodotti” avrà lo stesso effetto che accedere a “http://www.nomesito.host/Prodotti/Index”. E se accedessimo ad un dato specifico con “http://www.nomesito.host/Prodotti/Dettaglio” sarà come inserire alla fine della URL il valore della variabile “id” da utilizzare all’interno della action e poi della pagina “Dettaglio” (“http://www.nomesito.host/Prodotti/Dettaglio/1”).
Lezioni Food Shop
Inserite le prime lezioni
1/23/2022 12:00:00 AM
Inizia una nuova serie di Lezioni per la realizzazione di siti (Web App) per la vendita onli ...