ASP .NET MVC 3 - Analisando alguns recursos da View

ASP .NET MVC 3 - Analisando alguns recursos da View - Inline Code e Helpers HTML

Neste artigo vamos falar um pouco sobre a View, a camada de apresentação, e alguns de seus recursos e propriedades.

Na arquitetura MVC a view tem como objetivo gerar o conteúdo através do modelo para apresentação ao usuário.

Quando falamos em camada de apresentação já supõe-se que devemos ter conhecimentos de HTML, CSS e JavaScript para podermos desenvolvê-la. Neste artigo apresentarei como podemos gerar conteúdo dinâmico usando algumas das funcionalidades do ASP .NET MVC 3 como Inline Code, os Helpers HTML.

Os exemplos mostrados neste artigos foram feitos usando a ferramenta gratuita Visual Web Developer 2010 Express Edition.

Usando Inline Code

A maneira mais simples de gerar conteúdo dinâmico e usar inline code.

O inline code são blocos de código inseridos entre as tags <% e %>. Estas tags são herança da ASP e estão presentes no JSP, PHP, Rails, etc.

No ASP .NET MVC 3 podemos incluir código C# ou VB .NET na view usando o Razor ao invés do ASPX.

O Razor é uma nova alternativa ao ASPX sendo mais simples e enxuto do que este.

Para você poder comparar segue abaixo alguns exemplos de código usando ASPX e Razor:

1- Bloco de código

//Razor @{ int idade = 43; string nome = "Macoratti"; }	//ASPX <% int idade = 43; string nome = "Macoratti."; %>
ASP .NET Razor	ASP .NET ASPX

2- Expressão

<!-- Razor --> 2 <span>@model.Nome</span>	<!-- ASPX --> 2 <span><%= model.Nome %></span>
ASP .NET Razor	ASP .NET ASPX

3- Texto e HTML

<!-- Razor --> @foreach(var item in nomes) { <span>@item.Nome</span> }	<!-- ASPX --> <% foreach(var item in editoras) { %> <span><%= item.Nome %></span> <% } %>
ASP .NET Razor	ASP .NET ASPX

4- Código e Texto

!<!-- Razor --> @if (foo) { @:Plain Text e @editora.Nome }	<!-- ASPX --> <% if (foo) { %> Texto <%= editora.Nome %> <% } %>
ASP .NET Razor	ASP .NET ASPX

5- Comentários

<!-- Razor --> @* Comentário *@	<!-- ASPX --> <%-- Comentário --%>
ASP .NET Razor	ASP .NET ASPX

6- Usando Textos e expressões

<!-- Razor --> Livro: @livro.Titulo - R$@livro.Preco.	<!-- ASPX --> Livro: <%= livro.Titulo %> - R$<%= livro.Preco %>>
ASP .NET Razor	ASP .NET ASPX

Na arquitetura MVC, os pedidos recebidos são tratados pelos controladores (Controllers). No ASP.NET MVC, os controladores são apenas simples classes C# (geralmente herdando de System.Web.Mvc.Controller).

Cada método público em um controlador é conhecido como um método de ação (Action) , o que significa que podemos invocá-lo a partir da Web através de alguma URL para executar uma ação. A convenção MVC é colocar controladores em uma pasta chamada Controllers, que o Visual Studio criou para nós quando ele criou o projeto.

Para visualizar os dados o controlador fornece os dados para a View e isso pode ser feito da seguinte forma:

Usando um dicionário - Através do ViewData Dictionary - A classe base do Controlador tem uma propriedade dictionary "ViewData" que pode ser usada para preencher os dados que você deseja passar para uma view. Você pode adicionar objetos no dicionário ViewData usando um padrão de chave/valor.

Ex: ViewData["Produtos"] = contexto.GetCategoriaPorId(id);
ViewData["mensagem"] = " Data do pedido : " + DateTime.Now();

Usando a propriedade Model - Cada ViewData possui uma propriedade Model que guarda uma referência para um objeto. Esse objeto pode ser acessado via palavra Model na nossa View que é equivalente a usasr ViewData.Model.

Ex: ViewData.Model = produtos;

Na ASP .NET MVC 3 podemos usar a propriedade ViewBag ao invés de ViewData. A propriedade ViewBag é uma coleção dinâmica que permite o envio de dados do controlador para a View.

HTML Helpers

A função das páginas .cshtml ou .vbhtml é gerar hipertexto XHTML para os navegadores como Internet Explorer, FireFox, etc. Os arquivos .cshtml e .vbhtml misturam tags XHTML com scripts de servidor escritos em C#, VB .NET e isso pode prejudicar a legibilidade do código.

Para aumentar a legibilidade e a facilitar a manutenção do código a ASP .NET MVC oferece os recurso dos HTML Helpers cujo objetivo é encapsular um código XHTML.

Os HTML Helpers são métodos de extensão da classe HtmlHelper; são métodos estáticos que retornam o tipo MvcHtmlString e o primeiro parâmetro do tipo HtmlHelper.

A ASP.NET MVC já inclui alguns HTML Helpers padrão, abaixo temos alguns deles:

Html.ActionLink ()
Html.CheckBox ()
Html.DropDownList ()
Html.Hidden ()
Html.TextArea ()
Html.TextBox ()

Helper ActionLink

O helper ActionLink é utilizado para gerar os links das páginas web. Esse helper aceita vários parâmetros e a maneira mais simples de usá-lo é passar dois parâmetros: o texto do link e a ação(action) que será chamada.

@Html.ActionLink("Texto", "Action") Ex: => <%:Html.ActionLink("Volta para página principal","Index") %>

Podemos também incluir um terceiro parâmetro para acrescentar um link para direcionar para outro controlador:

@Html.ActionLink("Home", "Index", "Home")

HTML Form Helpers

Os HTML Helpers para formulário renderizam os controles de formulário HTML. Abaixo vemos um exemplo de uma view usando alguns HTML Helpers:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Cliente>" %> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<%= Html.ValidationSummary("Corrija os erros e tente novamente.") %> 
<% using (Html.BeginForm()) {%> 
<fieldset> 
<legend>Registro</legend> 
<p> 
<label for="Nome">Nome:</label> 
<%= Html.TextBox("Nome") %> 
<%= Html.ValidationMessage("Nome", "*") %> 
</p> 
<p> 
<label for="Senha">Senha:</label> 
<%= Html.Password("Senha") %> 
<%= Html.ValidationMessage("Senha", "*") %> 
</p> 
<p> 
<%= Html.CheckBox("ReceberNewsletter") %> 
<label for="ReceberNewsletter" style="display:inline">Receber Newsletter?</label> 
</p> 
<p> 
<input type="submit" value="Registrar" /> 
</p> 
</fieldset> 
<% } %>

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.MvcApplication1.Models.Cliente)" %> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<%= Html.ValidationSummary("Corrija os erros e tente novamente.") %> 
<% Using Html.BeginForm() %> 
<fieldset> 
<legend>Registro</legend> 
<p> 
<label for="Nome">Nome:</label> 
<%= Html.TextBox("Nome") %> 
<%= Html.ValidationMessage("Nome", "*") %> 
</p> 
<p> 
<p> 
<label for="Senha">Senha:</label> 
<%= Html.Password("Senha") %> 
<%= Html.ValidationMessage("Senha", "*") %> 
</p> 
<p> 
<%= Html.CheckBox("ReceberNewsletter") %> 
<label for="ReceberNewsletter" style="display:inline">Receber Newsletter?</label> 
</p> 
<p> 
<input type="submit" value="Registro" /> 
</p> 
</fieldset> 
<% End Using %>

VB .NET

- Html.BeginForm - Pode ser usado de duas formas:

Definindo o Html.BeginForm() e Html.EndForm() de forma declarativa:

<% Html.BeginForm(); %> <!-- Conteúdo do formulário --> <% Html.EndForm(); %>	<% Html.BeginForm() %> <!-- Conteúdo do formulário --> <% Html.EndForm() %>
C#	VB .NET

Definindo através de um bloco com a cláusula Using:

<% using(Html.BeginForm("HandleForm", "Home")) %> <% { %> <!-- Conteúdo do formulário --> <% } %>	<% Using Html.BeginForm("HandleForm", "Home") %> <!-- Conteúdo do formulário --> <% End Using %>
C#	VB .NET

O auxiliar BeginForm marca o início de um formulário HTML e é processado como um elemento form HTML. O método auxiliar BeginForm tem várias sobrecargas. A versão do auxiliar BeginForm mostrado abaixo usa dois parâmetros, os nomes de método Action e d controlador para enviar o formulário. O auxiliar BeginForm implementa o a interface IDisposable que permite usar a palavra-chave igual ao uso no ASP.NET AJAX:

- HTML Helper Check Box:

@Html.CheckBox("meuCheckBox", false)

<!-- Sáida: -->
<input id="meuCheckBox" name="meuCheckbox" type="checkbox" value="true" />
<input name="meuCheckBox" type="hidden" value="false" />

- HTML Helper Text Box:

@Html.TextBox("meuTextbox", "valor")

<!-- Sáida: -->
<input id="meuTextbox" name="meuTextbox" type="text" value="valor" />

- HTML Helper Text Area:

@Html.TextArea("meuTextarea", "valor")

<!-- Sáida: -->
<textarea cols="20" id="meuTextarea" name="meuTextarea" rows="2">valor</textarea>

- HTML Helper Radio Button:

@Html.RadioButton("meuRadiobutton", "valor", true)


<input checked="checked" id="meuRadiobutton" name="meuRadiobutton" type="radio" value="

- HTML Helper Password Field:

@Html.Password("meuPassword", "valor")


<input id="meuPassword" name="meuPassword" type="password" value="valor" />

- Html Helper DropDownList

O auxiliar DropDownList processa uma lista drop-down. Em sua forma mais simples, DropDownList aceita um parâmetro, o nome da ViewData chave cujo valor é do tipo SelectList e que contém os valores de opção na lista drop-down. O framework MVC usa a propriedade ModelState da ViewData para determinar o valor selecionado. Se a propriedade ModelState estiver vazia, a estrutura procura um item para o qual a propriedade Selected esteja definido.

Obs: ModelState-Encapsula o estado do modelo de ligação para uma propriedade de um argumento de um método Action, ou para o próprio argumento.

Obs:Tanto o auxiliar DropDownList como o ListBox aceitam tanto um objeto SelectList ou MultiSelectList.

List<string> Times  = new List<string>();

petList.Add("Palmeiras");
petList.Add("Santos");
petList.Add("São Paulo");
petList.Add("Flamento");
petList.Add("Vasco");
petList.Add("Fluminense");
petList.Add("Cruzeiro");

ViewData["times"] = new SelectList(Times);

Dim Times As List(Of String) = New List(Of String)

petList.Add("Palmeiras");
petList.Add("Santos");
petList.Add("São Paulo");
petList.Add("Flamento");
petList.Add("Vasco");
petList.Add("Fluminense");
petList.Add("Cruzeiro");

ViewData("_times") = New SelectList(Times)

VB .NET

- Html Helper RadioButton

O método auxiliar RadioButton processa um botão de rádio. Em sua forma mais simples, o método usa três parâmetros: o nome do grupo de controle, o valor de opção e um valor Booleano que determina se o botão de opção está selecionado inicialmente.

Selecione sua cor favorita:<br />
<%= Html.RadioButton("favColor", "Azul", true) %> Azul <br />
<%= Html.RadioButton("favColor", "Bege", false)%> Bege <br />
<%= Html.RadioButton("favColor", "Preta", false)%> Preta <br />
<%= Html.RadioButton("favColor", "Branca", false)%> Branca <br />
<%= Html.RadioButton("favColor", "Verde", false)%> Verde <br />
<%= Html.RadioButton("favColor", "Cinza", false)%> Cinza

HTML Form Helpers fortemente tipados

Html Helpers fortemente tipados são ajudantes HTML, que usam expressões lambda para fazer referência a modelos ou a view models passados para um modelo de visão.

A vantagem de criar uma view fortemente tipada é que podemos obter as propriedades da classe no modo de exibição, digitando o modelo e ".". (Ex: Model.Nome)

A seguir temos os principais HTML form fortemente tipados:

Check Box:

@Html.CheckBoxFor(x => x.IsAtivo)

<input id="IsAtivo" name="IsAtivo" type="checkbox" value="true" />
<input name="IsAtivo" type="hidden" value="false" />

Text Box:

@Html.TextBoxFor(x => x.Nome)

<input id="Nome" name="Nome" type="text" value="Valor do Nome" />

Text Area:

@Html.TextAreaFor(x => x.Descricao)

<textarea cols="20" id="Descricao" name="Descricao" rows="2">Valor da Descricao</ -
textarea>

Radio Button:

@Html.RadioButtonFor(x => x.IsAtivo, "valor")

4 <input checked="checked" id="IsAtivo" name="IsAtivo" type="radio" value="valor" />

Hidden Field:

@Html.HiddenFor(model => model.Id)

<input id="Id" name="Id" type="hidden" value="Valor do Id" />

Password Field:

@Html.PasswordFor(x => x.Password)

<input id="Password" name="Password" type="password"/>

O ASP .NET MVC não é difícil, é apenas diferente do ASP .NET Web Forms e o objetivo do artigo e que você se familiarize com os seus recursos.

Vimos assim um pequeno resumo de como gerar conteúdo dinâmico usando as funcionalidades do ASP .NET MVC 3 como Inline Code, os Helpers HTML.

Em outro artigo irei tratar das visões parciais ou partial views.

João 3:13 Ora, ninguém subiu ao céu, senão o que desceu do céu, o Filho do homem.
João 3:14 E como Moisés levantou a serpente no deserto, assim importa que o Filho do homem seja levantado;
João 3:15 para que todo aquele que nele crê tenha a vida eterna.
João 3:16 Porque Deus amou o mundo de tal maneira que deu o seu Filho unigênito, para que todo aquele que nele crê não pereça, mas tenha a vida eterna.

Referências:

José Carlos Macoratti