Iteration 2 – Optimieren der Gestaltung der Anwendung (VB)

von Microsoft

Code herunterladen

In dieser Iteration verbessern wir das Erscheinungsbild der Anwendung, indem wir die Standardansicht ASP.NET MVC master Seite und cascading Stylesheet ändern.

Erstellen einer Kontaktverwaltung ASP.NET MVC-Anwendung (VB)

In dieser Reihe von Tutorials erstellen wir eine gesamte Kontaktverwaltungsanwendung von Anfang bis Ende. Mit der Contact Manager-Anwendung können Sie Kontaktinformationen – Namen, Telefonnummern und E-Mail-Adressen – für eine Personenliste speichern.

Wir erstellen die Anwendung über mehrere Iterationen. Mit jeder Iteration verbessern wir die Anwendung schrittweise. Das Ziel dieses Ansatzes für mehrere Iterationen besteht darin, ihnen zu ermöglichen, den Grund für jede Änderung zu verstehen.

• Iteration #1: Erstellen Sie die Anwendung. In der ersten Iteration erstellen wir den Contact Manager auf einfachste Weise. Wir fügen Unterstützung für grundlegende Datenbankvorgänge hinzu: Erstellen, Lesen, Aktualisieren und Löschen (CRUD).

• Iteration #2 : Lassen Sie die Anwendung schön aussehen. In dieser Iteration verbessern wir das Erscheinungsbild der Anwendung, indem wir die Standardansicht ASP.NET MVC master Seite und cascading Stylesheet ändern.

• Iteration #3: Hinzufügen der Formularüberprüfung. In der dritten Iteration fügen wir die grundlegende Formularüberprüfung hinzu. Wir verhindern, dass Personen ein Formular einreichen, ohne die erforderlichen Formularfelder ausfüllen zu müssen. Außerdem überprüfen wir E-Mail-Adressen und Telefonnummern.

• Iteration #4: Machen Sie die Anwendung lose gekoppelt. In dieser vierten Iteration nutzen wir mehrere Softwareentwurfsmuster, um die Verwaltung und Änderung der Contact Manager-Anwendung zu vereinfachen. Beispielsweise umgestalten wir unsere Anwendung so, dass sie das Repositorymuster und das Abhängigkeitsinjektionsmuster verwendet.

• Iteration #5: Erstellen von Komponententests. In der fünften Iteration erleichtern wir die Wartung und Änderung unserer Anwendung durch Hinzufügen von Komponententests. Wir simulieren unsere Datenmodellklassen und erstellen Komponententests für unsere Controller und die Validierungslogik.

• Iteration #6: Verwenden Sie die testgesteuerte Entwicklung. In dieser sechsten Iteration fügen wir unserer Anwendung neue Funktionen hinzu, indem wir zuerst Komponententests schreiben und Code für die Komponententests schreiben. In dieser Iteration fügen wir Kontaktgruppen hinzu.

• Iteration #7: Hinzufügen von Ajax-Funktionalität In der siebten Iteration verbessern wir die Reaktionsfähigkeit und Leistung unserer Anwendung, indem wir Unterstützung für Ajax hinzufügen.

Diese Iteration

Das Ziel dieser Iteration besteht darin, die Darstellung der Contact Manager-Anwendung zu verbessern. Derzeit verwendet der Kontakt-Manager die Standardansicht ASP.NET MVC master Seite und cascading Stylesheet (siehe Abbildung 1). Diese sehen nicht schlecht aus, aber ich möchte nicht, dass der Kontakt-Manager genauso aussieht wie jede andere ASP.NET MVC-Website. Ich möchte diese Dateien durch benutzerdefinierte Dateien ersetzen.

Abbildung 01: Standarddarstellung einer ASP.NET MVC-Anwendung (klicken, um das bild in voller Größe anzuzeigen)

In dieser Iteration bespreche ich zwei Ansätze zur Verbesserung des visuellen Designs unserer Anwendung. Zunächst zeige ich Ihnen, wie Sie den ASP.NET MVC Design-Katalog nutzen können, um eine kostenlose ASP.NET MVC-Entwurfsvorlage herunterzuladen. Mit dem ASP.NET MVC-Designkatalog können Sie eine professionelle Webanwendung ohne Arbeit erstellen.

