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


Итерация 1. Создание приложения (VB)

от Майкрософт

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

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

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

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

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

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

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

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

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

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

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

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

Эта итерация

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

Приложение Диспетчера контактов — это базовое приложение, управляемое базой данных. Приложение можно использовать для создания новых контактов, редактирования существующих и удаления контактов.

В этой итерации мы выполните следующие действия.

  1. ASP.NET приложения MVC
  2. Создание базы данных для хранения контактов
  3. Создание класса модели для базы данных с помощью Microsoft Entity Framework
  4. Создайте действие контроллера и представление, позволяющее получить список всех контактов в базе данных.
  5. Создание действий контроллера и представления, позволяющего создать новый контакт в базе данных
  6. Создание действий контроллера и представления, позволяющего изменять существующий контакт в базе данных
  7. Создание действий контроллера и представления, позволяющего удалить существующий контакт в базе данных

Обязательное программное обеспечение

В ASP.NET приложенияХ MVC на компьютере должна быть установлена Visual Studio 2008 или Visual Web Developer 2008 (Visual Web Developer — это бесплатная версия Visual Studio, которая не включает все расширенные функции Visual Studio). Вы можете скачать пробную версию Visual Studio 2008 или Visual Web Developer по следующему адресу:

https://www.asp.net/downloads/essential/

Примечание

Для ASP.NET приложений MVC с Visual Web Developer необходимо установить Visual Web Developer с пакетом обновления 1 (SP1). Без пакета обновления 1 (SP1) нельзя создавать проекты веб-приложений.

ASP.NET платформы MVC. Платформу ASP.NET MVC можно скачать по следующему адресу:

https://www.asp.net/mvc

В этом руководстве мы используем Microsoft Entity Framework для доступа к базе данных. Платформа Entity Framework входит в состав платформа .NET Framework 3.5 с пакетом обновления 1 (SP1). Этот пакет обновления можно скачать из следующего расположения:

https://www.microsoft.com/download/details.aspx?id=22& desc=dotnet35

В качестве альтернативы каждому из этих загрузок по одному можно воспользоваться установщиком веб-платформы (Web PI). Вы можете скачать веб-идентификатор по следующему адресу:

https://www.asp.net/downloads/essential/

проект MVC ASP.NET

ASP.NET проект веб-приложения MVC. Запустите Visual Studio и выберите пункт меню Файл, Создать проект. Откроется диалоговое окно Новый проект (см. рис. 1). Выберите тип веб-проекта и шаблон ASP.NET веб-приложение MVC . Присвойте новому проекту имя ContactManager и нажмите кнопку ОК.

Убедитесь, что в раскрывающемся списке в правом верхнем углу диалогового окна Новый проект выбран платформа .NET Framework 3.5. В противном случае шаблон веб-приложения MVC ASP.NET не отображается.

Снимок экрана: диалоговое окно

Рис. 01. Диалоговое окно "Новый проект" (щелкните для просмотра полноразмерного изображения)

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

Примечание

Поскольку Visual Web Developer не поддерживает тестовые проекты, при использовании Visual Web Developer диалоговое окно Создание проекта модульного теста не отображается.

Снимок экрана: диалоговое окно

Рис. 02. Диалоговое окно "Создание проекта модульного теста" (щелкните для просмотра полноразмерного изображения)

ASP.NET приложение MVC отображается в окне Обозреватель решений Visual Studio (см. рис. 3). Если окно Обозреватель решений не отображается, его можно открыть, выбрав пункт меню Вид, Обозреватель решений. Обратите внимание, что решение содержит два проекта: проект ASP.NET MVC и проект Test. Проект ASP.NET MVC называется ContactManager, а проект Test — ContactManager.Tests.

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

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

Удаление примеров файлов проекта

Шаблон проекта ASP.NET MVC содержит примеры файлов для контроллеров и представлений. Перед созданием нового приложения ASP.NET MVC необходимо удалить эти файлы. Вы можете удалить файлы и папки в окне Обозреватель решений, щелкнув правой кнопкой мыши файл или папку и выбрав пункт меню Удалить.

