Iterazione 1 - Creare l'applicazione (C#)

da Microsoft

Scaricare codice

Nella prima iterazione, creiamo Contact Manager nel modo più semplice possibile. È possibile aggiungere il supporto per le operazioni di base del database: creare, leggere, aggiornare ed eliminare (CRUD).

Creazione di un ASP.NET applicazione MVC (VB)

In questa serie di esercitazioni viene creata un'intera applicazione Di gestione contatti dall'inizio alla fine. L'applicazione Contact Manager consente di archiviare informazioni di contatto, nomi, numeri di telefono e indirizzi di posta elettronica, per un elenco di persone.

Viene creata l'applicazione su più iterazioni. Con ogni iterazione, si migliora gradualmente l'applicazione. L'obiettivo di questo approccio a più iterazioni è quello di consentire di comprendere il motivo di ogni modifica.

• Iterazione #1: creare l'applicazione. Nella prima iterazione, creiamo Contact Manager nel modo più semplice possibile. È possibile aggiungere il supporto per le operazioni di base del database: creare, leggere, aggiornare ed eliminare (CRUD).

• Iterazione #2: rendere l'applicazione più bella. In questa iterazione si migliora l'aspetto dell'applicazione modificando la pagina master della visualizzazione MVC predefinita ASP.NET e il foglio di stile a catena.

• Iterazione #3 - Aggiungere la convalida del modulo. Nella terza iterazione si aggiunge la convalida dei moduli di base. Impedisciamo agli utenti di inviare un modulo senza completare i campi del modulo obbligatori. Si convalidano anche gli indirizzi di posta elettronica e i numeri di telefono.

• Iterazione #4: rendere l'applicazione in modo libero. In questa quarta iterazione si sfruttano diversi modelli di progettazione software per semplificare la gestione e la modifica dell'applicazione Contact Manager. Ad esempio, l'applicazione viene refactoring per usare il modello repository e il modello di inserimento delle dipendenze.

• Iterazione #5 - Creare unit test. Nella quinta iterazione, l'applicazione semplifica la gestione e la modifica dell'applicazione aggiungendo unit test. È possibile simulare le classi del modello di dati e compilare unit test per i controller e la logica di convalida.

• Iterazione #6 : usare lo sviluppo basato su test. In questa sesta iterazione si aggiungono nuove funzionalità all'applicazione scrivendo prima unit test e scrivendo codice rispetto agli unit test. In questa iterazione si aggiungono gruppi di contatti.

• Iterazione 7 - Aggiungere funzionalità Ajax. Nella settima iterazione si migliora la velocità di risposta e le prestazioni dell'applicazione aggiungendo il supporto per Ajax.

Iterazione

In questa prima iterazione viene creata l'applicazione di base. L'obiettivo è quello di creare Contact Manager nel modo più veloce e più semplice possibile. Nelle iterazioni successive viene migliorata la progettazione dell'applicazione.

L'applicazione Contact Manager è un'applicazione basata su database di base. È possibile usare l'applicazione per creare nuovi contatti, modificare i contatti esistenti ed eliminare i contatti.

In questa iterazione viene completata la procedura seguente:

1. applicazione MVC ASP.NET
2. Creare un database per archiviare i contatti
3. Generare una classe modello per il database con Microsoft Entity Framework
4. Creare un'azione e una visualizzazione controller che consente di elencare tutti i contatti nel database
5. Creare azioni controller e una visualizzazione che consente di creare un nuovo contatto nel database
6. Creare azioni controller e una visualizzazione che consente di modificare un contatto esistente nel database
7. Creare azioni controller e una visualizzazione che consente di eliminare un contatto esistente nel database

Prerequisiti software

In ASP.NET applicazioni MVC è necessario avere Visual Studio 2008 o Visual Web Developer 2008 installato nel computer (Visual Web Developer è una versione gratuita di Visual Studio che non include tutte le funzionalità avanzate di Visual Studio). È possibile scaricare la versione di valutazione di Visual Studio 2008 o Visual Web Developer dall'indirizzo seguente:

https://www.asp.net/downloads/essential/

Nota

