O que é o M de Model

O Model representa os dados da aplicação, ou seja, são objetos que armazenam as informações a serem transportados da camada inferior para e pela interface, dessa forma a camada de interface é desacoplada das demais camadas. É muito comum iniciantes confundirem model com objetos de domínio, inclusive já li esse erro em diversas literaturas, o que ajuda a tornar as coisas mais confusas.
Também não confunda arquitetura em camadas com MVC, pois a estruturação do MVC encontra-se somente na primeira camada.

Exemplificando

Criei um ASP.NET MVC Application chamado NewsletterApp. A idéia é criar nessa aplicação um cadastro de cliente, e exemplificar o conceito de Model.

Nessa estrutura criei uma classe Model chamada Customer.cs

public class Customer
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public bool IsActive { get; set; }
}

Um controller chamado HomeController que possui três Action Methods, um Index() que irá renderizar a View Index.aspx, os outros dois CustomerRegistration, repare nos atributos AcceptVerbs isso irá permitir que as requisições do tipo Get sejam atribuídas ao primeiro Action Method CustomerRegistration e os submits do formulário (requisições do tipo Post) sejam atribuídas ao segundo.

public class HomeController : Controller
{
    public ViewResult Index()
    {
        return View();
    }
 
    [AcceptVerbs(HttpVerbs.Get)]
    public ViewResult CustomerRegistration()
    {
        return View();
    }
 
    [AcceptVerbs(HttpVerbs.Post)]
    public ViewResult CustomerRegistration(Customer customer)
    {
        // TODO: executar o processo de cadastro do cliente 
        // Neste ponto, é chamada para camada de negócio ou banco de dados
 
        return View("CustomerResponse", customer);
    }
}

Observação: No último Action Method coloquei um comentário. Ele se refere ao local onde o poderia ser realizada a chamada para camada de negócio ou banco de dados, para o cadastramento dos dados do cliente. Como o foco desse post não é o desenvolvimento desse processo. Optei em utilizar um comentário para exemplificar.

E duas páginas Index.aspx que é a nossa Startup Page. nela constem somente uma ancora (tag a) para a página CustomerRegistration.aspx que executa o processo de cadastro.

    <p>< %= Html.ActionLink("Cadastro Cliente", "CustomerRegistration") %></p>

E CustomerRegistration.aspx que possui um formulário com um input type=”submit”, para enviar os dados do cliente para a Action de destino do Form.

    <h1>Cliente</h1>
    <fieldset>
    < % using(Html.BeginForm()) { %>
        <p>Nome:</p>
        <p>< %= Html.TextBox("Name") %></p>
        <p>Email:</p>
        <p>< %= Html.TextBox("Email")%></p>
        <p>Telefone:</p>
        <p>< %= Html.TextBox("Phone")%></p>
        <p>Ativo: < %= Html.DropDownList("IsActive", new[] {
                    new SelectListItem { Text = "Sim",Value = bool.TrueString },
                    new SelectListItem { Text = "Não",Value = bool.FalseString }}) %>
        </p>
        <input type="submit" value="Salvar" />
    < % } %>
    </fieldset>

Agora vamos criar mais uma página para a resposta do cadastramento.
Para isso basta clicar com o botão direito sobre o diretório Home > Add > View. Informamos o nome da página, no exemplo utilizei CustomerResponse.
E selecionamos a opção Create a strongly-typed view.

E inclui o seguinte código na página.

1
2
3
4
5
6
7
8
9

<h1>Obrigado!</h1>
<p>< %= Html.Encode(Model.Name) %> foi cadastrado com sucesso.</p>
<p>Seu status é 
< % if (Model.IsActive == true){ %>
        ativo.
< % }else{ %>
        inativo.
< % } %>
</p>

Neste momento você deve estar se perguntando como algumas algumas coisas acontecem?
É agora que entra a mágica do MVC.

Model Binding

Na HomeController a primeira Action Method de CustomerRegistration simplismente renderiza a View, porém a segunda recebe uma instância de Customer como um parâmetro.
A pergunta aqui é como um método é invoca via HTTP request passando um tipo .NET como parâmetro se ele é totalmente desconhecido do HTTP?
Simples… Chama-se Model Binding. O ASP.NET MVC automaticamente instância e converte os parâmetros por meio de chave/valor que tenham os mesmos nomes das propriedades do tipo .NET utilizado como parâmetro no Action Method.
Repare que os nomes dos elementos text do formulário possuem o mesmo nome dos atributos da classe Customer.

Outra característica apresentada pela segunda Action é a especificação da View que irá ser renderizada, e definição do objeto Model que será passado para View, esse View é chamado de strongly typed view, pois está fortemente tipada com um objeto da aplicação.
Esta view permite que seja acessada a variável chamada Model que esta relacionada ao tipo da criação da página no caso do exemplo o objeto Customer.

