ASP_NET_MVC_4_Framework_s_primerami_na_C_dlya_p

конкретные контроллеры и действия. Когда Visual Studio создает MVC проект, она в начале добавляет некоторые роуты по умолчанию. Вы можете запросить любую из следующих ссылок, и они будут направлены на HomeController метод Index:

/

/Home

/Home/Index

Поэтому когда браузер запрашивает http://yoursite/ или http://yoursite/Home, он получает выходные данные HomeController метода Index. Вы можете попробовать сделать это самостоятельно, изменив URL в браузере. На данный момент, это будет http://localhost:61982/, за исключением того, что порт может быть другим. Если добавить в URL /Home или /Home/Index и обновить страницу, вы увидите тот же Hello World MVC приложения.

Это хороший пример пользы от MVC соглашений. В данном случае соглашение заключается в том, что у нас есть контроллер HomeController и что он будет отправной точкой для нашего MVC приложения. Роуты по умолчанию, которые Visual Studio создает для нового проекта, предполагают, что мы будем следовать этому соглашению. И так как мы следовали соглашению, мы получили поддержку для URL адресов из предыдущего списка.

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

Совет

Вы можете просмотреть и отредактировать роутинговые настройки, открыв файл Global.asax.cs. В главе 7 вы будете создавать пользовательские записи

маршрутизации, а в главах 13 и 14 вы узнаете гораздо больше о том, что может делать маршрутизация.

Представление (рендеринг) веб страниц

Результатом предыдущего примера не был HTML, это была просто строка "Hello World". Чтобы создать на запрос браузера HTML ответ, мы должны создать представление.

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

Первое, что мы должны сделать, это изменить наш метод Index, как показано в листинге 2-3.

Листинг 2-3: Изменение контроллера для обработки представления

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

21

{

return View();

}

}

}

Изменения в листинге 2-3 выделены жирным шрифтом. Когда мы возвращаемся к объекту ViewResult метода действия, мы поручаем MVC сделать представление. Мы создаем ViewResult, вызывая метод View без параметров. Это указывает MVC обрабатывать для метода действия представление по умолчанию.

Если вы сейчас запустите приложение, вы увидите, как MVC Framework пытается найти нужное представление по умолчанию, и это показано в сообщении об ошибке, которое представлено на рисунке 2-8.

Рисунок 2-8: MVC Framework пытается найти представление по умолчанию

Это сообщение об ошибке весьма полезно. Оно объясняет не только то, что MVC не смог найти представление для нашего метода, но оно также показывает, где он искал. Это еще один хороший пример MVC соглашения: представления связаны с методами при помощи имен. Наш метод действия называется Index, а наш контроллер называется Home, и вы можете увидеть на рисунке 2- 8, что MVC пытается найти различные файлы в папке Views с таким именем.

22

Чтобы создать представление, остановите отладчик и щелкните правой кнопкой мыши по методу действия в кодовом файл HomeController.cs (либо по названию метода или внутри тела метода), а затем выберите из всплывающего меню Add View. Откроется диалоговое окно Add View, которое показано на рисунке 2-9.

Рисунок 2-9: Диалоговое окно Add View

23

Снимите галочку с Use a layout or master page. В этом примере мы не используем макеты, но мы рассмотрим их в главе 7. Нажмите кнопку Add, и Visual Studio создаст новый файл с именем Index.cshtml, в папке Views/Home. Если вы посмотрите на сообщение об ошибке на рисунке 2-8, вы увидите, что новый файл является одним из тех, что пытался найти MVC.

Совет

Расширение файла .cshtml обозначает C# представление, которое будет

обрабатываться Razor. Предыдущие версии MVC опирались на движок представлений ASPX, для которого файлы представления имели расширение

.aspx.

Visual Studio открывает Index.cshtml файл для редактирования. Вы видите, что этот файл содержит в основном HTML. Исключение составляет лишь та часть, которая выглядит следующим образом:

@{

Layout = null;

}

Данное выражение будет интерпретировано движком представления Razor. Это очень простой пример. Он просто говорит Razor, что мы решили не использовать мастер-страницу. На данный момент мы собираемся проигнорировать Razor и вернуться к нему позже. Дополните файл Index.cshtml тем выражением, которое выделено жирным шрифтом в листинге 2-4.

Листинг 2-4: Добавление представления

@{

Layout = null;

}

<!DOCTYPE html> <html>

<head>

<meta name="viewport" content="width=device-width" /> <title>Index</title>

</head>

<body>

<div>

Hello World (from the view)

</div>

</body>

</html>

