Подкинуть наверх
Стол регистраций, быстро и безболезненно Присоединиться Идентификация
Ищем по постам, комментариям и картинкам
Nibler.ru >> Это интересно >> Ваше первое MVC приложени

Ваше первое MVC приложени



Авось кому пригодится

Создание нового ASP.NET MVC проекта



Мы начнем с создания нового MVC проекта в Visual Studio. Выберите New Project из меню File, чтобы открыть диалоговое окно New Project. Если вы выберите в разделе Visual C# шаблоны Web, вы увидите, что одним из доступных типов проекта является ASP.NET MVC 4 Web Application. Выберите этот тип проекта, как показано на рисунке 2-1.

Рисунок 2-1: Шаблон Visual Studio MVC 4 проекта
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Внимание

Visual Studio 2012 включает в себя поддержку MVC 3, также как и MVC 4, и вы видите, что старые шаблоны доступны вместе с новыми. При создании нового проекта обратите на это внимание и выберите правильный

Назовите новый проект PartyInvites и нажмите кнопку ОК, чтобы продолжить. Вы увидите другое диалоговое окно, показанное на рисунке 2-2, где вас попросят выбрать между тремя различными типами шаблонов MVC проекта.

Рисунок 2-2: Выбор типа MVC 4 проекта
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

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

Нажмите кнопку OK, чтобы создать новый проект.

Примечание

На рисунке 2-2 вы можете увидеть выпадающее меню, которое позволяет вам указать вид движка представления. В MVC 3 Microsoft представила новый и улучшенный вид движка, который называется Razor, и мы будем использовать Razor в этой книге. Мы рекомендуем вам сделать то же самое. Но если вы хотите использовать стандартный вид ASP.NET движка (известный как ASPX) – это ваш выбор. Мы расскажем все о Razor и о том, что делает движок представления, в главах 5 и 18.

Когда Visual Studio создаст проект, вы увидите файлы и папки, отображаемые в окне Solution Explorer. Это стандартная структура MVC 4 проекта. Вы можете попробовать запустить приложение, выбрав Start Debugging из меню Debug (если он попросит вас включить отладку, просто нажмите кнопку ОК). Результат показан на рисунке 2-3. Поскольку мы начали с пустого шаблона проекта, приложение ничего не содержит, так что мы получаем ошибку 404 Not Found.

Рисунок 2-3: Попытка запустить пустой проект
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Когда вы закончите, не забудьте остановить отладку, закрыв окно браузера, который показывает ошибку, или вернитесь к Visual Studio и выберите Stop Debugging в меню Debug.

Visual Studio открывает браузер для отображения проекта, и вы можете изменить браузер, который используется, в меню, показанном на рисунке 2-4. Вы видите, что тут представлены Microsoft Internet Explorer и Google Chrome.

Рисунок 2-4: Смена браузера, который Visual Studio использует для запуска проекта
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

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

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

В архитектуре MVC входящие запросы обрабатываются контроллерами. В ASP.NET MVC контроллеры являются простыми C# классами (как правило, наследуются от System.Web.Mvc.Controller, встроенных во фреймворк базовых классов контроллеров). Каждый открытый метод в контроллере известен как метод действия, то есть вы можете вызвать его из Интернет через некоторые URL, чтобы выполнить действие. В MVC контроллеры находятся в папке под названием Controllers, которую Visual Studio создала для нас при создании проекта. Вам не нужно следить за этим и большинством других соглашений MVC, но мы рекомендуем вам сделать не в последнюю очередь потому, что это поможет вам разобраться в примерах, приведенных в данной книге.

Чтобы добавить контроллер в наш проект, просто щелкните правой кнопкой мыши по папке Controllers в окне Solution Explorer Visual Studio и затем выберите Add во всплывающем меню, как показано на рисунке 2-5.

Рисунок 2-5: Добавление контроллера в MVC проект
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Когда появится диалоговое окно Add Controller, назовите контроллер HomeController, как показано на рисунке 2-6. Это еще одно соглашение: имена, которые мы даем контроллерам, должны быть описательными и заканчиваться Controller.

Рисунок 2-6: Называем контроллер
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Раздел диалогового окна Scaffolding options позволяет нам создать контроллер с помощью шаблона с общими функциями. Мы не собираемся использовать эту возможность, поэтому убедитесь, что в меню Template выбрано Empty MVC controller, как показано на рисунке.