Необходимо удалить следующие файлы из проекта MVC ASP.NET:

  • \Controllers\HomeController.vb

  • \Views\Home\About.aspx

  • \Views\Home\Index.aspx

Кроме того, необходимо удалить следующий файл из проекта Test:

\Controllers\HomeControllerTest.vb

Создание базы данных

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

Платформа ASP.NET MVC с любой современной базой данных, включая базы данных Microsoft SQL Server, Oracle, MySQL и IBM DB2. В этом руководстве мы используем базу данных Microsoft SQL Server. При установке Visual Studio предоставляется возможность установки Microsoft SQL Server Express которая является бесплатной версией базы данных Microsoft SQL Server.

Создайте базу данных, щелкнув правой кнопкой мыши папку App_Data в окне Обозреватель решений и выбрав пункт меню Добавить, Новый элемент. В диалоговом окне Добавление нового элемента выберите категорию Данные и шаблон базы данных SQL Server (см. рис. 4). Назовите новую базу данных ContactManagerDB.mdf и нажмите кнопку ОК.

Снимок экрана: создание базы данных Microsoft Sequel Server Express.

Рис. 04. Создание базы данных Microsoft SQL Server Express (щелкните для просмотра полноразмерного изображения)

После создания базы данных она появится в папке App_Data в окне Обозреватель решений. Дважды щелкните файл ContactManager.mdf, чтобы открыть окно сервер Обозреватель и подключиться к базе данных.

Примечание

Окно Обозреватель сервера называется окном Обозреватель базы данных в случае Microsoft Visual Web Developer.

В окне Серверная Обозреватель можно создавать новые объекты базы данных, такие как таблицы баз данных, представления, триггеры и хранимые процедуры. Щелкните правой кнопкой мыши папку Таблицы и выберите пункт меню Добавить новую таблицу. Появится Designer таблица базы данных (см. рис. 5).

Снимок экрана: Designer таблицы базы данных.

Рис. 05. Designer таблицы базы данных (щелкните для просмотра полноразмерного изображения)

Нам нужно создать таблицу, содержащую следующие столбцы:

Имя столбца Тип данных Разрешить значения NULL
Идентификатор INT false
FirstName nvarchar(50) false
LastName nvarchar(50) false
Номер телефона nvarchar(50) false
Адрес электронной почты nvarchar(255) false

Первый столбец, столбец Id, является специальным. Необходимо пометить столбец Id как столбец Идентификатор и Первичный ключ. Чтобы указать, что столбец является столбцом Identity, разверните раздел Свойства столбца (посмотрите внизу рис. 6) и прокрутите вниз до свойства Спецификация удостоверения. Задайте для свойства (Is Identity) значение Да.

Столбец помечается как столбец первичного ключа, щелкнув столбец и нажав кнопку со значком ключа. После того как столбец помечен как столбец первичного ключа, рядом со столбцом отображается значок ключа (см. рис. 6).

Завершив создание таблицы, нажмите кнопку Сохранить (кнопка со значком дискеты), чтобы сохранить новую таблицу. Присвойте новой таблице имя Контакты.

Завершив создание таблицы базы данных "Контакты", необходимо добавить в нее некоторые записи. Щелкните правой кнопкой мыши таблицу Контакты в окне Серверная Обозреватель и выберите пункт меню Показать данные таблицы. Введите один или несколько контактов в появившемся виде сетки.

Создание модели данных

Приложение MVC ASP.NET состоит из моделей, представлений и контроллеров. Начнем с создания класса Model, представляющего таблицу Contacts, созданную в предыдущем разделе.

В этом руководстве мы используем Microsoft Entity Framework для автоматического создания класса модели из базы данных.

Примечание

Платформа ASP.NET MVC никак не привязана к Microsoft Entity Framework. Вы можете использовать ASP.NET MVC с альтернативными технологиями доступа к базам данных, включая NHibernate, LINQ to SQL или ADO.NET.

