Procedura dettagliata: utilizzo di modelli di visualizzazione MVC
Per visualizzare l'articolo in inglese, selezionare la casella di controllo Inglese. È possibile anche visualizzare il testo inglese in una finestra popup posizionando il puntatore del mouse sopra il testo.
Traduzione
Inglese

Procedura dettagliata: utilizzo di modelli di visualizzazione MVC

Quando si crea un'applicazione MVC ASP.NET in Visual Studio, è possibile creare controller e visualizzazioni per il supporto della funzionalità di scaffolding dei dati. In questa procedura dettagliata viene illustrato come creare un'applicazione MVC semplice che sfrutta i vantaggi dei modelli di dati per controller e visualizzazioni supportati da Visual Studio per MVC.

In questa procedura dettagliata si aggiungerà un controller che contiene già i metodi di azione per la visualizzazione, la modifica e l'aggiornamento dei dati del modello. Tramite la funzionalità di scaffolding dei dati integrata in MVC ASP.NET, si genereranno inoltre visualizzazioni basate sul modello definito dall'utente.

Come complemento a questo argomento è disponibile un progetto di Visual Studio con codice sorgente: Download.

Per completare questa procedura dettagliata, è necessario disporre degli elementi seguenti:

  • Microsoft Visual Studio 2008 SP1 o versione successiva. Per questa procedura dettagliata non è possibile utilizzare Microsoft Visual Web Developer Express Edition.

  • Framework di ASP.NET MVC 2. Se è stato installato Visual Studio 2010, ASP.NET MVC 2 è già presente sul computer. Per scaricare la versione più recente del framework, vedere la pagina dei download VMC ASP.NET.

Per iniziare, si creerà un nuovo progetto MVC ASP.NET. Per rendere più semplice la procedura dettagliata, non si creerà il progetto di test che è possibile creare per i progetti MVC ASP.NET. Per ulteriori informazioni sulla creazione di un progetto MVC, vedere Walkthrough: Creating a Basic MVC Project with Unit Tests in Visual Studio.

Per creare un nuovo progetto MVC

  1. Scegliere Nuovo progetto dal menu File.

  2. In Tipi progetto nella finestra di dialogo Nuovo progetto espandere Visual Basic o Visual C#, quindi fare clic su Web.

  3. In Modelli Visual Studio installati selezionare Applicazione Web ASP.NET MVC 2.

  4. Nella casella Nome digitare MvcDataViews.

  5. Nella casella Percorso immettere il nome della cartella di progetto.

  6. Selezionare Crea directory per soluzione.

  7. Fare clic su OK.

  8. Nella finestra di dialogo Crea progetto di unit test selezionare No, non creare progetto unit test.

    NotaNota:

    Se si utilizza Visual Studio 2008 Standard, la finestra di dialogo Crea progetto unit test non viene visualizzata. Il nuovo progetto di applicazione MVC viene invece creato senza un progetto di test.

  9. Fare clic su OK.

    Verrà creato il nuovo progetto di applicazione MVC.

In questa procedura dettagliata viene utilizzato un modello di dati semplice i cui valori verranno aggiunti, modificati e visualizzati tramite i modelli delle visualizzazioni. Si creerà una classe che definisce una persona. Per questa procedura dettagliata, una classe di persona dispone delle proprietà per ID, nome ed età.

Per creare una classe di modello

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Models, scegliere Aggiungi, quindi fare clic su Classe.

  2. Modificare il nome della classe in Person.vb o Person.cs.

  3. Aggiungere il codice seguente per la classe Person:

    
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
    
    
    
  4. Nel menu Compila fare clic su Compila MvcDataViews per compilare il progetto e creare un'istanza dell'oggetto Person.

    NotaNota:

    Questo passaggio è necessario in quanto in Visual Studio viene utilizzata l'istanza del modello durante la generazione del codice del controller e il markup della visualizzazione in base ai modelli MVC.

  5. Salvare e chiudere il file.