Ich habe mich entschieden, keine Vorlage aus dem ASP.NET MVC-Designkatalog für die Contact Manager-Anwendung zu verwenden. Stattdessen hatte ich ein benutzerdefiniertes Design von einer professionellen Designfirma erstellt. Im zweiten Teil dieses Tutorials erkläre ich, wie ich mit einem professionellen Designunternehmen gearbeitet habe, um den endgültigen ASP.NET MVC-Entwurf zu erstellen.

Abbildung 02: Der ASP.NET MVC-Entwurfskatalogs (Klicken Sie hier, um das vollständige Bild anzuzeigen)

Während ich dieses Tutorial schreibe, ist das beliebteste Design in der Galerie ein Design namens Oktober von David Hauser. Sie können diesen Entwurf für ein ASP.NET MVC-Projekt verwenden, indem Sie die folgenden Schritte ausführen:

1. Klicken Sie auf die Schaltfläche Herunterladen , um die October.zip Datei auf Ihren Computer herunterzuladen.
2. Klicken Sie mit der rechten Maustaste auf die heruntergeladene October.zip-Datei, und klicken Sie auf die Schaltfläche Blockierung aufheben (siehe Abbildung 3).
3. Entzippen Sie die Datei in einen Ordner namens Oktober.
4. Wählen Sie alle Dateien aus dem Ordner DesignTemplate aus, der im Ordner Oktober enthalten ist, klicken Sie mit der rechten Maustaste auf die Dateien, und wählen Sie die Menüoption Kopieren aus.
5. Klicken Sie im Fenster Visual Studio Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten ContactManager, und wählen Sie die Menüoption Einfügen aus (siehe Abbildung 4).
6. Wählen Sie die Visual Studio-Menüoption Bearbeiten, Suchen und Ersetzen, Schnell ersetzen und ersetzen [MyProjectName] durch ContactManager (siehe Abbildung 5).

