Parte 2, aggiungere un controller a un'app MVC core ASP.NET

Di Rick Anderson

Il pattern architetturale Model-View-Controller (MVC) suddivide un'app in tre componenti principali: Modello, Vista e Controller. Il pattern MVC consente di creare app più semplici da aggiornare e sottoporre a test rispetto alle app monolitiche tradizionali.

Le app basate sul pattern MVC contengono:

• Modelli: Classi che rappresentano i dati dell'app. Le classi modello usano la logica di convalida per applicare le regole business per tali dati. In genere, gli oggetti del modello recuperano e archiviano lo stato del modello in un database. In questa esercitazione, un modello Movie recupera i dati dei film da un database, li fornisce alla vista o li aggiorna. I dati aggiornati vengono scritti in un database.
• Viste: Le viste sono i componenti che visualizzano l'interfaccia utente (UI) dell'app. In genere questa interfaccia utente presenta i dati del modello.
• Controllers: Sono classi che:
  • Gestire le richieste del browser.
  • Recuperare i dati del modello.
  • Chiamare i modelli di visualizzazione che restituiscono una risposta.

In un'app MVC la visualizzazione visualizza solo le informazioni. Il controller gestisce e risponde all'input e all'interazione dell'utente. Ad esempio, il controller gestisce i segmenti url e i valori di stringa di query e passa questi valori al modello. Il modello può usare questi valori per eseguire query sul database. Ad esempio:

• https://localhost:5001/Home/Privacy: specifica il Home controller e l'azione Privacy .
• https://localhost:5001/Movies/Edit/5: è una richiesta per modificare il film con ID=5 usando il controller Movies e l'azione Edit, che sono descritti più avanti nell'esercitazione.

I dati del percorso vengono spiegati in seguito nell'esercitazione.

Il modello di architettura MVC separa un'app in tre gruppi principali di componenti: Modelli, Visualizzazioni e Controller. Questo modello consente di ottenere la separazione dei problemi: la logica dell'interfaccia utente appartiene alla visualizzazione. La logica di input risiede nel controller. La logica di business risiede nel modello. Questa separazione consente di gestire la complessità durante la creazione di un'app, perché consente di lavorare su un aspetto dell'implementazione alla volta senza influire sul codice di un altro. Ad esempio, è possibile lavorare sul codice della vista senza dipendere dal codice della logica aziendale.

Questi concetti vengono introdotti e illustrati in questa serie di esercitazioni durante la creazione di un'app per film. Il progetto MVC contiene le cartelle per i controller e le viste.

Aggiungere un controller

Visual Studio

In Esplora Soluzioni, fare clic con il pulsante destro del mouse su Controller > Aggiungi > Controller.

Nella finestra di dialogo Aggiungi nuovo elemento con scaffolding, selezionare Controller MVC - Vuoto>Aggiungi.

Nella finestra di dialogo Aggiungi nuovo elemento - MvcMovie immettere HelloWorldController.cs e selezionare Aggiungi.

Visual Studio Code

Selezionare l'icona EXPLORER e quindi fare clic con il pulsante destro del mouse su Controller > Nuovo file e assegnare al nuovo file HelloWorldController.csil nome .

Sostituire il contenuto di Controllers/HelloWorldController.cs con il codice seguente:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/
    public string Index()
    {
        return "This is my default action...";
    }
    // 
    // GET: /HelloWorld/Welcome/ 
    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}

È possibile chiamare ogni metodo public in un controller come endpoint HTTP. Nell'esempio precedente entrambi i metodi restituiscono una stringa. Notare i commenti che precedono ogni metodo.

Un endpoint HTTP:

• Un URL indirizzabile nell'applicazione web, ad esempio https://localhost:5001/HelloWorld.
• Combina:
  • Protocollo usato: HTTPS.
  • Percorso di rete del server Web, inclusa la porta TCP: localhost:5001.
  • URI di destinazione: HelloWorld.

Il primo commento indica che si tratta di un metodo HTTP GET che viene richiamato aggiungendo /HelloWorld/ all'URL di base.

