Главная страница   /   2.2. Создание вашего первого MVC приложения (ASP.NET MVC 4 в действии

ASP.NET MVC 4 в действии

ASP.NET MVC 4 в действии

Джеффри Палермо

2.2. Создание вашего первого MVC приложения

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

Создание нового проекта

Создание нового MVC проекта является прямолинейным процессом – от нажатия в программе Visual Studio 2010 на меню File (Файл) к выбору пункта New Project (Новый проект) этого меню. После выполнения этих действий будет вызвано диалоговое окно "New project", как показано на рисунке 2-3.

Рисунок 2-3: Диалоговое окно "New project" позволяет выбрать тип создаваемого проекта. В данном случае вам потребуется тип ASP.NET MVC 4 Web Application.

Для создания приложения мы будем использовать язык программирования C# (хотя вы могли бы использовать и VB.NET), поэтому в панели, расположенной в левой части диалогового окна, выберите пункт Visual C#, а затем подпункт Web. Существует несколько шаблонов, доступных для создания веб-приложений, но для этого примера вам нужно будет выбрать шаблон ASP.NET MVC 4 Web Application.

Если вы не видите данный шаблон в списке доступных, убедитесь, что в верхней части диалогового окна в качестве выходного фреймворка задан .NET Framework 4.

Назовите свой проект "Guestbook", и в качестве места его размещения используйте путь, заданный по умолчанию (обычно это C:\Users\<your username>\Documents\Visual Studio 2010\Projects).

После нажатия кнопки OK программа Visual Studio 2010 откроет другое диалоговое окно, в котором вы сможете указать более подробную информацию, как это показано на рисунке 2-4.

Рисунок 2-4: Диалоговое окно "New ASP.NET MVC Project" позволяет выбрать шаблон проекта и движок представления, а также определить необходимость использования проекта модульного теста.

В этом диалоговом окне вы можете выбрать необходимый шаблон. Шаблон Empty (Пустой) обеспечивает создание проекта с самой простой минимальной структурой, тогда как в шаблоне Internet Application (Интернет приложение) присутствуют некоторые базовые возможности структуризации и аутентификации. Шаблон Intranet Application (Интранет приложение) схож с шаблоном Internet Application, но в отличие от него, использует механизм аутентификации Windows, а не механизм аутентификации форм ASP.NET. Для простоты выберите шаблон Internet Application.

В этом диалоговом окне вы также можете выбрать необходимый движок представления. Для этого примера используйте движок, заданный по умолчанию, т.е. движок представления Razor, который впервые появился в MVC 3. Существует возможность использования движка представления Web Forms, который по умолчанию использовался в MVC 1 и 2. Подробнее движки представления мы рассмотрим в главах 3 и 17.

Наконец, вы можете выбрать место размещения проекта модульного теста. Для большинства нетривиальных приложений написание модульных тестов является хорошим способом проверки того, что ваше приложение выполняется правильно. Проверьте, установлена ли отметка в поле Create a unit test project (Создать проект модульного теста), несмотря на то, что мы не будем рассматривать эту тему подробно, пока не дойдем до главы 4. После нажатия кнопки OK будет создан новый проект.

На данном этапе вы можете запустить свое приложение. Сделать это можно путем нажатия сочетания клавиш Ctrl+F5 или последовательным нажатием кнопки Debug (Отладка) на панели инструментов программы Visual Studio, а затем кнопки Start Without Debugging (Запуск без отладки). После этого запустится ASP.NET Development Server, и приложение откроется в веб-браузере, используемом вами по умолчанию, как это показано на рисунке 2-5.

Рисунок 2-5: Созданное по умолчанию приложение содержит несколько простых страниц, которые помогут вам приступить к началу создания нового MVC приложения.

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

Путешествие по шаблону проекта, используемого по умолчанию

При открытии только что созданного проекта вы заметите, что в шаблон проекта, используемого по умолчанию, входят несколько подкаталогов, содержащих различные файлы. Как показано на рисунке 2-6, эти подкаталоги видны в окне Solution Explorer программы Visual Studio.

Рисунок 2-6: Шаблон проекта, созданного по умолчанию, содержит несколько файлов, в том числе контроллеры, модели, представления и скрипты.

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

Папка APP_DATA

Папка APP_DATA используется для хранения баз данных, XML-файлов или любых других данных, необходимых для вашего приложения. Рабочая среда ASP.NET распознает эту папку, и не будет давать пользователю возможность напрямую обращаться к файлам данной папки. Только созданное вами приложение может читать и записывать файлы в эту папку.

Папка Content

Целью папки Content является хранение любых незакодированных ресурсов, которые нужно будет развернуть в вашем приложении. Обычно к таким ресурсам относятся изображения и CSS файлы (каскадные таблицы стилей). По умолчанию папка Content содержит таблицу стилей, используемую в проекте по умолчанию (Site.css), а также подкаталог themes, в котором хранятся изображения и CSS файлы, используемые в jQuery UI (фреймворке для создания элементов пользовательского интерфейса на стороне клиента, который мы будем рассматривать в главе 7).

Папка Controllers

Согласно содержанию главы 1 контроллер – это координатор, отвечающий за обработку входных данных и решающий, какое действие должно выполняться далее (к примеру, передача представления). В ASP.NET MVC контроллеры представлены в папке Controllers в виде классов. По умолчанию в этой папке содержатся два класса – HomeController (обрабатывает запросы обращения к главной странице вашего приложения) и AccountController (отвечает за обработку запросов, связанных с учетной записью).

Папка Models

Папка Models обычно используется для хранения любых классов, которые используются для объяснения ключевых идей вашего приложения, или классов, в которых данные содержатся в формате, определенном для каждого конкретного представления (модель представления). Как только ваше приложение увеличится в размерах, вы, возможно, захотите поместить эти классы в отдельный проект, но хранение указанных классов в папке Models является подходящим начальным этапом для небольших проектов. В папке Models проекта, созданного по умолчанию, содержится всего один файл – AccountModels.cs. В этот файл входят несколько классов, связанных с механизмом аутентификации и используемых в шаблоне проекта, созданного по умолчанию.

Папка Scripts

Папка Scripts – это место, где вы можете разместить любые файлы JavaScript, которые используются в вашем приложении. В соответствующей папке шаблона проекта, созданного по умолчанию, содержится множество файлов, в том числе популярная библиотека с открытым исходным кодом jQuery (которую мы изучим в главе 7) и скрипты, используемые для выполнения проверки достоверности объектов на стороне клиента.

Папка Views

В папке Views содержатся шаблоны, используемые для отображения пользовательского интерфейса вашего приложения. Каждый из этих шаблонов демонстрируется в качестве Razor представления (файлы с расширением .cshtml или .vbhtml), расположенного в подкаталоге, название которого соответствует контроллеру, который отвечает за показ данного представления. Не переживайте, если все это вводит вас в некоторое замешательство – мы будем изучать взаимосвязь контроллеров, действий и представлений далее.

Файл Global.asax

Файл Global.asax расположен в корне структуры проекта и содержит код инициализации, который запускается при первом запуске приложения, например, код, который регистрирует роуты (мы вкратце изучим их в следующем разделе).

Файл Web.config

Файл Web.config также расположен в корне структуры проекта и содержит информацию о настройках, необходимых для корректной работы ASP.NET MVC.

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

Контроллеры, методы действий и отображение динамического контента

В главе 1 мы объясняли, что контроллеры играют роль координаторов. Они могут принимать входные данные (в виде различных источников таких, как данные из формы или URL-адресов), но полномочия отображения страниц все-таки делегируют представлениям.

Классы контроллеров и методы действий

В ASP.NET MVC контроллеры представлены в виде классов, унаследованных от базового класса Controller, в котором индивидуальные методы (называемые в MVC действиями) соответствуют конкретным URL-адресам. Для иллюстрации того, как это работает, мы рассмотрим класс HomeController, который находится в папке Controllers нашего проекта. Код для этого класса приведен в следующем листинге.

Листинг 2-1: Класс HomeController
using System.Web.Mvc;
namespace Guestbook.Controllers
{
	public class HomeController : Controller
	{
		public ActionResult Index()
		{
			ViewBag.Message = "Modify this template to jump-start";
			return View();
		}
		public ActionResult About()
		{
			ViewBag.Message = "Your quintessential. . . ";
			return View();
		}
	}
}

Строка 4: Наследуется от базового класса Controller

Строка 6: Методы действий возвращают ActionResult

Строка 8: Данные, передаваемые в представление

Строка 9: Указывает представление, которое должно отображаться

Класс HomeController является самой прямой реализацией класса контроллеров. Для обозначения того, что класс HomeController является контроллером, этот класс наследуется от базового класса Controller и в своем названии содержит суффикс "Controller".

В класс HomeController входят 2 метода действий. Действия – это открытые методы класса контроллеров, которые обрабатывают запросы конкретных URL-адресов. В данном примере действия названы Index и About. Поскольку эти действия находятся в классе HomeController, то к ним можно получить доступ по URL-адресам /Home/Index и /Home/About соответственно. Таким образом, если бы ваше приложение было размещено на хостинге MySite.com, то полным URL-адресом для действия Home был бы адрес http://MySite.com/home/index. Если бы пользователь ввел этот URL-адрес в веб-браузере, то фреймворк проиллюстрировал бы пример класса HomeController, и при этом был бы вызван метод Index.

Роуты – преобразование URL-адресов в действия

На данном этапе вы, возможно, зададитесь вопросом, каким образом фреймворк определяет, как нужно преобразовывать URL-адреса в конкретное действие контроллера? Ответ находится в методе RegisterRoutes, находящемся в файле Global.asax. Данный метод определяет роуты, по которым шаблон URL-адреса преобразуется в контроллер или действие контроллера. Реализация этого метода представлена ниже.

Листинг 2-2: Регистрация роутов
public static void RegisterRoutes(RouteCollection routes)
{
	routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
	routes.MapHttpRoute(
		name: "DefaultApi",
		routeTemplate: "api/{controller}/{id}",
		defaults: new { id = RouteParameter.Optional }
	);
	routes.MapRoute(
		name: "Default",
		url: "{controller}/{action}/{id}",
		defaults: new { controller = "Home",
			action = "Index", id = UrlParameter.Optional }
	);
}

Строка 10: Название роута

Строка 11: Шаблон URL

Строки 12-13: Параметры роута, используемые по умолчанию

Фрагмент кода, связанный с роутом под названием DefaultApi, используется для веб-интерфейса и будет рассмотрен в главе 24. Заметьте, что в этом коде объявлены еще 2 роута. Первый – это IgnoreRoute, который в основном указывает фреймворку на то, что ему необходимо игнорировать все, что совпадает с указанным в нем путем. В данном примере IgnoreRoute указывает на то, что фреймворк не должен обрабатывать запросы, в путях которых содержатся файлы с расширением .axd, например Trace.axd. Второй роут, MapRoute, определяет, как должен обрабатываться URL-адрес. Этого роута, используемого по умолчанию, на некоторое время вам хватит, но позднее вам нужно будет добавить еще несколько роутов для того, чтобы работать с URL-адресами, используемыми в вашем приложении.

Каждый роут имеет свое название, определение URL-адреса и значения параметров, заданные по умолчанию. Наш первый запрос не содержит ни одного из этих сегментов URL-адреса, поэтому мы рассмотрим параметры роута, используемого по умолчанию:

  • controller—"Home"
  • action—"Index"
  • id – опционально; дает возможность пропустить параметр id в URL-адресе

Вследствие этих используемых по умолчанию значений вы можете пропустить некоторые сегменты URL-адреса и при этом получить тот же самый результат. Вернемся снова к нашему примеру. Если бы вашим доменом был бы сайт MySite.com, то результатом запроса URL-адресов http://MySite.com/Home/Index, http://MySite.com/Home и http://MySite.com был бы вызов действия Index класса HomeController.

Заметка о маршрутизации

Роут с шаблоном {controller}/{action}/{id} является общим маршрутом, который может использоваться для работы с множеством различных веб-запросов. Маркеры отмечаются при помощи фигурных скобок "{}", а слово, заключенное в скобки, соответствует значению, которое разбирается MVC Framework'ом.

Наиболее универсальные значения, которые нам будут интересны, – это параметры controller и action. Параметр маршрута controller – это специальное значение, которое фреймворк передает в фабрику контроллеров (controller factory) для того, чтобы создать образец контроллера. Этот роут будет применяться нами на протяжении всей оставшейся главы 2, поэтому давайте использовать URL-адрес в следующей форме – http://mvccontrib.org/controllername/actionname.

Подробнее мы рассмотрим механизм маршрутизации в главе 9.

Возвращаясь в листинг 2-1 к классу HomeController, мы увидим, что действие Index содержит две строки кода:

ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();

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

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

public ActionResult Index()
{
	ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
	ViewBag.CurrentDate = DateTime.Now;
	return View();
}

В данном примере мы всего лишь передали в свойство ViewBag.CurrentDate текущую дату и время. Данное свойство было создано "на лету", и нам не потребовалось изменять определение класса для того, чтобы добавить это свойство. Теперь мы можем получить доступ к этому свойству из нашего представления, которое отображается посредством вызова строки return View().

Метод View() (который возвращает значение типа ViewResult) указывает фреймворку на то, что нужно отобразить представление. В данном примере мы не указали конкретное название представления, поэтому фреймворк придет к заключению, что необходимо продемонстрировать представление, имя которого совпадает с названием метода действия, т.е. Index. Это представление фреймворк попытается разместить в папке Views проекта, а затем в подкаталоге, название которого совпадает с названием контроллера. В данном примере таким подкаталогом является папка Home.

Представление

Если вы вернетесь назад к структуре проекта, показанной на рисунке 2-5, то вы увидите, что в проекте действительно присутствует файл Index.cshtml, который расположен в подкаталоге Views/Home. Если вы откроете этот файл, то вы увидите следующую разметку, являющуюся частью этого файла:

@{
	ViewBag.Title = "Home Page";
}
@section featured {
	<section class="featured">
		<div class="content-wrapper">
			<hgroup class="title">
				<h1>@ViewBag.Title.</h1>
				<h2>@ViewBag.Message</h2>
			</hgroup>
			<p>The current date is @ViewBag.CurrentDate.ToLongDateString()</p>
			<p>
				To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"
				title="ASP.NET MVC Website">http://asp.net/mvc</a>.
					...
			</p>
		</div>
	</section>
}
…

Представление Index содержит смесь кода на языке C# и HTML-разметку. В верхней части файла содержится блок кода, в котором устанавливается заголовок страницы, а затем отображается сообщение, заданное в теге <h2>. Вызов метода @ViewBag.Message выводит содержимое свойства Message ViewBagа, который был задан в контроллере.

Вы можете изменить представление, чтобы также вывести значение свойства CurrentDate, которое было добавлено во ViewBag. Просто добавьте следующий отрывок кода в файл Index.cshtml:

<p>The current date is @ViewBag.CurrentDate.ToLongDateString()</p>

Заметьте, что префикс @ обозначает переход между HTML-разметкой и кодом. Выходной результат показан на рисунке 2-7.

Рисунок 2-7: На странице отображается содержимое нашего пользовательского объекта класса ViewBag, которое содержит текущую дату

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

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