Si creerà quindi un controller che contiene gli stub dei metodi di azione tramite i quali verrà eseguito il rendering delle visualizzazioni per creare, aggiornare e visualizzare un elenco di oggetti Person.

Per aggiungere il controller di gestione dei dati

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

  2. Assegnare al controller il nome PersonController.

  3. Selezionare la casella di controllo Aggiungi metodi di azione per scenari di creazione, aggiornamento e dettaglio.

  4. Fare clic su Aggiungi.

    Il nuovo controller verrà aggiunto all'applicazione. Il controller contiene i metodi di azione seguenti: Index, Details, Create (per HTTP GET), Create (per HTTP POST), Delete (per HTTP GET) e Delete (per HTTP POST), Edit (per HTTP GET) e Edit (per HTTP POST).

  5. Nella parte superiore della classe PersonController aggiungere la riga di codice seguente:

    
    static List<Person> people = new List<Person>();
    
    
    

    Questo codice determina la creazione di oggetti Person.

  6. Salvare il file.

A questo punto è possibile aggiungere le visualizzazioni dati. La prima visualizzazione creata è una visualizzazione elenco di cui è stato eseguito il rendering tramite il metodo di azione Index e che consente di visualizzare gli oggetti Person creati in una griglia. Ogni riga presenta inoltre i collegamenti per la visualizzazione della persona in una visualizzazione di dettaglio o in una visualizzazione di modifica.

Per aggiungere la visualizzazione elenco

  1. Aprire la classe PersonController o passare a tale classe nell'editor e individuare il metodo di azione Index.

  2. Fare clic con il pulsante destro del mouse all'interno del metodo di azione Index, quindi scegliere Aggiungi visualizzazione.

  3. Nella casella Nome visualizzazione immettere Index.

  4. Selezionare la casella di controllo Crea visualizzazione fortemente tipizzata.

  5. Nell'elenco Classe dati di visualizzazione selezionare MvcDataViews.Models.Person.

  6. Nell'elenco Visualizza contenuto selezionare Elenco.

    NotaNota:

    Lasciare selezionata la casella di controllo Seleziona pagina master.

  7. Fare clic su Aggiungi.

    Una visualizzazione denominata Index verrà creata in una nuova cartella Person. La visualizzazione Index conterrà il modello MVC per la visualizzazione di un elenco di dati.

  8. Nella visualizzazione Index individuare i controlli Html.ActionLink e modificarli come illustrato nell'esempio seguente:

    
    <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%> |
    <%= Html.ActionLink("Details", "Details", new { id = item.Id })%>
    
    
    
  9. In PersonController sostituire il metodo di azione Index con il codice seguente:

    
    public ActionResult Index()
    {
        return View(people);
    }
    
    
    
  10. Salvare i file.

Si aggiungerà quindi una visualizzazione per la creazione di oggetti Person. Quando si crea un oggetto Person, si definisce il nome, l'età e l'ID della persona. PersonController dispone di due metodi di azione Create. Un metodo di azione Create riceve una richiesta HTTP GET ed esegue il rendering della visualizzazione di creazione. L'altro metodo di azione Create riceve la richiesta HTTP POST dalla visualizzazione di creazione, controlla la validità dei dati, aggiunge dati all'elenco ed esegue il reindirizzamento al metodo di azione Index.

Per aggiungere la visualizzazione di creazione

  1. Aprire la classe PersonController o passare a tale classe nell'editor e individuare il metodo di azione Create che gestisce HTTP GET.

  2. Fare clic con il pulsante destro del mouse all'interno del metodo di azione Create, quindi scegliere Aggiungi visualizzazione.

  3. Nella casella Nome visualizzazione immettere Create.

  4. Selezionare la casella di controllo Crea visualizzazione fortemente tipizzata.

  5. Nell'elenco Classe dati di visualizzazione selezionare MvcDataViews.Models.Person.

  6. Nell'elenco Visualizza contenuto selezionare Create.

    NotaNota:

    Lasciare selezionata la casella di controllo Seleziona pagina master.

  7. Fare clic su Aggiungi.

    Al progetto verrà aggiunta una visualizzazione denominata Create.

  8. In PersonController sostituire il metodo di azione Create che gestisce HTTP POST con il codice seguente:

    
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create(Person p)
    {
        if (!ModelState.IsValid)
        {
            return View("Create", p);
        }
    
        people.Add(p);
    
        return RedirectToAction("Index");
    }
    
    
    
  9. Salvare i file.

