Helper, moduli e convalida di ASP.NET MVC 4

Articolo
07/13/2023

Scaricare Il kit di training per i campi Web

In ASP.NET modelli MVC 4 e lab pratico per l'accesso ai dati , è stato caricato e visualizzato i dati dal database. In questo lab pratico si aggiungerà all'applicazione Music Store la possibilità di modificare i dati.

Con questo obiettivo si creerà prima il controller che supporterà le azioni Create, Read, Update and Delete (CRUD) degli album. Verrà generato un modello di Visualizzazione indice sfruttando ASP.NET funzionalità di scaffolding di MVC per visualizzare le proprietà degli album in una tabella HTML. Per migliorare tale visualizzazione, si aggiungerà un helper HTML personalizzato che tronca le descrizioni lunghe.

Successivamente, si aggiungeranno le visualizzazioni di modifica e creazione che consentono di modificare gli album nel database, con l'aiuto degli elementi del modulo come gli elenchi a discesa.

Infine, gli utenti elimineranno un album e li impediranno di immettere dati errati convalidando l'input.

Questo lab pratico presuppone che si abbia una conoscenza di base di ASP.NET MVC. Se non è stato usato ASP.NET MVC prima, è consigliabile passare a ASP.NET lab pratico MVC .

Questo lab illustra i miglioramenti e le nuove funzionalità descritte in precedenza applicando modifiche secondarie a un'applicazione Web di esempio fornita nella cartella Origine.

Nota

Tutti i frammenti di codice e codice di esempio sono inclusi nel Web Camps Training Kit, disponibile in Microsoft-Web/WebCampTrainingKit Release. Il progetto specifico per questo lab è disponibile in ASP.NET helper, moduli e convalida MVC 4.

Obiettivi

In questo lab di Hands-On si apprenderà come:

Creare un controller per supportare le operazioni CRUD
Generare una visualizzazione indice per visualizzare le proprietà delle entità in una tabella HTML
Aggiungere un helper HTML personalizzato
Creare e personalizzare una visualizzazione di modifica
Distinguere tra i metodi di azione che reagiscono alle chiamate HTTP-GET o HTTP-POST
Aggiungere e personalizzare una visualizzazione crea
Gestire l'eliminazione di un'entità
Convalidare l'input utente

Prerequisiti

Per completare questo lab, è necessario disporre degli elementi seguenti:

Microsoft Visual Studio Express 2012 per Web o superiore (leggere Appendice A per istruzioni su come installarlo).

Installazione

Installazione di frammenti di codice

Per praticità, gran parte del codice che si gestirà lungo questo lab è disponibile come frammenti di codice di Visual Studio. Per installare i frammenti di codice, eseguire il file .\Source\Setup\CodeSnippets.vsi .

Se non si ha familiarità con i frammenti di codice di Visual Studio e si vuole imparare a usarli, è possibile fare riferimento all'appendice di questo documento "Appendice B: Uso dei frammenti di codice".

Esercizi

Gli esercizi seguenti costituiscono questo lab di Hands-On:

Creazione del controller di Store Manager e della visualizzazione Indice
Aggiunta di un helper HTML
Creazione della visualizzazione modifica
Aggiunta di una visualizzazione crea
Gestione dell'eliminazione
Aggiunta della convalida
Uso di jQuery unobtrusive sul lato client

Nota

Ogni esercizio è accompagnato da una cartella End contenente la soluzione risultante da ottenere dopo aver completato gli esercizi. È possibile usare questa soluzione come guida se sono necessarie ulteriori informazioni su come usare gli esercizi.

Tempo stimato per completare questo lab: 60 minuti

Esercizio 1: Creazione del controller di Store Manager e della relativa visualizzazione Indice

In questo esercizio si apprenderà come creare un nuovo controller per supportare le operazioni CRUD, personalizzare il metodo di azione Index per restituire un elenco di album dal database e infine generare un modello di visualizzazione indice sfruttando ASP.NET funzionalità di scaffolding di MVC per visualizzare le proprietà degli album in una tabella HTML.

Attività 1 - Creazione di StoreManagerController

In questa attività verrà creato un nuovo controller denominato StoreManagerController per supportare le operazioni CRUD.

Aprire la soluzione Begin disponibile nella cartella Source/Ex1-CreatingTheStoreManagerController/Begin/ .
1. È necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario inviare tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aggiungere un nuovo controller. A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Controller all'interno del Esplora soluzioni, selezionare Aggiungi e quindi il comando Controller. Modificare il nomedel controller in StoreManagerController e assicurarsi che sia selezionata l'opzione controller MVC con azioni di lettura/scrittura vuote. Scegliere Aggiungi.

Finestra di dialogo Aggiungi controller

Viene generata una nuova classe Controller. Poiché è stato indicato di aggiungere azioni per la lettura/scrittura, i metodi stub per quelli vengono create azioni CRUD comuni con commenti TODO compilati, richiedendo di includere la logica specifica dell'applicazione.