Чтобы создать классы модели данных, выполните следующие действия.

  1. Щелкните правой кнопкой мыши папку Models в окне Обозреватель решений и выберите Добавить, Новый элемент. Откроется диалоговое окно Добавление нового элемента (см. рис. 6).
  2. Выберите категорию Данные и шаблон ADO.NET модель данных сущности . Назовите модель данных ContactManagerModel.edmx и нажмите кнопку Добавить . Откроется мастер модели данных сущности (см. рис. 7).
  3. На шаге Выбор содержимого модели выберите Создать из базы данных (см. рис. 7).
  4. На шаге Выбор подключения к данным выберите базу данных ContactManagerDB.mdf и введите имя ContactManagerDBEntities в поле Параметры подключения к сущностям (см. рис. 8).
  5. На шаге Выбор объектов базы данных установите флажок Таблицы (см. рис. 9). Модель данных будет включать все таблицы, содержащиеся в вашей базе данных (есть только одна — таблица "Контакты"). Введите пространство имен Models. Нажмите кнопку Готово, чтобы завершить работу мастера.

Снимок экрана: диалоговое окно

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

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

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

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

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

Снимок экрана: выбор объектов базы данных.

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

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

Мастер модели данных сущности создает имена классов на основе имен таблиц базы данных. Почти всегда необходимо изменить имя класса, созданного мастером. Щелкните правой кнопкой мыши класс Contacts в конструкторе и выберите пункт меню Переименовать. Измените имя класса с Contacts (во множественном числе) на Contact (в единственном числе). После изменения имени класса класс должен выглядеть следующим образом: рис. 10.

Снимок экрана: класс Contact.

Рис. 10. Класс Contact (щелкните для просмотра полноразмерного изображения)

На этом этапе мы создали модель базы данных. Мы можем использовать класс Contact для представления определенной записи контакта в нашей базе данных.

Создание домашнего контроллера

Следующим шагом является создание контроллера Home. Контроллер Home — это контроллер по умолчанию, вызываемый в приложении MVC ASP.NET.

Создайте класс контроллера Home, щелкнув правой кнопкой мыши папку Контроллеры в окне Обозреватель решений и выбрав пункт меню Добавить, Контроллер (см. рис. 11). Обратите внимание на флажок Добавить методы действий для сценариев создания, обновления и сведений. Убедитесь, что этот флажок установлен, прежде чем нажать кнопку Добавить .

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

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

При создании контроллера Home вы получите класс в листинге 1.

Листинг 1. Контроллеры\HomeController.vb

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    '
    ' GET: /Home/

    Function Index() As ActionResult
        Return View()
    End Function

    '
    ' GET: /Home/Details/5

    Function Details(ByVal id As Integer) As ActionResult
        Return View()
    End Function

    '
    ' GET: /Home/Create

    Function Create() As ActionResult
        Return View()
    End Function

    '
    ' POST: /Home/Create

    <AcceptVerbs(HttpVerbs.Post)> _
    Function Create(ByVal collection As FormCollection) As ActionResult
        Try
            ' TODO: Add insert logic here
            Return RedirectToAction("Index")
        Catch
            Return View()
        End Try
    End Function

    '
    ' GET: /Home/Edit/5

    Function Edit(ByVal id As Integer) As ActionResult
        Return View()
    End Function

    '
    ' POST: /Home/Edit/5

    <AcceptVerbs(HttpVerbs.Post)> _
    Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult
        Try
            ' TODO: Add update logic here

            Return RedirectToAction("Index")
        Catch
            Return View()
        End Try
    End Function
End Class

Перечисление контактов

Чтобы отобразить записи в таблице базы данных Контактов, необходимо создать действие Index() и представление Индекс.

Контроллер Home уже содержит действие Index(). Нам нужно изменить этот метод, чтобы он выглядел так, как в листинге 2.

