Condividi tramite


Accesso ai dati del modello da un nuovo controller

di Rick Anderson

Annotazioni

Una versione aggiornata di questa esercitazione è disponibile qui usando la versione più recente di Visual Studio. La nuova esercitazione usa ASP.NET Core MVC, che offre molti miglioramenti in questa esercitazione.

Questa esercitazione illustra ASP.NET Core MVC con controller e visualizzazioni. Razor Pages è una nuova alternativa in ASP.NET Core, un modello di programmazione basato su pagine che semplifica la creazione dell'interfaccia utente Web e una maggiore produttività. È consigliabile provare l'esercitazione su Razor Pages prima della versione di MVC. Il tutorial su Razor Pages:

  • È più facile da seguire.
  • Vengono illustrate altre funzionalità.
  • È l'approccio preferito per lo sviluppo di nuove app.

In questa sezione si creerà una nuova MoviesController classe e si scriverà codice che recupera i dati dei film e lo visualizzerà nel browser usando un modello di visualizzazione.

Compilare l'applicazione prima di passare al passaggio successivo. Se non si compila l'applicazione, verrà visualizzato un errore durante l'aggiunta di un controller.

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Controller e quindi scegliere Aggiungi, quindi Controller.

Screenshot che mostra la finestra Esplora Soluzioni. Il menu di scelta rapida dalla cartella Controllers è aperto e Aggiungi è selezionato. Controller è selezionato nel sottomenu.

Nella finestra di dialogo Aggiungi scaffold, fare clic su Controller MVC 5 con viste, usando Entity Framework e quindi fare clic su Aggiungi.

Screenshot che mostra la finestra di dialogo Aggiungi Scaffold. È selezionato Controller MVC 5 con viste, utilizzando Entity Framework.

  • Selezionare Movie (MvcMovie.Models) per la classe Model.

  • Selezionare MovieDBContext (MvcMovie.Models) per la classe contesto dati.

  • Per Nome controller immettere MoviesController.

    L'immagine seguente mostra la finestra di dialogo completata.

Screenshot che mostra la finestra di dialogo Aggiungi controller con i dati di classe e nome immessi.

Fare clic su Aggiungi. Se viene visualizzato un errore, probabilmente non è stata compilata l'applicazione prima di iniziare ad aggiungere il controller. Visual Studio crea i file e le cartelle seguenti:

  • File MoviesController.cs nella cartella Controllers .
  • Una cartella Views\Movies .
  • Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml e Index.cshtml nella nuova cartella Views\Movies .

Visual Studio ha creato automaticamente i metodi di azione CRUD (creazione, lettura, aggiornamento ed eliminazione) e visualizzazioni (la creazione automatica di metodi di azione CRUD e visualizzazioni è nota come scaffolding). È ora disponibile un'applicazione Web completamente funzionante che consente di creare, elencare, modificare ed eliminare voci di film.

Eseguire l'applicazione e fare clic sul collegamento MVC Movie (o passare al Movies controller aggiungendo /Movies all'URL nella barra degli indirizzi del browser). Poiché l'applicazione si basa sul routing predefinito (definito nel file App_Start\RouteConfig.cs ), la richiesta http://localhost:xxxxx/Movies del browser viene instradata al metodo di azione predefinito Index del Movies controller. In altre parole, la richiesta http://localhost:xxxxx/Movies del browser è effettivamente uguale alla richiesta http://localhost:xxxxx/Movies/Indexdel browser . Il risultato è un elenco vuoto di film, perché non hai ancora aggiunto alcun film.

Screenshot che mostra la pagina M V C Film con un indice vuoto.

Creazione di un film

Selezionare il collegamento Crea nuovo. Immettere alcuni dettagli su un film e quindi fare clic sul pulsante Crea .

Screenshot che mostra la pagina Crea Film.

Annotazioni