Attività 2 - Personalizzazione dell'indice StoreManager

In questa attività verrà personalizzato il metodo di azione StoreManager Index per restituire una visualizzazione con l'elenco di album dal database.

Nella classe StoreManagerController aggiungere le direttive seguenti usando .

(Frammento di codice - ASP.NET Helper e convalida MVC 4 - Ex1 usando MvcMusicStore)
```
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
```
Aggiungere un campo a StoreManagerController per contenere un'istanza di MusicStoreEntities.

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Ex1 MusicStoreEntities)
```
public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();
```
Implementare l'azione StoreManagerController Index per restituire una visualizzazione con l'elenco di album.

La logica di azione controller sarà molto simile all'azione Index di StoreController scritta in precedenza. Usare LINQ per recuperare tutti gli album, incluse le informazioni Di genere e Artista per la visualizzazione.

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Indice Ex1 StoreManagerController)
```
//
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}
```

Attività 3 - Creazione della visualizzazione indice

In questa attività verrà creato il modello Visualizzazione indice per visualizzare l'elenco di album restituiti dal controller StoreManager .

Prima di creare il nuovo modello di visualizzazione, è necessario compilare il progetto in modo che la finestra di dialogo Aggiungi visualizzazione sappia la classe Album da usare. Selezionare Compila | Compilare MvcMusicStore per compilare il progetto.
Fare clic con il pulsante destro del mouse all'interno del metodo azione Index e selezionare Aggiungi visualizzazione. Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione .

Aggiunta di una visualizzazione dall'interno del metodo Index
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome di visualizzazione sia Indice. Selezionare l'opzione Crea una visualizzazione fortemente tipizzata e selezionare Album (MvcMusicStore.Models) nell'elenco a discesa Classe Modello . Selezionare Elenco nell'elenco a discesa modello Scaffold . Lasciare il motore di visualizzazione su Razor e gli altri campi con il valore predefinito e quindi fare clic su Aggiungi.

Aggiunta di una visualizzazione indice

Attività 4 - Personalizzazione dello scaffold della visualizzazione indice

In questa attività verrà modificato il semplice modello di visualizzazione creato con ASP.NET funzionalità di scaffolding MVC per visualizzare i campi desiderati.

Nota

Il supporto di scaffolding all'interno di ASP.NET MVC genera un modello di visualizzazione semplice che elenca tutti i campi nel modello Album. Lo scaffolding offre un modo rapido per iniziare a usare una visualizzazione fortemente tipizzata, invece di dover scrivere manualmente il modello di visualizzazione, lo scaffolding genera rapidamente un modello predefinito e quindi è possibile modificare il codice generato.

Esaminare il codice creato. L'elenco generato di campi farà parte della tabella HTML seguente usata dallo scaffolding per visualizzare i dati tabulari.

@model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </td>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
     </tr>
}

</table>

Sostituire il codice della< tabella> con il codice seguente per visualizzare solo i campi Genre, Artist, Album Title e Price. In questo modo vengono eliminate le colonne Url AlbumId e Album Art . Inoltre, modifica le colonne GenreId e ArtistId per visualizzare le proprietà della classe collegata di Artist.Name e Genre.Name e rimuove il collegamento Dettagli .

<table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

Modificare le descrizioni seguenti.

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Attività 5 - Esecuzione dell'applicazione

In questa attività si verificherà che il modello StoreManagerIndex View visualizzi un elenco di album in base alla progettazione dei passaggi precedenti.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager per verificare che venga visualizzato un elenco di album, visualizzando il titolo, l'artista e il genere.

Esplorazione dell'elenco di album

Esercizio 2: Aggiunta di un helper HTML

La pagina Indice StoreManager presenta un problema potenziale: le proprietà Title e Artist Name possono essere entrambe sufficienti per generare la formattazione della tabella. In questo esercizio si apprenderà come aggiungere un helper HTML personalizzato per troncare il testo.

Nella figura seguente è possibile vedere come il formato viene modificato a causa della lunghezza del testo quando si usano dimensioni ridotte del browser.

Esplorazione dell'elenco di album con testo non troncato

Esplorazione dell'elenco di album con testo non troncato

Attività 1- Estensione dell'helper HTML

In questa attività si aggiungerà un nuovo metodo Truncate all'oggetto HTML esposto all'interno di ASP.NET MVC Views. A tale scopo, si implementerà un metodo di estensione per la classe System.Web.Mvc.HtmlHelper predefinita fornita da ASP.NET MVC.

Nota

Per altre informazioni sui metodi di estensione, visitare questo articolo msdn. https://msdn.microsoft.com/library/bb383977.aspx.

Aprire la soluzione Begin disponibile nella cartella Source/Ex2-AddingAnHTMLHelper/Begin/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.
1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui sarà necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aprire la visualizzazione indice di StoreManager. A tale scopo, nella Esplora soluzioni espandere la cartella Views, quindi StoreManager e aprire il file Index.cshtml.