Листинг 2. Контроллеры\HomeController.vb

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Private _entities As New ContactManagerDBEntities()

    '
    ' GET: /Home/

    Function Index() As ActionResult
        Return View(_entities.ContactSet.ToList())
    End Function
…

Обратите внимание, что класс контроллера Home в листинге 2 содержит частное поле с именем _entities. Поле _entities представляет сущности из модели данных. Для взаимодействия с базой данных используется поле _entities.

Метод Index() возвращает представление, представляющее все контакты из таблицы базы данных Contacts. Выражение _entities. ContactSet.ToList() возвращает список контактов в виде универсального списка.

Теперь, когда мы создали контроллер индекса, необходимо создать представление Индекс. Перед созданием представления индексов скомпилируйте приложение, выбрав в меню пункт Сборка, Сборка решения. Перед добавлением представления всегда следует компилировать проект, чтобы список классов моделей отображался в диалоговом окне Добавление представления .

Чтобы создать представление Индекс, щелкните правой кнопкой мыши метод Index() и выберите пункт меню Добавить представление (см. рис. 12). При выборе этого пункта меню открывается диалоговое окно Добавление представления (см. рис. 13).

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

Рис. 12. Добавление представления индекса (щелкните, чтобы просмотреть полноразмерное изображение)

В диалоговом окне Добавление представления проверка флажок Создать строго типизированное представление. Выберите Просмотр класса данных ContactManager.Contact и Просмотр списка содержимого. При выборе этих параметров создается представление со списком записей контактов.

Снимок экрана: диалоговое окно

Рис. 13. Диалоговое окно "Добавить представление" (щелкните для просмотра полноразмерного изображения)

При нажатии кнопки Добавить создается представление индексов в листинге 3. Обратите внимание на директиву <%@ Page %> в верхней части файла. Представление Index наследуется от класса ViewPage<IEnumerable<ContactManager.Models.Contact>> . Другими словами, класс Model в представлении представляет список сущностей Contact.

Тело представления Индекс содержит цикл foreach, который выполняет итерацию по каждому из контактов, представленных классом Model. Значение каждого свойства класса Contact отображается в таблице HTML.

Листинг 3. Views\Home\Index.aspx (без изменений)

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable(Of ContactManager.Contact))" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <p>
        <%=Html.ActionLink("Create New", "Create")%>
    </p>
    
    <table>
        <tr>
            <th></th>
            <th>
                Id
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
        </tr>

    <% For Each item In Model%>
    
        <tr>
            <td>
                <%=Html.ActionLink("Edit", "Edit", New With {.id = item.Id})%> |
                <%=Html.ActionLink("Details", "Details", New With {.id = item.Id})%>
            </td>
            <td>
                <%=Html.Encode(item.Id)%>
            </td>
            <td>
                <%=Html.Encode(item.FirstName)%>
            </td>
            <td>
                <%=Html.Encode(item.LastName)%>
            </td>
            <td>
                <%=Html.Encode(item.Phone)%>
            </td>
            <td>
                <%=Html.Encode(item.Email)%>
            </td>
        </tr>
    
    <% Next%>

    </table>

</asp:Content>

Необходимо внести одно изменение в представление индекса. Так как мы не создаем представление сведений, мы можем удалить ссылку Сведения. Найдите и удалите следующий код в представлении Индекс:

{.id = item. Id})%>

После изменения представления индекса можно запустить приложение Диспетчера контактов. Выберите пункт меню Отладка, Начать отладку или просто нажмите клавишу F5. При первом запуске приложения появится диалоговое окно на рис. 14. Выберите параметр Изменить файл Web.config, чтобы включить отладку , и нажмите кнопку ОК.

Снимок экрана: включение отладки.

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

Представление индексов возвращается по умолчанию. В этом представлении перечислены все данные из таблицы базы данных Контактов (см. рис. 15).

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

Рис. 15. Представление индекса (щелкните, чтобы просмотреть полноразмерное изображение)

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

Создание новых контактов

