Вспомогательные приложения, формы и проверка в ASP.NET MVC 4

по веб-Camp командам

Скачать обучающий комплект Web Camp

В модели ASP.NET MVC 4 и практическом занятии доступа к данным вы загрузили и выводите данные из базы данных. В этой практической лабораторной работе вы добавите в приложение музыкального магазина возможность редактирования этих данных.

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

После этого будут добавлены представления Edit и CREATE, позволяющие изменять альбомы в базе данных с помощью элементов формы, таких как раскрывающиеся списки.

Наконец, пользователи смогут удалить альбом, а также запретить им вводить неверные данные, проверив их ввод.

В этой практической лабораторной работе предполагается, что у вас есть базовые знания о ASP.NET MVC. Если вы ранее не использовали ASP.NET MVC , мы рекомендуем вам перейти на практический семинар ASP.NET MVC .

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

Note

Все примеры кода и фрагментов включены в набор средств для обучения Web Camp, доступный в выпусках Microsoft-Web/вебкамптраинингкит. Проект, относящийся к этой лабораторной работе , доступен по ASP.NETам, формам и проверке в MVC 4.

Цели

В этой практической лабораторной работе вы узнаете, как выполнять следующие задачи:

  • Создание контроллера для поддержки операций CRUD
  • Создание представления индекса для отображения свойств сущности в таблице HTML
  • Добавление пользовательского вспомогательного метода HTML
  • Создание и Настройка представления редактирования
  • Отличить методы действий, реагирующие на вызовы HTTP-GET или HTTP-POST
  • Добавление и Настройка представления создания
  • Обработку удаления сущности
  • Проверка вводимых пользователем данных

предварительные требования

Для выполнения этой лабораторной работы необходимо иметь следующие элементы:

Настройка

Установка фрагментов кода

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

Если вы не знакомы с фрагментами кода Visual Studio Code и хотите узнать, как их использовать, можно обратиться к приложению из этого документа "приложении б. Использование фрагментов кода".


Полнят

Эта практическая лабораторная работа состоит из следующих упражнений:

  1. Создание контроллера диспетчера хранилища и его представления индекса
  2. Добавление вспомогательного метода HTML
  3. Создание представления редактирования
  4. Добавление представления создания
  5. Обработка удаления
  6. Добавление проверки
  7. Использование ненавязчивой jQuery на стороне клиента

Note

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

Предполагаемое время выполнения этой лабораторной работы: 60 минут

Упражнение 1. Создание контроллера диспетчера хранилища и его представления индекса

В этом упражнении вы узнаете, как создать новый контроллер для поддержки операций CRUD, настроить метод действия с индексами для возврата списка альбомов из базы данных и, наконец, создать шаблон представления индекса, используя преимущества формирования шаблонов MVC ASP.NET. Функция для вывода свойств альбомов в таблице HTML.

Задача 1. Создание Стореманажерконтроллер

В этой задаче вы создадите новый контроллер с именем стореманажерконтроллер для поддержки операций CRUD.

  1. Откройте Начальное решение, расположенное по адресу Source/EX1-креатингсестореманажерконтроллер/Begin/ Folder.

    1. Перед продолжением необходимо загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Добавьте новый контроллер. Для этого щелкните правой кнопкой мыши папку Controllers в Обозреватель решений, выберите Добавить , а затем — команду контроллер . Измените имя контроллера на стореманажерконтроллер и убедитесь, что выбран параметр контроллер MVC с пустыми действиями чтения и записи . Нажмите кнопку Добавить.

    Диалоговое окно добавления контроллера

    Диалоговое окно добавления контроллера

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

Задача 2. Настройка индекса Стореманажер

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

  1. В классе Стореманажерконтроллер добавьте следующие директивы using .

    (Фрагмент кода — вспомогательные средства и формы ASP.NET MVC 4 и проверка — EX1 с использованием мвкмусиксторе)

    using System.Data;
    using System.Data.Entity;
    using MvcMusicStore.Models;
    
  2. Добавьте поле в стореманажерконтроллер для хранения экземпляра мусиксторинтитиес.

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка — EX1 мусиксторинтитиес)

    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();
    
  3. Реализуйте действие индекса Стореманажерконтроллер, чтобы вернуть представление со списком альбомов.

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

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка — EX1 Стореманажерконтроллер index)

    //
    // GET: /StoreManager/
    
    public ActionResult Index()
    {
        var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
             .OrderBy(a => a.Price);
    
        return this.View(albums.ToList());
    }
    