Aggiungere il codice seguente sotto la direttiva @model per definire il metodo helper Truncate .

@model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

Attività 2 - Troncamento del testo nella pagina

In questa attività si userà il metodo Truncate per troncare il testo nel modello View.

Aprire la visualizzazione indice di StoreManager. A tale scopo, nella Esplora soluzioni espandere la cartella Views, quindi StoreManager e aprire il file Index.cshtml.

Sostituire le righe che mostrano il nome dell'artista e il titolo dell'album. A tale scopo, sostituire le righe seguenti.

<tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Genre.Name)
     </td>
     <td>
          @Truncate(item.Artist.Name, 25)
     </td>
     <td>
          @Truncate(item.Title, 25)
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Price)
     </td>
</tr>

Attività 3 - Esecuzione dell'applicazione

In questa attività si verificherà che il modello StoreManagerIndex View tronca il titolo e il nome dell'artista dell'album.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager per verificare che i testi lunghi nella colonna Titolo e Artista siano troncati.

Titoli troncati e nomi di artisti

Esercizio 3: Creazione della visualizzazione di modifica

In questo esercizio si apprenderà come creare un modulo per consentire ai responsabili dei negozi di modificare un album. Verranno visualizzati l'URL /StoreManager/Edit/id (id che corrisponde all'ID univoco dell'album da modificare), effettuando quindi una chiamata HTTP-GET al server.

Il metodo di azione Modifica controller recupererà l'album appropriato dal database, creerà un oggetto StoreManagerViewModel per incapsularlo (insieme a un elenco di artisti e generi) e quindi passarlo a un modello View per eseguire il rendering della pagina HTML all'utente. Questa pagina conterrà un <elemento modulo> con caselle di testo e elenchi a discesa per la modifica delle proprietà album.

Dopo che l'utente aggiorna i valori del modulo Album e fa clic sul pulsante Salva , le modifiche vengono inviate tramite una chiamata HTTP-POST a /StoreManager/Edit/id. Anche se l'URL rimane invariato nell'ultima chiamata, ASP.NET MVC identifica che questa volta è http-POST e quindi esegue un metodo di azione Edit diverso (uno decorato con [HttpPost]).

Attività 1 - Implementazione del metodo di azione di modifica HTTP-GET

In questa attività si implementerà la versione HTTP-GET del metodo di azione Edit per recuperare l'album appropriato dal database, nonché un elenco di tutti i generi e gli artisti. I dati verranno inseriti nell'oggetto StoreManagerViewModel definito nell'ultimo passaggio, che verrà quindi passato a un modello di visualizzazione con cui eseguire il rendering della risposta.

Aprire la soluzione Begin disponibile nella cartella Source/Ex3-CreatingTheEditView/Begin/. In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.
1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui sarà necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aprire la classe StoreManagerController . A tale scopo, espandere la cartella Controllers e fare doppio clic su StoreManagerController.cs.
Sostituire il metodo di azione HTTP-GET Edit con il codice seguente per recuperare l'album appropriato, nonché gli elenchi Genres and Artists .

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Azione Di modifica HTTP-GET di StoreManagerController ex3)
```
public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}
```
Nota

Si usa System.Web.MvcSelectList per artisti e generi anziché l'elenco System.Collections.Generic .

SelectList è un modo più pulito per popolare gli elenchi a discesa HTML e gestire elementi come la selezione corrente. La creazione di un'istanza e la successiva configurazione di questi oggetti ViewModel nell'azione del controller renderanno più semplice lo scenario di modifica del modulo.

Attività 2 - Creazione della visualizzazione di modifica

In questa attività verrà creato un modello Modifica visualizzazione che visualizzerà in seguito le proprietà dell'album.

Creare la visualizzazione di modifica. A tale scopo, fare clic con il pulsante destro del mouse all'interno del metodo di azione Modifica e scegliere Aggiungi visualizzazione.
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome della visualizzazione sia Modifica. Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata e selezionare Album (MvcMusicStore.Models) nell'elenco a discesa Visualizza classe dati . Selezionare Modifica nell'elenco a discesa Modello di scaffolding . Lasciare invariati gli altri campi con il valore predefinito e quindi fare clic su Aggiungi.

Aggiunta di una visualizzazione di modifica

Attività 3 - Esecuzione dell'applicazione

In questa attività si verificherà che nella pagina StoreManager Edit View (Visualizzazione modifica StoreManager) vengano visualizzati i valori delle proprietà per l'album passato come parametro.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager/Edit/1 per verificare che vengano visualizzati i valori delle proprietà per l'album passato.

di

Visualizzazione di modifica dell'album di esplorazione

Attività 4 - Implementazione degli elenchi a discesa nel modello editor album

In questa attività verranno aggiunti elenchi a discesa al modello Visualizza creato nell'ultima attività, in modo che l'utente possa selezionare da un elenco di artisti e generi.

