[Resolvido] ASP .NET MVC 3 - Usando os HTML Helpers para criar fo

[RSS iMasters 5]

O padrão Model-View-Controller (MVC) separa os diferentes componentes de uma aplicação WEB MVC de forma a dar mais controle sobre cada parte individual da aplicação tornando a aplicação mais fácil de desenvolver, modificar e testar.

MVC - Model-View-Controller

1. Na arquitetura MVC o Modelo (Model) é usado para definir e gerenciar o domínio da informação e notificar observadores sobre mudanças nos dados;
2. O Controle (Controller) é o componente usado para mapear as ações do usuário na View, as quais ocorrem através de eventos e fazem com que o Model seja modificado.
3. A visualização (View) acessa os dados do Model  e especifica  como os dados do Model são apresentados ao usuário;

A figura abaixo mostra uma implementação do padrão MVC:

Neste artigo veremos como usar os HTML Helpers para criar formulários.

Os HTML Helpers são métodos que permitem exibir no navegador elementos HTML de formulário e textos simples, bem como qualquer elemento HTML.

Criando o projeto MVC

Vamos criar um novo projeto usando o Visual Web Developer 2010 Express Edition.

No menu File -> New Project selecione/informe :

• Visual Basic -> Web
• ASP .NET MVC 2 Empty Web Application
• Name : Usando_HTMLHelpers

Clique no botão OK para criar o projeto e visualizar na janela Solution Explorer a estrutura do projeto conforme a figura a seguir:

Definindo o nosso Model

Antes de tratarmos do nosso formulário temos que definir um Model para que possamos ter algo para exibir.

Clique com o botão direito sobre a pasta Models e selecione Add->Class e informe o nome Artigo.vb.

A seguir inclua o código abaixo neste arquivo que define a classe Artigo contendo as propriedades: ID, Titulo, Assunto, Descricao, DataCriacao, Publicado e NumeroVisualizacoes.

Obs: Eu estou usando a sintaxe antiga para definir as propriedades da Classe ao invés de usar a nova sintaxe das propriedades auto-implementadas

Public Class Artigo

Public Property ID() As Guid

Get

Return m_ID

End Get

Set(ByVal value As Guid)

m_ID = value

End Set

End Property

Private m_ID As Guid

Public Property Titulo() As String

Get

Return m_Titulo

End Get

Set(ByVal value As String)

m_Titulo = value

End Set

End Property

Private m_Titulo As String

Public Property Assunto() As String

Get

Return m_Assunto

End Get

Set(ByVal value As String)

m_Assunto = value

End Set

End Property

Private m_Assunto As String

Public Property Descricao() As String

Get

Return m_Descricao

End Get

Set(ByVal value As String)

m_Descricao = value

End Set

End Property

Private m_Descricao As String

Public Property DataCriacao() As DateTime

Get

Return m_CriadoEm

End Get

Set(ByVal value As DateTime)

m_CriadoEm = value

End Set

End Property

Private m_CriadoEm As DateTime

Public Property Publicado() As Boolean

Get

Return m_Publicado

End Get

Set(ByVal value As Boolean)

m_Publicado = value

End Set

End Property

Private m_Publicado As Boolean

Public Property NumeroVisualizacoes() As Integer

Get

Return m_Visualizacoes

End Get

Set(ByVal value As Integer)

m_Visualizacoes = value

End Set

End Property

Private m_Visualizacoes As Integer

 

Public ReadOnly Property DataCriacaoFormatada() As String

Get

If DataCriacao <> DateTime.MinValue Then

Return String.Format("{0:d/M/yyyy HH:mm:ss}", DataCriacao)

End If

Return ""

End Get

End Property

End Class

Definindo o nosso Model

Como criamos um projeto vazio temos que definir o nosso controle, mesmo que ele seja bem simples.

Clique com o botão direito do mouse sobre a pasta Controllers e a seguir selecione Add->Controller.

Na janela Add Controller, informe o nome HomeController e clique no botão Add.

Será criado o código contendo o método Index abaixo:

Function Index() As ActionResult

Return View()

End Function

Vamos incluir outro método chamado Artigo, de forma que nosso controlador fique conforme o código a seguir:

Namespace Usando_HTMLHelpers

Public Class HomeController

Inherits System.Web.Mvc.Controller

'

' GET: /Home

Function Index() As ActionResult

Return View()

End Function

 

Public Function Artigo() As ActionResult

Return View(New Artigo())

End Function

 

End Class

End Namespace

Tratando com a Visualização ou View

O framework ASP.NET MVC inclui métodos auxiliares, conhecidos como HTML Helpers, que fornecem uma maneira fácil de processar o HTML em uma exibição ou View. Este artigo mostra como trabalhar com os HTML Helpers usados com mais freqüência na criação de formulários.

Antes de tudo vamos precisar de uma Master Page para o nosso projeto e para isso clique com o botão direito do mouse sobre a pasta Shared e selecione Add -> New Item.

A seguir selecione o template MVC 2 View Master Page e informe o nome Site.Master e clique no botão Add.

Agora vamos definir uma nova view onde iremos criar o nosso formulário. Antes de prosseguir temos que compilar o nosso projeto.

Voltando a pasta Controllers abra o arquivo HomeController.vb e clique com o botão direito sobre a Action Artigo e selecione Add View.

A seguir na janela Add View informe o nome Index em View Name e marque o item: Create a strongly-typed view e selecione a classe Artigo na combobox.

Selecione também a opção Edit na combo View Content e marque a opção Select master page.

 

 

Clique no botão Add para incluir a nova view.

Será criado o arquivo Index.aspx na pasta Views->Home e nosso projeto terá a seguinte estrutura:

Temos:

1. O Model Artigo.vb na pasta Models
2. O Controller HomeController na pasta Controllers
3. A View Index.aspx na pasta Views->Home

Executando o projeto neste momento iremos obter:

Vamos fazer algumas alterações no formulário da página Index.aspx.

- Ocultar a exibição do campo ID alterando o método Html.LabelFor

 

<%: Html.LabelFor(Function(model) model.ID)%>

para Html.HiddenFor; 

<%: Html.HiddenFor(Function(model) model.ID)%>

- Remover o campo DataCriacao;

- Alterar a exibição do campo Descricao usando um TextArea. Para isso altere o método Html.TextBoxFor

 

<%: Html.TextBoxFor(Function(model) model.Descricao) %>

para Html.TextAreaFor: 

<%: Html.TextAreaFor(Function(model) model.Descricao)%>

- Alterar o campo Publicado para ser exibido em um checkbox. Altere o método 

<%: Html.TextBoxFor(Function(model) model.Publicado) %>

para

<%: Html.CheckBoxFor(Function(model) model.Publicado) %>

- Remover o campo NumeroVisualizacoes;

- Alterar também o texto do controle Button e o texto do ActionLink;

Ao final o código do nosso arquivo Index.aspx deverá ficar da seguinte forma:

<% Using Html.BeginForm() %>

<%: Html.ValidationSummary(True) %>

<fieldset>

<legend>Campos</legend>

 

<div class="editor-label">

<%: Html.HiddenFor(Function(model) model.ID)%>

</div>

<div class="editor-field">

<%: Html.HiddenFor(Function(model) model.ID)%>

<%: Html.ValidationMessageFor(Function(model) model.ID) %>

</div>

 

<div class="editor-label">

<%: Html.LabelFor(Function(model) model.Titulo) %>

</div>

<div class="editor-field">

<%: Html.TextBoxFor(Function(model) model.Titulo) %>

<%: Html.ValidationMessageFor(Function(model) model.Titulo) %>

</div>

 

<div class="editor-label">

<%: Html.LabelFor(Function(model) model.Assunto) %>

</div>

<div class="editor-field">

<%: Html.TextBoxFor(Function(model) model.Assunto) %>

<%: Html.ValidationMessageFor(Function(model) model.Assunto) %>

</div>

 

<div class="editor-label">

<%: Html.LabelFor(Function(model) model.Descricao) %>

</div>

<div class="editor-field">

<%: Html.TextAreaFor(Function(model) model.Descricao)%>

<%: Html.ValidationMessageFor(Function(model) model.Descricao) %>

</div>

 

<div class="editor-label">

<%: Html.LabelFor(Function(model) model.Publicado) %>

</div>

<div class="editor-field">

<%: Html.CheckBoxFor(Function(model) model.Publicado) %>

<%: Html.ValidationMessageFor(Function(model) model.Publicado) %>

</div>

<p>

<input type="submit" value="Salvar" />

</p>

</fieldset>

<% End Using %>

<div>

<%: Html.ActionLink("Retorna para a Lista", "Index") %>

</div>

Uma nova execução do projeto irá exibir o formulário a direita do código final que obtemos após realizar as alterações desejadas.

Incluindo atributos customizados em elementos do formulário

Vamos agora mostrar como podemos incluir mais informação customizando o nosso formulário. Começaremos desabilitando o campo Titulo. Podemos fazer isso incluindo um novo objeto no final do método Html.TextBoxFor:

 <div class="editor-label">

<%: Html.LabelFor(Function(model) model.Titulo) %>

</div>

<div class="editor-field">

<%: Html.TextBoxFor(Function(model) model.Titulo, New With {.disabled = "true"})%>

<%: Html.ValidationMessageFor(Function(model) model.Titulo) %>

</div>

Incluimos o atributo disabled=true : New With {.disabled = "true"}

Podemos inclusive especificar mais de um atributo para um elemento HTML e para isso basta separar por vírgulas as declarações:

<%: Html.TextBoxFor(Function(model) model.Titulo, New With {.disabled = "true", .alt = "Macoratti.net"})%>

Vimos assim como é fácil obter e tratar formulários usando os HTML Helpers da ASP .NET MVC.

Pegue o projeto completo aqui:  Usando_HTMLHelpers.zip

 

http://imasters.com.br/artigo/24703/asp/asp-net-mvc-3-usando-os-html-helpers-para-criar-formularios