Нажмите кнопку Add, чтобы создать контроллер. Visual Studio создаст новый файл с C# кодом с названием HomeController.cs в папке Controllers и откроет его для редактирования. Мы показали контент по умолчанию, который Visual Studio помещает в классовый файл, в листинге 2-1. Вы видите, что класс называется HomeController, и он является производным от System.Web.Mvc.Controller.

Листинг 2-1: Содержание по умолчанию класса HomeController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PartyInvites.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}

Хороший способ начать работу с MVC – это сделать несколько простых изменений в классе контроллера. Измените код в файле HomeController.cs так, чтобы он соответствовал коду листинга 2-2. Мы выделили изменения, чтобы их было легче увидеть.

Листинг 2-2: Изменение класса HomeController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PartyInvites.Controllers
{
public class HomeController : Controller
{
public string Index()
{
return "Hello World";
}
}
}

Мы не создали ничего захватывающего, но это хороший пример. Мы изменили метод действия (action method) Index таким образом, что он возвращает строку "Hello, world". Запустите проект еще раз, выбрав Start Debugging в Visual Studio меню Debug. Браузер отобразит результат метода действия Index, как показано на рисунке 2-7.

Рисунок 2-7: Результат, возвращенный методом контроллера
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Роуты

Также как и модели, представления и контроллеры, MVC приложения используют систему маршрутизации (роутинговую систему) ASP.NET, которая решает, как URL-адреса картируют конкретные контроллеры и действия. Когда 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()
{
return View();
}
}
}

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

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

Рисунок 2-8: MVC Framework пытается найти представление по умолчанию
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

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

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

Рисунок 2-9: Диалоговое окно Add View
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Снимите галочку с 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: Тестирование представления
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Когда мы первый раз редактировали метод действия 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
{
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
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki



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



В остальной части этой главы мы рассмотрим несколько основных особенностей 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>
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: Добавление представления
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

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

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

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

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

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

Совет

Если у вас нет пункта меню 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 показана ссылка, которую мы добавили.

Рисунок 2-13: Добавление в представление ссылки
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Если вы наведете курсор мыши на ссылку в браузере, вы увидите, что ссылка указывает на 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, но мы собираемся сделать кое-что больше: то есть создать строго типизированное представление. Строго типизированные представления предназначены для обработки определенного типа доменов. Если мы укажем тип, с которым мы хотим работать (в этом примере GuestResponse), MVC предоставит дополнительные возможности, чтобы упростить нам задачу.

Внимание

Убедитесь, что перед работой ваш MVC проект скомпилирован. Если вы создали класс GuestResponse, но не скомпилировали его, MVC не сможет создать строго типизированное представление для данного типа. Чтобы скомпилировать приложение, выберите Build Solution в Visual Studio меню Build.

Щелкните правой кнопкой мыши внутри метода действия RsvpForm и выберите для создания представления Add View из всплывающего меню. В диалоговом окне Add View поставьте галочку на Create a strongly-typed view и выберите опцию GuestResponse из выпадающего меню. Снимите флажок с Use a layout or master page и убедитесь, что Razor выбран в качестве движка представления, и что опция Scaffold template установлена на Empty, как показано на рисунке 2-14.

Рисунок 2-14: Добавление строго типизированного представления
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Нажмите кнопку Add, и Visual Studio создаст новый файл с именем RvspForm.cshtml и откроет его для редактирования. Вы можете увидеть первоначальное содержание в листинге 2-12. Как вы заметили, это другой HTML файл, но он содержит Razor выражение @model. Вы сейчас увидите, что это является ключом к строго типизированному представлению и возможностям, которые оно предлагает.

Листинг 2-12: Начальное содержимое файла RsvpForm.cshtml
@model PartyInvites.Models.GuestResponse

@{
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RsvpForm</title>
</head>
<body>
<div>
</div>
</body>
</html>

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

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

Листинг 2-13: Создание представления формы
@model PartyInvites.Models.GuestResponse

@{
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RsvpForm</title>
</head>
<body>
@using (Html.BeginForm())
{
<p>Your name: @Html.TextBoxFor(x => x.Name) </p>
<p>Your email: @Html.TextBoxFor(x => x.Email)</p>
<p>Your phone: @Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x => x.WillAttend, new[] {
new SelectListItem() {Text = "Yes, I'll be there", Value = bool.TrueString},
new SelectListItem() {Text = "No, I can't come", Value = bool.FalseString}
}, "Choose an option")
</p>
<input type="submit" value="Submit RSVP" />
}
</body>
</html>

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

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

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

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

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

Не волнуйтесь, если вы не знакомы с лямбда-выражениями C#. Мы расскажем о них в главе 4, но в качестве альтернативы лямбда-выражениям вы можете обратиться к имени свойства типа модели как к строке, например, вот так:

@Html.TextBox("Email")

Мы считаем, что методика лямбда-выражений помогает нам не делать опечаток в имени свойства типа модели, потому что всплывает Visual Studio IntelliSense и позволяет нам выбрать свойство автоматически, как показано на рисунке 2-15.

Рисунок 2-15: Visual Studio IntelliSense для лямбда-выражений во вспомогательных методах HTML
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Другим удобным вспомогательным методом является Html.BeginForm, который генерирует элемент HTML формы, настроенный на обратную передачу данных методу действия. Поскольку мы не передали вспомогательному методу никаких параметров, он предполагает, что мы хотим передать обратно тот же URL. Ловким трюком является то, чтобы обернуть это в C# выражение using, вот таким образом:

@using (Html.BeginForm()) { 
...form contents go here...
}

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

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

<form action="/Home/RsvpForm" method="post"> 
...form contents go here...
</form>

Не волнуйтесь, если вы не знакомы с удалением объектов в C#. Наша цель на данный момент состоит в том, чтобы показать, как создать форму с помощью вспомогательного метода HTML. Вы можете видеть форму в представлении RsvpForm, когда вы запустите приложение и нажмете ссылку RSVP Now. На рисунке 2-16 показан результат.

Рисунок 2-16: Представление RspvForm
prilozheni-pervoe-vashe-eto-interesno-poznavatelno-kartinki

Примечание

Это не книга о CSS или веб дизайне. По большей части мы будем создавать примеры, внешний вид которых может быть описан как устаревший (хотя мы предпочитаем термин классический, в котором чувствует меньше пренебрежения). MVC представления генерируют очень чистый и простой HTML, и вы можете полностью управлять версткой элементов и классов, к которым они принадлежат, поэтому у вас не будет проблем с использованием дизайнерских средств или готовых шаблонов, чтобы сделать ваш MVC проект красивым.

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

Мы не сказали MVC, что мы хотим сделать, когда форма отправляется на сервер. На данный момент нажатие на кнопку Submit 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 запросом. В листинге 2-14 показаны изменения, которые мы должны сделать в классе HomeController.

Листинг 2-14: Добавление метода действия для поддержки POST запросов
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 ? "Good Morning" : "Good Afternoon";
return View();
}

[HttpGet]
public ViewResult RsvpForm()
{
return View();
}

[HttpPost]
public ViewResult RsvpForm(GuestResponse guestResponse)
{
// TODO: Email response to the party organizer
return View("Thanks", guestResponse);
}
}
}