Чтобы пользователи могли создавать новые контакты, необходимо добавить два действия Create() в контроллер Home. Нам нужно создать одно действие Create(), которое возвращает HTML-форму для создания нового контакта. Нам нужно создать второе действие Create(), которое выполняет фактическую вставку базы данных нового контакта.

Новые методы Create(), которые необходимо добавить в контроллер Home, содержатся в листинге 4.

Листинг 4. Контроллеры\HomeController.vb (с методами создания)

'
' GET: /Home/Create

Function Create() As ActionResult
    Return View()
End Function

'
' POST: /Home/Create

<AcceptVerbs(HttpVerbs.Post)> _
Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
    If Not ModelState.IsValid Then
        Return View()
    End If

    Try
        _entities.AddToContactSet(contactToCreate)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Первый метод Create() можно вызвать с помощью HTTP GET, а второй метод Create() можно вызвать только с помощью HTTP POST. Иными словами, второй метод Create() можно вызвать только при публикации HTML-формы. Первый метод Create() просто возвращает представление, содержащее HTML-форму для создания нового контакта. Второй метод Create() гораздо интереснее: он добавляет новый контакт в базу данных.

Обратите внимание, что второй метод Create() был изменен для принятия экземпляра класса Contact. Значения формы, опубликованные из HTML-формы, автоматически привязываются к этому классу Contact платформой MVC ASP.NET. Каждому полю формы из формы СОЗДАНИЯ HTML присваивается свойство параметра Contact.

Обратите внимание, что параметр Contact имеет атрибут [Bind]. Атрибут [Bind] используется для исключения свойства Contact Id из привязки. Так как свойство Id представляет свойство Identity, мы не хотим задавать свойство Id.

В теле метода Create() entity Framework используется для вставки нового контакта в базу данных. Новый контакт добавляется в существующий набор контактов и вызывается метод SaveChanges(), чтобы отправить эти изменения обратно в базовую базу данных.

Вы можете создать HTML-форму для создания контактов, щелкнув правой кнопкой мыши один из двух методов Create() и выбрав пункт меню Добавить представление (см. рис. 16).

Снимок экрана: добавление представления

Рис. 16. Добавление представления "Создать" (щелкните для просмотра полноразмерного изображения)

В диалоговом окне Добавление представления выберите класс ContactManager.Contact и параметр Создать для просмотра содержимого (см. рис. 17). При нажатии кнопки Добавить автоматически создается представление Создать.

Снимок экрана: разрыв страницы.

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

Представление Создание содержит поля формы для каждого свойства класса Contact. Код для представления "Создание" включен в листинг 5.

Листинг 5. Views\Home\Create.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% Using Html.BeginForm()%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% End Using %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

После изменения методов Create() и добавления представления Создать можно запустить приложение Contact Manager и создать новые контакты. Щелкните ссылку Создать, которая отображается в представлении Индекс, чтобы перейти к представлению Создать. Представление должно отобразиться на рис. 18.

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

Рис. 18. Создание представления (щелкните, чтобы просмотреть полноразмерное изображение)

Изменение контактов

Добавление функциональных возможностей для редактирования записи контакта очень похоже на добавление функций для создания новых записей контактов. Во-первых, необходимо добавить два новых метода Edit в класс контроллера Home. Эти новые методы Edit() содержатся в листинге 6.

Листинг 6. Контроллеры\HomeController.vb (с методами Edit)

'
' GET: /Home/Edit/5

Function Edit(ByVal id As Integer) As ActionResult
    Dim contactToEdit = (from c in _entities.ContactSet _
                       where c.Id = id _
                       select c).FirstOrDefault()

    Return View(contactToEdit)
End Function

'
' POST: /Home/Edit/5

