Creazione di un'applicazione MVC 3 con Razor e JavaScript discreto

da Microsoft

L'applicazione Web di esempio Elenco utenti illustra come è semplice creare applicazioni ASP.NET MVC 3 usando il motore di visualizzazione Razor. L'applicazione di esempio illustra come usare il nuovo motore di visualizzazione Razor con ASP.NET MVC versione 3 e Visual Studio 2010 per creare un sito Web elenco utenti fittizio che include funzionalità come la creazione, la visualizzazione, la modifica e l'eliminazione degli utenti.

Questa esercitazione descrive i passaggi eseguiti per compilare l'esempio elenco utenti ASP.NET'applicazione MVC 3. Per accompagnare questo argomento, è disponibile un progetto di Visual Studio con C# e codice sorgente VB. Se si hanno domande su questa esercitazione, pubblicarli nel forum MVC.

Panoramica

L'applicazione che si creerà è un semplice sito Web dell'elenco utenti. Gli utenti possono immettere, visualizzare e aggiornare le informazioni utente.

È possibile scaricare il progetto VB e C# completato qui.

Creazione dell'applicazione Web

Per avviare l'esercitazione, aprire Visual Studio 2010 e creare un nuovo progetto usando il modello di applicazione Web MVC 3 ASP.NET MVC 3 . Assegnare un nome all'applicazione "Mvc3Razor".

Nella finestra di dialogo Nuovo ASP.NET progetto MVC 3 selezionare Applicazione Internet, selezionare il motore di visualizzazione Razor e quindi fare clic su OK.

In questa esercitazione non si usa il provider di appartenenza ASP.NET, quindi è possibile eliminare tutti i file associati all'accesso e all'appartenenza. In Esplora soluzioni rimuovere i file e le directory seguenti:

• Controller\AccountController
• Modelli\AccountModels
• Views\Shared\_LogOnPartial
• Views\Account (e tutti i file in questa directory)

Modificare il file _Layout.cshtml e sostituire il markup all'interno dell'elemento <div> denominato logindisplay con il messaggio "Accesso disabilitato". Nell'esempio seguente viene illustrato il nuovo markup:

<div id="logindisplay">
  Login Disabled
</div>

Aggiunta del modello

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

Denominare la classe UserModel. Sostituire il contenuto del file UserModel con il codice seguente:

using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace Mvc3Razor.Models {
    public class UserModel {

        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Display(Name = "User Name")]
        [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
        [ScaffoldColumn(false)]
        public string UserName { get; set; }

        [Required]
        [StringLength(8, MinimumLength = 3)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Required]
        [StringLength(9, MinimumLength = 2)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
        [Required()]
        public string City { get; set; }

    }

    public class Users {

        public Users() {
            _usrList.Add(new UserModel
            {
                UserName = "BenM",
                FirstName = "Ben",
                LastName = "Miller",
                City = "Seattle"
            });
            _usrList.Add(new UserModel
            {
                UserName = "AnnB",
                FirstName = "Ann",
                LastName = "Beebe",
                City = "Boston"
            });
        }

        public List<UserModel> _usrList = new List<UserModel>();

        public void Update(UserModel umToUpdate) {

            foreach (UserModel um in _usrList) {
                if (um.UserName == umToUpdate.UserName) {
                    _usrList.Remove(um);
                    _usrList.Add(umToUpdate);
                    break;
                }
            }
        }

        public void Create(UserModel umToUpdate) {
            foreach (UserModel um in _usrList) {
                if (um.UserName == umToUpdate.UserName) {
                    throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
                }
            }
            _usrList.Add(umToUpdate);
        }

        public void Remove(string usrName) {

            foreach (UserModel um in _usrList) {
                if (um.UserName == usrName) {
                    _usrList.Remove(um);
                    break;
                }
            }
        }

        public  UserModel GetUser(string uid) {
            UserModel usrMdl = null;

            foreach (UserModel um in _usrList)
                if (um.UserName == uid)
                    usrMdl = um;

            return usrMdl;
        }

    }    
}

La UserModel classe rappresenta gli utenti. Ogni membro della classe viene annotato con l'attributo Required dallo spazio dei nomi DataAnnotations . Gli attributi nello spazio dei nomi DataAnnotations forniscono la convalida automatica sul client e sul lato server per le applicazioni Web.

Aprire la HomeController classe e aggiungere una using direttiva in modo che sia possibile accedere alle UserModel classi e Users :

using Mvc3Razor.Models;

Dopo la HomeController dichiarazione, aggiungere il commento seguente e il riferimento a una Users classe:

public class HomeController : Controller {

// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();

La Users classe è un archivio dati semplificato e in memoria che verrà usato in questa esercitazione. In un'applicazione reale si userebbe un database per archiviare le informazioni utente. Le prime righe del file vengono visualizzate nell'esempio HomeController seguente:

using System.Web.Mvc;
using Mvc3Razor.Models;

namespace Mvc3Razor.Controllers {
       
    public class HomeController : Controller {

        // The __usrs class is replacement for a real data access strategy.
        private static Users _usrs = new Users();

Compilare l'applicazione in modo che il modello utente sia disponibile per la procedura guidata scaffolding nel passaggio successivo.

Creazione della visualizzazione predefinita

Il passaggio successivo consiste nell'aggiungere un metodo di azione e visualizzare gli utenti.

Eliminare il file Views\Home\Index esistente. Verrà creato un nuovo file di indice per visualizzare gli utenti.

HomeController Nella classe sostituire il contenuto del Index metodo con il codice seguente:

return View(_usrs._usrList);

Fare clic con il pulsante destro del mouse all'interno del Index metodo e quindi scegliere Aggiungi visualizzazione.

Selezionare l'opzione Crea una visualizzazione fortemente tipizzata . Per Visualizza classe di dati selezionare Mvc3Razor.Models.UserModel. Se non viene visualizzato Mvc3Razor.Models.UserModel nella casella Visualizza classe dati , è necessario compilare il progetto. Assicurarsi che il motore di visualizzazione sia impostato su Razor. Impostare Visualizza contenuto su Elenco e quindi fare clic su Aggiungi.

La nuova visualizzazione esegue automaticamente lo scaffolding dei dati utente passati alla Index visualizzazione. Esaminare il file Views\Home\Index appena generato. I collegamenti Create New, Edit, Details e Delete non funzionano, ma il resto della pagina è funzionale. Eseguire la pagina. Viene visualizzato un elenco di utenti.

Aprire il file Index.cshtml e sostituire il ActionLink markup per Modifica, Dettagli ed Elimina con il codice seguente:

@Html.ActionLink("Edit", "Edit", new {  id=item.UserName  }) |
@Html.ActionLink("Details", "Details", new {  id=item.UserName  }) |
@Html.ActionLink("Delete", "Delete", new {  id=item.UserName  })

Il nome utente viene usato come ID per trovare il record selezionato nei collegamenti Modifica, Dettagli ed Elimina .

Creazione della visualizzazione dettagli

Il passaggio successivo consiste nell'aggiungere un Details metodo di azione e una visualizzazione per visualizzare i dettagli utente.

Aggiungere il metodo seguente Details al controller home:

public ViewResult Details(string id) {
    return View(_usrs.GetUser(id));
}

Fare clic con il pulsante destro del mouse all'interno del Details metodo e quindi selezionare Aggiungi visualizzazione. Verificare che la casella Visualizza classe di dati contenga Mvc3Razor.Models.UserModel. Impostare Visualizza contenuto su Dettagli e quindi fare clic su Aggiungi.

Eseguire l'applicazione e selezionare un collegamento dettagli. L'scaffolding automatico mostra ogni proprietà nel modello.

Creazione della visualizzazione modifica

Aggiungere il metodo seguente Edit al controller home.

public ViewResult Edit(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public ViewResult Edit(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Update Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Update(um);
    return View("Details", um);
}

Aggiungere una visualizzazione come nei passaggi precedenti, ma impostare Visualizza contenuto su Modifica.

Eseguire l'applicazione e modificare il nome e il cognome di uno degli utenti. Se si violano i DataAnnotation vincoli applicati alla UserModel classe, quando si invia il modulo, verranno visualizzati errori di convalida generati dal codice del server. Ad esempio, se si modifica il nome "Ann" in "A", quando si invia il modulo, viene visualizzato l'errore seguente nel modulo:

The field First Name must be a string with a minimum length of 3 and a maximum length of 8.

In questa esercitazione viene trattato il nome utente come chiave primaria. Pertanto, la proprietà nome utente non può essere modificata. Nel file Edit.cshtml , subito dopo l'istruzione Html.BeginForm , impostare il nome utente su un campo nascosto. In questo modo la proprietà deve essere passata nel modello. Il frammento di codice seguente mostra il posizionamento dell'istruzione Hidden :

<h2>Edit</h2>
    @using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)

Sostituire il TextBoxFor markup e ValidationMessageFor per il nome utente con una DisplayFor chiamata. Il DisplayFor metodo visualizza la proprietà come elemento di sola lettura. Nell'esempio seguente viene illustrato il markup completato. Le chiamate e le chiamate originali TextBoxFor vengono commentate con i caratteri di inizio e ValidationMessageFor commento finale razor (@* *@)

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

<div class="editor-field">
@*
  @Html.TextBoxFor(model => model.UserName)
  @Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>

Abilitazione della convalida Client-Side

Per abilitare la convalida lato client in ASP.NET MVC 3, è necessario impostare due flag e è necessario includere tre file JavaScript.

Aprire il file diWeb.config dell'applicazione. Verificare that ClientValidationEnabled e UnobtrusiveJavaScriptEnabled impostare su true nelle impostazioni dell'applicazione. Il frammento seguente dal file radice Web.config mostra le impostazioni corrette:

<appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
 </appSettings>

L'impostazione UnobtrusiveJavaScriptEnabled su true consente la convalida del client non intrusiva Ajax e unobtrusive. Quando si usa la convalida non intrusiva, le regole di convalida vengono trasformate in attributi HTML5. I nomi degli attributi HTML5 possono essere costituiti solo da lettere minuscole, numeri e trattini.

L'impostazione ClientValidationEnabled su true consente la convalida lato client. Impostando queste chiavi nel file diWeb.config dell'applicazione, si abilita la convalida client e JavaScript non invadente per l'intera applicazione. È anche possibile abilitare o disabilitare queste impostazioni in singole visualizzazioni o nei metodi del controller usando il codice seguente:

HtmlHelper.ClientValidationEnabled = true; 
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

È anche necessario includere diversi file JavaScript nella visualizzazione sottoposta a rendering. Un modo semplice per includere JavaScript in tutte le visualizzazioni consiste nell'aggiungerli al file Views\Shared\_Layout.cshtml . Sostituire l'elemento <head> del file _Layout.cshtml con il codice seguente:

<head>
  <title>@View.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>

I primi due script jQuery sono ospitati dalla rete cdn (Content Delivery Network) Microsoft Ajax. Sfruttando la rete CDN Microsoft Ajax, è possibile migliorare significativamente le prestazioni di primo riscontro delle applicazioni.

Eseguire l'applicazione e fare clic su un collegamento di modifica. Visualizzare l'origine della pagina nel browser. L'origine del browser mostra molti attributi del modulo data-val (per la convalida dei dati). Quando la convalida client e JavaScript non invadente è abilitata, i campi di input con una regola di convalida client contengono l'attributo data-val="true" per attivare la convalida client non invasiva. Ad esempio, il City campo nel modello è stato decorato con l'attributo Required , che restituisce il codice HTML illustrato nell'esempio seguente:

<div class="editor-field">
  <input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
  <span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>

Per ogni regola di convalida client, viene aggiunto un attributo con il formato data-val-rulename="message". Usando l'esempio di City campo illustrato in precedenza, la regola di convalida client richiesta genera l'attributo data-val-required e il messaggio "The City field is required". Eseguire l'applicazione, modificare uno degli utenti e deselezionare il City campo. Quando si esce dal campo, viene visualizzato un messaggio di errore di convalida lato client.

Analogamente, per ogni parametro nella regola di convalida client, viene aggiunto un attributo con il formato data-val-rulename-paramname=paramvalue. Ad esempio, la FirstName proprietà viene annotata con l'attributo StringLength e specifica una lunghezza minima di 3 e una lunghezza massima di 8. La regola di convalida dei dati denominata length ha il nome max del parametro e il valore del parametro 8. Di seguito viene illustrato il codice HTML generato per il FirstName campo quando si modifica uno degli utenti:

<input data-val="true"         
       data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8." 
       data-val-length-max="8" 
       data-val-length-min="3" 
       data-val-required="The First Name field is required." 
       id="FirstName" 
       name="FirstName" 
       type="text" 
       value="Ben" />

Per altre informazioni sulla convalida client non invasiva, vedere la voce Convalida client non invasiva in ASP.NET MVC 3 nel blog di Brad Wilson.

Nota

In ASP.NET MVC 3 Beta, a volte è necessario inviare il modulo per avviare la convalida lato client. Questa modifica potrebbe essere modificata per la versione finale.

Creazione della visualizzazione di creazione

Il passaggio successivo consiste nell'aggiungere un Create metodo di azione e una visualizzazione per consentire all'utente di creare un nuovo utente. Aggiungere il metodo seguente Create al controller home:

public ViewResult Create() {
    return View(new UserModel());
}

[HttpPost]
public ViewResult Create(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Create Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Create(um);
    return View("Details", um);
}

Aggiungere una visualizzazione come nei passaggi precedenti, ma impostare Visualizza contenuto su Crea.

Eseguire l'applicazione, selezionare il collegamento Crea e aggiungere un nuovo utente. Il Create metodo sfrutta automaticamente la convalida lato client e lato server. Provare a immettere un nome utente contenente spazi vuoti, ad esempio "Ben X". Quando si esce dal campo del nome utente, viene visualizzato un errore di convalida lato client (White space is not allowed).

Aggiungere il metodo Delete

Per completare l'esercitazione, aggiungere il metodo seguente Delete al controller home:

public ViewResult Delete(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
    _usrs.Remove(id);
    return RedirectToAction("Index");
}

Aggiungere una Delete visualizzazione come nei passaggi precedenti, impostando Visualizza contenuto su Elimina.

È ora disponibile un'applicazione semplice ma completamente funzionale ASP.NET'applicazione MVC 3 con convalida.