Il secondo commento specifica un metodo HTTP GET che viene richiamato aggiungendo /HelloWorld/Welcome/ all'URL. Più avanti nell'esercitazione viene usato il motore di scaffolding per generare HTTP POST metodi che servono ad aggiornare i dati.

Eseguire l'app senza il debugger premendo CTRL+F5.

Aggiungere /HelloWorld al percorso nella barra degli indirizzi. Il metodo Index restituisce una stringa.

MVC richiama le classi controller e i metodi di azione all'interno di essi, a seconda dell'URL in ingresso. La logica di routing url predefinita usata da MVC usa un formato simile al seguente per determinare il codice da richiamare:

/[Controller]/[ActionName]/[Parameters]

Il formato di routing viene impostato nel Program.cs file.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Quando si accede all'app e non si forniscono segmenti di URL, per impostazione predefinita viene utilizzato il controller "Home" e il metodo "Index" specificato nella riga evidenziata nel modello sopra. Nei segmenti di URL precedenti:

• Il primo segmento di URL determina la classe di controller da eseguire. Quindi localhost:5001/HelloWorld si mappa sulla classe HelloWorld Controller.
• La seconda parte del segmento URL determina il metodo di azione per la classe. Fa quindi in modo localhost:5001/HelloWorld/Index che il Index metodo della HelloWorldController classe venga eseguito. Si noti che è necessario solo passare a localhost:5001/HelloWorld e il metodo Index viene chiamato per impostazione predefinita. Index è il metodo predefinito che verrà chiamato in un controller se un nome di metodo non viene specificato in modo esplicito.
• La terza parte del segmento di URL ( id) è relativa ai dati di route. I dati del percorso vengono spiegati in seguito nell'esercitazione.

Vai a: https://localhost:{PORT}/HelloWorld/Welcome. Sostituire {PORT} con il numero di porta.

Il metodo Welcome viene eseguito e restituisce la stringa This is the Welcome action method.... Per questo URL, il controller è HelloWorld e il metodo di azione è Welcome. Non è stata ancora usata la parte [Parameters] dell'URL.

Modificare il codice in modo da passare le informazioni dei parametri dall'URL al controller. Ad esempio: /HelloWorld/Welcome?name=Rick&numtimes=4.

Modificare il metodo Welcome in modo da includere due parametri, come illustrato nel codice seguente.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

Il codice precedente:

• Usa la funzionalità di parametro facoltativo in C# per indicare che il parametro numTimes viene impostato come predefinito su 1, se non viene passato alcun valore.
• Usa HtmlEncoder.Default.Encode per proteggere l'app da input dannoso, ad esempio tramite JavaScript.
• Usa Stringhe Interpolati in $"Hello {name}, NumTimes is: {numTimes}".

Avvia l'app e naviga verso: https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4. Sostituire {PORT} con il numero di porta.

Provare valori diversi per name e numtimes nell'URL. Il sistema di associazione di modelli MVC esegue automaticamente il mapping dei parametri denominati dalla stringa di query ai parametri nel metodo . Per altre informazioni, vedere Associazione di modelli.

Nell'immagine precedente:

• Il segmento Parameters URL non viene usato.
• name e numTimes i parametri vengono passati nella stringa di query.
• Il ? punto interrogativo nell'URL precedente è un separatore e la stringa di query segue.
• Il & carattere separa le coppie campo-valore.

Sostituire il metodo Welcome con il codice seguente:

public string Welcome(string name, int ID = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

Eseguire l'app e immettere l'URL seguente: https://localhost:{PORT}/HelloWorld/Welcome/3?name=Rick

Nell'URL precedente:

• Il terzo segmento URL corrisponde al parametro iddi route .
• Il metodo Welcome contiene un parametro id che corrisponde al modello di URL nel metodo MapControllerRoute.
• La parte finale ? avvia la stringa di query.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Nell'esempio precedente:

• Il terzo segmento URL corrisponde al parametro id di route definito nel modello di routing nel Program.cs file.
• Il metodo Welcome contiene un parametro id che corrisponde al modello di URL nel metodo MapControllerRoute.
• Il carattere finale ? (in id?) indica che il parametro id è facoltativo.

Precedente: Introduzionesuccessiva: Aggiungere una visualizzazione