Поделиться через

Итерация 2. Улучшение внешнего вида приложения (VB)

  • Статья

от Корпорации Майкрософт

Скачивание кода

В этой итерации мы улучшаем внешний вид приложения, изменяя ASP.NET представлении MVC по умолчанию master странице и каскадной таблице стилей.

Создание приложения управления контактами ASP.NET MVC (VB)

В этой серии учебников мы создадим все приложение "Управление контактами" от начала до конца. Приложение Диспетчера контактов позволяет хранить контактные данные ( имена, номера телефонов и адреса электронной почты) для списка людей.

Мы создаем приложение с помощью нескольких итераций. С каждой итерацией мы постепенно улучшаем приложение. Цель этого подхода с несколькими итерациями — дать возможность понять причину каждого изменения.

  • Итерация 1 — создание приложения. В первой итерации мы создадим диспетчер контактов самым простым способом. Добавлена поддержка базовых операций базы данных: создание, чтение, обновление и удаление (CRUD).

  • Итерация 2 — сделайте приложение красивым. В этой итерации мы улучшаем внешний вид приложения, изменяя ASP.NET представлении MVC по умолчанию master странице и каскадной таблице стилей.

  • Итерация 3 — добавление проверки формы. В третьей итерации мы добавим базовую проверку формы. Мы запрещаем пользователям отправлять формы без заполнения обязательных полей формы. Мы также проверяем адреса электронной почты и номера телефонов.

  • Итерация 4 . Сделайте приложение слабосвязанным. В этой четвертой итерации мы воспользуемся несколькими шаблонами проектирования программного обеспечения, чтобы упростить обслуживание и изменение приложения Диспетчера контактов. Например, мы рефакторинг приложения используем шаблон репозитория и шаблон внедрения зависимостей.

  • Итерация 5 — создание модульных тестов. В пятой итерации мы упростим обслуживание и изменение приложения путем добавления модульных тестов. Мы макетируем классы модели данных и создаем модульные тесты для контроллеров и логики проверки.

  • Итерация 6 . Используйте разработку на основе тестирования. В этой шестой итерации мы добавим новые функции в приложение, сначала написав модульные тесты и написав код для модульных тестов. В этой итерации мы добавим группы контактов.

  • Итерация 7 — добавление функциональных возможностей Ajax. В седьмой итерации мы повышаем скорость отклика и производительность приложения, добавляя поддержку Ajax.

Эта итерация

Цель этой итерации — улучшить внешний вид приложения Диспетчера контактов. В настоящее время диспетчер контактов использует ASP.NET представлении MVC по умолчанию master странице и каскадной таблице стилей (см. рис. 1). Они не выглядят плохо, но я не хочу, чтобы диспетчер контактов выглядел так же, как и все остальные ASP.NET веб-сайте MVC. Я хочу заменить эти файлы пользовательскими файлами.

Снимок экрана: внешний вид приложения ASP dot NET MVC по умолчанию.

Рис. 01. Внешний вид приложения ASP.NET MVC по умолчанию (щелкните для просмотра полноразмерного изображения)

В этой итерации я обсудим два подхода к улучшению визуального дизайна нашего приложения. Во-первых, я покажу вам, как воспользоваться преимуществами коллекции ASP.NET MVC Design, чтобы скачать бесплатный шаблон ASP.NET MVC design. Коллекция ASP.NET MVC Design позволяет создавать профессиональное веб-приложение, не выполняя никаких действий.

Я решил не использовать шаблон из коллекции ASP.NET MVC Design для приложения Диспетчера контактов. Вместо этого, у меня был пользовательский дизайн, созданный профессиональной дизайнерской фирмой. Во второй части этого руководства я объясню, как я работал с профессиональной дизайнерской компанией, чтобы создать окончательный ASP.NET MVC дизайн.

Снимок экрана: коллекция конструкторов MVC ASP dot NET.

Рис. 02. Коллекция макетов ASP.NET MVC (щелкните для просмотра полноразмерного изображения)

Как я пишу это руководство, самый популярный дизайн в галерее дизайн называется Октябрь Дэвид Хаузер. Эту конструкцию можно использовать для проекта ASP.NET MVC, выполнив следующие действия.

  1. Нажмите кнопку Скачать , чтобы скачать файл October.zip на компьютер.
  2. Щелкните правой кнопкой мыши скачанный файл October.zip и нажмите кнопку Разблокировать (см. рис. 3).
  3. Распакуть файл в папку с именем October.
  4. Выберите все файлы из папки DesignTemplate, содержащейся в папке October, щелкните их правой кнопкой мыши и выберите пункт меню Копировать.
  5. Щелкните правой кнопкой мыши узел проекта ContactManager в окне Обозреватель решений Visual Studio и выберите пункт меню Вставить (см. рис. 4).
  6. Выберите пункт меню Visual Studio Изменить, Найти и заменить, Быстро заменить и заменить [MyProjectName]на ContactManager (см. рис. 5).

Снимок экрана: разблокировка файла, загруженного из Интернета.

Рис. 03. Разблокировка файла, скачаемого из Интернета (щелкните для просмотра полноразмерного изображения)

Снимок экрана: перезапись файлов в Обозреватель решений.

