ASP .NET MVC 3 - Usando os auxiliares HTML (HTML Helpers)

ASP .NET MVC 3 - Usando os HTML Helpers para criar formulários

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

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;
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.
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 pressionando

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:

O Model Artigo.vb na pasta Models
O Controller HomeController na pasta Controllers
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.

Vamos ocultar a exibição do campo ID alterando o método Html.LabelFor para Html.HiddenFor;

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

Vamos remover o campo DataCriacao;
Vamos alterar a exibição do campo Descricao usando um TextArea. Para isso altere o método Html.TextBoxFor para Html.TextAreaFor:

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

Vamos alterar o campo Publicado para ser exibido em um checkbox. Altere o método

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

Vamos remover o campo NumeroVisualizacoes;
Vamos 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.

Vamos começar desabilitando o campo Titulo. Podemos fazer isso incluindo um novo objeto no final do método Html.TextBoxFor:

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

João 1:11 Veio para o que era seu, e os seus não o receberam.
João 1:12 Mas, a todos quantos o receberam, aos que crêem no seu nome, deu-lhes o poder de se tornarem filhos de Deus;
João 1:13 os quais não nasceram do sangue, nem da vontade da carne, nem da vontade do varão, mas de Deus.

Referências:

José Carlos Macoratti