È possibile che non sia possibile immettere decimali o virgole nel campo Prezzo. Per supportare la convalida di jQuery per le impostazioni locali non inglesi che usano una virgola (",") per il punto decimale e per i formati di data non statunitensi, è necessario includere globalize.js e il specifico file cultures/globalize.cultures.js (da https://github.com/jquery/globalize) e JavaScript da utilizzare con Globalize.parseFloat. Verrà illustrato come eseguire questa operazione nell'esercitazione successiva. Per il momento, immettere solo numeri interi come 10.

Facendo clic sul pulsante Crea , il modulo verrà inserito nel server, in cui le informazioni sui film vengono salvate nel database. Si viene quindi reindirizzati all'URL /Movies , in cui è possibile visualizzare il filmato appena creato nell'elenco.

Screenshot che mostra la pagina Indice con un nuovo filmato aggiunto.

Creare altre due voci di filmato. Provare i collegamenti Modifica, Dettagli e Elimina, che sono tutti funzionali.

Esame del codice generato

Aprire il file Controllers\MoviesController.cs ed esaminare il metodo generato Index . È illustrata di seguito una parte del controller del film con il metodo Index.

public class MoviesController : Controller
{
    private MovieDBContext db = new MovieDBContext();

    // GET: /Movies/
    public ActionResult Index()
    {
        return View(db.Movies.ToList());
    }

Una richiesta al Movies controller restituisce tutte le voci della Movies tabella e quindi passa i risultati alla Index visualizzazione. La seguente riga della classe MoviesController istanzia un contesto di database di film, come descritto in precedenza. È possibile usare il contesto del database di film per eseguire query, modificare ed eliminare film.

private MovieDBContext db = new MovieDBContext();

Modelli fortemente tipizzati e Parola chiave @model

In precedenza in questa esercitazione si è visto come un controller può passare dati o oggetti a un modello di visualizzazione usando l'oggetto ViewBag . ViewBag è un oggetto dinamico che fornisce un modo pratico ad associazione tardiva per passare informazioni a una visualizzazione.

MVC offre anche la possibilità di passare oggetti fortemente tipizzati a un modello di visualizzazione. Questo approccio fortemente tipizzato permette un controllo migliore in fase di compilazione del codice e IntelliSense più ricco nell'editor di Visual Studio. Il meccanismo di scaffolding in Visual Studio ha usato questo approccio (ovvero passando un modello tipizzato fortemente) al momento della creazione dei metodi e delle visualizzazioni, con la MoviesController classe e i template di visualizzazione.

Nel file Controllers\MoviesController.cs esaminare il metodo generato Details . Il Details metodo è illustrato di seguito.

public ActionResult Details(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Movie movie = db.Movies.Find(id);
    if (movie == null)
    {
        return HttpNotFound();
    }
    return View(movie);
}

Il id parametro viene generalmente passato come dati di route; ad esempio, http://localhost:1234/movies/details/1 imposta il controller sul controller Movie, l'azione su details, e id a 1. È anche possibile passare l'ID con una stringa di query come indicato di seguito:

http://localhost:1234/movies/details?id=1

Se viene trovato un oggetto Movie, un'istanza del modello Movie viene passata alla vista Details.

return View(movie);

Esaminare il contenuto del file Views\Movies\Details.cshtml :

@model MvcMovie.Models.Movie

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <h4>Movie</h4>
<hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Title)
        </dt>
         @*Markup omitted for clarity.*@        
    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

Includendo un'istruzione @model nella parte superiore del file modello di visualizzazione, è possibile specificare il tipo di oggetto previsto dalla vista. Quando è stato creato il controller film, Visual Studio include automaticamente l'istruzione seguente @model all'inizio del file Details.cshtml :

@model MvcMovie.Models.Movie

Questa @model direttiva consente di accedere al filmato passato dal controller alla visualizzazione usando un Model oggetto fortemente tipizzato. Ad esempio, nel modello Details.cshtml, il codice passa ogni campo del film ai helper HTML DisplayNameFor e DisplayFor con l'oggetto fortemente tipizzato Model. I metodi Create e Edit e i template di visualizzazione passano anche un oggetto modello di film.

Esaminare il modello di visualizzazione Index.cshtml e il Index metodo nel file MoviesController.cs . Si noti come il codice crea un List oggetto quando chiama il View metodo helper nel Index metodo action. Il codice passa quindi questo Movies elenco dal Index metodo action alla visualizzazione:

public ActionResult Index()
{
    return View(db.Movies.ToList());
}

Quando è stato creato il controller del film, Visual Studio include automaticamente l'istruzione seguente @model all'inizio del file Index.cshtml :

@model IEnumerable<MvcMovie.Models.Movie>

Questa @model direttiva consente di accedere all'elenco di film passati dal controller alla visualizzazione usando un Model oggetto fortemente tipizzato. Ad esempio, nel modello Index.cshtml, il codice scorre i film eseguendo un'istruzione foreach sull'oggetto fortemente tipizzato Model:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ReleaseDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Genre)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
         <th>
            @Html.DisplayFor(modelItem => item.Rating)
        </th>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID })  |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID }) 
        </td>
    </tr>
}

