Share via

Iteracja 2 — Ulepszanie wyglądu aplikacji (VB)

  • Artykuł

autor: Microsoft

Pobierz kod

W tej iteracji poprawiamy wygląd aplikacji, modyfikując domyślną stronę wzorcową widoku MVC ASP.NET oraz kaskadowy arkusz stylów.

Tworzenie aplikacji MVC do zarządzania kontaktami ASP.NET (VB)

W tej serii samouczków utworzymy całą aplikację do zarządzania kontaktami od początku do końca. Aplikacja Contact Manager umożliwia przechowywanie informacji kontaktowych — nazw, numerów telefonów i adresów e-mail — dla listy osób.

Tworzymy aplikację za pośrednictwem wielu iteracji. Wraz z każdą iteracją stopniowo ulepszamy aplikację. Celem tego podejścia iteracji wielokrotnej jest umożliwienie zrozumienia przyczyny każdej zmiany.

  • Iteracja 1 — tworzenie aplikacji. W pierwszej iteracji tworzymy Menedżera kontaktów w najprostszy możliwy sposób. Dodajemy obsługę podstawowych operacji bazy danych: tworzenie, odczyt, aktualizowanie i usuwanie (CRUD).

  • Iteracja #2 — sprawia, że aplikacja wygląda ładnie. W tej iteracji poprawiamy wygląd aplikacji, modyfikując domyślną stronę wzorcową widoku MVC ASP.NET oraz kaskadowy arkusz stylów.

  • Iteracja 3 — dodawanie walidacji formularza. W trzeciej iteracji dodamy podstawową walidację formularza. Uniemożliwiamy użytkownikom przesyłanie formularza bez wypełniania wymaganych pól formularza. Weryfikujemy również adresy e-mail i numery telefonów.

  • Iteracja #4 — luźno sprzężenie aplikacji. W tej czwartej iteracji korzystamy z kilku wzorców projektowych oprogramowania, aby ułatwić konserwację i modyfikowanie aplikacji Contact Manager. Na przykład refaktoryzujemy naszą aplikację, aby używać wzorca repozytorium i wzorca wstrzykiwania zależności.

  • Iteracja 5 — tworzenie testów jednostkowych. W piątej iteracji ułatwiamy konserwację i modyfikowanie aplikacji przez dodawanie testów jednostkowych. Wyśmiewamy nasze klasy modelu danych i tworzymy testy jednostkowe dla naszych kontrolerów i logiki walidacji.

  • Iteracja 6 — używanie programowania opartego na testach. W tej szóstej iteracji do naszej aplikacji dodamy nowe funkcje, pisząc najpierw testy jednostkowe i pisząc kod względem testów jednostkowych. W tej iteracji dodajemy grupy kontaktów.

  • Iteracja #7 — dodawanie funkcji Ajax. W siódmej iteracji poprawiamy czas odpowiedzi i wydajność naszej aplikacji, dodając obsługę Ajax.

Ta iteracja

Celem tej iteracji jest poprawienie wyglądu aplikacji Contact Manager. Obecnie menedżer kontaktów używa domyślnej strony wzorcowej widoku MVC ASP.NET i kaskadowego arkusza stylów (zobacz Rysunek 1). Nie wyglądają one źle, ale nie chcę, aby Menedżer kontaktów wyglądał podobnie jak każdy inny ASP.NET witrynie MVC. Chcę zastąpić te pliki plikami niestandardowymi.

Zrzut ekranu przedstawia domyślny wygląd aplikacji ASP dot NET MVC.

Rysunek 01. Domyślny wygląd aplikacji MVC ASP.NET (kliknij, aby wyświetlić obraz pełnowymiarowy)

W tej iteracji omawiam dwa podejścia do ulepszania projektu wizualnego naszej aplikacji. Po pierwsze pokażę, jak korzystać z galerii ASP.NET MVC Design, aby pobrać bezpłatny szablon projektu MVC ASP.NET. Galeria ASP.NET MVC Design umożliwia tworzenie profesjonalnej aplikacji internetowej bez wykonywania żadnej pracy.

