Ti piacciono le torte? Bene, oggi ne cucineremo una… digitale! 🍰
Sì, perché creare un’app web con ASP.NET Core è un po’ come fare una torta: ci sono ingredienti, una ricetta e, alla fine, qualcosa di gustoso da mostrare al mondo!

🎒 Cosa ti serve (Gli Ingredienti)

• Visual Studio 2022 o Visual Studio Code

• .NET 9 SDK (o versione stabile più recente)

• Un pizzico di curiosità

• (Facoltativo) Un caffè ☕ per la concentrazione

👩‍🍳 Step 1: Creiamo il Progetto

Apri il terminale (o Visual Studio 2022) e digita:

dotnet new webapp -n DolceApp -o "C:\Users\gianf\Desktop\DolceApp"

Questo comando crea una Web App Razor Pages, che è il modo più semplice per iniziare con ASP.NET Core.

Adesso lanciamo il nostro progetto. Per farlo digitiamo quest'altro comando:

dotnet run --project C:\Users\gianf\Desktop\DolceApp

Apri il browser e vai su https://localhost:5263... TADAAA! La tua torta ha iniziato a cuocere!

L'alternativa all'utilizzo dei comandi da console è quella di utilizzare la comoda interfaccia di Visual Studio che ci permette di scegliere tra diversi progetti.

Vediamo come creare lo stesso progetto utilizzando però Visual Studio:

Avviare Visual Studio e selezionare "Crea nuovo progetto"

Cercare il template del progetto con il nome di App Web ASP.NET Core

Confermare e proseguire. Date il nome di DolceApp

Selezionate la versione più recente e stabile del framework abilitando l'HTTPS

Cliccando sul pulsante Crea avrete la stessa tipologia di progetto che abbiamo visto prima da linea di comando. Visual Studio ti permette di fare entrambe le cose, ovvero utilizzare la comoda interfaccia oppure scrivere i comandi che abbiamo visto nella Console di Visual Studio. Ecco un esempio:

In questo esempio creiamo una pagina web TestPage nella cartella Pages. Per abilitare la console vai sul menu Strumenti di Visual Studio, poi Gestione pacchetti Nuget e infine Console di gestione dei pacchetti.

🧱 Step 2: Capire la Struttura del Progetto

Diamo un’occhiata agli ingredienti principali:

• Program.cs: Qui inizia tutto. È come la ciotola dove metti gli ingredienti.

• Pages/: Qui vivono le “pagine” del tuo sito, come Index.cshtml (la home) e Privacy.cshtml.

• appsettings.json: Dove tieni le "spezie segrete" (configurazioni).

bbiamo

✨ Step 3: Aggiungiamo una Pagina Personalizzata

Aggiungiamo una pagina chiamata Torta.cshtml utilizzando questo comando:

dotnet new page -n Torta -o Pages

@page
@model DolceApp.Pages.TortaModel
@{
    ViewData["Title"] = "La Mia Torta";
}

<h1>@ViewData["Title"]</h1>
<p>Questa è una torta speciale fatta con ASP.NET Core 🍓</p>

🔧 Pages/Torta.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace DolceApp.Pages
{
    public class TortaModel : PageModel
    {
        public void OnGet()
        {
            // Possiamo mettere della logica qui in futuro!
        }
    }
}

Se volete aggiungere la pagina utilizzando i comodi comandi di Visual Studio dovrete posizionarvi con il cursore sulla cartella Pages, poi selezionare Aggiungi e dall'elenco selezionare Pagina Razor; infine, selezionare Pagina Razor - Vuota.

📦 Step 4: Aggiungiamo un Form (Interazione Utente)

Ora, facciamo scegliere all’utente il gusto della torta.

🔧 Modifica Torta.cshtml

@page
@model DolceApp.Pages.TortaModel
@{
    ViewData["Title"] = "La Mia Torta";
}

<h1>@ViewData["Title"]</h1>
<p>Questa è una torta speciale fatta con ASP.NET Core 🍓</p>

<form method="post">
    <label>Qual è il tuo gusto preferito?</label>
    <input type="text" name="Gusto" />
    <button type="submit">Invia</button>
</form>

@if (Model.Gusto != null)
{
    <p>Hai scelto: <strong>@Model.Gusto</strong>! 😋</p>
}

🔧 Modifica Torta.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace DolceApp.Pages
{
    public class TortaModel : PageModel
    {
        [BindProperty]
        public string? Gusto { get; set; }

        public void OnPost()
        {
            // Qui il gusto dell’utente viene catturato dal form
        }
    }
}

🥳 Ora puoi digitare "cioccolato", "fragola" o "gorgonzola" (de gustibus!) e vedere la magia.

E se volessi cambiare l'URL che contiene il nome della pagina per renderla più intuitiva? Ad esempio ipotizziamo di volerla cambiare da https://localhost:7297/torta a https://localhost:7297/la_tua_torta ?

Modifica l’header di Torta.cshtml:

@page "/la_tua_torta"

@page "/la_tua_torta"
@model DolceApp.Pages.TortaModel
@{
    ViewData["Title"] = "La Mia Torta";
}

<h1>@ViewData["Title"]</h1>
<p>Questa è una torta speciale fatta con ASP.NET Core 🍓</p>

<form method="post">
    <label>Qual è il tuo gusto preferito?</label>
    <input type="text" name="Gusto" />
    <button type="submit">Invia</button>
</form>

@if (Model.Gusto != null)
{
    <p>Hai scelto: <strong>@Model.Gusto</strong>! 😋</p>
}

Infine, aggiungiamo il link al menu principale per poter dire la nostra sulla torta che vogliamo. La pagina _Layout.cshtml è il layout base di tutte le pagine che sono state create. Basterà aggiungere il link alla pagina Torta.cshtml. Aggiungiamo questo codice alla pagina _Layout.cshtml che trovate nella cartella Shared:

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/Torta">La tua torta</a>
</li>

📚 Conclusione

🎉 Bravo! Hai appena creato la tua prima app con ASP.NET Core, hai capito:

• Come creare e lanciare un progetto

• Come aggiungere una pagina Razor

• Come gestire input utente

• Come fare routing personalizzato