Sostituire tutto il codice del set di campi Album con quanto segue:

<fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

Nota

È stato aggiunto un helper Html.DropDownList per eseguire il rendering degli elenchi a discesa per la scelta di artisti e generi. I parametri passati a Html.DropDownList sono:

Nome del campo modulo ("ArtistId").
SelectList dei valori per l'elenco a discesa.

Attività 5 - Esecuzione dell'applicazione

In questa attività si verificherà che la pagina StoreManager Edit View (Visualizzazione modifica StoreManager) visualizzi gli elenchi a discesa anziché i campi di testo Artist e Genre ID (ID di genere e artista).

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager/Edit/1 per verificare che siano visualizzati gli elenchi a discesa anziché i campi di testo Artist e Genre ID.

Visualizzazione modifica album di esplorazione, questa volta con elenchi a discesa

Attività 6 - Implementazione del metodo di azione di modifica HTTP-POST

Ora che la visualizzazione modifica viene visualizzata come previsto, è necessario implementare il metodo HTTP-POST Edit Action per salvare le modifiche apportate all'album.

Chiudere il browser, se necessario, per tornare alla finestra di Visual Studio. Aprire StoreManagerController dalla cartella Controllers .
Sostituire il codice del metodo di azione HTTP-POST Edit con il codice seguente (si noti che il metodo che deve essere sostituito è la versione di overload che riceve due parametri):

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Azione di modifica HTTP-POST di StoreManagerController ex3)
```
[HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}
```
Nota

Questo metodo verrà eseguito quando l'utente fa clic sul pulsante Salva della visualizzazione ed esegue un HTTP-POST dei valori del modulo nel server per renderli persistenti nel database. L'elemento Decorator [HttpPost] indica che il metodo deve essere usato per gli scenari HTTP-POST. Il metodo accetta un oggetto Album . ASP.NET MVC creerà automaticamente l'oggetto Album dai valori del modulo> pubblicato<.

Il metodo eseguirà questi passaggi:
1. Se il modello è valido:
  1. Aggiornare la voce dell'album nel contesto per contrassegnarla come oggetto modificato.
  2. Salvare le modifiche e reindirizzare alla vista indice.
2. Se il modello non è valido, popola viewBag con GenreId e ArtistId, restituirà la visualizzazione con l'oggetto Album ricevuto per consentire all'utente di eseguire qualsiasi aggiornamento necessario.

Attività 7 - Esecuzione dell'applicazione

In questa attività si verificherà che la pagina StoreManager Edit View salva effettivamente i dati degli album aggiornati nel database.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager/Edit/1. Modificare il titolo dell'album in Carica e fare clic su Salva. Verificare che il titolo dell'album sia effettivamente cambiato nell'elenco degli album.

Aggiornamento di un album

Esercizio 4: Aggiunta di una visualizzazione di creazione

Ora che StoreManagerController supporta la possibilità di modifica , in questo esercizio si apprenderà come aggiungere un modello crea visualizzazione per consentire ai responsabili dello store di aggiungere nuovi album all'applicazione.

Come è stato fatto con la funzionalità Edit, si implementerà lo scenario Create usando due metodi distinti all'interno della classe StoreManagerController :

Un metodo di azione visualizzerà un modulo vuoto quando i responsabili dei negozi visitano per la prima volta /StoreManager/Create URL.
Un secondo metodo di azione gestirà lo scenario in cui lo store manager fa clic sul pulsante Salva all'interno del modulo e invia di nuovo i valori all'URL /StoreManager/Create come HTTP-POST.

Attività 1 - Implementazione del metodo di azione HTTP-GET Create

In questa attività si implementerà la versione HTTP-GET del metodo di azione Create per recuperare un elenco di tutti i generi e gli artisti, inserire i dati in un oggetto StoreManagerViewModel , che verrà quindi passato a un modello View.

Aprire la soluzione Begin disponibile nella cartella Source/Ex4-AddingACreateView/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.
1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui sarà necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aprire la classe StoreManagerController . A tale scopo, espandere la cartella Controllers e fare doppio clic su StoreManagerController.cs.

Sostituire il codice del metodo Create action con il codice seguente:

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Azione Di creazione HTTP-GET di StoreManagerController ex4 StoreManager)

//
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

Attività 2 - Aggiunta della visualizzazione Crea

In questa attività si aggiungerà il modello Crea visualizzazione che visualizzerà un nuovo modulo Album (vuoto).

Fare clic con il pulsante destro del mouse all'interno del metodo Crea azione e scegliere Aggiungi visualizzazione. Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione.
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome della visualizzazione sia Crea. Selezionare l'opzione Crea una visualizzazione fortemente tipizzata e selezionare Album (MvcMusicStore.Models) nell'elenco a discesa Classe modello e Crea dall'elenco a discesa Modello modello. Lasciare invariati gli altri campi con il valore predefinito e quindi fare clic su Aggiungi.

