Поделиться через

Общие сведения о представлениях ASP.NET MVC (C#)

  • Статья

Стивен Уолтер

Что такое представление ASP.NET MVC и чем оно отличается от HTML-страницы? В этом руководстве Стивен Уолтер знакомит вас с представлениями и демонстрирует, как можно воспользоваться преимуществами вспомогательных средств просмотра данных и HTML в представлении.

Цель этого руководства — краткое введение в ASP.NET представлений MVC, данных просмотра и вспомогательных средств HTML. К концу этого руководства вы должны понять, как создавать новые представления, передавать данные из контроллера в представление и использовать вспомогательные функции HTML для создания содержимого в представлении.

Основные сведения о представлениях

Для страниц ASP.NET или активных серверов ASP.NET MVC не содержит ничего, что напрямую соответствует странице. В приложении ASP.NET MVC на диске нет страницы, соответствующей пути в URL-адресе, введенном в адресной строке браузера. Ближе всего к странице в приложении MVC ASP.NET называется представлением.

В приложении ASP.NET MVC входящие запросы браузера сопоставляются с действиями контроллера. Действие контроллера может возвращать представление. Однако действие контроллера может выполнять действия другого типа, например перенаправлять вас на другое действие контроллера.

В листинге 1 содержится простой контроллер с именем HomeController. HomeController предоставляет два действия контроллера с именами Index() и Details().

Листинг 1. HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Details()
        {
            return RedirectToAction("Index");
        }
    }
}

Вы можете вызвать первое действие , действие Index(), введя следующий URL-адрес в адресной строке браузера:

/Home/Index

Вы можете вызвать второе действие Details(), введя следующий адрес в браузере:

/Home/Details

Действие Index() возвращает представление. Большинство создаваемых действий возвращают представления. Однако действие может возвращать результаты других типов действий. Например, действие Details() возвращает redirectToActionResult, который перенаправляет входящий запрос на действие Index().

Действие Index() содержит следующую строку кода:

View();

Эта строка кода возвращает представление, которое должно находиться по следующему пути на веб-сервере:

\Views\Home\Index.aspx

Путь к представлению выводится из имени контроллера и имени действия контроллера.

При желании можно явно указать представление. Следующая строка кода возвращает представление с именем Fred :

View( Fred );

При выполнении этой строки кода представление возвращается по следующему пути:

\Views\Home\Fred.aspx

Примечание

Если вы планируете создать модульные тесты для приложения MVC ASP.NET, рекомендуется явно указать имена представлений. Таким образом можно создать модульный тест, чтобы убедиться, что ожидаемое представление было возвращено действием контроллера.

Добавление содержимого в представление

Представление — это стандартный (X)HTML-документ, который может содержать скрипты. Для добавления динамического содержимого в представление используются скрипты.

Например, в представлении в листинге 2 отображаются текущие дата и время.

Листинг 2. \Views\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <% Response.Write(DateTime.Now);%>

    </div>
</body>
</html>

Обратите внимание, что текст HTML-страницы в листинге 2 содержит следующий скрипт:

<% Response.Write(DateTime.Now);%>

Разделители скрипта <% и %> используются для обозначения начала и конца скрипта. Этот скрипт написан на языке C#. Он отображает текущую дату и время путем вызова метода Response.Write() для отрисовки содержимого в браузере. Разделители скрипта <% и %> можно использовать для выполнения одной или нескольких инструкций.

Так как вы вызываете Response.Write() так часто, корпорация Майкрософт предоставляет вам ярлык для вызова метода Response.Write(). В представлении в листинге 3 используются разделители <%= и %> в качестве ярлыка для вызова Response.Write().

Листинг 3. Views\Home\Index2.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <%=DateTime.Now %>

    </div>
</body>
</html>

Для создания динамического содержимого в представлении можно использовать любой язык .NET. Как правило, для записи контроллеров и представлений используется Visual Basic .NET или C#.

Использование вспомогательных средств HTML для создания содержимого представления

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

Например, представление в листинге 4 использует три вспомогательные функции HTML — BeginForm(), TextBox() и Password() — для создания формы входа (см. рис. 1).

Листинг 4 - \Views\Home\Login.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
    
    <% using (Html.BeginForm())
       { %>

        <label for="UserName">User Name:</label>
        <br />
        <%= Html.TextBox("UserName") %>
        
        <br /><br />
            
        <label for="Password">Password:</label>
        <br />
        <%= Html.Password("Password") %>
        
        <br /><br />

        <input type="submit" value="Log in" />        
    
    <% } %>
    
    </div>
</body>
</html>

Диалоговое окно New Project (Новый проект)

Рис. 01. Стандартная форма входа (щелкните для просмотра полноразмерного изображения)

Все вспомогательные методы HTML вызываются в свойстве Html представления. Например, объект TextBox отображается путем вызова метода Html.TextBox().

Обратите внимание, что при вызове вспомогательных элементов Html.TextBox() и Html.Password() используются разделители скриптов <%= и %> . Эти вспомогательные функции просто возвращают строку. Чтобы отобразить строку в браузере, необходимо вызвать Response.Write().

Использование вспомогательных методов HTML является необязательным. Они упрощают вашу жизнь, уменьшая объем HTML и скриптов, которые необходимо написать. Представление в листинге 5 отображается в той же форме, что и представление в листинге 4 без использования вспомогательных средств HTML.

Листинг 5 - \Views\Home\Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form without Help</title>
</head>
<body>
    <div>

    <form method="post" action="/Home/Login">
    
    <label for="userName">User Name:</label>
    <br />
    <input name="userName" />
    
    <br /><br />
    
    <label for="password">Password:</label>
    <br />
    <input name="password" type="password" />
    
    <br /><br />
    <input type="submit" value="Log In" />
    
    </form>
    
    </div>
</body>
</html>

Вы также можете создавать собственные вспомогательные функции HTML. Например, можно создать вспомогательный метод GridView(), который автоматически отображает набор записей базы данных в таблице HTML. Мы рассмотрим этот раздел в учебнике Создание пользовательских вспомогательных элементов HTML.

Использование представления данных для передачи данных в представление

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

Листинг 6. ProductController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            ViewData["message"] = "Hello World!";
            return View();
        }

    }
}

Свойство ViewData контроллера представляет коллекцию пар имен и значений. В листинге 6 метод Index() добавляет элемент в коллекцию данных представления с именем message со значением Hello World!. Когда представление возвращается методом Index(), данные представления передаются в представление автоматически.

Представление в листинге 7 извлекает сообщение из данных представления и отображает его в браузере.

Листинг 7 - \Views\Product\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>
    
    <%= Html.Encode(ViewData["message"]) %>
    
    </div>
</body>
</html>

Обратите внимание, что представление использует преимущества вспомогательного метода HTML Html.Encode() при отрисовке сообщения. Вспомогатель HTML Html.Encode() кодирует специальные символы, такие как < и > , в символы, которые можно безопасно отображать на веб-странице. Всякий раз, когда вы отрисовываете содержимое, которое пользователь отправляет на веб-сайт, следует кодировать содержимое, чтобы предотвратить атаки путем внедрения Кода JavaScript.

(Так как мы создали сообщение сами в ProductController, нам не нужно кодировать сообщение. Однако рекомендуется всегда вызывать метод Html.Encode() при отображении содержимого, полученного из данных представления в представлении.

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

Вы также можете передавать строго типизированные данные представления из контроллера в представление. Мы рассмотрим этот раздел в учебнике Общие сведения о данных и представлениях строго типизированного представления.

Итоги

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

Вперед