La visualizzazione di dettaglio consente di visualizzare i valori per un singolo oggetto Person e contiene inoltre il collegamento a una visualizzazione di modifica e il collegamento per tornare alla visualizzazione elenco.

Per aggiungere la visualizzazione di dettaglio

  1. Aprire la classe PersonController o passare a tale classe nell'editor e individuare il metodo di azione Details.

  2. Fare clic con il pulsante destro del mouse all'interno del metodo di azione Details, quindi scegliere Aggiungi visualizzazione.

  3. Nella casella Nome visualizzazione immettere Details.

  4. Selezionare la casella di controllo Crea visualizzazione fortemente tipizzata.

  5. Nell'elenco Classe dati di visualizzazione selezionare MvcDataViews.Models.Person.

  6. Nell'elenco Visualizza contenuto selezionare Details.

    NotaNota:

    Lasciare selezionata la casella di controllo Seleziona pagina master.

  7. Fare clic su Aggiungi.

    Al progetto verrà aggiunta una visualizzazione denominata Details.

  8. Nella visualizzazione Details individuare il controllo Html.ActionLink che collega alla visualizzazione Edit e modificarlo come illustrato nell'esempio seguente:

    
    <%=Html.ActionLink("Edit", "Edit", new { id=Model.Id }) %> |
    
    
    
  9. In PersonController sostituire il metodo di azione Details con il codice seguente:

    
    public ActionResult Details(int id)
    {
        Person p = new Person();
        foreach (Person pn in people)
        {
            if (pn.Id == id)
            {
                p.Name = pn.Name;
                p.Age = pn.Age;
                p.Id = pn.Id;
            }
        }
    
        return View(p);
    }
    
    
    
  10. Salvare i file.

La visualizzazione di eliminazione consente all'utente di rimuovere un oggetto Person dall'elenco. L'utente può eliminare l'oggetto Person selezionato o tornare alla visualizzazione elenco. PersonController dispone di due metodi di azione Delete. Un metodo di azione Delete riceve una richiesta HTTP GET ed esegue il rendering della visualizzazione di eliminazione. L'altro metodo di azione Delete riceve la richiesta HTTP POST dalla visualizzazione di eliminazione, rimuove l'oggetto selezionato ed esegue il reindirizzamento al metodo di azione Index.

Per aggiungere la visualizzazione di dettaglio

  1. Aprire la classe PersonController o passare a tale classe nell'editor e individuare il metodo di azione Details.

  2. Fare clic con il pulsante destro del mouse all'interno del metodo di azione Delete, quindi scegliere Aggiungi visualizzazione.

  3. Nella casella Nome visualizzazione immettere Delete.

  4. Selezionare la casella di controllo Crea visualizzazione fortemente tipizzata.

  5. Nell'elenco Classe dati di visualizzazione selezionare MvcDataViews.Models.Person.

  6. Nell'elenco Visualizza contenuto selezionare Details.

    NotaNota:

    Lasciare selezionata la casella di controllo Seleziona pagina master.

  7. Fare clic su Aggiungi.

    Al progetto verrà aggiunta una visualizzazione denominata Delete.

  8. In PersonController sostituire il metodo di azione Delete che gestisce HTTP GET con il codice riportato di seguito:

    
    public ActionResult Edit(int id)
    {
        Person p = new Person();
        foreach (Person pn in people)
        {
            if (pn.Id == id)
            {
                p.Name = pn.Name;
                p.Age = pn.Age;
                p.Id = pn.Id;
            }
        }
    
        return View(p);
    }
    
    
    
  9. Sostituire il metodo di azione Delete che gestisce HTTP POST con il codice riportato di seguito:

    
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(Person p)
    {
        if (!ModelState.IsValid)
        {
            return View("Edit", p);
        }
    
        foreach (Person pn in people)
        {
            if (pn.Id == p.Id)
            {
                pn.Name = p.Name;
                pn.Age = p.Age;
                pn.Id = p.Id;
            }
        }
    
        return RedirectToAction("Index");
    }
    
    
    
  10. Salvare i file.

