Главная страница   /   2.3. Представление (рендеринг) веб страниц (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

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

Результатом предыдущего примера не был 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 пытается найти представление по умолчанию

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

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

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

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

Когда мы первый раз редактировали метод действия 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