Задача 3. Создание представления индекса

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

  1. Перед созданием нового шаблона представления необходимо выполнить сборку проекта, чтобы диалоговое окно добавления представления знало о том, какой класс альбома будет использоваться. Выбор сборки | Создайте Мвкмусиксторе для сборки проекта.

  2. Щелкните правой кнопкой мыши внутри метода действия индекса и выберите Добавить представление. Откроется диалоговое окно Добавление представления .

    Добавить представление

    Добавление представления из метода index

  3. В диалоговом окне Добавление представления убедитесь, что имя представления — index. Выберите параметр создать строго типизированное представление и в раскрывающемся списке класс модели выберите альбом (мвкмусиксторе. Models) . Выберите список из раскрывающегося списка шаблон шаблонов . Оставьте для обработчика представлений Razor , а для других полей — значение по умолчанию, а затем нажмите кнопку добавить.

    Добавление представления индекса

    Добавление представления индекса

Задача 4. Настройка формирования шаблонов представления индекса

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

Note

Поддержка формирования шаблонов в ASP.NET MVC создает простой шаблон представления, в котором перечислены все поля в модели альбома. Формирование шаблонов позволяет быстро приступить к работе со строго типизированным представлением: вместо того, чтобы создавать шаблон представления вручную, формирование шаблонов быстро создает шаблон по умолчанию, а затем можно изменить созданный код.

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

    @model IEnumerable<MvcMusicStore.Models.Album>
    
    @{
         ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <p>
         @Html.ActionLink("Create New", "Create")
    </p>
    <table>
         <tr>
              <th>
                    @Html.DisplayNameFor(model => model.GenreId)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.ArtistId)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.Title)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.Price)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.AlbumArtUrl)
              </th>
              <th></th>
         </tr>
    
    @foreach (var item in Model) {
         <tr>
              <td>
                    @Html.DisplayFor(modelItem => item.GenreId)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.ArtistId)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Title)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Price)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.AlbumArtUrl)
              </td>
              <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                    @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
              </td>
         </tr>
    }
    
    </table>
    
  2. Замените таблицу<> кодом следующим кодом, чтобы отображались только поля жанра, исполнитель, Название альбомаи Цена . Это приведет к удалению столбцов URL-адресов албумид и альбома. Кроме того, он изменяет столбцы GenreId и Артистид, чтобы отображались связанные свойства класса artist.Name и genre.Name, и удаляет ссылку Details .

    <table>
        <tr>
          <th></th>
          <th>Genre</th>
          <th>Artist</th>
          <th>Title</th>
          <th>Price</th>
        </tr>
    
        @foreach (var item in Model) {
         <tr>
              <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
    
                    @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Genre.Name)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Artist.Name)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Title)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Price)
              </td>
         </tr>
        }
    </table>
    
  3. Измените следующие описания.

    @model IEnumerable<MvcMusicStore.Models.Album>
    @{
        ViewBag.Title = "Store Manager - All Albums";
    }
    
    <h2>Albums</h2>
    

Задача 5. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер , чтобы убедиться, что список альбомов отображается, указывая название, исполнителя и Жанр.

    Просмотр списка альбомов

    Просмотр списка альбомов

Упражнение 2. Добавление вспомогательного метода HTML

Страница индекса Стореманажер имеет одну потенциальную ошибку: свойства Title и имя исполнителя могут быть достаточно длинными, чтобы выпустить форматирование таблицы. В этом упражнении вы узнаете, как добавить пользовательский вспомогательный метод HTML для усечения этого текста.

На следующем рисунке показано, как изменяется формат, так как длина текста при использовании небольшого размера браузера.

Просмотр списка альбомов без усечения текста

Просмотр списка альбомов без усечения текста

Задача 1. расширение вспомогательного метода HTML

В этой задаче будет добавлен новый метод Truncate в HTML- объект, представленный в представлениях MVC ASP.NET. Для этого необходимо реализовать метод расширения для встроенного класса System. Web. MVC. HtmlHelper , предоставляемого ASP.NET MVC.

Note

Дополнительные сведения о методах расширениясм. в этой статье MSDN. https://msdn.microsoft.com/library/bb383977.aspx.

  1. Откройте Начальное решение, расположенное по адресу Source/EX2-аддинганхтмлхелпер/Begin/ Folder. В противном случае вы можете продолжать использовать решение, полученное в результате выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Откройте представление индекса Стореманажер. Для этого в обозреватель решений разверните папку views , а затем стореманажер и откройте файл index. cshtml .

  3. Добавьте следующий код под директивой @model , чтобы определить вспомогательный метод Truncate .

    @model IEnumerable<MvcMusicStore.Models.Album>
    
    @helper Truncate(string input, int length)
    {
         if (input.Length <= length) {
              @input
         } else {
              @input.Substring(0, length)<text>...</text>
         }
    } 
    
    @{
         ViewBag.Title = "Store Manager - All Albums";
    }
    
    <h2>Albums</h2>
    

Задача 2. усечение текста на странице