С дополнением мы видим другое простое сообщение. Выберите Start Debugging в меню Debug, чтобы запустить приложение и проверить наше представление. Вы должны увидеть нечто похожее, что изображено на рисунке 2-10.

Рисунок 2-10: Тестирование представления

24

Когда мы первый раз редактировали метод действия Index, он вернул строковое значение. Это обозначало, что MVC не сделал ничего, кроме как передал строковое значение браузеру. Теперь, когда метод Index возвращает ViewResult, мы поручаем MVC обработать представление и вернуть HTML. Мы не говорили MVC, какое представление должно быть использовано, поэтому он использовал соглашение по именованиям, чтобы найти нужное автоматически. Соглашение состоит в том, что представление имеет название метода действия и содержится в папке, названной после контроллера: ~/Views/Home/Index.cshtml.

Метод действия может возвращать другие результаты, кроме строк и объектов ViewResult. Например, если мы возвращаем RedirectResult, мы заставляем браузер перенаправиться на другой адрес. Если мы возвращаем HttpUnauthorizedResult, мы заставляем пользователя войти в систему (залогиниться). Эти объекты известны как результаты действия, и все они происходят из класса ActionResult. Система результатов действий позволяет нам инкапсулировать и повторно использовать общие ответы на определенные действия. Мы расскажем вам о них и покажем на примерах далее в этой книге.

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

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

Одним из способов передачи данных от контроллера к представлению является использование объекта ViewBag, который является членом базового класса Controller. ViewBag – это динамический объект, которому можно присвоить произвольные свойства, что делает эти значения доступными для любого представления, которое будет с ними дальше работать. В листинге 2-5 показана передача таким способом некоторых простых динамических данных в файл

HomeController.cs.

Листинг 2-5: Установка некоторых данных представления

using System;

using System.Collections.Generic; using System.Linq;

using System.Web; using System.Web.Mvc;

namespace PartyInvites.Controllers

{

public class HomeController : Controller

25

{

public ViewResult Index()

{

int hour = DateTime.Now.Hour;

ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View();

}

}

}

Мы передали данные для представления, когда мы присвоили значение свойству ViewBag.Greeting. ViewBag является примером динамического объекта, а свойство Greeting не существовало до того момента, пока мы не присвоили ему значение. Это позволяет передать данные из контроллера в представление свободным и плавным образом, без необходимости досрочно определять классы.

Мы снова ссылаемся на свойство ViewBag.Greeting в представлении, чтобы получить значения данных, как показано в листинге 2-6, который демонстрирует изменения, что мы сделали в файле

Index.cshtml.

Листинг 2-6: Получение значений данных ViewBag

@{

Layout = null;

}

<!DOCTYPE html> <html>

<head>

<meta name="viewport" content="width=device-width" /> <title>Index</title>

</head>

<body>

<div>

@ViewBag.Greeting World (from the view) </div>

</body>

</html>

Дополнением в листинге 2-6 является выражение Razor. Когда мы вызываем метод View в методе контроллера Index, фреймворк MVC находит файл представления Index.cshtml и просит движок Razor разобрать (отпарсить) содержимое файла. Razor ищет выражение, как то, что мы добавили в листинг, и обрабатывает его. В этом примере обработка выражения обозначает вставку значения, которое мы присвоили свойству ViewBag.Greeting метода действия, в представление.

Там нет ничего особенного в имени свойства Greeting, вы можете заменить его любым именем свойства, и оно будет работать так же. Кроме того, вы можете передать несколько значений данных из контроллера в представление путем присвоения значений более чем одному свойству. Если мы запустим проект, мы увидим наши первые динамические выходные данные MVC, как показано на рисунке 2-11.

Рисунок 2-11: Динамический ответ MVC

26

Создание простого приложения по вводу данных

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

Набросаем план

Давайте представим себе, что подруга решила провести вечеринку в канун Нового года, и что она попросила нас создать веб сайт, который позволит ее друзьям и знакомым принять приглашение с RSVP (подпись на приглашении, призывающая получателя дать ответ об участии в мероприятии). На сайте должно присутствовать следующее:

Главная страница, где отображается информация о вечеринке

Форма, которая может быть использована для RSVP

Валидация RSVP формы, которая отобразит страницу с благодарностью

Заполненный и отправленный ответ о согласии принять участие в вечеринке

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

Листинг 2-7: Отображение информации о вечеринке

@{

Layout = null;

}

<!DOCTYPE html> <html>

<head>

<meta name="viewport" content="width=device-width" /> <title>Index</title>

</head>

<body>

<div>