La visualizzazione di modifica consente all'utente di modificare i valori per uno degli oggetti Person. PersonController dispone di due metodi di azione Edit. Un metodo di azione Edit riceve una richiesta HTTP GET ed esegue il rendering della visualizzazione di modifica. L'altro metodo di azione Edit riceve la richiesta HTTP POST dalla visualizzazione di modifica, controlla la validità dei dati, aggiorna i dati nell'oggetto Person appropriato ed esegue il reindirizzamento al metodo di azione Index.

Per aggiungere la visualizzazione di modifica

  1. Aprire la classe PersonController o passare a tale classe nell'editor e individuare il metodo di azione Edit che gestisce HTTP GET.

  2. Sostituire il metodo di azione Edit con il codice seguente:

  3. Fare clic con il pulsante destro del mouse all'interno del metodo di azione Edit, quindi scegliere Aggiungi visualizzazione.

  4. Nella casella Nome visualizzazione immettere Edit.

  5. Selezionare la casella di controllo Crea visualizzazione fortemente tipizzata.

  6. Nell'elenco Classe dati di visualizzazione selezionare MvcDataViews.Models.Person.

  7. Nell'elenco Visualizza contenuto selezionare Edit.

  8. Lasciare selezionata la casella di controllo Seleziona pagina master.

  9. Fare clic su Aggiungi.

    Al progetto verrà aggiunta una visualizzazione denominata Edit.

  10. In PersonController sostituire il metodo di azione Edit che gestisce HTTP POST con il codice seguente:

  11. Salvare e chiudere i file.

Per completare l'applicazione, nella home page si aggiungerà un collegamento all'elenco di persone.

Per creare un collegamento all'elenco di persone

  1. Nella cartella Home aprire la visualizzazione Index.

  2. Nella riga dopo il tag </h2> aggiungere il markup seguente:

    <p>
      <%=Html.ActionLink("Open Person List", "Index", "Person") %>
    </p>
    
  3. Salvare e chiudere il file.

È ora possibile compilare ed eseguire l'applicazione.

Per eseguire il test dell'applicazione

  1. Premere CTRL+F5 per avviare l’applicazione.

  2. Nella home page fare clic su Open Person List.

  3. Fare clic su Create New.

  4. Immettere i valori nelle caselle Nome, Età, Telefono, Email e Id, quindi fare clic su Crea.

    Verrà aperta la visualizzazione Index in cui è inclusa la persona aggiunta all'elenco.

  5. Ripetere il passaggio precedente più volte per immettere più persone.

  6. Nella visualizzazione Index fare clic su uno dei collegamenti Details.

    Verrà aperta la visualizzazione Details.

  7. Fare clic su Back to List.

  8. Fare clic su uno dei collegamenti Edit.

    Verrà aperta la visualizzazione Edit.

  9. Modificare il nome o l'età di una persona, quindi fare clic su Update.

    Verrà aperta di nuovo la visualizzazione Index con i campi dati aggiornati.

  10. Fare clic su uno dei collegamenti Delete.

    Verrà aperta la visualizzazione Delete.

  11. Scegliere il pulsante Elimina.

    La visualizzazione Index viene visualizzata nuovamente con la voce selezionata rimossa.

Il codice di esempio completo per questa procedura dettagliata è disponibile come progetto di Visual Studio: Download (la pagina potrebbe essere in inglese).

Aggiunte alla community

AGGIUNGI
Mostra:
© 2016 Microsoft