В этой задаче будет использоваться метод Truncate для усечения текста в шаблоне представления.

  1. Откройте представление индекса Стореманажер. Для этого в обозреватель решений разверните папку views , а затем стореманажер и откройте файл index. cshtml .

  2. Замените строки, отображающие имя исполнителя и названиеальбома. Для этого замените следующие строки.

    <tr>
         <td>
              @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
    
              @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
         </td>
         <td>
              @Html.DisplayFor(modelItem => item.Genre.Name)
         </td>
         <td>
              @Truncate(item.Artist.Name, 25)
         </td>
         <td>
              @Truncate(item.Title, 25)
         </td>
         <td>
              @Html.DisplayFor(modelItem => item.Price)
         </td>
    </tr>
    

Задача 3. Запуск приложения

В этой задаче будет протестировать, что шаблон представления индекса Стореманажер усекает название альбома и имя исполнителя.

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер , чтобы убедиться в усечении длинных текстов в столбце Title и исполнитель .

    Усеченные названия и имена исполнителей

    Усеченные заголовки и имена исполнителей

Упражнение 3. Создание представления редактирования

В этом упражнении вы узнаете, как создать форму, позволяющую менеджерам магазина изменять альбом. Они будут просматривать URL-адрес /стореманажер/едит/ИД (идентификатор является уникальным идентификатором изменяемого альбома), тем самым ДЕЛАЯ вызов HTTP-Get серверу.

Метод действия "изменить контроллер" извлекает соответствующий альбом из базы данных, создает объект стореманажервиевмодел для его инкапсуляции (вместе со списком исполнителей и жанров), а затем передает его в шаблон представления, чтобы отобразить HTML-страницу обратно пользователю. На этой странице будет содержаться <форма> элемента с полями и раскрывающимися списками для редактирования свойств альбома.

Когда пользователь обновляет значения формы альбома и нажимает кнопку сохранить , изменения отправляются через обратный вызов HTTP-POST обратно в /стореманажер/едит/ИД. Хотя URL-адрес остается таким же, как и в последнем вызове, ASP.NET MVC определяет, что на этот раз это HTTP-POST, и, следовательно, выполняет другой метод действия Edit (один с именем [HttpPost] ).

Задача 1. Реализация метода действия HTTP-GET Edit

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

  1. Откройте Начальное решение, расположенное по адресу Source/EX3-креатингсидитвиев/Begin/ Folder. В противном случае вы можете продолжать использовать решение, полученное в результате выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Откройте класс стореманажерконтроллер . Для этого разверните папку Controllers и дважды щелкните StoreManagerController.CS.

  3. Чтобы получить соответствующий альбом , а также списки жанров и исполнителей , замените метод действия HTTP-Get Edit следующим кодом.

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка — EX3 СТОРЕМАНАЖЕРКОНТРОЛЛЕР HTTP — получение действия изменения)

    public ActionResult Edit(int id)
    {
        Album album = this.db.Albums.Find(id);
    
        if (album == null)
        {
             return this.HttpNotFound();
        }
    
        this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
        this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
        return this.View(album);
    }
    

    Note

    Вы используете System. Web. MVC SelectList для исполнителей и жанров вместо списка System. Collections. Generic .

    SelectList — это более понятный способ заполнения раскрывающихся списков HTML и управления такими элементами, как текущее выделение. При создании экземпляра и последующей настройке этих объектов ViewModel в действии контроллера будет предприниматься очистка сценария формы редактирования.

Задача 2. Создание представления редактирования

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

  1. Создайте представление редактирования. Для этого щелкните правой кнопкой мыши внутри метода действия изменить и выберите Добавить представление.

  2. В диалоговом окне Добавление представления убедитесь, что имя представления имеет значение изменить. Установите флажок создать строго типизированное представление и выберите альбом (мвкмусиксторе. Models) из раскрывающегося списка класс представления данных . В раскрывающемся списке шаблон шаблона выберите изменить . Оставьте в других полях значения по умолчанию и нажмите кнопку Добавить.

    Добавление представления редактирования

    Добавление представления редактирования

Задача 3. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /StoreManager/Edit/1 , чтобы убедиться, что отображаются значения свойств для переданного альбома.

    Просмотр представления редактирования альбома

    Просмотр представления редактирования альбома

Задача 4. Реализация раскрывающихся списка в шаблоне редактора альбомов

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

  1. Замените все коды полей альбома следующим кодом:

    <fieldset>
         <legend>Album</legend>
    
         @Html.HiddenFor(model => model.AlbumId)
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Title)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.Title)
              @Html.ValidationMessageFor(model => model.Title)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Price)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.Price)
              @Html.ValidationMessageFor(model => model.Price)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.AlbumArtUrl)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.AlbumArtUrl)
              @Html.ValidationMessageFor(model => model.AlbumArtUrl)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Artist)
         </div>
         <div class="editor-field">
              @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
              @Html.ValidationMessageFor(model => model.ArtistId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Genre)
         </div>
         <div class="editor-field">
              @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
              @Html.ValidationMessageFor(model => model.GenreId)
         </div>
    
         <p>
              <input type="submit" value="Save" />
         </p>
    </fieldset>
    

    Note

    В раскрывающиеся раскрывающиеся элементы для выбора исполнителей и жанров добавлен вспомогательный элемент HTML. DropDownList . Параметры, передаваемые в HTML. DropDownList :

    1. Имя поля формы ( "артистид" ).
    2. SelectList значений для раскрывающегося списка.

Задача 5. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /StoreManager/Edit/1 , чтобы убедиться в том, что в нем отображаются раскрывающиеся поля вместо текстовых полей идентификаторы исполнителя и жанра.

    Просмотр представления редактирования альбома с раскрывающимися списками

    Просмотр представления редактирования альбома, на этот раз с раскрывающимися списками

Задача 6. Реализация метода действия HTTP-POST Edit

Теперь, когда представление редактирования отображается так, как ожидалось, необходимо реализовать метод действия HTTP-POST, чтобы сохранить изменения, внесенные в альбом.

  1. При необходимости закройте браузер, чтобы вернуться в окно Visual Studio. Откройте стореманажерконтроллер из папки Controllers .

  2. Замените код метода действия HTTP-POST следующим кодом (Обратите внимание, что метод, который необходимо заменить, является перегруженной версией, принимающей два параметра):

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка — EX3 СТОРЕМАНАЖЕРКОНТРОЛЛЕР HTTP — действие после изменения)

    [HttpPost]
    public ActionResult Edit(Album album)
    {
         if (ModelState.IsValid)
         {
              this.db.Entry(album).State = EntityState.Modified;
              this.db.SaveChanges();
    
              return this.RedirectToAction("Index");
         }
    
         this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
         this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
         return this.View(album);
    }
    

    Note

    Этот метод будет выполняться, когда пользователь нажимает кнопку сохранить в представлении и выполняет HTTP-POST значений формы обратно на сервер, чтобы сохранить их в базе данных. Декоратор [HttpPost] указывает, что метод следует использовать для сценариев HTTP-POST. Метод принимает объект альбома . ASP.NET MVC автоматически создаст объект альбома из опубликованной <формы> значений.

    Метод выполнит следующие действия:

    1. Если модель допустима:

      1. Обновите запись альбома в контексте, чтобы пометить ее как измененный объект.
      2. Сохраните изменения и перенаправление в представление индекса.
    2. Если модель является недопустимой, она заполнит ViewBag на GenreId и артистид, а затем вернет представление с объектом Received, чтобы разрешить пользователю выполнять любое необходимое обновление.

Задача 7. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /StoreManager/Edit/1. Измените заголовок альбома для загрузки и щелкните Save ( сохранить). Убедитесь, что название альбома в списке альбомов действительно изменилось.

    Обновление альбома

    Обновление альбома

Упражнение 4. Добавление представления создания

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

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

  1. Один метод действия отображает пустую форму, когда диспетчеры магазинов сначала посещают URL-адрес /стореманажер/креате .
  2. Второй метод действия обрабатывает сценарий, в котором диспетчер магазина нажимает кнопку сохранить в форме и отправляет значения обратно в URL-адрес /СТОРЕМАНАЖЕР/КРЕАТЕ в виде HTTP-POST.

Задача 1. Реализация метода создания действия HTTP-GET

В этой задаче будет реализована версия HTTP-GET метода создания действия, чтобы получить список всех жанров и исполнителей, упаковать эти данные в объект стореманажервиевмодел , который затем будет передан в шаблон представления.

  1. Откройте Начальное решение, расположенное по адресу Source/EX4-аддингакреатевиев/Begin/ Folder. В противном случае вы можете продолжать использовать решение, полученное в результате выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Откройте класс стореманажерконтроллер . Для этого разверните папку Controllers и дважды щелкните StoreManagerController.CS.

  3. Замените код метода действия CREATE Action следующим кодом:

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка-EX4 СТОРЕМАНАЖЕРКОНТРОЛЛЕР HTTP-GET Create)

    //
    // GET: /StoreManager/Create
    
    public ActionResult Create()
    {
         this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
         this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");
    
         return this.View();
    }
    

Задача 2. Добавление представления создания

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

  1. Щелкните правой кнопкой мыши внутри метода создания действия и выберите Добавить представление. Откроется диалоговое окно Добавление представления.

  2. В диалоговом окне Добавление представления убедитесь, что имя представления — CREATE. Выберите параметр создать строго типизированное представление и в раскрывающемся списке класс модели выберите альбом (мвкмусиксторе. Models) и Создайте из раскрывающегося списка шаблон шаблонов . Оставьте в других полях значения по умолчанию и нажмите кнопку Добавить.

    Добавление представления создания

    Добавление представления создания

  3. Обновите поля GenreId и артистид , чтобы использовать раскрывающийся список, как показано ниже.

    ...
    <fieldset>
         <legend>Album</legend>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.GenreId, "Genre")
         </div>
         <div class="editor-field">
              @Html.DropDownList("GenreId", String.Empty)
              @Html.ValidationMessageFor(model => model.GenreId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.ArtistId, "Artist")
         </div>
         <div class="editor-field">
              @Html.DropDownList("ArtistId", String.Empty)
              @Html.ValidationMessageFor(model => model.ArtistId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Title)
         </div>
        ...
    

Задача 3. Запуск приложения

В этой задаче вы проверите, что на странице Создание представления стореманажер отображается пустая форма альбома.

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер/креате. Убедитесь, что для заполнения новых свойств альбома отображается пустая форма.

    Создать представление с пустой формой

    Создать представление с пустой формой

Задача 4. Реализация метода действия HTTP-POST CREATE

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

  1. При необходимости закройте браузер, чтобы вернуться в окно Visual Studio. Откройте класс стореманажерконтроллер . Для этого разверните папку Controllers и дважды щелкните StoreManagerController.CS.

  2. Замените код метода действия HTTP-POST следующим кодом:

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка-EX4 СТОРЕМАНАЖЕРКОНТРОЛЛЕР HTTP-после создания)

    [HttpPost]
    public ActionResult Create(Album album)
    {
         if (ModelState.IsValid)
         {
              this.db.Albums.Add(album);
              this.db.SaveChanges();
    
              return this.RedirectToAction("Index");
         }
    
         this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
         this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
         return this.View(album);
    }
    

    Note

    Действие Create практически аналогично предыдущему методу действия Edit, но вместо настройки объекта как измененного он добавляется в контекст.

Задача 5. Запуск приложения

В этой задаче вы проверите, что страница Создание представления стореманажер позволяет создать новый альбом, а затем перенаправит его в представление индекса стореманажер.

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер/креате. Заполните все поля формы данными для нового альбома, как показано на следующем рисунке:

    Создание альбома

    Создание альбома

  3. Убедитесь, что вы перенаправлены в представление индекса Стореманажер, которое содержит только что созданный новый альбом.

    Создан новый альбом

    Создан новый альбом

Упражнение 5. Обработка удаления

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

  1. В одном методе действия отображается форма подтверждения
  2. Второй метод действия будет выполнять отправку формы

Задача 1. Реализация метода действия HTTP-GET Delete

В этой задаче будет реализована версия HTTP-GET метода действия Delete для получения сведений о альбоме.

  1. Откройте Начальное решение, расположенное по адресу Source/Ex5-хандлингделетион/Begin/ Folder. В противном случае вы можете продолжать использовать решение, полученное в результате выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Откройте класс стореманажерконтроллер . Для этого разверните папку Controllers и дважды щелкните StoreManagerController.CS.

  3. Действие "Удаление контроллера" точно совпадает с предыдущим действием контроллера сведений о хранилище: запрашивает объект альбома из базы данных, используя идентификатор , указанный в URL-адресе, и возвращает соответствующее представление. Для этого замените код метода действия HTTP-GET Delete следующим кодом:

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка — удаление операции HTTP — получение удаления)

    //
    // GET: /StoreManager/Delete/5
    
    public ActionResult Delete(int id)
    {
         Album album = this.db.Albums.Find(id);
    
         if (album == null)
         {
              return this.HttpNotFound();
         }
    
         return this.View(album);
    }
    
  4. Щелкните правой кнопкой мыши внутри метода действия Delete и выберите Добавить представление. Откроется диалоговое окно Добавление представления.

  5. В диалоговом окне Добавление представления убедитесь, что имя представления — Delete. Выберите параметр создать строго типизированное представление и в раскрывающемся списке класс модели выберите альбом (мвкмусиксторе. Models) . Выберите Удалить из раскрывающегося списка шаблон шаблонов . Оставьте в других полях значения по умолчанию и нажмите кнопку Добавить.

    Добавление представления удаления

    Добавление представления удаления

  6. В шаблоне удаления отображаются все поля модели. Отобразится только название альбома. Для этого замените содержимое представления следующим кодом:

    @model MvcMusicStore.Models.Album
    @{
         ViewBag.Title = "Delete";
    }
    <h2>Delete Confirmation</h2>
    
    <h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>
    
    @using (Html.BeginForm()) {
         <p>
              <input type="submit" value="Delete" /> |
              @Html.ActionLink("Back to List", "Index")
         </p>
    }
    

Задача 2. Запуск приложения