<AcceptVerbs(HttpVerbs.Post)> _
Function Edit(ByVal contactToEdit As Contact) As ActionResult
    If Not ModelState.IsValid Then
        Return View()
    End If

    Try
        Dim originalContact = (from c in _entities.ContactSet _
                         where c.Id = contactToEdit.Id _
                         select c).FirstOrDefault()
        _entities.ApplyPropertyChanges( originalContact.EntityKey.EntitySetName, contactToEdit)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Первый метод Edit() вызывается операцией HTTP GET. Этому методу передается параметр Id, представляющий идентификатор редактируемой записи контакта. Entity Framework используется для получения контакта, соответствующего идентификатору. Возвращается представление, содержащее HTML-форму для редактирования записи.

Второй метод Edit() выполняет фактическое обновление базы данных. Этот метод принимает экземпляр класса Contact в качестве параметра. Платформа MVC ASP.NET автоматически привязывает поля формы из формы Edit к этому классу. Обратите внимание, что атрибут [Bind] не включается при редактировании contact (нам нужно значение свойства Id).

Entity Framework используется для сохранения измененного контакта в базе данных. Исходный контакт необходимо сначала получить из базы данных. Затем вызывается метод Entity Framework ApplyPropertyChanges() для записи изменений в contact. Наконец, вызывается метод Entity Framework SaveChanges() для сохранения изменений в базовой базе данных.

Вы можете создать представление, содержащее форму Редактирование, щелкнув правой кнопкой мыши метод Edit() и выбрав пункт меню Добавить представление. В диалоговом окне Добавление представления выберите класс ContactManager.Models.Contact и Изменить содержимое представления (см. рис. 19).

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

Рис. 19. Добавление представления редактирования (щелкните, чтобы просмотреть полноразмерное изображение)

При нажатии кнопки Добавить автоматически создается новое представление Правка. Созданная HTML-форма содержит поля, соответствующие каждому свойству класса Contact (см. листинг 7).

Листинг 7. Views\Home\Edit.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Edit</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <%=Html.ValidationSummary()%>

    <% Using Html.BeginForm() %>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="FirstName">FirstName:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">LastName:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% End Using %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Удаление контактов

Если вы хотите удалить контакты, необходимо добавить два действия Delete() в класс контроллера Home. Первое действие Delete() отображает форму подтверждения удаления. Второе действие Delete() выполняет фактическое удаление.

Примечание

Позже, в итерации 7, мы изменим диспетчер контактов, чтобы он поддерживал одношаговую удаление Ajax.

Два новых метода Delete() приведены в листинге 8.

Листинг 8. Контроллеры\HomeController.vb (методы удаления)

'
' GET: /Home/Delete/5

Function Delete(ByVal id As Integer) As ActionResult
    Dim contactToDelete = (from c in _entities.ContactSet _
                       where c.Id = id _
                       select c).FirstOrDefault()

    Return View(contactToDelete)
End Function

'
' POST: /Home/Delete/5

<AcceptVerbs(HttpVerbs.Post)> _
Function Delete(ByVal contactToDelete As Contact) As ActionResult
    Try
        Dim originalContact = (from c in _entities.ContactSet _
                         where c.Id = contactToDelete.Id _
                         select c).FirstOrDefault()
        _entities.DeleteObject(originalContact)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Первый метод Delete() возвращает форму подтверждения удаления записи контакта из базы данных (см. рис. 20). Второй метод Delete() выполняет фактическую операцию удаления для базы данных. После извлечения исходного контакта из базы данных вызываются методы Entity Framework DeleteObject() и SaveChanges() для выполнения удаления базы данных.

Снимок экрана: представление подтверждения удаления.

Рис. 20. Представление подтверждения удаления (щелкните, чтобы просмотреть полноразмерное изображение)

Необходимо изменить представление индекса, чтобы оно содержало ссылку для удаления записей контактов (см. рис. 21). Необходимо добавить следующий код в ту же ячейку таблицы, которая содержит ссылку Изменить:

{.id = item. Id})%>

Снимок экрана: представление индекса со ссылкой

Рис. 21. Представление индекса со ссылкой "Изменить" (щелкните, чтобы просмотреть полноразмерное изображение)