Poiché l'oggetto Model è fortemente tipizzato (come IEnumerable<Movie> oggetto), ogni item oggetto nel ciclo viene tipizzato come Movie. Tra gli altri vantaggi, questo significa che si ottiene il controllo in fase di compilazione del codice e il supporto completo di IntelliSense nell'editor di codice:

ModelIntelliSense

Uso di SQL Server LocalDB

Entity Framework Code First ha rilevato che la stringa di connessione del database fornita puntava a un database Movies che non esisteva ancora, quindi Code First ha automaticamente creato il database. È possibile verificare che sia stato creato cercando nella cartella App_Data . Se il file Movies.mdf non è visualizzato, fare clic sul pulsante Mostra tutti i file nella barra degli strumenti dell'Esplora soluzioni, fare clic sul pulsante Aggiorna e quindi espandere la cartella App_Data.

Screenshot che mostra la finestra Esplora soluzioni. La cartella Dati app e la sottocartella Movies dot m d f sono cerchiate in rosso.

Fare doppio clic su Movies.mdf per aprire ESPLORA SERVER, quindi espandere la cartella Tabelle per visualizzare la tabella Movies. Si noti l'icona della chiave accanto all'ID. Per impostazione predefinita, Entity Framework creerà una proprietà denominata ID la chiave primaria. Per altre informazioni su EF e MVC, vedere l'ottima guida di Tom Dykstra su MVC ed EF.

DB_explorer

Fai clic con il tasto destro del mouse sulla Movies tabella e seleziona Mostra dati tabella per visualizzare i dati che hai creato.

Screenshot che mostra la finestra di Esplora server. Il menu di scelta rapida per i film è aperto. L'opzione

Screenshot che mostra la finestra M V C Movie di Microsoft Visual Studio. La scheda dbo.dot Movies Data è selezionata.

Fare clic con il pulsante destro del mouse sulla Movies tabella e scegliere Apri definizione tabella per visualizzare la struttura di tabella creata automaticamente da Entity Framework Code First.

Screenshot che mostra la finestra Esplora server. Il menu di scelta rapida Film è aperto. Open Table Definition (Apri definizione tabella) è selezionato e cerchiato in rosso.

Screenshot che mostra la finestra MVC Movie di Microsoft Visual Studio. La scheda d b o dot Movies Design è selezionata.

Si noti come lo schema della Movies tabella mappa alla Movie classe creata in precedenza. Entity Framework Code First ha creato automaticamente questo schema in base alla Movie classe.

Al termine, chiudere la connessione facendo clic con il pulsante destro del mouse su MovieDBContext e scegliendo Chiudi connessione. Se non si chiude la connessione, è possibile che venga visualizzato un errore alla successiva esecuzione del progetto.

Screenshot che mostra la finestra di Server Explorer. Il menu contestuale di MovieDB Context è aperto.

È ora disponibile un database e pagine per visualizzare, modificare, aggiornare ed eliminare i dati. Nell'esercitazione successiva verrà esaminato il resto del codice con scaffolding, e aggiungeremo un metodo SearchIndex e una vista SearchIndex che consentono di cercare film in questo database. Per altre informazioni sull'uso di Entity Framework con MVC, vedere Creazione di un modello di dati entity Framework per un'applicazione MVC ASP.NET.