Лабораторная работа № 24 – 25 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Лабораторная работа № 24 – 25



Лабораторная работа № 24 – 25

Создание программной системы, использующей шаблон MVC.

Теория:

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

MVC для веб приложений

Идея, которая лежит в основе конструкционного шаблона MVC, очень проста: нужно чётко разделять ответственность за различное функционирование в наших приложениях:

Приложение разделяется на три основных компонента, каждый из которых отвечает за различные задачи. Давайте подробно разберём компоненты на примере.

Контроллер (Controller)

Контроллер управляет запросами пользователя (получаемые в виде запросов HTTP GET или POST, когда пользователь нажимает на элементы интерфейса для выполнения различных действий). Его основная функция — вызывать и координировать действие необходимых ресурсов и объектов, нужных для выполнения действий, задаваемых пользователем. Обычно контроллер вызывает соответствующую модель для задачи и выбирает подходящий вид.

Модель (Model)

Модель - это данные и правила, которые используются для работы с данными, которые представляют концепцию управления приложением. В любом приложении вся структура моделируется как данные, которые обрабатываются определённым образом. Что такое пользователь для приложения — сообщение или книга? Только данные, которые должны быть обработаны в соответствии с правилами (дата не может указывать в будущее, e-mail должен быть в определённом формате, имя не может быть длиннее Х символов, и так далее).

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

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

Вид (View)

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

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

 

ЗАДАНИЕ

Создать простое приложение ASP.NET MVC 5

Предварительная настройка

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

· домашняя страница, отображающая информацию о вечеринке;

