Lezione 8 – Pagine Admin
Per gestire un sito di vendite online è necessario avere un’area di amministrazione che permetta l’accesso riservato agli amministratori per l’inserimento e la modifica dei prodotti e la gestione degli utenti.
Quindi quello che andremo a fare per prima cosa è un nuovo Controller “AdminController.cs” vuoto.
Ora un nuovo layout “_AdminLayout.cshtml” con un cut-and-paste di _Layout.cshtml.
Apriamo _AdminLayout.cshtml e modifichiamo il codice per definire a sinistra dello schermo una sidebar dove inserire l’accesso diretto alle pagine di amministrazione.
Facciamo una prima operazione di semplificazione mettendo il menu all’interno di una vista parziale, per poi utilizzarlo in ogni layout. Quindi click destro su “Shared” e Add>View. Razoz View Add. Nella finestra “Add Razor View” inserite il nome del file “_MenuPartial”, il template rimane Empty e selezionate “Create as partial view”. Add.
Dopo una operazione di scaffolding (non proprio veloce) viene creato il nuovo file “_MenuPartial.cshtml” nel folder Shared e viene aperta la finestra di editing nel IDE (Integrated Development Environment). Possiamo cancellare quello che contiene ed inserire il codice della box che segue.
<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>
Che definisce come visualizzare il menu dell’applicazione e inserire nei due layout (_Layout e _AdminLayout) all’interno della tag <header> la tag per includere la vista parziale “_MenuPartial”.
<header>
<partial name="_MenuPartial" />
</header>
Per garantirci il caricamento corretto dei fogli stile e delle librerie Javascript nei diversi layout, facciamo quanto già fatto prima per il blocco <head> dove ci sono i link ai fogli stile e le tag <script> per i Javascript. Creiamo un nuovo layout parziale “_HeadLayoutPartial.cshtml” nel folder Shared ed inseriamo il contenuto del blocco <head>, aggiungendo la linea che linka il foglio stile dei font.
<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="~/lib/bootstrap-icons/font/bootstrap-icons.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/FoodShop.styles.css" asp-append-version="true" />
E sostituiamo le linee all’interno del blocco <head> di _AdminLayout.cshtml e _Layout.cshtml con la tag per includere la il layout parziale.
<head>
<partial name="_HeadLayoutPartial" />
</head>
Ora facciamo lo stesso per le linee di codice dei Javascript da includere. Creiamo un file “_JSLayoutPartial.cshtml” ed inseriamo le relative linee di codice.
<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>
Modificando i layout di conseguenza.
Adesso nel layout _AdminLayout.cshtml possiamo modifichiamo il codice per definire a sinistra dello schermo una sidebar dove inserire l’accesso diretto alle pagine di amministrazione. Dopo la tag </header> di chiusura modifichiamo la <div> che contiene @RenderBody() con il codice che segue.
<div class="pt-3 pb-1 admin_title">
<h1 class="mb-3">
Amministrazione
<i class="bi bi-tools"></i>
</h1>
</div>
<div class="row">
<div class="col-12 d-md-none d-block sidebar">
<partial name="_NavAdminPartial" />
</div>
<div class="col-md-2 d-none d-md-block border-top border-end sidebar">
<partial name="_NavAdminPartial" />
</div>
<div class="col-md-10 ps-md-0 border-top" role="main">
@RenderBody()
</div>
</div>
Cominciamo a famigliarizzare con Bootstrap 5. Generalmente le componenti sono definite dalla tag <div> e una classe. Iniziando dall’alto, “pt-3 pb-1” da un margine di “padding” di tre spazi al “top” e uno al “bottom”. Segue che la heading <h1> avrà un “margin-bottom” di tre spazi. Altra parte che incontriamo per la prima volta è l’uso delle font Bootstrap. Utilizziamo la tag <i> con la classe “bi” per identificare il font desiderato, in questo caso “bi-tools”.
Di seguito delle <div> con classi “col”. Per la gestione delle colonne Bootstrap richiede di definire un blocco “row” e all’interno le varie <div> con classe “col”. Oltre a questo possiamo decidere se visualizzare o meno una <div> a seconda del breakpoint di visualizzazione in quel momento utilizzato dal device. In particolare la prima <div> viene visualizzata per 12 colonne solo per i breakpoint al di sotto del blocco “md” (“ d-md-none d-block ”) con uno screen sotto ai 767px. Quello seguente dal blocco “md” in su, maggiore di 768px, per 2 colonne (“col-md-2 d-none d-md-block”). “border-top border-end” è abbastanza intuitivo, mette un bordo nel “top” e nel “end” (a destra). L’ultimo viene visualizzato per 12 colonne se il breakpoint è “sm” o meno e per 10 colonne da “md” in su. Per quanto riguarda @RenderBody() abbiamo già detto, consideriamo solo <partial name="_NavAdminPartial" /> che andrà ad include una View parziale che non abbiamo ancora definito. Quindi click destro su “Shared” e Add>View. Razoz View Add. Nella finestra “Add Razor View” inserite il nome del file “_NavAdminPartial”, il template rimane Empty e selezionate “Create as partial view”. Add.
Dopo una operazione di scaffolding (non proprio veloce) viene creato il nuovo file “_NavAdminPartial.cshtml” nel folder Shared e viene aperta la finestra di editing nel IDE (Integrated Development Environment). Possiamo cancellare quello che contiene ed inserire il codice della box che segue.
<div>
<a class="nav-link" asp-controller="Admin" asp-action="Index">
<i class="bi-bar-chart-line" style="font-size: 1.3rem;"></i>
Dashboard
</a>
</div>
<div class="ps-3 mb-3">
<i class="bi-server" style="font-size: 1.3rem;"></i> Database
<ul class="nav flex-column">
@*<li><a class="nav-link" asp-controller="Banners" asp-action="Index">Banner</a></li>*@
@*<li><a class="nav-link" asp-controller="PageSizers" asp-action="Index">PageSizers</a></li>*@
@*<li><a class="nav-link" asp-controller="Notificas" asp-action="Index">Notifica</a></li>*@
@*<li><a class="nav-link" asp-controller="Notizias" asp-action="Index">News</a></li>*@
@*<li><a class="nav-link" asp-controller="Countries" asp-action="Index">Countries</a></li>*@
</ul>
</div>
La lista di tag hyperlink per il momento resta commentata, vedremo poi come attivarla. Definiamo la vista Index.cshtml da inserire nel folder “Views/Admin”. Creiamo prima il folder “Admin” in “Views” e poi click destro Add>New Item… selezionando “ Razor View – Empty ”, Add.
Copiamo il codice che segue in Index.cshtml.
@{
ViewBag.Title = "Dashboard";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class="pe-5 ps-5 pt-2">
<div>
<h2>@ViewBag.Title</h2>
<hr />
</div>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="alert alert-info text-center">
<h4>Totale @ViewBag.UnoTitle</h4>
<h5>@ViewBag.Uno</h5>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="alert alert-info text-center">
<h4>Totale @ViewBag.DueTitle</h4>
<h5>@ViewBag.Due</h5>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="alert alert-info text-center">
<h4>Totale @ViewBag.TreTitle</h4>
<h5>@ViewBag.Tre</h5>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="alert alert-info text-center">
<h4>Totale @ViewBag.QuattroTitle</h4>
<h5>@ViewBag.Quattro</h5>
</div>
</div>
</div>
<div>
<br />
</div>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="alert alert-warning text-center">
<h4>Totale @ViewBag.CinqueTitle</h4>
<h5>@ViewBag.Cinque</h5>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="alert alert-warning text-center">
<h4>Totale @ViewBag.SeiTitle</h4>
<h5>@ViewBag.Sei</h5>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="alert alert-warning text-center">
<h4>Totale @ViewBag.SetteTitle</h4>
<h5>@ViewBag.Sette</h5>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="alert alert-warning text-center">
<h4>Totale @ViewBag.OttoTitle</h4>
<h5>@ViewBag.Otto</h5>
</div>
</div>
</div>
<div>
<hr />
</div>
</div>
Possiamo notare che all’inizio nel blocco Razor viene assegnato alla variabile “Layout” della “Page” il valore "~/Views/Shared/_LayoutAdmin.cshtml", che è appunto il nuovo layout creato prima. Il simbolo tilde (“~”) indica la root del sito, il seguito evidentemente indica dove sta il layout da utilizzare. Per il resto possiamo notare la variabile Viewbag utilizzata per visualizzare alcuni valori. Abbiamo già incontrato ViewData[“NomeVariabile”], ViewBag.NomeVariabile ha la stessa funzione di utilizzo tra Controller e View. Mi spiego meglio. Se dobbiamo visualizzare in una View il valore di una variabile definita nel Action di un Controller, possiamo utilizzare questa due “store data” per il trasferimento dei dati. Poi vedremo che per trasferimenti più complessi, come i dati di una lista, ci sono altre modalità.
Adesso è il momento di modificare il controller AdminController.cs. La prima cosa da inserire è la possibilità di accedere al nostro database. Subito sotto la definizione della classe “AdminController” inseriamo quanto segue.
private readonly ApplicationDbContext _context;
public AdminController(ApplicationDbContext context)
{
_context = context;
}
Definiamo una variabile privata e readonly “_context” di tipo ApplicationDbContext, dopo di che nel costruttore del controller la assegniamo il contenuto del contesto dell’applicazione, che potremo utilizzare all’interno della classe per accedere al database.
Andiamo a completare la modifica nel Action “Index”, inserendo il restante codice.
public IActionResult Index()
{
ViewBag.Uno = _context.Users.Count();
ViewBag.Due = _context.Roles.Count();
ViewBag.Tre = _context.Banners.Count();
ViewBag.Quattro = _context.Notizias.Count();
ViewBag.Cinque = _context.Countries.Count();
//ViewBag.Sei = _context..Count();
//ViewBag.Sette = _context..Count();
//ViewBag.Otto = _context..Count();
ViewBag.UnoTitle = "Users";
ViewBag.DueTitle = "Roles";
ViewBag.TreTitle = "Banners";
ViewBag.QuattroTitle = "News";
ViewBag.CinqueTitle = "Countries";
ViewBag.SeiTitle = "";
ViewBag.SetteTitle = "";
ViewBag.OttoTitle = "";
return View();
}
A ViewBag.Uno assegnamo il valore della Count() della tabella Users, ecc.
Quello che resta da fare è visualizzare nel menu la nuova pagina di Admin. Nel file _MenuPartial.cshtml aggiungiamo il codice della box dopo la tag che porta alla pagina “Privacy” del controller “Home”.
<li class="nav-item">
<a class="nav-link" asp-controller="Admin" asp-action="Index">Admin</a>
</li>
F5 per lanciare il debug e se tutto è andato bene selezioniamo la voce “Admin” del menu ed entriamo nella nuova pagina di amministrazione. Il risultato dovrebbe essere più o meno così.
La visualizzazione non è tra le migliori, possiamo migliorarla inserendo qualche direttiva di stile nel file wwwroot/css/site.css. Inseriamo i codice alla file del file.
/* Sidebar ***/
.sidebar {
color: #ffffff;
background: #750000;
font-size: large;
}
.sidebar .nav-link {
color: #ffffff;
}
.sidebar .nav-link:hover {
color: #ebebeb;
}
.admin_title {
text-align: center !important;
color: #ffffff;
background: #750000;
}
/* Sidebar ***/
Il risultato finale dovrebbe essere più o meno questo.
Nella lezione prossima lezione vedremo come ottimizzare la visualizzazione del layout e rendere l’area di Admin funzionale all’applicazione, aggiungendo nuove tabelle al database e popolandole con dati provenienti da un file Excel.
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 ...