Condividi tramite

Iterazione 2 - Migliorare l'aspetto dell'applicazione (C#)

da Microsoft

Scaricare codice

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.

Creazione di un'applicazione di gestione contatti ASP.NET MVC (C#)

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

L'obiettivo di questa iterazione è migliorare l'aspetto dell'applicazione Contact Manager. Attualmente, Contact Manager usa la pagina master della visualizzazione MVC predefinita ASP.NET e il foglio di stile a catena (vedere la figura 1). Questi non sembrano cattivi, ma non voglio che il Contact Manager sia simile a tutti gli altri ASP.NET sito Web MVC. Voglio sostituire questi file con file personalizzati.

Screenshot che mostra l'aspetto predefinito di un'applicazione ASP dot NET MVC.

Figura 01: Aspetto predefinito di un'applicazione MVC ASP.NET (Fare clic per visualizzare l'immagine a dimensioni complete)

In questa iterazione vengono illustrati due approcci per migliorare la progettazione visiva dell'applicazione. Prima di tutto, ti mostrerò come sfruttare la raccolta ASP.NET MVC Design per scaricare un modello di progettazione MVC gratuito ASP.NET MVC. La raccolta ASP.NET MVC Design consente di creare un'applicazione Web professionale senza eseguire alcuna operazione.

Ho deciso di non usare un modello dalla raccolta ASP.NET MVC Design per l'applicazione Contact Manager. Invece, ho avuto un design personalizzato creato da una società di progettazione professionale. Nella seconda parte di questa esercitazione, ho spiegato come ho lavorato con un'azienda di progettazione professionale per creare la ASP.NET progettazione MVC finale.

Screenshot che mostra la raccolta di progettazione ASP DOT NET MVC.