Postanowiłem nie używać szablonu z galerii ASP.NET MVC Design dla aplikacji Contact Manager. Zamiast tego miałem niestandardowy projekt stworzony przez profesjonalną firmę projektową. W drugiej części tego samouczka wyjaśniam, jak pracowałem z profesjonalną firmą projektową w celu utworzenia ostatecznego projektu MVC ASP.NET.

Zrzut ekranu przedstawiający galerię projektów ASP dot NET MVC.

Rysunek 02. Galeria projektów ASP.NET MVC (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Jak piszę ten samouczek, najpopularniejszym projektem w galerii jest projekt o nazwie Październik David Hauser. Możesz użyć tego projektu dla projektu ASP.NET MVC, wykonując następujące kroki:

  1. Kliknij przycisk Pobierz , aby pobrać plik October.zip na komputer.
  2. Kliknij prawym przyciskiem myszy pobrany plik October.zip i kliknij przycisk Odblokuj (zobacz Rysunek 3).
  3. Rozpakuj plik do folderu o nazwie październik.
  4. Zaznacz wszystkie pliki z folderu DesignTemplate znajdującego się w folderze październikowym, kliknij prawym przyciskiem myszy pliki i wybierz opcję menu Kopiuj.
  5. Kliknij prawym przyciskiem myszy węzeł projektu ContactManager w oknie Eksplorator rozwiązań programu Visual Studio i wybierz opcję menu Wklej (zobacz Rysunek 4).
  6. Wybierz opcję menu Programu Visual Studio Edytuj, Znajdź i zamień, Szybkie zastępowanie i zastępowanie [MyProjectName] elementem ContactManager (zobacz Rysunek 5).

Zrzut ekranu przedstawiający odblokowywanie pliku pobranego z Internetu.

Rysunek 03. Odblokowywanie pliku pobranego z Internetu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Zrzut ekranu przedstawia zastępowanie plików w Eksplorator rozwiązań.

Rysunek 04. Zastępowanie plików w Eksplorator rozwiązań (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Zrzut ekranu przedstawiający zastępowanie nazwy projektu menedżerem kontaktów.

Rysunek 05. Zastępowanie elementu [ProjectName] elementem ContactManager (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po wykonaniu tych kroków aplikacja internetowa będzie używać nowego projektu. Strona na rysunku 6 ilustruje wygląd aplikacji Contact Manager z październikowym projektem.

Zrzut ekranu przedstawiający menedżera kontaktów z szablonem października.

Rysunek 06. ContactManager z szablonem października (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Tworzenie niestandardowego projektu MVC ASP.NET

Galeria projektów MVC ASP.NET ma dobry wybór różnych stylów projektowania. Galeria zapewnia bezbolesny sposób dostosowywania wyglądu aplikacji MVC ASP.NET. I, oczywiście, Galeria ma dużą przewagę nad tym, że jest całkowicie bezpłatna.

Może być jednak konieczne utworzenie całkowicie unikatowego projektu witryny internetowej. W takim przypadku warto pracować z firmą zajmującą się projektowaniem witryn internetowych. Postanowiłem podjąć to podejście do projektowania aplikacji Contact Manager.

Spakowałem menedżera kontaktów z iteracji #1 i wysłałem projekt do firmy projektowej. Nie posiadali programu Visual Studio (wstydu dla nich!), ale to nie stanowiło problemu. Mogli pobrać bezpłatnie program Microsoft Visual Web Developer z https://www.asp.net witryny internetowej i otworzyć aplikację Contact Manager w programie Visual Web Developer. W ciągu kilku dni stworzyli projekt na rysunku 7.

Zrzut ekranu przedstawia projekt programu ASP dot MVC Contact Manager.

Rysunek 07. Projekt menedżera kontaktów MVC ASP.NET (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Nowy projekt składał się z dwóch głównych plików: nowego pliku kaskadowego arkusza stylów i nowego pliku strony wzorcowej widoku. Strona wzorcowa widoku zawiera układ i udostępnioną zawartość widoków w aplikacji MVC ASP.NET. Na przykład strona wzorcowa widoku zawiera nagłówek, karty nawigacji i stopkę wyświetlaną na rysunku 7. Zastąpiłem istniejącą stronę wzorcową widoku Site.Master w folderze Views\Shared z nowym plikiem Site.Master firmy projektowej.

Firma projektowa utworzyła również nowy kaskadowy arkusz stylów i zestaw obrazów. Te nowe pliki zostały umieszczone w folderze Content i zastąpiłem istniejący plik Site.css. Całą zawartość statyczną należy umieścić w folderze Zawartość.

Zauważ, że nowy projekt menedżera kontaktów zawiera obrazy do edycji i usuwania kontaktów. Obok każdego kontaktu w tabeli HTML kontaktów zostanie wyświetlony obraz Edytuj i Usuń.

Pierwotnie te linki, które zostały renderowane przy użyciu kodu HTML. Pomocnik ActionLink() w następujący sposób:

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

Metoda Html.ActionLink() nie obsługuje obrazów (metoda HTML koduje tekst linku ze względów bezpieczeństwa). W związku z tym wywołania metody Html.ActionLink() zostały zastąpione wywołaniami url.Action() w następujący sposób:

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

Metoda Html.ActionLink() renderuje cały hiperlink HTML. Z drugiej strony metoda Url.Action() renderuje tylko adres URL bez tagu <> .

Zauważ również, że nowy projekt zawiera zarówno wybrane, jak i niezaznaczone karty. Na przykład na rysunku 8 jest zaznaczona karta Utwórz nowy kontakt , a karta Moje kontakty nie jest zaznaczona.

Zrzut ekranu przedstawia zaznaczone i niezaznaczone karty.

Rysunek 08. Zaznaczone i niezaznaczone karty (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Aby obsługiwać renderowanie zaznaczonych i niezaznakowanych kart, utworzono niestandardowy pomocnik HTML o nazwie MenuItemHelper. Ta metoda pomocnika renderuje <tag li> lub <li class="selected"> tag w zależności od tego, czy bieżący kontroler i akcja odpowiadają kontrolerowi i nazwie akcji przekazanej do pomocnika. Kod menuItemHelper znajduje się na liście 1.

Lista 1 — Pomocnicy\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

Klasa MenuItemHelper używa klasy TagBuilder wewnętrznie do kompilowania tagu <HTML li> . Klasa TagBuilder jest bardzo przydatną klasą narzędziową, której można użyć zawsze, gdy trzeba utworzyć nowy tag HTML. Obejmuje ona metody dodawania atrybutów, dodawania klas CSS, generowania identyfikatorów i modyfikowania wewnętrznego kodu HTML tagu.

Podsumowanie

W tej iteracji ulepszyliśmy projekt wizualny naszej aplikacji ASP.NET MVC. Po pierwsze wprowadzono cię do galerii projektów MVC ASP.NET. Wiesz już, jak pobrać bezpłatne szablony projektowe z galerii projektów MVC ASP.NET, której można użyć w aplikacjach ASP.NET MVC.

Następnie omówiliśmy sposób tworzenia niestandardowego projektu przez zmodyfikowanie domyślnego pliku arkusza stylów kaskadowych i pliku strony widoku wzorcowego. Aby zapewnić obsługę nowego projektu, musieliśmy wprowadzić drobne zmiany w naszej aplikacji Contact Manager. Na przykład dodaliśmy nowy pomocnik HTML o nazwie MenuItemHelper, który wyświetla wybrane i niezaznaczone karty.

W następnej iteracji zajmujemy się bardzo ważnym tematem weryfikacji. Do naszej aplikacji dodamy kod weryfikacji, aby użytkownik nie mógł utworzyć nowego kontaktu bez podawania wymaganych wartości, takich jak imię i nazwisko osoby.

WsteczDalej