Мы добавили атрибут HttpGet для нашего существующего метода действия RsvpForm. Это говорит MVC, что данный метод должен использоваться только для GET запросов. Затем мы добавили перегруженную версию RsvpForm, который принимает параметр GuestResponse и применяет атрибут HttpPost. Атрибут говорит MVC, что новый метод будет иметь дело с POST запросами. Обратите внимание, что мы также импортировали пространство имен PartyInvites.Models – таким образом мы можем обратиться к типу модели GuestRes

Нравится? Жми:

Поступило от Gaerdan 19 июня 2013, посмотрело 10970 чел.

-9



Похожие посты
  • 100

101 комбинация на клавиатуре, которая облегчит Вашу жизнь

  • 52

FlashТрэш

  • 102

Несколько хороших способов навсегда удалить ваши файлы

  • 100

Безработный геймдизайнер сделал модель Солнечной системы на движке Unreal

  • 65

Раскрути свою страничку вконтакте

Комментарии24 Комментарии Вконтакте
Привет!
Понравился сайт? Тогда давай к нам! Моментальная регистрация
У нас куча весёлых людей! А еще енот и две черепахи.
Комментарии через Вконтакте, для тех у кого не доходят руки зарегистрироваться. Но Вконтакте-то вы точно есть ;)
Присаживаемся поудобней, заполняем формы, бланки и т.п.
Закрыть окошко
Моментальная регистрация через социальные сети
Или обычная регистрация на сайте
Пошель
Слыш, пацанчик! Ты с какого района? документики есть?
Закрыть окошко
Моментальный вход через социальные сети:
Или проверка личности

Введите ваш логин и пароль в форму

Пошель

О сайте Немного о нашем сообществе и ответы на вопросы Мы в соц.сетях:
Вконтакте   Facebook   Twitter   Одноклассники
Обратная связь    Багоприемник