Per ASP.NET applicazioni MVC con Visual Web Developer, è necessario installare Visual Web Developer Service Pack 1. Senza Service Pack 1, non è possibile creare progetti applicazione Web.

ASP.NET framework MVC. È possibile scaricare il framework MVC ASP.NET dall'indirizzo seguente:

https://www.asp.net/mvc

In questa esercitazione viene usato Microsoft Entity Framework per accedere a un database. Entity Framework è incluso in .NET Framework 3.5 Service Pack 1. È possibile scaricare questo Service Pack dal percorso seguente:

https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35

In alternativa, per eseguire ognuno di questi download uno per uno, è possibile sfruttare il programma di installazione della piattaforma Web (PI Web). È possibile scaricare l'pi Web dall'indirizzo seguente:

https://www.asp.net/downloads/essential/

ASP.NET progetto MVC

ASP.NET progetto applicazione Web MVC. Avviare Visual Studio e selezionare l'opzione di menu File, Nuovo progetto. Viene visualizzata la finestra di dialogo Nuovo progetto (vedere la figura 1). Selezionare il tipo di progetto Web e il modello di applicazione Web MVC ASP.NET . Assegnare un nome al nuovo progetto ContactManager e fare clic sul pulsante OK.

Assicurarsi di avere selezionato .NET Framework 3.5 nell'elenco a discesa in alto a destra della finestra di dialogo Nuovo progetto . In caso contrario, il modello di applicazione Web MVC ASP.NET non verrà visualizzato.