Далее необходимо создать представление подтверждения удаления. Щелкните правой кнопкой мыши метод Delete() в классе контроллера Home и выберите пункт меню Добавить представление. Откроется диалоговое окно Добавление представления (см. рис. 22).

В отличие от представлений "Список", "Создание" и "Изменение", диалоговое окно "Добавление представления" не содержит возможность создания представления "Удалить". Вместо этого выберите класс данных ContactManager.Models.Contact и содержимое пустого представления. При выборе параметра Пустое содержимое представления потребуется создать представление самостоятельно.

Снимок экрана: добавление представления подтверждения удаления.

Рис. 22. Добавление представления подтверждения удаления (щелкните, чтобы просмотреть полноразмерное изображение)

Содержимое представления Удаление содержится в листинге 9. Это представление содержит форму, которая подтверждает, следует ли удалить определенный контакт (см. рис. 21).

Листинг 9. Views\Home\Delete.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.Contact)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Delete</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Delete</h2>
    
    <p>
    Are you sure that you want to delete the entry for
    <%= Model.FirstName %> <%= Model.LastName %>?
    </p>

    <% Using Html.BeginForm(New With { .Id = Model.Id }) %>
       <p> 
            <input type="submit" value="Delete" />
        </p>
    <% End Using %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Изменение имени контроллера по умолчанию

Возможно, вас беспокоит, что имя класса контроллера для работы с контактами называется класс HomeController. Не следует ли называть контроллер ContactController?

Эту проблему достаточно легко устранить. Сначала необходимо выполнить рефакторинг имени контроллера Home. Откройте класс HomeController в Visual Studio Code Редактор, щелкните правой кнопкой мыши имя класса и выберите пункт меню Переименовать. Если выбрать этот параметр меню, откроется диалоговое окно Переименовать.

Снимок экрана: рефакторинг имени контроллера.

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

Снимок экрана: диалоговое окно переименования.

Рис. 24. Использование диалогового окна "Переименование" (щелкните для просмотра полноразмерного изображения)

При переименовании класса контроллера Visual Studio также обновит имя папки в папке Views. Visual Studio переименует папку \Views\Home в папку \Views\Contact.

После внесения этого изменения в приложение больше не будет контроллера Home. При запуске приложения вы получите страницу ошибки на рис. 25.

Снимок экрана: отсутствие контроллера по умолчанию.

Рис. 25. Нет контроллера по умолчанию (щелкните для просмотра полноразмерного изображения)

Нам нужно обновить маршрут по умолчанию в файле Global.asax, чтобы использовать контроллер contact вместо контроллера Home. Откройте файл Global.asax и измените контроллер по умолчанию, используемый маршрутом по умолчанию (см. листинг 10).

Листинг 10. Global.asax.vb

Public Class MvcApplication
    Inherits System.Web.HttpApplication

    Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

        ' MapRoute takes the following parameters, in order:
        ' (1) Route name
        ' (2) URL with parameters
        ' (3) Parameter defaults
        routes.MapRoute( _
            "Default", _
            "{controller}/{action}/{id}", _
            New With {.controller = "Home", .action = "Index", .id = ""} _
        )

    End Sub

    Sub Application_Start()
        RegisterRoutes(RouteTable.Routes)
    End Sub
End Class

После внесения этих изменений диспетчер контактов будет работать правильно. Теперь он будет использовать класс контроллера Contact в качестве контроллера по умолчанию.

Сводка

В этой первой итерации мы максимально быстро создали базовое приложение Диспетчера контактов. Мы воспользовались преимуществами Visual Studio для автоматического создания исходного кода для наших контроллеров и представлений. Мы также воспользовались преимуществами Entity Framework для автоматического создания классов модели базы данных.

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

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

Во-вторых, мы не реализовали проверку формы. Например, ничто не мешает отправить форму Создания контакта без ввода значений для любого из полей формы. Кроме того, можно ввести недопустимые номера телефонов и адреса электронной почты. Мы приступим к решению проблемы проверки формы в итерации 3.

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