Aggiunta della visualizzazione di creazione

Aggiornare i campi GenreId e ArtistId per usare un elenco a discesa, come illustrato di seguito:

...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

Attività 3 - Esecuzione dell'applicazione

In questa attività si verificherà che nella pagina StoreManager Create View (Crea visualizzazione StoreManager) venga visualizzato un modulo Album vuoto.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager/Create. Verificare che venga visualizzato un modulo vuoto per compilare le nuove proprietà album.

Crea visualizzazione con un modulo vuoto

Attività 4 - Implementazione del metodo di azione di creazione HTTP-POST

In questa attività verrà implementata la versione HTTP-POST del metodo di azione Crea che verrà richiamata quando un utente fa clic sul pulsante Salva . Il metodo deve salvare il nuovo album nel database.

Chiudere il browser, se necessario, per tornare alla finestra di Visual Studio. Aprire la classe StoreManagerController . A tale scopo, espandere la cartella Controllers e fare doppio clic su StoreManagerController.cs.

Sostituire il codice del metodo di azione HTTP-POST Create con quanto segue:

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Ex4 StoreManagerController HTTP- POST Create action)

[HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

Nota

L'azione Crea è piuttosto simile al metodo di azione Modifica precedente, ma invece di impostare l'oggetto come modificato, viene aggiunto al contesto.

Attività 5 - Esecuzione dell'applicazione

In questa attività si verificherà che la pagina StoreManager Create View (Crea visualizzazione StoreManager ) ti consenta di creare un nuovo album e quindi reindirizza alla visualizzazione indice StoreManager.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager/Create. Compilare tutti i campi del modulo con i dati per un nuovo album, come quello riportato nella figura seguente:

Creazione di un album
Verificare di essere reindirizzato alla visualizzazione indice StoreManager che include il nuovo album appena creato.

Nuovo album creato

Esercizio 5: Gestione dell'eliminazione

La possibilità di eliminare gli album non è ancora implementata. Questo è ciò che verrà fatto in questo esercizio. Come in precedenza, si implementerà lo scenario Delete usando due metodi distinti all'interno della classe StoreManagerController :

Un metodo di azione visualizzerà un modulo di conferma
Un secondo metodo di azione gestirà l'invio del modulo

Attività 1 - Implementazione del metodo di azione HTTP-GET Delete

In questa attività verrà implementata la versione HTTP-GET del metodo di azione Delete per recuperare le informazioni dell'album.

Aprire la soluzione Begin disponibile nella cartella Source/Ex5-HandlingDeletion/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.
1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui sarà necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aprire la classe StoreManagerController . A tale scopo, espandere la cartella Controllers e fare doppio clic su StoreManagerController.cs.
L'azione Elimina controller è esattamente la stessa dell'azione precedente del controller Store Details: esegue una query sull'oggetto album dal database usando l'ID specificato nell'URL e restituisce la visualizzazione appropriata. A tale scopo, sostituire il codice del metodo di azione HTTP-GET Delete con quanto segue:

(Frammento di codice - ASP.NET helper e moduli E convalida MVC 4 - Azione di eliminazione HTTP-GET per la gestione di ex5)
```
//
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}
```
Fare clic con il pulsante destro del mouse all'interno del metodo di azione Elimina e scegliere Aggiungi visualizzazione. Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione.
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome della visualizzazione sia Elimina. Selezionare l'opzione Crea una visualizzazione fortemente tipizzata e selezionare Album (MvcMusicStore.Models) nell'elenco a discesa Classe modello . Selezionare Elimina dall'elenco a discesa Modello di scaffolding . Lasciare invariati gli altri campi con il valore predefinito e quindi fare clic su Aggiungi.

Aggiunta di una visualizzazione Di eliminazione

Il modello Elimina mostra tutti i campi del modello. Verrà visualizzato solo il titolo dell'album. A tale scopo, sostituire il contenuto della visualizzazione con il codice seguente:

@model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

Attività 2 - Esecuzione dell'applicazione

In questa attività si verificherà che nella pagina Visualizzazione eliminazioneStoreManager venga visualizzato un modulo di eliminazione di conferma.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager. Selezionare un album da eliminare facendo clic su Elimina e verificare che la nuova visualizzazione sia caricata.

Eliminazione di un album

Attività 3- Implementazione del metodo di azione di eliminazione HTTP-POST

In questa attività verrà implementata la versione HTTP-POST del metodo di azione Delete che verrà richiamata quando un utente fa clic sul pulsante Elimina . Il metodo deve eliminare l'album nel database.

Chiudere il browser, se necessario, per tornare alla finestra di Visual Studio. Aprire la classe StoreManagerController . A tale scopo, espandere la cartella Controllers e fare doppio clic su StoreManagerController.cs.

Sostituire il codice del metodo di azione HTTP-POST Delete con quanto segue:

(Frammento di codice - ASP.NET helper e moduli MVC 4 e convalida - Azione di eliminazione HTTP-POST di gestione ex5)

//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

Attività 4 - Esecuzione dell'applicazione

In questa attività si testerà che la pagina Visualizzazione eliminazione StoreManager consente di eliminare un album e quindi reindirizza alla visualizzazione indice StoreManager.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager. Selezionare un album da eliminare facendo clic su Elimina. Confermare l'eliminazione facendo clic sul pulsante Elimina :

Eliminazione di un album
Verificare che l'album sia stato eliminato perché non viene visualizzato nella pagina Indice .

Esercizio 6: Aggiunta della convalida

Attualmente i moduli Di creazione e modifica non eseguono alcun tipo di convalida. Se l'utente lascia vuoto un campo obbligatorio o digitare lettere nel campo del prezzo, il primo errore che verrà visualizzato sarà dal database.

È possibile aggiungere la convalida all'applicazione aggiungendo annotazioni dati alla classe del modello. Le annotazioni dei dati consentono di descrivere le regole da applicare alle proprietà del modello e ASP.NET MVC si occuperà dell'applicazione e della visualizzazione di messaggi appropriati agli utenti.

Attività 1 - Aggiunta di annotazioni dati

In questa attività si aggiungeranno annotazioni dati al modello album che visualizzerà i messaggi di convalida della pagina Crea e modifica quando appropriato.

Per una classe Model semplice, l'aggiunta di un'annotazione dati viene gestita semplicemente aggiungendo un'istruzione using per System.ComponentModel.DataAnnotation, quindi inserendo un attributo [Required] nelle proprietà appropriate. Nell'esempio seguente la proprietà Name viene impostata su un campo obbligatorio nella visualizzazione.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Questo è un po ' più complesso in casi come questa applicazione in cui viene generato il modello di dati di entità. Se le annotazioni dati sono state aggiunte direttamente alle classi del modello, verranno sovrascritte se si aggiorna il modello dal database. È invece possibile usare classi parziali di metadati che conterranno le annotazioni e sono associate alle classi del modello usando l'attributo [MetadataType].

Aprire la soluzione Begin disponibile nella cartella Source/Ex6-AddingValidation/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.
1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui sarà necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aprire Il file Album.cs dalla cartella Models .
Sostituire il contenuto album.cs con il codice evidenziato, in modo che abbia un aspetto simile al seguente:

Nota

La riga [DisplayFormat(ConvertEmptyStringToNull=false)] indica che le stringhe vuote del modello non verranno convertite in null quando il campo dati viene aggiornato nell'origine dati. Questa impostazione evita un'eccezione quando Entity Framework assegna valori Null al modello prima che l'annotazione dati convalide i campi.

(Frammento di codice - ASP.NET helper e moduli E convalida MVC 4 - Classe parziale dei metadati dell'album ex6)
```
namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}
```
Nota

Questa classe parziale Album ha un attributo MetadataType che punta alla classe AlbumMetaData per le annotazioni dei dati. Ecco alcuni degli attributi di annotazione dati usati per annotare il modello Album:
- Obbligatorio - Indica che la proprietà è un campo obbligatorio
- DisplayName : definisce il testo da utilizzare nei campi del modulo e nei messaggi di convalida
- DisplayFormat: specifica la modalità di visualizzazione e formattazione dei campi dati.
- StringLength : definisce una lunghezza massima per un campo stringa
- Intervallo: fornisce un valore massimo e minimo per un campo numerico
- ScaffoldColumn : consente di nascondere i campi dai moduli dell'editor

Attività 2 - Esecuzione dell'applicazione

In questa attività si verificherà che i campi Crea e Modifica pagine convalidano, usando i nomi visualizzati scelti nell'ultima attività.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /StoreManager/Create. Verificare che i nomi visualizzati corrispondano a quelli nella classe parziale (ad esempio Url arte album anziché AlbumArtUrl)
Fare clic su Crea, senza compilare il modulo. Verificare di ottenere i messaggi di convalida corrispondenti.

Campi convalidati nella pagina Crea
È possibile verificare che lo stesso si verifichi con la pagina Modifica . Modificare l'URL in /StoreManager/Edit/1 e verificare che i nomi visualizzati corrispondano a quelli nella classe parziale(ad esempio URL arte album anziché AlbumArtUrl). Svuotare i campi Titolo e Prezzo e fare clic su Salva. Verificare di ottenere i messaggi di convalida corrispondenti.

Campi convalidati nella pagina Modifica

Esercizio 7: Uso di jQuery unobtrusive sul lato client

In questo esercizio si apprenderà come abilitare la convalida JQuery unobtrusive MVC 4 sul lato client.

Nota

JQuery Unobtrusive usa javaScript con prefisso data-ajax per richiamare i metodi di azione nel server anziché generare in modo intrusivo script client inline.

Attività 1 - Esecuzione dell'applicazione prima di abilitare jQuery non invadente

In questa attività si eseguirà l'applicazione prima di includere jQuery per confrontare entrambi i modelli di convalida.

Aprire la soluzione Begin disponibile nella cartella Source/Ex7-UnobtrusiqueryValidation/Begin/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.
1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
3. Compilare infine la soluzione facendo clic su Compila | soluzione.
  
  Nota
  
  Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui sarà necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Sfoglia /StoreManager/Crea e fai clic su Crea senza compilare il modulo per verificare di ricevere messaggi di convalida:

Convalida client disabilitata

Nel browser aprire il codice sorgente HTML:

...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

Attività 2 - Abilitazione della convalida client non invasiva

In questa attività si abiliterà la convalida client non invadente di jQuery dal file Web.config , che per impostazione predefinita è impostata su false in tutti i nuovi progetti ASP.NET MVC 4. Inoltre, si aggiungeranno i riferimenti agli script necessari per fare in modo che jQuery Unobtrusive Client Validation funzioni.

Aprire Web.Config file nella radice del progetto e verificare che i valori delle chiavi ClientValidationEnabled e UnobtrusiveJavaScriptEnabled siano impostati su true.
```
...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
```
Nota

È anche possibile abilitare la convalida client tramite codice in Global.asax.cs per ottenere gli stessi risultati:

HtmlHelper.ClientValidationEnabled = true;

Inoltre, è possibile assegnare l'attributo ClientValidationEnabled in qualsiasi controller per avere un comportamento personalizzato.
Aprire Create.cshtml in Views\StoreManager.
Assicurarsi che nella visualizzazione vengano usati i seguenti file di script, jquery.validate e jquery.validate.unobtrusive, tramite il bundle "~/bundles/jqueryval".
```
...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}
```
Nota

Tutte queste librerie jQuery sono incluse nei nuovi progetti MVC 4. Altre librerie sono disponibili nella cartella /Scripts del progetto.

Per consentire il funzionamento di queste librerie di convalida, è necessario aggiungere un riferimento alla libreria del framework jQuery. Poiché questo riferimento è già stato aggiunto nel file _Layout.cshtml , non è necessario aggiungerlo in questa visualizzazione specifica.

Attività 3- Esecuzione dell'applicazione tramite convalida jQuery non invasiva

In questa attività si testerà che il modello di visualizzazione StoreManager crea la convalida lato client usando le librerie jQuery quando l'utente crea un nuovo album.

Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Sfoglia /StoreManager/Crea e fai clic su Crea senza compilare il modulo per verificare di ricevere messaggi di convalida:

Convalida client con jQuery abilitato

Nel browser aprire il codice sorgente per Crea visualizzazione:

...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

Nota

Per ogni regola di convalida client, jQuery unobtrusive aggiunge un attributo con data-val-rulename="message". Di seguito è riportato un elenco di tag che jQuery unobtrusive inserisce nel campo di input HTML per eseguire la convalida client:

Data-val
Data-val-number
Data-val-range
Data-val-range-min / Data-val-range-max
Data-val-required
Data-val-length
Data-val-length-max / Data-val-length-min

Tutti i valori dei dati vengono compilati con l'annotazione dei dati del modello. Quindi, tutta la logica che funziona sul lato server può essere eseguita sul lato client. Ad esempio, l'attributo Price ha l'annotazione di dati seguente nel modello:

[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

Dopo aver usato jQuery unobtrusive, il codice generato è:

<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

Riepilogo

Completando questo lab Hands-On si è appreso come consentire agli utenti di modificare i dati archiviati nel database con l'uso degli elementi seguenti:

Azioni controller come Index, Create, Edit, Delete
ASP.NET funzionalità di scaffolding di MVC per la visualizzazione delle proprietà in una tabella HTML
Helper HTML personalizzati per migliorare l'esperienza utente
Metodi di azione che reagiscono alle chiamate HTTP-GET o HTTP-POST
Un modello di editor condiviso per modelli di visualizzazione simili, ad esempio Crea e Modifica
Elementi del modulo come elenchi a discesa
Annotazioni dei dati per la convalida del modello
Convalida lato client con la libreria jQuery Unobtrusive

Appendice A: Installazione di Visual Studio Express 2012 per Il Web

È possibile installare Microsoft Visual Studio Express 2012 per Il Web o un'altra versione "Express" usando il Installazione guidata piattaforma Web Microsoft. Le istruzioni seguenti illustrano i passaggi necessari per installare Visual Studio Express 2012 per Il Web usando Installazione guidata piattaforma Web Microsoft.

Passare a [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). In alternativa, se è già stato installato Il programma di installazione della piattaforma Web, è possibile aprirlo e cercare il prodotto "Visual Studio Express 2012 per Il Web con Windows Azure SDK".
Fare clic su Installa adesso. Se non si dispone di Installazione guidata piattaforma Web , si verrà reindirizzati per scaricarlo e installarlo per primo.
Dopo aver aperto Il programma di installazione della piattaforma Web , fare clic su Installa per avviare l'installazione.

Installare Visual Studio Express
Leggere tutte le licenze e le condizioni dei prodotti e fare clic su Accetto per continuare.

Accettazione delle condizioni di licenza
Attendere il completamento del processo di download e installazione.

Stato dell'installazione
Al termine dell'installazione, fare clic su Fine.

Installazione completata
Fare clic su Esci per chiudere Il programma di installazione della piattaforma Web.
Per aprire Visual Studio Express per Il Web, passare alla schermata Start e iniziare a scrivere "VS Express", quindi fare clic sul riquadro VS Express for Web.

Riquadro di VS Express per Il Web

Appendice B: Uso dei frammenti di codice

Con i frammenti di codice, è necessario tutto il codice necessario a portata di mano. Il documento lab illustra esattamente quando è possibile usarli, come illustrato nella figura seguente.

Uso dei frammenti di codice di Visual Studio per inserire codice nel progetto Usando frammenti di codice

Uso dei frammenti di codice di Visual Studio per inserire codice nel progetto

Per aggiungere un frammento di codice usando la tastiera (solo C#)

Posizionare il cursore in cui si vuole inserire il codice.
Iniziare a digitare il nome del frammento di codice (senza spazi o trattini).
Guarda come IntelliSense visualizza i nomi dei frammenti di codice corrispondenti.
Selezionare il frammento di codice corretto (o continuare a digitare finché non viene selezionato il nome dell'intero frammento).
Premere il tasto Tab due volte per inserire il frammento di codice nella posizione del cursore.

Iniziare a digitare il nome del frammento di codice Start

Iniziare a digitare il nome del frammento di codice

Premere Tab per selezionare il frammento di codice evidenziato

Premere Tab per selezionare il frammento di codice evidenziato

Premere di nuovo tabulazioni e il frammento di codice verrà di nuovo espanso

Premere di nuovo tabulazioni e il frammento di codice verrà espanso

Per aggiungere un frammento di codice usando il mouse (C#, Visual Basic e XML) 1. Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice.

Selezionare Inserisci frammento di codice seguito da Frammenti di codice personali.
Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso.

Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice e selezionare Inserisci frammento di codice fare clic con il pulsante destro del mouse su

Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice e selezionare Inserisci frammento di codice

Selezionare il frammento di codice pertinente dall'elenco facendo clic su

Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso

Share via

Helper, moduli e convalida di ASP.NET MVC 4

Obiettivi

Prerequisiti

Installazione

Esercizi

Esercizio 1: Creazione del controller di Store Manager e della relativa visualizzazione Indice

Attività 1 - Creazione di StoreManagerController

Attività 2 - Personalizzazione dell'indice StoreManager

Attività 3 - Creazione della visualizzazione indice

Attività 4 - Personalizzazione dello scaffold della visualizzazione indice

Attività 5 - Esecuzione dell'applicazione

Esercizio 2: Aggiunta di un helper HTML

Attività 1- Estensione dell'helper HTML

Attività 2 - Troncamento del testo nella pagina

Attività 3 - Esecuzione dell'applicazione

Esercizio 3: Creazione della visualizzazione di modifica

Attività 1 - Implementazione del metodo di azione di modifica HTTP-GET

Attività 2 - Creazione della visualizzazione di modifica

Attività 3 - Esecuzione dell'applicazione

Attività 4 - Implementazione degli elenchi a discesa nel modello editor album

Attività 5 - Esecuzione dell'applicazione

Attività 6 - Implementazione del metodo di azione di modifica HTTP-POST

Attività 7 - Esecuzione dell'applicazione

Esercizio 4: Aggiunta di una visualizzazione di creazione

Attività 1 - Implementazione del metodo di azione HTTP-GET Create

Attività 2 - Aggiunta della visualizzazione Crea

Attività 3 - Esecuzione dell'applicazione

Attività 4 - Implementazione del metodo di azione di creazione HTTP-POST

Attività 5 - Esecuzione dell'applicazione

Esercizio 5: Gestione dell'eliminazione

Attività 1 - Implementazione del metodo di azione HTTP-GET Delete

Attività 2 - Esecuzione dell'applicazione

Attività 3- Implementazione del metodo di azione di eliminazione HTTP-POST

Attività 4 - Esecuzione dell'applicazione

Esercizio 6: Aggiunta della convalida

Attività 1 - Aggiunta di annotazioni dati

Attività 2 - Esecuzione dell'applicazione

Esercizio 7: Uso di jQuery unobtrusive sul lato client

Attività 1 - Esecuzione dell'applicazione prima di abilitare jQuery non invadente

Attività 2 - Abilitazione della convalida client non invasiva

Attività 3- Esecuzione dell'applicazione tramite convalida jQuery non invasiva

Riepilogo

Appendice A: Installazione di Visual Studio Express 2012 per Il Web

Appendice B: Uso dei frammenti di codice

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive