Visão geral de exibições do ASP.NET MVC (C#)
por Stephen Walther
O que é uma exibição MVC ASP.NET e como ela difere de uma página HTML? Neste tutorial, Stephen Walther apresenta os Modos de Exibição e demonstra como você pode aproveitar os Auxiliares de Exibição de Dados e HTML em um Modo de Exibição.
A finalidade deste tutorial é fornecer uma breve introdução a ASP.NET exibições do MVC, exibir dados e auxiliares html. Ao final deste tutorial, você deve entender como criar novas exibições, passar dados de um controlador para uma exibição e usar auxiliares HTML para gerar conteúdo em uma exibição.
Compreendendo as exibições
Para ASP.NET ou Páginas do Servidor Ativo, ASP.NET MVC não inclui nada que corresponda diretamente a uma página. Em um aplicativo MVC ASP.NET, não há uma página no disco que corresponda ao caminho na URL que você digita na barra de endereços do navegador. A coisa mais próxima de uma página em um aplicativo MVC ASP.NET é algo chamado de exibição.
Em um aplicativo MVC ASP.NET, as solicitações de navegador de entrada são mapeadas para ações do controlador. Uma ação do controlador pode retornar uma exibição. No entanto, uma ação do controlador pode executar algum outro tipo de ação, como redirecioná-lo para outra ação do controlador.
A listagem 1 contém um controlador simples chamado HomeController. O HomeController expõe duas ações do controlador chamadas Index() e Details().
Listagem 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");
}
}
}
Você pode invocar a primeira ação, a ação Index(), digitando a seguinte URL na barra de endereços do navegador:
/Home/Index
Você pode invocar a segunda ação, a ação Detalhes(), digitando esse endereço em seu navegador:
/Home/Details
A ação Index() retorna uma exibição. A maioria das ações que você criar retornará exibições. No entanto, uma ação pode retornar outros tipos de resultados de ação. Por exemplo, a ação Details() retorna um RedirectToActionResult que redireciona a solicitação de entrada para a ação Index().
A ação Index() contém a seguinte linha única de código:
View();
Essa linha de código retorna uma exibição que deve estar localizada no seguinte caminho no servidor Web:
\Views\Home\Index.aspx
O caminho para a exibição é inferido do nome do controlador e do nome da ação do controlador.
Se preferir, você pode ser explícito sobre a exibição. A seguinte linha de código retorna uma exibição chamada Fred :
View( Fred );
Quando essa linha de código é executada, uma exibição é retornada do seguinte caminho:
\Views\Home\Fred.aspx
Observação
Se você planeja criar testes de unidade para seu aplicativo ASP.NET MVC, é uma boa ideia ser explícito sobre nomes de exibição. Dessa forma, você pode criar um teste de unidade para verificar se a exibição esperada foi retornada por uma ação do controlador.
Adicionando conteúdo a um modo de exibição
Uma exibição é um documento HTML padrão (X)que pode conter scripts. Você usa scripts para adicionar conteúdo dinâmico a uma exibição.
Por exemplo, a exibição na Listagem 2 exibe a data e a hora atuais.
Listagem 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>
Observe que o corpo da página HTML na Listagem 2 contém o seguinte script:
<% Response.Write(DateTime.Now);%>
Você usa os delimitadores <de script % e %> para marcar o início e o fim de um script. Esse script é escrito em C#. Ele exibe a data e a hora atuais chamando o método Response.Write() para renderizar o conteúdo para o navegador. Os delimitadores de script % e %> podem ser usados <para executar uma ou mais instruções.
Como você chama Response.Write() com tanta frequência, a Microsoft fornece um atalho para chamar o método Response.Write(). O modo de exibição na Listagem 3 usa os delimitadores <%= e %> como um atalho para chamar Response.Write().
Listagem 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>
Você pode usar qualquer linguagem .NET para gerar conteúdo dinâmico em uma exibição. Normalmente, você usará o .NET ou o C# do Visual Basic para gravar seus controladores e exibições.
Usando auxiliares HTML para gerar conteúdo de exibição
Para facilitar a adição de conteúdo a uma exibição, você pode aproveitar algo chamado Auxiliar html. Um Auxiliar html, normalmente, é um método que gera uma cadeia de caracteres. Você pode usar auxiliares HTML para gerar elementos HTML padrão, como caixas de texto, links, listas suspensas e caixas de listagem.
Por exemplo, o modo de exibição na Listagem 4 aproveita três Auxiliares HTML – os auxiliares BeginForm(), TextBox() e Password() para gerar um formulário de logon (consulte a Figura 1).
Listagem 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>
Figura 01: um formulário de logon padrão (clique para exibir imagem em tamanho real)
Todos os métodos auxiliares HTML são chamados na propriedade Html da exibição. Por exemplo, você renderiza um TextBox chamando o método Html.TextBox().
Observe que você usa os delimitadores <de script %= e %> ao chamar os auxiliares Html.TextBox() e Html.Password(). Esses auxiliares simplesmente retornam uma cadeia de caracteres. Você precisa chamar Response.Write() para renderizar a cadeia de caracteres para o navegador.
O uso de métodos auxiliares HTML é opcional. Eles facilitam sua vida reduzindo a quantidade de HTML e script que você precisa escrever. A exibição na Listagem 5 renderiza exatamente a mesma forma que a exibição na Listagem 4 sem usar auxiliares HTML.
Listagem 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>
Você também tem a opção de criar seus próprios Auxiliares HTML. Por exemplo, você pode criar um método auxiliar GridView() que exibe um conjunto de registros de banco de dados em uma tabela HTML automaticamente. Exploramos este tópico no tutorial Criando auxiliares HTML personalizados.
Usando exibir dados para passar dados para uma exibição
Você usa dados de exibição para passar dados de um controlador para uma exibição. Pense em exibir dados como um pacote que você envia pelo email. Todos os dados passados de um controlador para uma exibição devem ser enviados usando esse pacote. Por exemplo, o controlador na Listagem 6 adiciona uma mensagem para exibir dados.
Listagem 6 – ProductController.cs
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class ProductController : Controller
{
public ActionResult Index()
{
ViewData["message"] = "Hello World!";
return View();
}
}
}
A propriedade ViewData do controlador representa uma coleção de pares de nome e valor. Na Listagem 6, o método Index() adiciona um item à coleção de dados de exibição chamada message com o valor Olá, Mundo!. Quando a exibição é retornada pelo método Index(), os dados de exibição são passados para a exibição automaticamente.
A exibição na Listagem 7 recupera a mensagem dos dados de exibição e renderiza a mensagem para o navegador.
Listagem 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>
Observe que o modo de exibição aproveita o método Auxiliar HTML Html.Encode() ao renderizar a mensagem. O Auxiliar HTML Html.Encode() codifica caracteres especiais, como < e > em caracteres que são seguros para exibição em uma página da Web. Sempre que você renderizar o conteúdo que um usuário envia para um site, você deverá codificar o conteúdo para evitar ataques de injeção de JavaScript.
(Como criamos a mensagem nós mesmos no ProductController, realmente não precisamos codificar a mensagem. No entanto, é um bom hábito sempre chamar o método Html.Encode() ao exibir o conteúdo recuperado dos dados de exibição em uma exibição.)
Na Listagem 7, aproveitamos os dados de exibição para passar uma mensagem de cadeia de caracteres simples de um controlador para uma exibição. Você também pode usar a exibição de dados para passar outros tipos de dados, como uma coleção de registros de banco de dados, de um controlador para uma exibição. Por exemplo, se você quiser exibir o conteúdo da tabela de banco de dados Produtos em um modo de exibição, passe a coleção de registros de banco de dados em exibir dados.
Você também tem a opção de passar dados de exibição fortemente tipado de um controlador para uma exibição. Exploramos este tópico no tutorial Noções básicas sobre exibições e dados de exibição fortemente tipadas.
Resumo
Este tutorial forneceu uma breve introdução a ASP.NET exibições de MVC, exibir dados e auxiliares html. Na primeira seção, você aprendeu a adicionar novos modos de exibição ao seu projeto. Você aprendeu que deve adicionar uma exibição à pasta certa para chamá-la de um controlador específico. Em seguida, discutimos o tópico de Auxiliares html. Você aprendeu como os Auxiliares de HTML permitem que você gere facilmente conteúdo HTML padrão. Por fim, você aprendeu a aproveitar os dados de exibição para passar dados de um controlador para uma exibição.
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de