В этой задаче вы проверите, что на странице стореманажер Delete View (удаление представления) отображается форма удаления подтверждения.

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер. Выберите один из альбомов для удаления, нажав кнопку Удалить и убедившись, что новое представление отправлено.

    Удаление альбома

    Удаление альбома

Задача 3. Реализация метода действия HTTP-POST Delete

В этой задаче будет реализована версия HTTP-POST метода действия Delete, которая будет вызываться при нажатии пользователем кнопки Удалить . Метод должен удалить альбом в базе данных.

  1. При необходимости закройте браузер, чтобы вернуться в окно Visual Studio. Откройте класс стореманажерконтроллер . Для этого разверните папку Controllers и дважды щелкните StoreManagerController.CS.

  2. Замените код метода действия http, выполняемого после удаления следующим кодом:

    (Фрагмент кода — вспомогательные функции и формы ASP.NET MVC 4 и проверка-Ex5 удаление HTTP-POST Action)

    //
    // POST: /StoreManager/Delete/5
    
    [HttpPost]
    public ActionResult Delete(int id, FormCollection collection)
    {
         Album album = this.db.Albums.Find(id);
         this.db.Albums.Remove(album);
         this.db.SaveChanges();
    
         return this.RedirectToAction("Index"); 
    }
    

Задача 4. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер. Выберите один из альбомов для удаления, нажав кнопку Удалить. Подтвердите удаление, нажав кнопку " Удалить ":

    Удаление альбома

    Удаление альбома

  3. Убедитесь, что альбом удален, так как он не отображается на странице индекса .

Упражнение 6. Добавление проверки

В настоящее время формы создания и редактирования на месте не выполняют каких либо проверок. Если пользователь оставляет обязательное поле пустым или вводите буквы в поле Price (цена), первая ошибка, которую вы будете получать, будет находиться в базе данных.

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

Задача 1. Добавление заметок к данным

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

