Добавление представления (C#)
Примечание.
Обновленная версия этого руководства доступна здесь , где используется ASP.NET MVC 5 и Visual Studio 2013. Это более безопасно, гораздо проще следовать и демонстрирует больше функций.
В этом руководстве описаны основы создания веб-приложения MVC ASP.NET MVC с помощью Microsoft Visual Web Developer 2010 Express с пакетом обновления 1 (SP1), который является бесплатной версией Microsoft Visual Studio. Перед началом работы убедитесь, что вы установили необходимые компоненты, перечисленные ниже. Все их можно установить, щелкнув следующую ссылку: установщик веб-платформы. Кроме того, можно установить предварительные требования по отдельности, используя следующие ссылки:
- Предварительные требования для Visual Studio Web Developer Express с пакетом обновления 1 (SP1)
- обновление средств MVC 3 ASP.NET
- SQL Server Compact 4.0(среда выполнения и средства поддержки)
Если вы используете Visual Studio 2010 вместо Visual Web Developer 2010, установите необходимые компоненты, щелкнув следующую ссылку: предварительные требования Visual Studio 2010.
Проект Visual Web Developer с исходным кодом C# доступен для сопровождения этого раздела. Скачайте версию C#. Если вы предпочитаете Visual Basic, перейдите на версию этого руководства visual Basic.
В этом разделе вы измените HelloWorldController класс, чтобы использовать файлы шаблонов представления для чистого инкапсулирования процесса создания HTML-ответов клиенту.
Вы создадите файл шаблона представления с помощью нового модуля представления Razor, представленного с ASP.NET MVC 3. Шаблоны представлений на основе Razor имеют расширение CSHTML-файла и предоставляют элегантный способ создания выходных данных HTML с помощью C#. Razor сводит к минимуму количество символов и нажатий клавиш, необходимых при написании шаблона представления, и обеспечивает быстрый рабочий процесс кодирования жидкости.
Начните с использования шаблона представления с методом Index в HelloWorldController классе. На данный момент метод Index возвращает строку с сообщением, которое жестко задано в классе контроллера. Измените метод для Index возврата View объекта, как показано в следующем примере:
public ActionResult Index()
{
return View();
}
Этот код использует шаблон представления для создания HTML-ответа в браузере. В проекте добавьте шаблон представления, который можно использовать с методом Index . Для этого щелкните правой кнопкой мыши в методе Index и нажмите кнопку "Добавить представление".
Откроется диалоговое окно "Добавить представление ". Оставьте значения по умолчанию так, как они находятся, и нажмите кнопку "Добавить ".
Создаются папка MvcMovie\Views\HelloWorld и MvcMovie\Views\HelloWorld\Index.cshtml . Их можно увидеть в Обозреватель решений:
Ниже показан созданный файл Index.cshtml :
Добавьте html-код под тегом <h2> . Измененный файл MvcMovie\Views\HelloWorld\Index.cshtml показан ниже.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
Запустите приложение и перейдите к контроллеру HelloWorld (http://localhost:xxxx/HelloWorld). Метод в контроллере не работал. Он Index просто выполнил инструкцию return View(), которая указала, что метод должен использовать файл шаблона представления для отображения ответа в браузере. Так как вы явно не указали имя используемого файла шаблона представления, ASP.NET MVC по умолчанию использует файл представления Index.cshtml в папке \Views\HelloWorld . На рисунке ниже показана строка, закодированная в представлении.
Выглядит довольно хорошо. Однако обратите внимание, что в строке заголовка браузера указано "Индекс" и большой заголовок на странице "My MVC Application". Давайте изменим их.
Изменение представлений и страниц макета
Сначала необходимо изменить заголовок "Мое приложение MVC" в верхней части страницы. Этот текст распространен для каждой страницы. Он фактически реализуется только в одном месте проекта, даже если он отображается на каждой странице в приложении. Перейдите в папку /Views/Shared в Обозреватель решений и откройте файл _Layout.cshtml. Этот файл называется страницей макета, и это общая "оболочка", которую используют все остальные страницы.
С помощью шаблонов макета можно в одном месте задать макет контейнера HTML для всего сайта и затем использовать его на разных страницах сайта. Обратите внимание на @RenderBody() строку в нижней части файла. RenderBody — это заполнитель, в котором на странице макета отображаются все создаваемые страницы, связанные с представлением. Измените заголовок заголовка в шаблоне макета с "My MVC Application" на "MVC Movie App".
<div id="title">
<h1>MVC Movie App</h1>
</div>
Запустите приложение и обратите внимание, что теперь он говорит "Приложение MVC Movie". Щелкните ссылку "О программе", и вы увидите, как на этой странице также отображается приложение "Фильм MVC". Мы смогли внести изменения один раз в шаблон макета и иметь все страницы на сайте отражают новое название.
Ниже показан полный файл _Layout.cshtml :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Теперь давайте изменим заголовок страницы индекса (представление).
Откройте MvcMovie\Views\HelloWorld\Index.cshtml. Есть два места для внесения изменений: сначала текст, который отображается в заголовке браузера, а затем в дополнительном заголовке ( <h2> элемент). Сделайте их немного разными, чтобы видеть, какой именно фрагмент кода изменяет соответствующую часть приложения.
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
Чтобы указать заголовок HTML для отображения, приведенный выше код задает Title свойство ViewBag объекта (который находится в шаблоне представления Index.cshtml ). Если вернуться к исходному коду шаблона макета, вы заметите, что шаблон использует это значение в элементе в <title> рамках <head> раздела HTML. С помощью этого подхода можно легко передать другие параметры между шаблоном представления и файлом макета.
Запустите приложение и перейдите к ней http://localhost:xx/HelloWorld. Обратите внимание, что основной и дополнительный заголовки браузера изменились. (Если вы не видите изменения в браузере, возможно, вы просматриваете кэшированное содержимое. Нажмите клавиши CTRL+F5 в браузере, чтобы принудительно загрузить ответ с сервера.)
Также обратите внимание, как содержимое в шаблоне представления Index.cshtml было объединено с шаблоном представления _Layout.cshtml , а один HTML-ответ был отправлен в браузер. С помощью шаблонов макета можно легко вносить изменения, которые применяются ко всем страницам приложения.
Хотя наш маленький фрагмент данных (в данном случае сообщение "Hello from our View Template!") жестко закодирован. Приложение MVC предоставляет представление, вы реализуете контроллер, однако модели на данный момент еще нет. Вскоре мы рассмотрим, как создать базу данных и получить из нее данные модели.
Передача данных из контроллера в представление
Прежде чем перейти к базе данных и рассказать о моделях, давайте сначала поговорим о передаче информации от контроллера в представление. Классы контроллеров вызываются в ответ на входящий URL-запрос. Класс контроллера заключается в том, где вы пишете код, обрабатывающий входящие параметры, извлекает данные из базы данных и в конечном итоге решает, какой тип ответа отправляется обратно в браузер. Затем шаблоны представления можно использовать с контроллера для создания и форматирования HTML-ответа в браузере.
Контроллеры отвечают за предоставление любых данных или объектов, необходимых для отображения ответа в браузере шаблона представления. Шаблон представления никогда не должен выполнять бизнес-логику или напрямую взаимодействовать с базой данных. Вместо этого он должен работать только с данными, предоставленными ему контроллером. Сохранение этого "разделения проблем" помогает обеспечить чистоту кода и повысить удобство обслуживания.
В настоящее время Welcome метод действия в HelloWorldController классе принимает name и numTimes параметр, а затем выводит значения непосредственно в браузер. Вместо того чтобы контроллер отображал этот ответ в виде строки, давайте изменим контроллер, чтобы использовать шаблон представления. Шаблон представления создаст динамический ответ, для получения которого необходимо передать соответствующие фрагменты данных из контроллера в представление. Для этого контроллер помещает динамические данные, необходимые шаблону представления в ViewBag объекте, к которому затем может получить доступ шаблон представления.
Вернитесь к файлу HelloWorldController.cs и измените Welcome метод для добавления Message и NumTimes значения в ViewBag объект. ViewBag является динамическим объектом, что означает, что вы можете поместить в него все, что вы хотите; ViewBag Объект не имеет определенных свойств, пока не помещаете в него что-то. Полный файл HelloWorldController.cs выглядит следующим образом:
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
ViewBag Теперь объект содержит данные, которые будут передаваться в представление автоматически.
Далее вам нужен шаблон представления приветствия! В меню отладки выберите "Сборка MvcMovie", чтобы убедиться, что проект скомпилирован.
Затем щелкните правой кнопкой мыши внутри Welcome метода и нажмите кнопку "Добавить представление". Вот как выглядит диалоговое окно "Добавить представление ":
Нажмите кнопку "Добавить", а затем добавьте следующий код в <h2> элемент в новом файле Welcome.cshtml . Вы создадите цикл, который говорит "Hello" столько раз, сколько пользователь говорит, что он должен. Ниже показан полный файл Welcome.cshtml .
@{
ViewBag.Title = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>
Запустите приложение и перейдите по следующему URL-адресу:
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
Теперь данные принимаются из URL-адреса и передаются контроллеру автоматически. Контроллер упаковает данные в ViewBag объект и передает этот объект в представление. Затем в представлении отображаются данные в формате HTML для пользователя.
Этот подход характерен для модели, а не для базы данных. Итак, обобщим все полученные данные и попробуем создать базу данных фильмов.