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
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:
Vamos incluir outro método chamado Artigo, de forma que nosso controlador fique conforme o código a seguir:
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ãoAdd.
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 ActionArtigo 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.
- Ocultar a exibição do campo ID alterando o método Html.LabelFor
para Html.HiddenFor;
- Remover o campo DataCriacao;
- Alterar a exibição do campo Descricao usando um TextArea. Para isso altere o método Html.TextBoxFor
para Html.TextAreaFor:
- Alterar o campo Publicado para ser exibido em um checkbox. Altere o método
para
- 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:
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:
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:
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
Fora de tópico Mostrar Código Esconder Código Mostrar EmoticonEsconder Emoticon