Conclusão

Gostei muito da arquitetura MVC por permite uma melhor separação de responsabilidade dos componentes de interface. Como por exemplo a separação de Actions para Get E Post. O encapsulamento de parâmetro em instância de objetos reduz a escrita de código.
A utilização de objetos Model na aplicação ficou mais presente, e sua interação com outros instâncias passa a ser mais requerida.

Até mais
Enjoy

Ao criar um projeto do tipo ASP.NET MVC Web Application uma aplicação de demonstração (padrão) é apresentada na Solution Explorer.

O ASP.NET MVC a primeira vista parece ser bem complicado, mas apartir do momento que se conhece melhor a sua estrutura e seu funcionamento, ele passa a ser bem simples.

Estrutura do ASP.NET MVC Web Application

Primeiramente vamos nos atentarmos a estrutura, pois ela contem diversas convensões que devem ser utilizadas pelo ASP.NET MVC.

Repare nos diretórios, obrigatóriamente teremos o Controller, Model e View.
Outra convensão é para as classes controladoras (contidas no diretório Controller), devem possuir o sufixo Controller em seus nomes e um sub-diretório no diretorio View. Confuso? Repare na Solution o diretorio Controller, note que possui duas classes controladoras Account e Home ambas com o sufixo Controller. Agora veja o diretório View, ele possui dois sub-diretórios com o mesmo nome da controladora (Account e Home).
No diretório View ficam os templates que correspondem a ações dos controllers e seram renderizados.
O sub-diretório View/Shared contém recorsos compartilhados com a aplicação, como página de erro genérica, master page, entre outros.
O diretório Script é destinado a armazenar biblioteca JavaScript e scripts (.js)
O diretório Content é destinado a armazenar arquivos de estilo (CSS), arquivos de imagens e outros não dinâmicos.
Na raiz do ASP.NET MVC Web Application temos os arquivos Global.asax, default.aspx e web.config estes arquivos são utilizados em conjunto para realizarem a sobreescrita (rewrite) de URL, mas esse assunto ficará para um próximo post.

Como ASP.NET MVC trabalha

Para compreender melhor o funcionamento do ASP.NET MVC, vamos remover alguns arquivos e diretórios da aplicação padrão.

• App_Data (diretório)
• AccountController.cs (arquivo)
• Account (diretório)
• About.aspx (arquivo)
• Index.aspx (arquivo)
• Error.aspx (arquivo)
• LogOnUserControl.ascx (arquivo)
• Site.Master (arquivo)

Hello Word

Como é padrão e não pode faltar em qualquer tutorial de introdução, vamos criar a famosa aplicação Hello Word!. Para isso no arquivo HomeController reescreva o código para que fique da seguinte forma:

1
2
3
4
5
6
7

    public class HomeController : Controller
    {
        public string Index()
        {
            return "Hello, word!";
        }
    }

Pronto, ao executar (F5) criamos nosso primeiro ASP.NET MVC Application.

Na arquitetura MVC, os controllers são reponsáveis por manipular as requisições. No .NET, controller são classes derivadas de System.Web.Mvc.Controller. E cada método público no Controller é conhecido como Action Method (método de ação), que são chamados da web por meio de alguma URL. Em nossa aplicação acima temos nosso controller chamado HomeController com seu action method chamado Index.
Quando executamos a aplicação o Routing System (sistema de rotas) do ASP.NET MVC decidiu qual controller e action method executar. Não por acaso utilizei este controller e action method, esta é a configuração padrão de nosso aplicação, que está configurada no arquivo Global.asax.cs, como pode ser visto:

1
2
3
4
5
6
7
8
9
10

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
    routes.MapRoute(
        "Default",                                            // Route name
        "{controller}/{action}/{id}",                         // URL with parameters
        new { controller = "Home", action = "Index", id = "" }// Parameter defaults
    );
}

Em nosso Routing System, é definido a rota default com o controller Home e o action method Index sem passagem de parâmetro. Dessa forma as seguintes requisição serão manipuladas pela action Index no HomeController:

• /
• /Home
• /Home/Index

Renderizando Web Pages

Como já mensionado, na arquitetura MVC o Controller é responsável por manipular as requisições e as Views são componentes de interface do usuário. Assim não está correto em nossa aplicação o controller enviar a resposta (no nosso caso texto) para o browser. Em uma aplicação real o controller deve passar essa tarefa para uma View. Para isso vamos reescrever o método Index da seguinte forma:

1
2
3
4
5
6
7

public class HomeController : Controller
{
    public ViewResult Index()
    {
        return View();
    }
}

Dessa forma a action retorna um objeto do tipo ViewResult, passando para o Framework a instrução de renderizar uma View. O próximo passo é criar a View, para isso podemos clicar com o botão direito no action method Index e selecione Add View, isto irá criar um novo template para o action method em “~/Views/Home/Index.aspx”.
Altere o código HTML na tag body da seguinte forma:

1
2
3
4

<body>
    <h1>Hello, Word!</h1>
    <p>(renderizada apartir da View)</p>
</body>

Nossa aplicação está finalizada, execute para visualizar a página rendenrizada pela View.

Repare que não é necessário informar o nome da View que será chamada. O Framework renderiza a View que contém o mesmo nome do action method.

Há outros objetos de retorno que um Action Method pode retornar que instrui o framework diferentes fins. Esses tipos de retorno são chamados Action Results, mas isso será assunto para um próximo post, assim como a compreensão do M de Model de nossa arquitetura MVC.

Enjoy

O framework MVC inclui os seguintes componentes:

• Modelo (Model) – Objetos de modelo são partes da aplicação que implementam a lógica para as aplicações de domínio.
• Visão (Views) – Views são componentes de interface do usuário (UI).
• Controladores (Controllers) – Controladores são componentes que manipulam as interações dos usuários, trabalhando os dados com o model, e finalmente seleciona a view para “renderizar” os resultados de saída para mostrar no UI.

O padrão MVC permite separar os diferentes aspectos de uma aplicação web e fornece um baixo acoplamento entre elementos por especificar cada tipo de lógica que pode ser utilizada na aplicação. Esta separação permite um melhor gerenciamento de complexidade da aplicação, pois a concentração em um aspecto da programação de cada vez. Também possibilita o desenvolvimento guiado por teste (TDD) de uma forma mais fácil do que em Web Forms.
A perda de acoplamento entre os componentes de uma aplicação, MVC também promove desenvolvimento paralelo. Um desenvolvedor pode trabalhar em uma view, enquanto um segundo desenvolvedor pode trabalhar em uma lógica do contoller e um terceiro desenvolvedor pode focar na lógica de negocio do modelo.

Vantagens de uma aplicação baseada em MVC

A utilização do modelo MVC traz alguns benefícios ao desenvolvimento com relação ao antigo Web Forms como:

• Não utilize ViewState ou foms baseados em servidor (server).
• Maior liberdade para desenvolvedores que gostam do controle total sobre o comportamento de uma aplicação (HTML).
• Usa um padrão Front Controller que processa as requisições de uma aplicação web através de um simples controlador (controller). Isto possibilita o desenvolvimento de uma aplicação que suporta uma rica rota de infraestrutura.
• Fornece um suporte melhor para test-driven development (TDD).
• O ASP.NET MVC framework suporta Injeção de Dependência (ID) e Inversão de Controle (IC).
• Mapeamento de URL .
• Utilização das características existente com o uso de páginas (.aspx), user control (.ascx) e máster Page (.master ) no modelo MVC.

Até mais

• Literal é um controle que reserva um local da página para exibir um texto estático.
• Label é um controle de rótulo usado para mostrar textos na página.

Ambos os controles possuem a propriedade Text, que define o texto a ser exibido.
Não há um controle melhor ou pior. E sim saber quando e como utilizar esses controles corretamente. O mais importante é entender e saber o que é produzido em sua renderização.
É nesse momento que as diferenças ficam mais aparentes.

Criando um projeto para comparar os controles
Para exemplificar os controles criei um ASP.Net Web Site com o nome LabelTeste
Na página Default.aspx inclui o seguinte código interno a tag form:

<div id="teste">
        <h3>Controles ASP.Net</h3>
        <p><asp:Label ID="lblTeste1" runat="server"></asp:Label></p>
        <p><asp:Literal ID="ltrTeste1" runat="server"></asp:Literal></p>
        <p><asp:Label ID="lblTeste2" AssociatedControlID="txtTeste2" runat="server"></asp:Label><asp:TextBox ID="txtTeste2" runat="server"></asp:TextBox></p>
</div>

Ao executar a aplicação, teremos a seguinte tela:

Clique com o botão direito e selecione codigo-fonte e veja o código gerado 

<div id="teste">
        <h3>Controles ASP.Net</h3>
        <p><span id="lblTeste1">label 1</span></p>
        <p>literal 1</p>
        <p><label for="txtTeste2" id="lblTeste2">label 2</label><input name="txtTeste2" type="text" id="txtTeste2" /></p>
</div>

Repare no código gerado. O controle Label renderiza o texto interno das tags span, que na maioria das vezes é desnecessário. Isso aumenta a quantidade de código a ser trafego do servidor para o cliente. Neste caso que só queriamos a apresentação de um texto, damos preferência ao Literal, que renderiza somente o texto de uma forma estática sem geração de tags.
A principal vantagem do Label é quando necessitamos de associa-lo a um outro controle. Que é feito por meio do atributo AssociatedControlID.
Assim é gerado as tags label que são utilizadas para dar foco a um outro controle.

Até mais