Figura 01: Finestra di dialogo Nuovo progetto (Fare clic per visualizzare l'immagine full-size)

ASP.NET'applicazione MVC, viene visualizzata la finestra di dialogo Crea progetto unit test . È possibile usare questa finestra di dialogo per indicare che si vuole creare e aggiungere un progetto di unit test alla soluzione quando si crea l'applicazione MVC ASP.NET. Anche se non verranno creati unit test in questa iterazione, è consigliabile selezionare l'opzione Sì, creare un progetto di unit test perché si prevede di aggiungere unit test in un'iterazione successiva. L'aggiunta di un progetto di test quando si crea una nuova ASP.NET progetto MVC è molto più semplice rispetto all'aggiunta di un progetto test dopo la creazione del progetto MVC ASP.NET.

Nota

Poiché Visual Web Developer non supporta i progetti di test, non viene visualizzata la finestra di dialogo Crea progetto unit test quando si usa Visual Web Developer.

Figura 02: Finestra di dialogo Crea progetto unit test (fare clic per visualizzare l'immagine a dimensioni complete)

ASP.NET'applicazione MVC viene visualizzata nella finestra Esplora soluzioni di Visual Studio (vedere la figura 3). Se non viene visualizzata la finestra Esplora soluzioni, è possibile aprire questa finestra selezionando l'opzione di menu Visualizza, Esplora soluzioni. Si noti che la soluzione contiene due progetti: il progetto MVC ASP.NET e il progetto Test. Il progetto ASP.NET MVC è denominato ContactManager e il progetto Di test è denominato ContactManager.Tests.

Figura 03: finestra Esplora soluzioni (Fare clic per visualizzare l'immagine a dimensioni complete)

Eliminazione dei file di esempio di progetto

Il modello di progetto ASP.NET MVC include file di esempio per controller e visualizzazioni. Prima di creare una nuova applicazione MVC ASP.NET, è necessario eliminare questi file. È possibile eliminare file e cartelle nella finestra Esplora soluzioni facendo clic con il pulsante destro del mouse su un file o una cartella e selezionando l'opzione di menu Elimina.

È necessario eliminare i file seguenti dal progetto MVC ASP.NET:

• \Controller\HomeController.cs

• \Views\Home\About.aspx

• \Views\Home\Index.aspx

È quindi necessario eliminare il file seguente dal progetto Test:

\Controller\HomeControllerTest.cs

Creazione del database

L'applicazione Contact Manager è un'applicazione Web basata su database. Viene usato un database per archiviare le informazioni di contatto.

Il framework ASP.NET MVC con qualsiasi database moderno, tra cui i database Microsoft SQL Server, Oracle, MySQL e IBM DB2. In questa esercitazione viene usato un database microsoft SQL Server. Quando si installa Visual Studio, è possibile installare Microsoft SQL Server Express che è una versione gratuita del database di Microsoft SQL Server.

Creare un nuovo database facendo clic con il pulsante destro del mouse sulla cartella App_Data nella finestra Esplora soluzioni e selezionando l'opzione di menu Aggiungi, Nuovo elemento. Nella finestra di dialogo Aggiungi nuovo elemento selezionare la categoria Dati e il modello di database SQL Server (vedere La figura 4). Assegnare un nome al nuovo database ContactManagerDB.mdf e fare clic sul pulsante OK.

Figura 04: Creazione di un nuovo database Microsoft SQL Server Express (Fare clic per visualizzare l'immagine a dimensioni complete)

Dopo aver creato il nuovo database, il database viene visualizzato nella cartella App_Data nella finestra Esplora soluzioni. Fare doppio clic sul file ContactManager.mdf per aprire la finestra Esplora server e connettersi al database.

Nota

La finestra Esplora server viene chiamata finestra Esplora database nel caso di Microsoft Visual Web Developer.

È possibile usare la finestra Esplora server per creare nuovi oggetti di database, ad esempio tabelle di database, viste, trigger e stored procedure. Fare clic con il pulsante destro del mouse sulla cartella Tabelle e selezionare l'opzione di menu Aggiungi nuova tabella. Viene visualizzata la Designer tabella di database (vedere la figura 5).

Figura 05: Tabella di database Designer (Fare clic per visualizzare l'immagine full-size)

È necessario creare una tabella contenente le colonne seguenti:

Nome colonna	Tipo di dati	Consenti valori NULL
ID	INT	false
FirstName	nvarchar(50)	false
LastName	nvarchar(50)	false
Telefono	nvarchar(50)	false
E-mail	nvarchar(255)	false

La prima colonna, la colonna Id, è speciale. È necessario contrassegnare la colonna Id come colonna Identity e una colonna Chiave primaria. Si indica che una colonna è una colonna Identity espandendo Proprietà colonna (esaminare la parte inferiore della figura 6) e scorrere verso il basso fino alla proprietà Identity Specification. Impostare la proprietà (Is Identity) sul valore Sì.

Si contrassegna una colonna come colonna Chiave primaria selezionando la colonna e facendo clic sul pulsante con l'icona di una chiave. Dopo che una colonna è contrassegnata come colonna Chiave primaria, viene visualizzata un'icona di una chiave accanto alla colonna (vedere figura 6).

Al termine della creazione della tabella, fare clic sul pulsante Salva (il pulsante con un floppy) per salvare la nuova tabella. Assegnare alla nuova tabella il nome Contatti.

Al termine della creazione della tabella del database Contatti, è necessario aggiungere alcuni record alla tabella. Fare clic con il pulsante destro del mouse sulla tabella Contatti nella finestra Esplora server e selezionare l'opzione di menu Mostra dati tabella. Immettere uno o più contatti nella griglia visualizzata.

Creazione del modello di dati

L'applicazione ASP.NET MVC è costituita da modelli, viste e controller. Si inizia creando una classe Model che rappresenta la tabella Contatti creata nella sezione precedente.

In questa esercitazione viene usato Microsoft Entity Framework per generare automaticamente una classe modello dal database.

Nota

Il framework ASP.NET MVC non è associato a Microsoft Entity Framework in alcun modo. È possibile usare ASP.NET MVC con tecnologie alternative di accesso al database, tra cui NHibernate, LINQ to SQL o ADO.NET.

Seguire questa procedura per creare le classi del modello di dati:

1. Fare clic con il pulsante destro del mouse sulla cartella Modelli nella finestra Esplora soluzioni e scegliere Aggiungi, Nuovo elemento. Viene visualizzata la finestra di dialogo Aggiungi nuovo elemento (vedere la figura 6).
2. Selezionare la categoria Dati e il modello di Entity Data Model ADO.NET . Assegnare un nome al modello di dati ContactManagerModel.edmx e fare clic sul pulsante Aggiungi . Viene visualizzata la procedura guidata Entity Data Model (vedere la figura 7).
3. Nel passaggio Scegli contenuto modello selezionare Genera dal database (vedere La figura 7).
4. Nel passaggio Scegli connessione dati selezionare il database ContactManagerDB.mdf e immettere il nome ContactManagerDBEntities per le impostazioni di connessione entità (vedere la figura 8).
5. Nel passaggio Scegli oggetti di database selezionare la casella di controllo Tabelle etichettate (vedere La figura 9). Il modello di dati includerà tutte le tabelle contenute nel database (ne esiste solo una, la tabella Contatti). Immettere i modelli dello spazio dei nomi. Fare clic sul pulsante Fine per completare la procedura guidata.

Figura 06: Finestra di dialogo Aggiungi nuovo elemento (Fare clic per visualizzare l'immagine full-size)

Figura 07: Scegliere Contenuto modello (Fare clic per visualizzare l'immagine full-size)

Figura 08: Scegliere connessione dati (fare clic per visualizzare l'immagine full-size)

Figura 09: scegliere oggetti di database (fare clic per visualizzare l'immagine full-size)

Dopo aver completato la Creazione guidata modello di dati di entità, viene visualizzato il Designer del modello di dati di entità. La finestra di progettazione visualizza una classe corrispondente a ogni tabella modellata. Verrà visualizzata una classe denominata Contacts.

La procedura guidata Entity Data Model genera nomi di classe in base ai nomi di tabella del database. È quasi sempre necessario modificare il nome della classe generata dalla procedura guidata. Fare clic con il pulsante destro del mouse sulla classe Contatti nella finestra di progettazione e selezionare l'opzione di menu Rinomina. Modificare il nome della classe da Contacts (plural) a Contact (singolare). Dopo aver modificato il nome della classe, la classe dovrebbe essere visualizzata come figura 10.

Figura 10: Classe Contact (Fare clic per visualizzare l'immagine full-size)

A questo punto, è stato creato il modello di database. È possibile usare la classe Contact per rappresentare un record di contatto specifico nel database.

Creazione del controller home

Il passaggio successivo consiste nel creare il controller Home. Il controller Home è il controller predefinito richiamato in un'applicazione MVC di ASP.NET.

Creare la classe controller Home facendo clic con il pulsante destro del mouse sulla cartella Controller nella finestra Esplora soluzioni e selezionando l'opzione di menu Aggiungi, Controller (vedere La figura 11). Si noti la casella di controllo Aggiungi metodi di azione per scenari Create, Update e Details. Assicurarsi che questa casella di controllo sia selezionata prima di fare clic sul pulsante Aggiungi .

Figura 11: Aggiunta del controller Home (Fare clic per visualizzare l'immagine full-size)

Quando si crea il controller Home, si ottiene la classe in Elenco 1.

Elenco 1 - Controller\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace ContactManager.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /Home/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /Home/Create

        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /Home/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Home/Edit/5
 
        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /Home/Edit/5

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

Presentazione dei contatti

Per visualizzare i record nella tabella del database Contatti, è necessario creare un'azione Index() e una visualizzazione Indice.

Il controller Home contiene già un'azione Index(). È necessario modificare questo metodo in modo che sia simile all'elenco 2.

Elenco 2 - Controller\HomeController.cs

public class HomeController : Controller
{

    private ContactManagerDBEntities _entities = new ContactManagerDBEntities();

    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View(_entities.ContactSet.ToList());
    }
…

Si noti che la classe Controller Home in List 2 contiene un campo privato denominato _entities. Il campo _entities rappresenta le entità del modello di dati. Il campo _entities viene usato per comunicare con il database.

Il metodo Index() restituisce una visualizzazione che rappresenta tutti i contatti della tabella del database Contatti. Espressione _entities. ContactSet.ToList() restituisce l'elenco di contatti come elenco generico.

Dopo aver creato il controller di indice, è necessario creare la visualizzazione Indice. Prima di creare la visualizzazione Indice, compilare l'applicazione selezionando l'opzione di menu Compila, Compila soluzione. È consigliabile compilare sempre il progetto prima di aggiungere una visualizzazione per visualizzare l'elenco di classi di modelli nella finestra di dialogo Aggiungi visualizzazione .

Creare la visualizzazione Indice facendo clic con il pulsante destro del mouse sul metodo Index() e selezionando l'opzione di menu Aggiungi visualizzazione (vedere Figura 12). Se si seleziona questa opzione di menu, viene visualizzata la finestra di dialogo Aggiungi visualizzazione (vedere Figura 13).

Figura 12: Aggiunta della visualizzazione Indice (Fare clic per visualizzare l'immagine full-size)

Nella finestra di dialogo Aggiungi visualizzazione selezionare la casella di controllo etichettata Crea una visualizzazione fortemente tipizzata. Selezionare la classe Di dati View ContactManager.Models.Contact e l'elenco Visualizza contenuto. Selezionando queste opzioni viene generata una visualizzazione che visualizza un elenco di record Di contatto.

Figura 13: Finestra di dialogo Aggiungi visualizzazione (Fare clic per visualizzare l'immagine full-size)

Quando si fa clic sul pulsante Aggiungi , viene generata la visualizzazione Indice in Elenco 3. Si noti la <direttiva %@ Page %> visualizzata nella parte superiore del file. La visualizzazione Index eredita dalla classe ViewPage<IEnumerable<ContactManager.Models.Contact>> . In altre parole, la classe Model nella vista rappresenta un elenco di entità Contact.

Il corpo della vista Indice contiene un ciclo foreach che esegue l'iterazione di ognuno dei contatti rappresentati dalla classe Model. Il valore di ogni proprietà della classe Contact viene visualizzato all'interno di una tabella HTML.

Elenco 3 - Views\Home\Index.aspx (non modificato)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ContactManager.Models.Contact>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>
                Id
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>

    <% foreach (var item in Model) { %>
    
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
                <%= Html.ActionLink("Details", "Details", new { id=item.Id  })%>
            </td>
            <td>
                <%= Html.Encode(item.Id) %>
            </td>
            <td>
                <%= Html.Encode(item.FirstName) %>
            </td>
            <td>
                <%= Html.Encode(item.LastName) %>
            </td>
            <td>
                <%= Html.Encode(item.Phone) %>
            </td>
            <td>
                <%= Html.Encode(item.Email) %>
            </td>
        </tr>
    
    <% } %>

    </table>

    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>

</asp:Content>

È necessario apportare una modifica alla visualizzazione Indice. Poiché non si crea una visualizzazione Dettagli, è possibile rimuovere il collegamento Dettagli. Trovare e rimuovere il codice seguente dalla visualizzazione Indice:

{ id=item. ID })%>

Dopo aver modificato la visualizzazione Indice, è possibile eseguire l'applicazione Contact Manager. Selezionare l'opzione di menu Debug, Avviare debug o premere F5. La prima volta che si esegue l'applicazione, viene visualizzata la finestra di dialogo nella figura 14. Selezionare l'opzione Modifica il file Web.config per abilitare il debug e fare clic sul pulsante OK.

Figura 14: Abilitazione del debug (Fare clic per visualizzare l'immagine full-size)

La visualizzazione Indice viene restituita per impostazione predefinita. Questa visualizzazione elenca tutti i dati della tabella del database Contatti (vedere la figura 15).

Figura 15: Visualizzazione indice (fare clic per visualizzare l'immagine full-size)

Si noti che la visualizzazione Indice include un collegamento etichettato Crea nuovo nella parte inferiore della visualizzazione. Nella sezione successiva si apprenderà come creare nuovi contatti.

Creazione di nuovi contatti

Per consentire agli utenti di creare nuovi contatti, è necessario aggiungere due azioni Create() al controller Home. È necessario creare un'azione Create() che restituisce un modulo HTML per la creazione di un nuovo contatto. È necessario creare una seconda azione Create() che esegue l'inserimento effettivo del database del nuovo contatto.

I nuovi metodi Create() da aggiungere al controller Home sono contenuti nell'elenco 4.

Elenco 4 - Controller\HomeController.cs (con i metodi Create)

//
// GET: /Home/Create

public ActionResult Create()
{
    return View();
} 

//
// POST: /Home/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        _entities.AddToContactSet(contactToCreate);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

Il primo metodo Create() può essere richiamato con un GET HTTP mentre il secondo metodo Create() può essere richiamato solo da un POST HTTP. In altre parole, il secondo metodo Create() può essere richiamato solo quando si pubblica un modulo HTML. Il primo metodo Create() restituisce semplicemente una visualizzazione contenente il modulo HTML per la creazione di un nuovo contatto. Il secondo metodo Create() è molto più interessante: aggiunge il nuovo contatto al database.

Si noti che il secondo metodo Create() è stato modificato per accettare un'istanza della classe Contact. I valori del modulo pubblicati dal modulo HTML sono associati a questa classe Contact dal framework MVC di ASP.NET automaticamente. Ogni campo modulo dal modulo HTML Create viene assegnato a una proprietà del parametro Contact.

Si noti che il parametro Contact è decorato con un attributo [Bind]. L'attributo [Bind] viene usato per escludere la proprietà Contact Id dall'associazione. Poiché la proprietà Id rappresenta una proprietà Identity, non si vuole impostare la proprietà Id.

Nel corpo del metodo Create() viene usato Entity Framework per inserire il nuovo contatto nel database. Il nuovo contatto viene aggiunto al set esistente di Contacts e viene chiamato il metodo SaveChanges() per eseguire il push di queste modifiche al database sottostante.

È possibile generare un modulo HTML per la creazione di nuovi contatti facendo clic con il pulsante destro del mouse su uno dei due metodi Create() e selezionando l'opzione di menu Aggiungi visualizzazione (vedere Figura 16).

Figura 16: Aggiunta della visualizzazione Crea (Fare clic per visualizzare l'immagine full-size)

Nella finestra di dialogo Aggiungi visualizzazione selezionare la classe ContactManager.Models.Contact e l'opzione Crea per visualizzare il contenuto (vedere La figura 17). Quando si fa clic sul pulsante Aggiungi , viene generata automaticamente una visualizzazione Crea.

Figura 17: Visualizzazione di una pagina esplosa (Fare clic per visualizzare l'immagine full-size)

La visualizzazione Create contiene campi modulo per ognuna delle proprietà della classe Contact. Il codice per la visualizzazione Crea è incluso nell'elenco 5.

Presentazione 5 - Visualizzazioni\Home\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Dopo aver modificato i metodi Create() e aggiungere la visualizzazione Crea, è possibile eseguire l'applicazione Contact Manger e creare nuovi contatti. Fare clic sul collegamento Crea nuovo visualizzato nella visualizzazione Indice per passare alla visualizzazione Crea. Verrà visualizzata la vista nella figura 18.

Figura 18: Creazione visualizzazione (fare clic per visualizzare l'immagine full-size)

Modifica dei contatti

L'aggiunta della funzionalità per la modifica di un record di contatto è molto simile all'aggiunta della funzionalità per la creazione di nuovi record di contatto. Prima di tutto, è necessario aggiungere due nuovi metodi Di modifica alla classe controller Home. Questi nuovi metodi Edit() sono contenuti nell'elenco 6.

Elenco 6 - Controller\HomeController.cs (con metodi di modifica)

//
// GET: /Home/Edit/5

public ActionResult Edit(int id)
{
    var contactToEdit = (from c in _entities.ContactSet
                           where c.Id == id
                           select c).FirstOrDefault();

    return View(contactToEdit);
}

//
// POST: /Home/Edit/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Contact contactToEdit)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        var originalContact = (from c in _entities.ContactSet
                             where c.Id == contactToEdit.Id
                             select c).FirstOrDefault();
        _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}
}

Il primo metodo Edit() viene richiamato da un'operazione HTTP GET. Un parametro ID viene passato a questo metodo che rappresenta l'ID del record di contatto da modificare. Entity Framework viene usato per recuperare un contatto corrispondente all'ID. Viene restituita una visualizzazione contenente un modulo HTML per la modifica di un record.

Il secondo metodo Edit() esegue l'aggiornamento effettivo al database. Questo metodo accetta un'istanza della classe Contact come parametro. Il framework ASP.NET MVC associa automaticamente i campi del modulo dal modulo Modifica a questa classe. Si noti che non si include l'attributo [Bind] durante la modifica di un contatto (è necessario il valore della proprietà Id).

Entity Framework viene usato per salvare il contatto modificato nel database. Il contatto originale deve essere recuperato prima dal database. Successivamente, il metodo Entity Framework ApplyPropertyChanges() viene chiamato per registrare le modifiche apportate al contatto. Infine, il metodo Entity Framework SaveChanges() viene chiamato per rendere persistenti le modifiche apportate al database sottostante.

È possibile generare la visualizzazione contenente il modulo Modifica facendo clic con il pulsante destro del mouse sul metodo Edit() e selezionando l'opzione di menu Aggiungi visualizzazione. Nella finestra di dialogo Aggiungi visualizzazione selezionare la classe ContactManager.Models.Contact e il contenuto Modifica visualizzazione (vedere Figura 19).

Figura 19: Aggiunta di una visualizzazione modifica (fare clic per visualizzare l'immagine full-size)

Quando si fa clic sul pulsante Aggiungi, viene generata automaticamente una nuova visualizzazione Modifica. Il modulo HTML generato contiene campi che corrispondono a ognuna delle proprietà della classe Contact (vedere Elenco 7).

Elenco 7 - Visualizzazioni\Home\Edit.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Eliminazione di contatti

Se si desidera eliminare i contatti, è necessario aggiungere due azioni Delete() alla classe controller Home. La prima azione Delete() visualizza un modulo di conferma di eliminazione. La seconda azione Delete() esegue l'eliminazione effettiva.

Nota

Successivamente, in Iterazione 7, si modifica Gestione contatti in modo che supporti un passaggio Ajax delete.

I due nuovi metodi Delete() sono contenuti nell'elenco 8.

Elenco 8 - Controller\HomeController.cs (metodi Delete)

//
// GET: /Home/Delete/5

public ActionResult Delete(int id)
{
    var contactToDelete = (from c in _entities.ContactSet
                         where c.Id == id
                         select c).FirstOrDefault();

    return View(contactToDelete);
}

//
// POST: /Home/Delete/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(Contact contactToDelete)
{
    try
    {
        var originalContact = (from c in _entities.ContactSet
                               where c.Id == contactToDelete.Id
                               select c).FirstOrDefault();

        _entities.DeleteObject(originalContact);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

Il primo metodo Delete() restituisce un modulo di conferma per l'eliminazione di un record di contatto dal database (vedere Figura20). Il secondo metodo Delete() esegue l'operazione di eliminazione effettiva sul database. Dopo aver recuperato il contatto originale dal database, vengono chiamati i metodi Entity Framework DeleteObject() e SaveChanges() per eseguire l'eliminazione del database.

Figura 20: Visualizzazione di conferma dell'eliminazione (fare clic per visualizzare l'immagine a dimensione intera)

È necessario modificare la visualizzazione Indice in modo che contenga un collegamento per eliminare i record dei contatti (vedere la figura 21). È necessario aggiungere il codice seguente alla stessa cella della tabella che contiene il collegamento Modifica:

Html.ActionLink( { id=item. ID }) %>

Figura 21: Visualizzazione indice con collegamento Modifica (fare clic per visualizzare l'immagine a dimensione intera)

Successivamente, è necessario creare la visualizzazione di conferma dell'eliminazione. Fare clic con il pulsante destro del mouse sul metodo Delete() nella classe controller Home e scegliere l'opzione di menu Aggiungi visualizzazione. Viene visualizzata la finestra di dialogo Aggiungi visualizzazione (vedere la figura 22).

Diversamente dal caso delle visualizzazioni Elenco, Crea e Modifica, la finestra di dialogo Aggiungi visualizzazione non contiene un'opzione per creare una visualizzazione Elimina. Selezionare invece la classe dati ContactManager.Models.Contact e il contenuto della visualizzazione Vuota . Se si seleziona l'opzione Contenuto visualizzazione vuota, sarà necessario creare la visualizzazione.

Figura 22: Aggiunta della visualizzazione di conferma dell'eliminazione (fare clic per visualizzare l'immagine a dimensione intera)

Il contenuto della visualizzazione Elimina è contenuto nell'elenco 9. Questa visualizzazione contiene un modulo che conferma se un contatto specifico deve essere eliminato (vedere la figura 21).

Elenco 9 - Visualizzazioni\Home\Delete.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Delete</h2>
    
    <p>
    Are you sure that you want to delete the entry for
    <%= Model.FirstName %> <%= Model.LastName %>?
    </p>

    <% using (Html.BeginForm(new { Id = Model.Id }))
       { %>
       <p> 
            <input type="submit" value="Delete" />
        </p>
    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Modifica del nome del controller predefinito

Potrebbe disturbare che il nome della classe controller per l'uso dei contatti sia denominato la classe HomeController. Il controller non deve essere denominato ContactController?

Questo problema è abbastanza semplice da risolvere. Prima di tutto, è necessario effettuare il refactoring del nome del controller Home. Aprire la classe HomeController nel Editor di Visual Studio Code, fare clic con il pulsante destro del mouse sul nome della classe e selezionare l'opzione di menu Refactoring, Rename (Refactoring). Selezionando questa opzione di menu si apre la finestra di dialogo Rinomina.

Figura 23: Effettuare il refactoring di un nome del controller (fare clic per visualizzare l'immagine a dimensione intera)

Figura 24: Uso della finestra di dialogo Rinomina (fare clic per visualizzare l'immagine a dimensione intera)

Se si rinomina la classe controller, Visual Studio aggiornerà anche il nome della cartella nella cartella Views. Visual Studio rinomina la cartella \Views\Home nella cartella \Views\Contact.

Dopo aver apportato questa modifica, l'applicazione non avrà più un controller Home. Quando si esegue l'applicazione, verrà visualizzata la pagina di errore nella figura 25.

Figura 25: Nessun controller predefinito (fare clic per visualizzare l'immagine a dimensione intera)

È necessario aggiornare la route predefinita nel file Global.asax per usare il controller contact anziché il controller Home. Aprire il file Global.asax e modificare il controller predefinito usato dalla route predefinita (vedere Listato 10).

Elenco 10 - Global.asax.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace ContactManager
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Contact", action = "Index", id = "" }  // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

Dopo aver apportato queste modifiche, Gestione contatti verrà eseguito correttamente. Ora userà la classe controller Contact come controller predefinito.

Riepilogo

In questa prima iterazione è stata creata un'applicazione Contact Manager di base nel modo più rapido possibile. È stato usato Visual Studio per generare automaticamente il codice iniziale per i controller e le visualizzazioni. È stato anche sfruttato Entity Framework per generare automaticamente le classi del modello di database.

Attualmente è possibile elencare, creare, modificare ed eliminare i record dei contatti con l'applicazione Contact Manager. In altre parole, è possibile eseguire tutte le operazioni di base del database richieste da un'applicazione Web basata su database.

Sfortunatamente, l'applicazione presenta alcuni problemi. Prima e io esito ad ammettere questo, l'applicazione Contact Manager non è l'applicazione più attraente. Ha bisogno di qualche lavoro di progettazione. Nell'iterazione successiva si esaminerà come è possibile modificare la pagina master di visualizzazione predefinita e il foglio di stile a catena per migliorare l'aspetto dell'applicazione.

In secondo luogo, non è stata implementata alcuna convalida dei moduli. Ad esempio, non c'è nulla che impedisca di inviare il modulo Crea contatto senza immettere i valori per uno dei campi modulo. Inoltre, è possibile immettere numeri di telefono e indirizzi di posta elettronica non validi. Si inizia ad affrontare il problema della convalida dei moduli nell'iterazione #3.

Infine, e soprattutto, l'iterazione corrente dell'applicazione Contact Manager non può essere facilmente modificata o mantenuta. Ad esempio, la logica di accesso al database viene inserita direttamente nelle azioni del controller. Ciò significa che non è possibile modificare il codice di accesso ai dati senza modificare i controller. Nelle iterazioni successive vengono esaminati i modelli di progettazione software che è possibile implementare per rendere il Contact Manager più resiliente alle modifiche.

Avanti