Una Web App con ASP.NET Core

In questa e nella prossima lezione, esploreremo i concetti fondamentali e i passaggi necessari per lo sviluppo di un'applicazione Web con ASP.NET Core. Affronteremo sia gli aspetti del front-end che del back-end del progetto. La nostra applicazione conterrà una pagina di benvenuto che si occuperà di accogliere gli utenti e una seconda pagina che includerà un form per raccogliere i dati personali dell'utilizzatore. Impiegheremo elementi HTML per creare campi di input per il nome e l'email dell'utente. Quando l'utente compilerà il form e invierà i dati, utilizzeremo ASP.NET Core per gestire la richiesta e salvare le informazioni all'interno di un database.

Creazione di un nuovo progetto ASP.NET Core

Per prima cosa apriamo Visual Studio e selezioniamo la voce "Crea un nuovo progetto". Scegliamo "ASP.NET Core Web Application" come tipo di progetto e clicchiamo su "Avanti".

Assegniamo un nome al nostro progetto e specifichiamo la posizione in cui desideriamo salvarlo. Selezioniamo la versione più recente di .NET Core e scegliamo "App Web" come modello. Clicchiamo quindi su "Crea".

Struttura del progetto

Una volta creato il progetto, vedremo una struttura simile a questa:

• la cartella wwwroot conterrà i file statici come fogli di stile CSS e file JavaScript.
• La cartella Controllers conterrà i controller dell'applicazione.
• La cartella Views conterrà le viste dell'applicazione.
• Il file Startup.cs conterrà la configurazione iniziale dell'applicazione.

Creazione della pagina di benvenuto

Nella cartella Views andremo a creare una nuova cartella chiamata Home. All'interno della cartella Home, creiamo un nuovo file chiamato Welcome.cshtml. Apriamo quest'ultimo e aggiungiamo il codice HTML per la nostra pagina di benvenuto. Un esempio di codice di benvenuto per Welcome.cshtml potrebbe essere il seguente:

@{
    ViewData["Title"] = "Benvenuto su ASP.NET Core";
}
<h1>Benvenuto su ASP.NET Core!</h1>
<p>Questa è la tua prima vista.</p>

Creazione di una pagina con un form

Adesso, nella cartella Views, andiamo a creare una nuova cartella chiamata Data. All'interno della cartella Data, creiamo un nuovo file chiamato FormData.cshtml. Apriamo poi il file FormData.cshtml e aggiungiamo un form HTML per raccogliere i dati dall'utente, come mostrato nell'esempio proposto di seguito:

@{
    ViewData["Title"] = "Inserimento dati";
}
<h1>Inserimento dati</h1>
<form method="post" asp-action="SaveData">
    <label for="name">Nome:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Salva</button>
</form>

Creazione di un Controller per la gestione dati

Ora, nella cartella Controllers, andiamo a creare un nuovo file chiamato DataController.cs, che si occuperà di gestire i dati che preleveremo dal form HTML.
dopo averlo creato, apriamo il file DataController.cs e aggiungiamo il codice seguente:

using Microsoft.AspNetCore.Mvc;
public class DataController : Controller
{
    [HttpGet]
    public IActionResult FormData()
    {
        return View();
    }
    [HttpPost]
    public IActionResult SaveData(string name, string email)
    {
        // Salva i dati nel database
        return RedirectToAction("FormData");
    }
}

Configurazione del database

Nel paragrafo precedente abbiamo saltato volutamente la parte relativa al salvataggio dei dati nel database. Adesso, però, vedremo come configurare un database con ASP.NET Core e come utilizzarlo.

Per far questo apriamo il file chiamato appsettings.json del nostro progetto ASP.NET Core che si trova nella cartella di root. Se non dovessimo trovare il file appsettings.json, è possibile che non sia stato generato automaticamente. In tal caso, possiamo crearlo manualmente facendo clic con il tasto destro del mouse sulla cartella root e selezionando "Aggiungi" e quindi "Nuovo elemento".

Scegliamo l'opzione "File JSON" e chiamiamo il file appsettings.json. Adesso, aggiungiamo il seguente codice all'interno di quest'ultimo per configurare il nostro database:

"ConnectionStrings": {
"DefaultConnection":"Server=(localdb)\\mssqllocaldb;Database=NomeDelDatabase;
Trusted_Connection=True;MultipleActiveResultSets=true"
}

In questo codice dobbiamo sostituire il riferimento "NomeDelDatabase" con il nome che desideriamo assegnare alla base di dati. Nello specifico, vediamo adesso cosa fa ciascun elemento della stringa di connessione sopra riportata:

• DefaultConnection: è il nome assegnato a questa stringa di connessione. Può essere utilizzato per identificare la connessione predefinita nel codice della nostra applicazione.
• Server=(localdb)\mssqllocaldb: specifica il nome del server del database. In questo caso, viene utilizzato (localdb)\mssqllocaldb, che fa riferimento a un'istanza locale del database SQL Server.
• Database=NomeDelDatabase: specifica il nome del database a cui ci si desidera connettere. Come anticipato, è necessario sostituire NomeDelDatabase con il nome effettivo del database che si desidera utilizzare.
• Trusted_Connection=True: indica che viene utilizzata l'autenticazione integrata di Windows per la connessione al database. Questo significa in pratica che l'applicazione userà le credenziali di accesso dell'utente corrente per autenticarsi.
• MultipleActiveResultSets=true: abilita la possibilità di eseguire più risultati di query attivi contemporaneamente. È utile soprattutto in scenari in cui si desidera eseguire query parallele o quando si utilizzano query con risultati multipli.

Una volta configurato il database dell'applicazione è possibile passare alla fase di configurazione del provider del database. È sarà proprio da quest'ultima che partiremo nella seconda e ultima lezione dedicata al nostro esempio di Web App con ASP.NET Core.