Для простого класса модели Добавление заметки к данным выполняется только путем добавления оператора using для System. ComponentModel. Аннотацияи последующего размещения атрибута [Required] в соответствующих свойствах. В следующем примере свойство Name станет обязательным полем в представлении.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Это немного сложнее в таких случаях, как это приложение, в котором создается EDM. Если вы добавили заметки к данным непосредственно в классы модели, они будут перезаписаны при обновлении модели из базы данных. Вместо этого можно использовать разделяемые классы метаданных, которые будут существовать для хранения заметок и связаны с классами модели с помощью атрибута [метадататипе] .

  1. Откройте Начальное решение, расположенное по адресу Source/Ex6-аддингвалидатион/Begin/ Folder. В противном случае вы можете продолжать использовать решение, полученное в результате выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Откройте Album.CS из папки Models .

  3. Замените содержимое Album.CS выделенным кодом, чтобы он выглядел следующим образом:

    Note

    Строка [DisplayFormat (конвертемптистрингтонулл = false)] указывает, что пустые строки из модели не будут преобразованы в значение null при обновлении поля данных в источнике данных. Этот параметр позволяет избежать исключения, когда Entity Framework присваивает модели значения NULL, прежде чем заметка данных проверит поля.

    (Фрагмент кода — вспомогательные методы и формы ASP.NET MVC 4 и проверка-Ex6 разделяемого класса метаданных альбома)

    namespace MvcMusicStore.Models
    {
        using System.ComponentModel;
        using System.ComponentModel.DataAnnotations;
    
        public class Album
        {
            [ScaffoldColumn(false)]
            public int AlbumId { get; set; }
    
            [DisplayName("Genre")]
            public int GenreId { get; set; }
    
            [DisplayName("Artist")]
            public int ArtistId { get; set; }
    
            [Required(ErrorMessage = "An Album Title is required")]
            [DisplayFormat(ConvertEmptyStringToNull = false)]
            [StringLength(160, MinimumLength = 2)]
            public string Title { get; set; }
    
            [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
            [DataType(DataType.Currency)]
            public decimal Price { get; set; }
    
            [DisplayName("Album Art URL")]
            [DataType(DataType.ImageUrl)]
            [StringLength(1024)]
            public string AlbumArtUrl { get; set; }
    
            public virtual Genre Genre { get; set; }
    
            public virtual Artist Artist { get; set; }
        }
    }
    

    Note

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

    • Обязательное — указывает, что свойство является обязательным полем.
    • DisplayName — определяет текст, используемый в полях формы и сообщениях проверки.
    • DisplayFormat — задает способ отображения и форматирования полей данных.
    • StringLength — определяет максимальную длину для строкового поля
    • Range — максимальное и минимальное значение для числового поля.
    • Скаффолдколумн — позволяет скрывать поля из форм редактора

Задача 2. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /стореманажер/креате. Убедитесь, что отображаемые имена совпадают с именами в разделяемом классе (например, в URL-адресе обложки альбома вместо албумартурл).

  3. Нажмите кнопку создать, не заполняя форму. Убедитесь, что вы получаете соответствующие сообщения проверки.

    Проверенные поля на странице создания

    Проверенные поля на странице создания

  4. Это можно проверить с помощью страницы изменить . Измените URL-адрес на /StoreManager/Edit/1 и убедитесь, что отображаемые имена совпадают с именами в разделяемом классе (например, URL-адрес обложки альбома вместо албумартурл). Очистите поля Title и Price и нажмите кнопку сохранить. Убедитесь, что вы получаете соответствующие сообщения проверки.

    Проверенные поля на странице "Правка"

    Проверенные поля на странице "Правка"

Упражнение 7. Использование ненавязчивой jQuery на стороне клиента

В этом упражнении вы узнаете, как включить ненавязчивую проверку jQuery 4 на стороне клиента.

Note

Ненавязчивая jQuery использует префикс AJAX для данных для вызова методов действий на сервере, а не для принудительного создания встроенных клиентских скриптов.

Задача 1. Запуск приложения перед включением ненавязчивой jQuery

В этой задаче будет запущено приложение перед включением jQuery для сравнения обеих моделей проверки.

  1. Откройте Начальное решение, расположенное по адресу Source/Ex7-унобтрусивежкуеривалидатион/Begin/ Folder. В противном случае вы можете продолжать использовать решение, полученное в результате выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet. Для этого в меню проект выберите пункт Управление пакетами NuGet.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.

  2. Нажмите клавишу F5 для запуска приложения.

  3. Проект начинается на домашней странице. Просмотрите /стореманажер/креате и нажмите кнопку создать , не заполнив форму, чтобы убедиться, что вы получаете сообщения проверки:

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

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

  4. В браузере откройте исходный код HTML:

    ...
              <div class="editor-label">
                    <label for="Price">Price</label>
              </div>
              <div class="editor-field">
                    <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                    <span class="field-validation-valid" id="Price_validationMessage"></span>
              </div>
    
              <div class="editor-label">
                    <label for="AlbumArtUrl">Album Art URL</label>
              </div>
              <div class="editor-field">
                    <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                    <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
              </div>
    
              <p>
                    <input type="submit" value="Create" />
              </p>
         </fieldset>
    </form><script type="text/javascript">
    //<![CDATA[
    if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
    window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
    //]]>
    </script>
    ...
    

Задача 2. Включение ненавязчивой проверки клиента

В этой задаче будет включена ненавязчивая клиентская проверка jQuery из файла Web. config . по умолчанию для всех новых проектов ASP.NET MVC 4 устанавливается значение false. Кроме того, вы добавите необходимые ссылки на скрипты, чтобы сделать ненавязчивую проверку клиента jQuery некорректной.

  1. Откройте файл Web. config в корневом каталоге проекта и убедитесь, что для значений ключей клиентвалидатионенаблед и унобтрусивежаваскриптенаблед задано значение true.

    ...
    <configuration>
      <appSettings>
         <add key="webpages:Version" value="2.0.0.0" />
         <add key="webpages:Enabled" value="false" />
         <add key="PreserveLoginUrl" value="true" />
         <add key="ClientValidationEnabled" value="true" />
         <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    </appSettings>
    ...
    

    Note

    Вы также можете включить проверку клиента по коду в Global.asax.cs, чтобы получить те же результаты:

    HtmlHelper. Клиентвалидатионенаблед = true;

    Кроме того, атрибут Клиентвалидатионенаблед можно назначить любому контроллеру, чтобы иметь настраиваемое поведение.

  2. Откройте Create. cshtml по адресу виевс\стореманажер.

  3. Убедитесь в том, что в представлении имеются ссылки на следующие файлы скриптов, jQuery. Validate и jQuery. Validate. unobtrusiveые, а в списке — " ~/бундлес/жкуеривал".

    ...
    @section Scripts {
         @Scripts.Render("~/bundles/jqueryval")
    }
    

    Note

    Все эти библиотеки jQuery включены в новые проекты MVC 4. Дополнительные библиотеки можно найти в папке /Scripts проекта.

    Чтобы обеспечить работу библиотек проверки, необходимо добавить ссылку на библиотеку платформы jQuery. Так как эта ссылка уже добавлена в файл _Layout. cshtml , вам не нужно добавлять его в этом конкретном представлении.

Задача 3. Запуск приложения с использованием ненавязчивой проверки jQuery

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

  1. Нажмите клавишу F5 для запуска приложения.

  2. Проект начинается на домашней странице. Просмотрите /стореманажер/креате и нажмите кнопку создать , не заполнив форму, чтобы убедиться, что вы получаете сообщения проверки:

    Проверка клиентов с включенной поддержкой jQuery

    Проверка клиентов с включенной поддержкой jQuery

  3. В браузере откройте исходный код для создания представления.

    ...
    <div class="editor-label">
        <label for="Title">Title</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
    </div>
    
    <div class="editor-label">
        <label for="Price">Price</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
    </div>
    
    <div class="editor-label">
        <label for="AlbumArtUrl">Album Art URL</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
    </div>        
    ...
    

    Note

    Для каждого правила проверки клиента ненавязчивая jQuery добавляет атрибут с данными-Val-rulename="сообщения". Ниже приведен список тегов, которые ненавязчивые вставки jQuery в поле ввода HTML для выполнения проверки клиента.

    • Данные-Val
    • Данные-Val-Number
    • Данные-Val-Range
    • Data-Val-Range-min/Data-Val-Range-Max
    • Data-Val — обязательное
    • Данные-Val-length
    • Data-Val-length-Max/Data-Val-length-min

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

    [Required(ErrorMessage = "Price is required")]
    [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
    public object Price { get; set; }
    

    После использования ненавязчивой jQuery созданный код будет следующим:

    <input data-val="true"
    data-val-number="The field Price must be a number."
    data-val-range="Price must be between 0.01 and 100.00"
    data-val-range-max="100"
    data-val-range-min="0.01"
    data-val-required="Price is required"
    id="Album_Price" name="Album.Price" type="text" value="0" />
    

Сводка

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

  • Действия контроллера, такие как индекс, создание, изменение, удаление
  • Функция формирования шаблонов MVC ASP.NET для отображения свойств в таблице HTML
  • Пользовательские вспомогательные методы HTML для улучшения взаимодействия с пользователем
  • Методы действия, реагирующие на вызовы HTTP-GET или HTTP-POST
  • Шаблон общего редактора для похожих шаблонов представлений, таких как создание и редактирование
  • Элементы формы, такие как раскрывающиеся
  • Заметки к данным для проверки модели
  • Проверка на стороне клиента с помощью ненавязчивой библиотеки jQuery

Приложение а. Установка Visual Studio Express 2012 для Web

Вы можете установить Microsoft Visual Studio Express 2012 для Web или другой "Express" версии с помощью установщик веб-платформы Майкрософт . Следующие инструкции помогут вам выполнить действия, необходимые для установки Visual Studio Express 2012 для Web с помощью установщик веб-платформы Майкрософт.

  1. Перейдите в [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Кроме того, если у вас уже установлен установщик веб-платформы, вы можете открыть его и найти продукт "Visual Studio Express 2012 для Web с Windows Azure SDK".

  2. Щелкните Install Now (установить сейчас). Если у вас нет установщика веб-платформы , вы будете сначала перенаправлены на загрузку и установку.

  3. После открытия установщика веб-платформы нажмите кнопку установить , чтобы начать установку.

    Установка Visual Studio Express

    Установка Visual Studio Express

  4. Прочитайте все лицензии и условия продуктов и нажмите кнопку " принять ", чтобы продолжить.

    Принятие условий лицензии

    Принятие условий лицензии

  5. Дождитесь завершения процесса загрузки и установки.

    Ход установки

    Ход установки

  6. После завершения установки нажмите кнопку Готово.

    Установка завершена

    Установка завершена

  7. Нажмите кнопку выход , чтобы закрыть установщик веб-платформы.

  8. Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните запись "VS Express", а затем щелкните плитку VS Express для Web .

    Плитка VS Express для Web

    Плитка VS Express для Web

Приложение б. Использование фрагментов кода

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

Использование фрагментов кода Visual Studio для вставки кода в проект

Использование фрагментов кода Visual Studio для вставки кода в проект

Добавление фрагмента кода с помощью клавиатуры (C# только)

  1. Поместите курсор в то место, куда вы хотите вставить код.
  2. Начните вводить имя фрагмента (без пробелов или дефисов).
  3. Посмотрите, как IntelliSense отображает соответствующие имена фрагментов кода.
  4. Выберите правильный фрагмент кода (или вводите его, пока не будет выбрано имя всего фрагмента).
  5. Дважды нажмите клавишу TAB, чтобы вставить фрагмент в позицию курсора.

Начните вводить имя фрагмента

Начните вводить имя фрагмента

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент.

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент.

Снова нажмите клавишу TAB, и фрагмент развернется

Снова нажмите клавишу TAB, и фрагмент развернется

Добавление фрагмента кода с помощью мыши (C#, Visual Basic и XML) одного. Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода.

  1. Выберите Вставить фрагмент , за которым следуют фрагменты кода.
  2. Выберите соответствующий фрагмент из списка, щелкнув его.

Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода, и выберите пункт Вставить фрагмент.

Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода, и выберите пункт Вставить фрагмент.

Выберите соответствующий фрагмент из списка, щелкнув его.

Выберите соответствующий фрагмент из списка, щелкнув его.