@ViewBag.Greeting World (from the view)

<p>

27

We're going to have an exciting party.<br />

(To do: sell it better. Add pictures or something.) </p>

</div>

</body>

</html>

Мы на правильном пути. Если вы запустите приложение, вы увидите информацию о вечеринке, ну, вернее, метку-заполнитель (placeholder) для этой информации, но вы можете уловить суть. Пример показан на рисунке 2-12.

Рисунок 2-12: Добавление представления

Проектирование модели данных

В MVC М обозначает модель, и это является самой важной частью приложения. Модель является представлением реальных объектов, процессов и правил, которые определяют объект, известный как домен, нашего приложения. Модель, которая часто упоминается как доменная модель, содержит C# объекты (известные как доменные объекты), которые составляют суть нашего приложения, и методы, которые позволяют нам манипулировать ими. Представления и контроллеры раскрывают домен клиентам в согласованном порядке, и хорошо продуманное MVC приложение начинается с хорошо продуманной модели, которая затем является координационным центром, когда мы добавляем контроллеры и представления.

Нам не нужна сложная модель для приложения PartyInvites, но мы создадим один доменный класс, которые мы назовем GuestResponse. Этот объект будет отвечать за хранение, проверку и подтверждение RSVP.

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

По MVC соглашению классы, которые составляют модель, помещаются в папку Models. Щелкните правой кнопкой мыши по Models в окне Solution Explorer и выберите Add, за которым следует Class, из всплывающего меню. Назовите файл GuestResponse.cs и нажмите кнопку Add, чтобы создать класс. Измените содержимое класса в соответствии с листингом 2-8.

Совет

28

Если у вас нет пункта меню Class, то вы, вероятно, оставили работать отладчик (дебаггер) Visual Studio. Visual Studio ограничивает изменения, которые можно внести в проект, если приложение запущено.

Листинг 2-8: Доменный класс GuestResponse

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? (Nullable<bool>), то есть оно может быть true, false или null. Мы объясним это в разделе «Добавление валидации» далее в этой главе.

Ссылка на метод действия

Одна из целей нашего приложение заключается во включении RSVP формы, поэтому нам нужно добавить ссылку на нее из нашего представления Index.cshtml, как показано в листинге 2-9.

Листинг 2-9: Добавление ссылки для RSVP формы

@{

Layout = null;

}

<!DOCTYPE html> <html>

<head>

<meta name="viewport" content="width=device-width" /> <title>Index</title>

</head>

<body>

<div>

@ViewBag.Greeting World (from the view) <p>

We're going to have an exciting party.<br />

(To do: sell it better. Add pictures or something.) </p>

@Html.ActionLink("RSVP Now", "RsvpForm")

</div>

</body>

</html>

Html.ActionLink является вспомогательным методом HTML. MVC Framework разработан с набором встроенных вспомогательных методов, которые удобны для обработки HTML ссылок, текстовых вводных данных, флажков, выборок и даже пользовательских элементов управления. Метод ActionLink принимает два параметра: первый – это текст для отображения в ссылке, а второй – это выполняемое действие, когда пользователь нажимает на ссылку. Мы объясним вспомогательные методы HTML в главах 19-21. На рисунке 2-13 показана ссылка, которую мы добавили.

29

Рисунок 2-13: Добавление в представление ссылки

Если вы наведете курсор мыши на ссылку в браузере, вы увидите, что ссылка указывает на http://yourserver/Home/RsvpForm. Метод Html.ActionLink проверил конфигурацию URL

нашего приложения и определил, что /Home/RsvpForm является URL для действия RsvpForm контроллера HomeController. Обратите внимание, что в отличие от традиционных приложений ASP.NET, URL-адреса MVC не соответствуют физическим файлам. Каждый метод действия имеет свой URL, и MVC использует систему маршрутизации ASP.NET перевести эти URL в действия.

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

Если вы нажмете на ссылку, то увидите ошибку 404 Not Found. Это потому что пока еще мы не создали метод действия, который соответствует URL /Home/RsvpForm. Мы сделаем это путем добавления метода RsvpForm нашему классу HomeController, как показано в листинге 2-10.

Листинг 2-10: Добавление в контроллер нового метода действия

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 ? "Good Morning" : "Good Afternoon"; return View();

}

public ViewResult RsvpForm()

{

return View();

}

}

}

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

Мы хотим добавить представление для нашего метода действия RsvpForm, но мы собираемся сделать кое-что больше: то есть создать строго типизированное представление. Строго типизированные представления предназначены для обработки определенного типа доменов. Если

30