· форма, которая может использоваться для ответа на приглашение (repondez s'il vous plait - RSVP);

· проверка достоверности для формы RSVP, которая будет отображать страницу с выражением благодарности за внимание;

· средство отправки форм RSVP по электронной почте организатору вечеринки.

В последующих разделах мы достроим проект MVC, который был создан в предыдущей статье, и добавим в него перечисленные выше средства. Первый пункт можно убрать из списка, применив то, что было показано ранее - в существующее представление можно добавить HTML-разметку с подробной информацией о вечеринке. В примере ниже приведено содержимое файла Views/Home/Index.cshtml с внесенными дополнениями.

HTML

@{

Layout = null;

}

<!DOCTYPE html>

 

<html>

<head>

<meta name="viewport" content="/>

<title>Index</title>

</head>

<body>

<div>

   @ViewBag.Greeting (из представления)

   <p>Мы собираемся на захватывающую вечеринку.</p>

</div>

</body>

</html>

Добавление класса модели

По соглашению MVC классы, которые образуют модель, помещаются в папку Models, которую Visual Studio создает во время начальной настройки проекта. Щелкните правой кнопкой мыши на папке Models в окне Solution Explorer и выберите в контекстном меню пункт Add, а затем пункт Class (Класс). В качестве имени файла укажите GuestResponse.cs и щелкните на кнопке Add, чтобы создать класс.

Отсутствие пункта Class в контекстном меню может означать, что вы оставили отладчик Visual Studio в выполняющемся состоянии. Среда Visual Studio ограничивает виды изменений, которые можно вносить в проект при функционирующем приложении.

Отредактируйте код класса, чтобы он соответствовал примеру ниже:

C#

namespace PartyInvites.Models

{

public class GuestResponse

{

   public string Name { get; set; }

   public string Email { get; set; }

   public string Phone { get; set; }

   public bool? WillAttend { get; set; }

}

}

Вы могли заметить, что свойство WillAttend имеет тип bool, допускающий null, т.е. оно может принимать значение true, false или null. Объяснение этого будет приведено в разделе "Добавление проверки достоверности" далее.

Создание метода действия

Щелчок на ссылке приводит к выдаче ошибки 404 Not Found (не найдено). Она объясняется тем, что пока еще не создан метод действия, соответствующий URL вида /Home/RsvpForm. Это делается добавлением метода RsvpForm в класс HomeController, как показано в примере ниже:

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace PartyInvites.Controllers

{

public class HomeController: Controller

{

   public ViewResult Index()

   {

       int hour = DateTime.Now.Hour;

       ViewBag.Greeting = hour < 12? "Доброе утро": "Доброго дня";

       return View();

   }

 

   public ViewResult RsvpForm()

   {

       return View();

   }

          }

}

Построение формы

Теперь, когда строго типизированное представление создано, можно дополнить содержимое файла RsvpForm.cshtml, чтобы превратить его в HTML-форму для редактирования объектов GuestResponse, как показано в примере ниже:

HTML

@model PartyInvites.Models.GuestResponse

 

@{

Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

<meta name="viewport" content="/>

<title>RsvpForm</title>

</head>

<body>

@using (Html.BeginForm())

{

   <p>Ваше имя: @Html.TextBoxFor(x => x.Name)</p>

   <p>Ваш email: @Html.TextBoxFor(x => x.Email)</p>

   <p>Ваш телефон: @Html.TextBoxFor(x => x.Phone)</p>

   <p>Вы придете?

       @Html.DropDownListFor(x => x.WillAttend, new[] {

           new SelectListItem() { Text = "Да, конечно я буду", Value = Boolean.TrueString},

           new SelectListItem() { Text = "Нет, я не смогу", Value = Boolean.FalseString}

       })

   </p>

   <input type="submit" value="Отправить форму RSVP" />

}

</body>

</html>

Для каждого свойства класса модели GuestResponse мы используем вспомогательный метод HTML, чтобы визуализировать подходящий элемент управления HTML типа input. Эти методы позволяют с помощью лямбда-выражения выбрать свойство, с которым связан элемент input, как показано в следующей строке:

@Html.TextBoxFor(x => x.Email)

Вспомогательный метод HTML по имени TextBoxFor генерирует HTML-разметку для элемента input, устанавливает параметр type в text, а атрибуты id и name - в Email (имя выбранного свойства класса предметной области):

<input id="Email" name="Email" type="text" value="" />

Это удобное средство работает, потому что представление RsvpForm является строго типизированным, а инфраструктуре MVC было указано, что GuestResponse - тип, который нужно визуализировать с помощью этого представления. Это снабжает вспомогательные методы HTML информацией, которая им необходима для выяснения того, из какого типа данных должны быть прочитаны свойства через выражение @model.

Альтернативой применению лямбда-выражений является ссылка на имя свойства типа модели как на строку:

@Html.TextBox("Email")

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

Еще одним удобным вспомогательным методом является Html.BeginForm(), который генерирует HTML-элемент form, сконфигурированный на выполнение обратной отправки методу действия. Поскольку никакие аргументы вспомогательному методу не передаются, он предполагает, что требуется выполнить обратную отправку по тому же самому URL, из которого запрашивался HTML-документ. Изящный трюк заключается в том, чтобы поместить этот метод внутрь C#-оператора using, как показано ниже:

@using (Html.BeginForm()) {           // сюда помещается содержимое формы... }

Обычно при таком применении оператор using гарантирует освобождение объекта, когда он покидает область действия. Такое использование распространено, например, для подключений к базам данных, чтобы гарантировать их закрытие немедленно по завершении запроса. (Это применение ключевого слова using отличается от той его разновидности, которая включает классы из пространства имен в область действия какого-то класса.)

Вместо освобождения объекта вспомогательный метод Html.BeginForm закрывает HTML-элемент form, когда тот покидает область действия. Это означает, что вспомогательный метод Html.BeginForm создает обе части элемента формы:

<form action="/Home/RsvpForm" method="post">           //... содержимое формы </form>

Не беспокойтесь, если не знакомы с удалением объектов C#. В данном случае задача заключается в том, чтобы продемонстрировать создание формы с помощью вспомогательного метода HTML.

Обработка форм

Инфраструктуре MVC пока еще не указано, что должно быть сделано, когда форма отправляется серверу. В нынешнем состоянии приложения щелчок на кнопке "Отправить форму RSVP" лишь очищает любые значения, введенные в форму. Причина в том, что форма осуществляет обратную отправку методу действия RsvpForm из контроллера Home, который только сообщает MVC о необходимости повторной визуализации представления.

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

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

· Метод, который отвечает на HTTP-запросы GET. Каждый раз, когда кто-то щелкает на ссылке, браузер обычно выдает именно запрос GET. Эта версия действия будет отвечать за отображение изначально пустой формы, когда кто-нибудь впервые посещает /Home/RsvpForm.

· Метод, который отвечает на HTTP-запросы POST. По умолчанию формы, визуализированные с помощью Html.BeginForm, отправляются браузером в виде запросов POST. Эта версия действия будет отвечать за получение отправленных данных и принятие решения о том, что с ними делать.

Обработка запросов GET и POST в отдельных методах C# способствует обеспечению аккуратности кода контроллера, т.к. ответственность у этих двух методов разная. Оба метода действий вызываются через один и тот же URL, но MVC вызывает соответствующий метод в зависимости от вида запроса - GET или POST. В примере ниже показаны изменения, которые необходимо внести в класс HomeController.

 

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using PartyInvites.Models;

 

namespace PartyInvites.Controllers

{

public class HomeController: Controller

{

   public ViewResult Index()

   {

       int hour = DateTime.Now.Hour;

       ViewBag.Greeting = hour < 12? "Доброе утро": "Доброго дня";

       return View();

   }

 

   [HttpGet]

   public ViewResult RsvpForm()

   {

       return View();

   }

 

   [HttpPost]

   public ViewResult RsvpForm(GuestResponse guest)

   {

       // Нужно отправить данные нового гостя no электронной почте

       // организатору вечеринки.

       return View("Thanks", guest);

   }

          }

}

 

К существующему методу действия RsvpForm был добавлен атрибут HttpGet. Это указывает MVC, что данный метод должен использоваться только для запросов GET.

Затем была добавлена перегруженная версия метода RsvpForm, принимающая параметр GuestResponse, к которой применен атрибут HttpPost. Этот атрибут указывает MVC, что новый метод будет иметь дело только с запросами POST. Обратите внимание, что также было импортировано пространство имен PartyInvites.Models. Это сделано для того, чтобы на тип модели GuestResponse можно было ссылаться без необходимости в указании полностью определенного имени класса. Работа всех этих добавлений к коду объясняется в последующих разделах.

Стилизация содержимого

Базовая функциональность приложения на месте (кроме отправки электронной почты, к которой мы вскоре приступим), однако его внешний вид в целом довольно-таки непривлекателен. Несмотря на то что это руководство по MVC сосредоточено на разработке серверной стороны, полезно рассмотреть несколько библиотек с открытым кодом, которые приняты Microsoft и включены в ряд шаблонов проектов Visual Studio.

Я не являюсь большим поклонником упомянутых шаблонов, но мне нравятся некоторые из используемых ими библиотек, и одним таким примером из числа задействованных в MVC 5 является Bootstrap, которая представляет собой удобную библиотеку CSS, первоначально разработанную в Twitter и получившую широкое применение.

Разумеется, вы не обязаны применять шаблоны проектов Visual Studio, чтобы пользоваться библиотеками вроде Bootstrap. Можно загрузить файлы напрямую из веб-сайтов с нужными библиотеками или воспользоваться инструментом NuGet, интегрированным в Visual Studio и предоставляющим доступ к каталогу заранее упакованного программного обеспечения, которое может быть загружено и установлено автоматически.

Одной из лучших характеристик NuGet является то, что данный инструмент управляет зависимостями между пакетами, так что во время установки, к примеру, библиотеки Bootstrap инструмент NuGet также загрузит и установит библиотеку jQuery, от которой зависит Bootstrap.

Завершение

Последнее требование для примера приложения заключается в отправке завершенных ответов RSVP по электронной почте организатору вечеринки. Это можно было бы сделать за счет добавления метода действия для создания и отправки сообщения с использованием классов, работающих с электронной почтой, которые доступны в.NET Framework - такой подход лучше всего согласуется с шаблоном MVC.

Однако вместо этого мы намерены воспользоваться вспомогательным классом WebMail. Он не является частью инфраструктуры MVC, но позволяет завершить пример, не вникая в нюансы настройки средств для отправки электронной почты. Нам требуется, чтобы электронное письмо отправлялось при визуализации представления Thanks. Необходимые изменения показаны в примере ниже:

HTML

@model PartyInvites.Models.GuestResponse

 

@{

Layout = null;

}

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="/>

<title>Thanks</title>

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />

<style>

   body { background: #f1f1f1; }

</style>

</head>

<body>

@{

   try

   {

       WebMail.SmtpServer = "smtp.example.com";

       WebMail.SmtpPort = 587;

       WebMail.EnableSsl = true;

       WebMail.UserName = "mySmtpUsername";

       WebMail.Password = "mySmtpPassword";

       WebMail.From = "myemai@example.com";

 

       WebMail.Send("myemail@example.com", "RSVP Приглашение",

              Model.Name + ((Model.WillAttend?? false)? " ": "не") + "придет");

 

   }

   catch (Exception)

   {

       @:<b>К сожалению при отправке письма возникла ошибка.</b>

   }

}

<div class="text-center">

   <h1>Спасибо, @Model.Name!</h1>

   <div class="lead">

       @if (Model.WillAttend == true)

       {

           @:Здорово что вы придете, напитки уже в холодильнике;)

       }

       else

       {

           @:Жаль что вы не придете, но спасибо что дали об этом знать.

       }

   </div>

</div>

</body>

</html>

 

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

Мы добавили выражение Razor, которое применяет вспомогательный класс WebMail для настройки параметров нашего почтового сервера, в том числе имени сервера, обязательности использования безопасных подключений (SSL) и сведений об учетной записи. Как только все эти детали сконфигурированы, с помощью метода WebMail.Send() отправляется сообщение по электронной почте.

Весь код отправки сообщения помещен внутрь блока try...catch, что позволяет предупредить пользователя, если сообщение не отправлено. Это осуществляется путем добавления текстового блока в вывод представления Thanks. Более рациональным подходом было бы отображение отдельного представления ошибки в случае невозможности отправки электронного сообщения, но мы хотели максимально упростить это первое приложение MVC.

Показать выполненное задание преподавателю.

 

Лабораторная работа № 24 – 25



Поделиться:


Последнее изменение этой страницы: 2020-11-28; просмотров: 160; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.137.221.163 (0.094 с.)