Рис. 04. Перезапись файлов в Обозреватель решений (щелкните для просмотра полноразмерного изображения)

Снимок экрана: замена имени проекта диспетчером контактов.

Рис. 05. Замена [ProjectName] на ContactManager (щелкните для просмотра полноразмерного изображения)

После выполнения этих действий веб-приложение будет использовать новый дизайн. На странице на рисунке 6 показан внешний вид приложения Диспетчера контактов с макетом за октябрь.

Снимок экрана: диспетчер контактов с шаблоном за октябрь.

Рис. 06. ContactManager с шаблоном октября (щелкните для просмотра полноразмерного изображения)

Создание пользовательской ASP.NET макета MVC

Коллекция ASP.NET MVC Design Gallery имеет хороший выбор различных стилей оформления. Коллекция предоставляет безболезненный способ настройки внешнего вида приложений ASP.NET MVC. И, конечно, галерея имеет большое преимущество в том, что она полностью свободна.

Однако может потребоваться создать совершенно уникальный дизайн для вашего веб-сайта. В этом случае имеет смысл работать с компанией по разработке веб-сайтов. Я решил использовать этот подход для разработки приложения Диспетчера контактов.

Я заархивировал диспетчер контактов из итерации 1 и отправил проект в проектную компанию. У них не было Visual Studio (стыдно за них!), но это не представляет проблемы. Они смогли бесплатно скачать Microsoft Visual Web Developer с https://www.asp.net веб-сайта и открыть приложение Диспетчер контактов в Visual Web Developer. В течение нескольких дней они подготовили дизайн на рис. 7.

Снимок экрана: asp dot NET MVC Contact Manager Design.

Рис. 07. Конструктор диспетчера контактов ASP.NET MVC (щелкните для просмотра полноразмерного изображения)

Новая конструкция состояла из двух файлов main: нового файла каскадной таблицы стилей и нового представления master файла подкачки. Страница представления master содержит макет и общее содержимое для представлений в приложении ASP.NET MVC. Например, страница представления master включает верхний колонтитул, вкладки навигации и нижний колонтитул, которые отображаются на рисунке 7. Я перезаписывал существующее представление Site.Master master страницу в папке Views\Shared с помощью нового файла Site.Master от дизайнерской компании.

Дизайнерская компания также создала новую каскадную таблицу стилей и набор изображений. Я поместил эти новые файлы в папку Содержимое и перезаписывал существующий файл Site.css. Все статическое содержимое следует поместить в папку Содержимое.

Обратите внимание, что новый дизайн диспетчера контактов включает изображения для редактирования и удаления контактов. Рядом с каждым контактом в HTML-таблице контактов появится изображение Изменить и удалить.

Первоначально эти ссылки были отрисованы с помощью HTML. Вспомогатель ActionLink() выглядит следующим образом:

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

Метод Html.ActionLink() не поддерживает изображения (метод HTML кодирует текст ссылки по соображениям безопасности). Поэтому я заменил вызовы Html.ActionLink() вызовами url.Action() следующим образом:

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

Метод Html.ActionLink() отображает всю гиперссылку HTML. С другой стороны, метод Url.Action() отображает только URL-адрес без тега <> .

Кроме того, обратите внимание, что новый дизайн включает как выбранные, так и невыбранные вкладки. Например, на рис. 8 выбрана вкладка Создать новый контакт , а вкладка Мои контакты не выбрана.

Снимок экрана: выбранные и невыбранные вкладки.

Рис. 08. Выбранные и невыбранные вкладки (щелкните для просмотра полноразмерного изображения)

Для поддержки отрисовки выбранных и невыбранных вкладок я создал настраиваемую вспомогатель HTML с именем MenuItemHelper. Этот вспомогательный метод отображает либо <тег li> , либо <тег li class="selected"> в зависимости от того, соответствуют ли текущий контроллер и действие контроллеру и имени действия, переданного вспомогательному объекту. Код для MenuItemHelper содержится в листинге 1.

Листинг 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 использует класс TagBuilder для создания html-тега <li> . Класс TagBuilder — это очень полезный служебный класс, который можно использовать при создании нового HTML-тега. Он включает методы для добавления атрибутов, добавления классов CSS, создания идентификаторов и изменения внутреннего HTML-кода тега.

Итоги

В этой итерации мы улучшили визуальное оформление приложения MVC ASP.NET. Сначала вы познакомились с коллекцией ASP.NET MVC Design Gallery. Вы узнали, как скачать бесплатные шаблоны оформления из коллекции ASP.NET MVC, которые можно использовать в ASP.NET приложенияХ MVC.

Далее мы рассмотрели, как создать пользовательский дизайн, изменив файл каскадной таблицы стилей по умолчанию и master файл страницы просмотра. Для поддержки нового дизайна нам пришлось внести некоторые незначительные изменения в наше приложение Диспетчера контактов. Например, мы добавили новую вспомогатель HTML с именем MenuItemHelper, которая отображает выбранные и невыбранные вкладки.

В следующей итерации мы рассмотрим очень важный вопрос проверки. Мы добавим код проверки в приложение, чтобы пользователь не может создать новый контакт без предоставления необходимых значений, таких как имя и фамилия пользователя.

НазадВперед