Abbildung 03: Aufheben der Blockierung einer aus dem Web heruntergeladenen Datei (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 04: Überschreiben von Dateien im Projektmappen-Explorer (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Abbildung 05: Ersetzen von [ProjectName] durch ContactManager (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Nachdem Sie diese Schritte ausgeführt haben, verwendet Ihre Webanwendung den neuen Entwurf. Die Seite in Abbildung 6 veranschaulicht die Darstellung der Contact Manager-Anwendung mit dem Oktober-Design.

Abbildung 06: ContactManager mit der Oktobervorlage (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Erstellen eines benutzerdefinierten ASP.NET MVC-Entwurfs

Die ASP.NET MVC Design Gallery verfügt über eine gute Auswahl an verschiedenen Designstilen. Der Katalog bietet Ihnen eine schmerzfreie Möglichkeit, das Erscheinungsbild Ihrer ASP.NET MVC-Anwendungen anzupassen. Und natürlich hat die Galerie den großen Vorteil, völlig kostenlos zu sein.

Möglicherweise müssen Sie jedoch ein völlig einzigartiges Design für Ihre Website erstellen. In diesem Fall ist es sinnvoll, mit einem Website-Design-Unternehmen zusammenzuarbeiten. Ich habe mich für diesen Ansatz für den Entwurf für die Contact Manager-Anwendung entschieden.

Ich habe den Kontakt-Manager aus Iteration #1 gezippt und das Projekt an das Designunternehmen gesendet. Sie besitzen Visual Studio nicht (schade!), aber das war kein Problem. Sie konnten Microsoft Visual Web Developer kostenlos von der https://www.asp.net Website herunterladen und die Contact Manager-Anwendung in Visual Web Developer öffnen. In wenigen Tagen hatten sie den Entwurf in Abbildung 7 erstellt.

Abbildung 07: Design des ASP.NET MVC-Kontakt-Manager (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Der neue Entwurf bestand aus zwei Standard-Dateien: einer neuen cascading Stylesheet-Datei und einer neuen Ansicht master Seitendatei. Eine Ansicht master Seite enthält das Layout und freigegebene Inhalte für Ansichten in einer ASP.NET MVC-Anwendung. Die Ansicht master Seite enthält beispielsweise die Kopf- und Navigationsregisterkarten und die Fußzeile, die in Abbildung 7 angezeigt werden. Ich überschriebe die vorhandene Site.Master-Ansicht master Seite im Ordner Views\Shared mit der neuen Site.Master-Datei des Designunternehmens,

Das Designunternehmen hat auch ein neues kaskadierendes Stylesheet und eine Reihe von Bildern erstellt. Ich habe diese neuen Dateien im Ordner Inhalt abgelegt und die vorhandene Datei Site.css überschrieben. Sie sollten alle statischen Inhalte im Ordner Inhalt ablegen.

Beachten Sie, dass der neue Entwurf für den Kontakt-Manager Bilder zum Bearbeiten und Löschen von Kontakten enthält. In der HTML-Tabelle der Kontakte wird neben jedem Kontakt ein Bild bearbeiten und löschen angezeigt.

Ursprünglich diese Links, die mit dem HTML gerendert wurden. ActionLink()-Hilfsprogramm wie folgt:

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

Die Html.ActionLink()-Methode unterstützt keine Bilder (die Methode HTML codiert den Linktext aus Sicherheitsgründen). Daher habe ich die Aufrufe von Html.ActionLink() wie folgt durch Aufrufe von Url.Action() ersetzt:

<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>

Die Html.ActionLink()-Methode rendert einen gesamten HTML-Link. Die Url.Action()-Methode hingegen rendert nur die URL ohne tag<>.

Beachten Sie außerdem, dass das neue Design sowohl ausgewählte als auch nicht ausgewählte Registerkarten enthält. In Abbildung 8 ist beispielsweise die Registerkarte Neuen Kontakt erstellen ausgewählt, und die Registerkarte Meine Kontakte ist nicht ausgewählt.

Abbildung 08: Ausgewählte und nicht ausgewählte Registerkarten(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Um das Rendern ausgewählter und nicht ausgewählter Registerkarten zu unterstützen, habe ich ein benutzerdefiniertes HTML-Hilfsprogramm namens MenuItemHelper erstellt. Diese Hilfsmethode rendert entweder ein <li-Tag> oder ein <li class="selected"> -Tag, je nachdem, ob der aktuelle Controller und die aktuelle Aktion dem Controller und dem Aktionsnamen entsprechen, der an das Hilfsprogramm übergeben wird. Der Code für menuItemHelper ist in Listing 1 enthalten.

Listing 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 verwendet intern die TagBuilder-Klasse, um das <HTML-Tag li> zu erstellen. Die TagBuilder-Klasse ist eine sehr nützliche Hilfsprogrammklasse, die Sie verwenden können, wenn Sie ein neues HTML-Tag erstellen müssen. Sie enthält Methoden zum Hinzufügen von Attributen, Hinzufügen von CSS-Klassen, Generieren von IDs und Ändern des inneren HTML-Codes des Tags.

Zusammenfassung

In dieser Iteration haben wir den visuellen Entwurf unserer ASP.NET MVC-Anwendung verbessert. Zunächst wurden Sie in die ASP.NET MVC Design Gallery eingeführt. Sie haben gelernt, wie Sie kostenlose Entwurfsvorlagen aus der ASP.NET MVC Design Gallery herunterladen, die Sie in Ihren ASP.NET MVC-Anwendungen verwenden können.

Als Nächstes haben wir erläutert, wie Sie einen benutzerdefinierten Entwurf erstellen können, indem Sie die standardmäßige Cascading-Stylesheetdatei ändern und master Seitendatei anzeigen. Um das neue Design zu unterstützen, mussten wir einige geringfügige Änderungen an unserer Contact Manager-Anwendung vornehmen. Wir haben beispielsweise ein neues HTML-Hilfsprogramm mit dem Namen MenuItemHelper hinzugefügt, das ausgewählte und nicht ausgewählte Registerkarten anzeigt.

In der nächsten Iteration befassen wir uns mit dem sehr wichtigen Thema der Validierung. Wir fügen unserer Anwendung Validierungscode hinzu, sodass ein Benutzer keinen neuen Kontakt erstellen kann, ohne erforderliche Werte wie Vor- und Nachname einer Person anzugeben.

ZurückWeiter