Condividi tramite

Iterazione 2 - Migliorare l'aspetto dell'applicazione (VB)

di Microsoft

Scaricare il codice

In questa iterazione viene migliorata l'aspetto dell'applicazione modificando la pagina master della visualizzazione MVC predefinita ASP.NET e il foglio di stile css.

Compilazione di un'applicazione MVC ASP.NET Gestione contatti (VB)

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

L'applicazione viene compilata su più iterazioni. Con ogni iterazione, l'applicazione viene migliorata gradualmente. L'obiettivo di questo approccio a più iterazioni è consentire di comprendere il motivo di ogni modifica.

  • Iterazione n. 1: creare l'applicazione. Nella prima iterazione viene creato il Contact Manager nel modo più semplice possibile. Viene aggiunto il supporto per le operazioni di base del database: Create, Read, Update e Delete (CRUD).

  • Iterazione n. 2: rendere l'applicazione più bella. In questa iterazione viene migliorata l'aspetto dell'applicazione modificando la pagina master della visualizzazione MVC predefinita ASP.NET e il foglio di stile css.

  • Iterazione n. 3: aggiungere la convalida dei moduli. Nella terza iterazione viene aggiunta la convalida dei moduli di base. Microsoft impedisce agli utenti di inviare un modulo senza completare i campi modulo obbligatori. Vengono convalidati anche gli indirizzi di posta elettronica e i numeri di telefono.

  • Iterazione 4: rendere l'applicazione ad accoppiamento 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, si esegue il refactoring dell'applicazione per usare il modello repository e il modello di inserimento delle dipendenze.

  • Iterazione 5: creare unit test. Nella quinta iterazione l'applicazione risulta più semplice da gestire e modificare aggiungendo unit test. Si simulano le classi del modello di dati e si compilano unit test per i controller e la logica di convalida.

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

  • Iterazione 7: aggiungere la funzionalità Ajax. Nella settima iterazione viene migliorata 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 css (vedere la figura 1). Questi non sembrano male, ma non voglio che il Contact Manager sembri come ogni altro 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 dimensione intera)

In questa iterazione vengono illustrati due approcci per migliorare la progettazione visiva dell'applicazione. Prima di tutto, vi mostro come sfruttare la raccolta di ASP.NET MVC Design per scaricare un modello di progettazione MVC gratuito ASP.NET. 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 di ASP.NET MVC Design per l'applicazione Contact Manager. Invece avevo un design personalizzato creato da uno studio di design professionale. Nella seconda parte di questa esercitazione, spiego come ho lavorato con un'azienda di design professionale per creare la ASP.NET progettazione MVC finale.

Screenshot che mostra la raccolta di schemi MVC ASP dot NET.

Figura 02: Raccolta progettazione ASP.NET MVC (fare clic per visualizzare l'immagine a dimensione intera)

Mentre scrivo questa esercitazione, il design più popolare nella raccolta è un design chiamato ottobre da David Hauser. È possibile usare questa progettazione per un progetto ASP.NET MVC completando i passaggi seguenti:

  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 scegliere il 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 scegliere l'opzione di menu Copia.
  5. Fare clic con il pulsante destro del mouse sul nodo del progetto ContactManager nella finestra di visual Studio Esplora soluzioni e scegliere l'opzione di menu Incolla (vedere la 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 lo sblocco di un file scaricato dal Web.

Figura 03: Sblocco di un file scaricato dal Web (fare clic per visualizzare l'immagine a dimensione intera)

Screenshot che mostra la sovrascrittura dei file nel Esplora soluzioni.

Figura 04: Sovrascrittura dei file nel Esplora soluzioni (fare clic per visualizzare l'immagine a dimensione intera)

Screenshot che mostra la sostituzione di Project Name con Contact Manager.

Figura 05: Sostituzione di [ProjectName] con ContactManager (fare clic per visualizzare l'immagine a dimensione intera)

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 a dimensione intera)

Creazione di una progettazione MVC ASP.NET personalizzata

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

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

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

Screenshot che mostra la progettazione di ASP DOT NET MVC Contact Manager.

Figura 07: Progettazione ASP.NET Gestione contatti MVC (fare clic per visualizzare l'immagine a dimensione intera)

La nuova progettazione è costituita da due file principali: un nuovo file di foglio di stile css 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. Sovrascritto la pagina master vista 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 ho sovrascritto il file Site.css esistente. È consigliabile 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 dei contatti. Accanto a ogni contatto nella tabella HTML dei contatti viene visualizzata un'immagine Di modifica ed eliminazione.

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(), d'altra parte, esegue il rendering solo dell'URL senza il <> tag .

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

Screenshot che mostra le schede selezionate e deselezionate.

Figura 08: Schede selezionate e non selezionate (fare clic per visualizzare l'immagine a dimensione intera)

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 e l'azione correnti corrispondano al controller e al nome dell'azione passati all'helper. Il codice per MenuItemHelper è contenuto nell'elenco 1.

Elenco 1 : Helpers\MenuItemHelper.vb

Public Module MenuItemHelper

   <System.Runtime.CompilerServices.Extension> _
   Function MenuItem(ByVal helper As HtmlHelper, ByVal linkText As String, ByVal actionName As String, ByVal controllerName As String) As String
        Dim currentControllerName As String = helper.ViewContext.RouteData.Values("controller")
        Dim currentActionName As String = helper.ViewContext.RouteData.Values("action")

        Dim builder = New TagBuilder("li")

        ' Add selected class
        If currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) AndAlso currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase) Then
            builder.AddCssClass("selected")
        End If

        ' Add link
        builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName)

        ' Render Tag Builder
        Return builder.ToString(TagRenderMode.Normal)
   End Function

End Module

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

Riepilogo

In questa iterazione è stata migliorata la progettazione visiva dell'applicazione MVC ASP.NET. Prima di tutto, è stato introdotto l'ASP.NET MVC Design Gallery. Si è appreso come scaricare modelli di progettazione gratuiti dalla raccolta di progettazione MVC ASP.NET che è possibile usare nelle applicazioni MVC ASP.NET.

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

Nell'iterazione successiva si affronta l'argomento molto importante della convalida. Aggiungere 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