Figura 02: Raccolta ASP.NET progettazione MVC (Fare clic per visualizzare l'immagine a dimensioni complete)

Come scrivo questa esercitazione, il design più popolare nella raccolta è un design denominato ottobre da David Hauser. È possibile usare questa progettazione per un progetto MVC ASP.NET completando la procedura seguente:

  1. Fare clic sul pulsante Scarica per scaricare il file October.zip nel computer.
  2. Fare clic con il pulsante destro del mouse sul file di October.zip scaricato e fare clic sul pulsante Sblocca (vedere La figura 3).
  3. Decomprimere il file in una cartella denominata ottobre.
  4. Selezionare tutti i file dalla cartella DesignTemplate contenuta nella cartella ottobre, fare clic con il pulsante destro del mouse sui file e selezionare l'opzione di menu Copia.
  5. Fare clic con il pulsante destro del mouse sul nodo del progetto ContactManager nella finestra Esplora soluzioni di Visual Studio e selezionare l'opzione di menu Incolla (vedere Figura 4).
  6. Selezionare l'opzione di menu di Visual Studio Modifica, Trova e Sostituisci, Sostituisci rapidamente e sostituisci[MyProjectName] con ContactManager (vedere La figura 5).

Screenshot che mostra l'sblocco di un file scaricato dal Web.

Figura 03: Sblocco di un file scaricato dal Web (Fare clic per visualizzare l'immagine full-size)

Screenshot che mostra la sovrascrittura dei file nella Esplora soluzioni.

Figura 04: Sovrascrivere i file nella Esplora soluzioni (Fare clic per visualizzare l'immagine full-size)

Screenshot che mostra la sostituzione del nome del progetto con Contact Manager.

Figura 05: Sostituzione di [ProjectName] con ContactManager (Fare clic per visualizzare l'immagine full-size)

Dopo aver completato questi passaggi, l'applicazione Web userà la nuova progettazione. La pagina nella figura 6 illustra l'aspetto dell'applicazione Contact Manager con la progettazione di ottobre.

Screenshot che mostra Contact Manager con il modello di ottobre.

Figura 06: ContactManager con il modello di ottobre (Fare clic per visualizzare l'immagine full-size)

Creazione di una progettazione di ASP.NET MVC personalizzata

La ASP.NET MVC Design Gallery ha una buona selezione di stili di progettazione diversi. La raccolta offre un modo senza dolore per personalizzare l'aspetto delle applicazioni MVC ASP.NET. E, naturalmente, la Galleria ha il grande vantaggio di essere completamente libero.

Tuttavia, potrebbe essere necessario creare un design completamente univoco per il tuo sito Web. In questo caso, è opportuno lavorare con un'azienda di progettazione del sito Web. Ho deciso di adottare questo approccio per la progettazione per l'applicazione Contact Manager.

Ho spostato il Contact Manager da Iteration #1 e ho inviato il progetto all'azienda di progettazione. Non erano proprietari di Visual Studio (vergogna per loro!), ma non presentavano un problema. Sono stati in grado di scaricare Microsoft Visual Web Developer gratuitamente dal https://www.asp.net sito Web e aprire l'applicazione Contact Manager in Visual Web Developer. In un paio di giorni, hanno prodotto la progettazione nella figura 7.

Screenshot che mostra il punto ASP NET MVC Contact Manager Design.

Figura 07: Progettazione ASP.NET Gestione contatti MVC (Fare clic per visualizzare l'immagine full-size)

La nuova progettazione è costituita da due file principali: un nuovo file del foglio di stile a cascata e un nuovo file di pagina master di visualizzazione. Una pagina master di visualizzazione contiene il layout e il contenuto condiviso per le visualizzazioni in un'applicazione MVC ASP.NET. Ad esempio, la pagina master della visualizzazione include l'intestazione, le schede di spostamento e il piè di pagina visualizzati nella figura 7. Ho sovrascritto la pagina master della visualizzazione Site.Master esistente nella cartella Views\Shared con il nuovo file Site.Master dell'azienda di progettazione,

L'azienda di progettazione ha anche creato un nuovo foglio di stile a cascata e un set di immagini. Ho inserito questi nuovi file nella cartella Contenuto e sovrascritto il file Site.css esistente. È necessario inserire tutto il contenuto statico nella cartella Contenuto.

Si noti che la nuova progettazione per Contact Manager include immagini per la modifica e l'eliminazione di contatti. Un'immagine Modifica ed Eliminazione viene visualizzata accanto a ogni contatto nella tabella HTML dei contatti.

Originariamente, questi collegamenti di cui è stato eseguito il rendering con il codice HTML. Helper ActionLink() simile al seguente:

<td>
    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
    <%= Html.ActionLink("Delete", "Delete", new { id=item.Id  }) %> 
</td>

Il metodo Html.ActionLink() non supporta le immagini (il metodo HTML codifica il testo del collegamento per motivi di sicurezza). Pertanto, ho sostituito le chiamate a Html.ActionLink() con chiamate a Url.Action() come segue:

<td class="actions edit">
    <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
</td>
<td class="actions delete">
    <a href='<%= Url.Action("Delete", new {id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Delete" /></a>
</td>

Il metodo Html.ActionLink() esegue il rendering di un intero collegamento ipertestuale HTML. Il metodo Url.Action() esegue il rendering solo dell'URL senza il <> tag.

Si noti inoltre che la nuova progettazione include schede selezionate e non selezionate. Nella figura 8, ad esempio, la scheda Crea nuovo contatto è selezionata e la scheda Contatti personali non è selezionata.

Screenshot che mostra le schede selezionate e non selezionate.

Figura 08: Schede selezionate e non selezionate(Fare clic per visualizzare l'immagine a dimensioni complete)

Per supportare il rendering delle schede selezionate e non selezionate, ho creato un helper HTML personalizzato denominato MenuItemHelper. Questo metodo helper esegue il rendering di un tag li o di un <<tag li> class="selected"> a seconda che il controller corrente e l'azione corrisponda al controller e al nome dell'azione passato al helper. Il codice per MenuItemHelper è contenuto nell'elenco 1.

Elenco 1 - Helpers\MenuItemHelper.cs

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Helpers
{
    /// <summary>
    /// This helper method renders a link within an HTML LI tag.
    /// A class="selected" attribute is added to the tag when
    /// the link being rendered corresponds to the current
    /// controller and action.
    /// 
    /// This helper method is used in the Site.Master View 
    /// Master Page to display the website menu.
    /// </summary>
    public static class MenuItemHelper
    {
        public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
        {
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            var builder = new TagBuilder("li");
            
            // Add selected class
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                builder.AddCssClass("selected");            
            
            // Add link
            builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName);

            // Render Tag Builder
            return builder.ToString(TagRenderMode.Normal);
        }

    }
}

MenuItemHelper usa internamente la classe TagBuilder per compilare il <tag HTML li> . La classe TagBuilder è una classe di utilità molto utile che è possibile usare ogni volta che è necessario creare un nuovo tag HTML. Include metodi per l'aggiunta di attributi, l'aggiunta di classi CSS, la generazione di ID e la modifica del codice HTML interno del tag.

Riepilogo

In questa iterazione è stata migliorata la progettazione visiva dell'applicazione ASP.NET MVC. In primo luogo, è stata introdotta la ASP.NET MVC Design Gallery. Si è appreso come scaricare modelli di progettazione gratuiti dalla ASP.NET MVC Design Gallery che è possibile usare nelle applicazioni MVC ASP.NET.

Successivamente, è stato illustrato come creare una progettazione personalizzata modificando il file di foglio di stile css predefinito e il file di pagina della visualizzazione master. Per supportare la nuova progettazione, è stato necessario apportare alcune modifiche minime all'applicazione Contact Manager. Ad esempio, è stato aggiunto un nuovo helper HTML denominato MenuItemHelper che visualizza le schede selezionate e deselezionate.

Nell'iterazione successiva viene affrontato l'argomento molto importante della convalida. Aggiungere il codice di convalida all'applicazione in modo che un utente non possa creare un nuovo contatto senza fornire valori obbligatori, ad esempio il nome e il cognome di una persona.

IndietroAvanti