ASP .NET MVC - Definindo um leiaute comum a todas as views

Neste artigo vamos criar um leiaute comum a todas as views em uma aplicação ASP .NET MVC alterando o leiaute padrão gerado.

O padrão MVC x Arquitetura em Camadas

O modelo de três camadas físicas ( 3-tier ) divide um aplicativo de modo que a lógica de negócio resida no meio das três camadas físicas. Isto é chamado de camada física intermediária ou camada física de negócios. A maior parte do código escrito reside na camada de apresentação e de negócio.

A arquitetura MVC - (Modelo Visualização Controle) fornece uma maneira de dividir a funcionalidade envolvida na manutenção e apresentação dos dados de uma aplicação. A arquitetura MVC não é nova e foi originalmente desenvolvida para mapear as tarefas tradicionais de entrada , processamento e saída para o modelo de interação com o usuário. Usando o padrão MVC fica fácil mapear esses conceitos no domínio de aplicações Web multicamadas.

Na arquitetura MVC o modelo representa os dados da aplicação e as regras do negócio que governam o acesso e a modificação dos dados. O modelo mantém o estado persistente do negócio e fornece ao controlador a capacidade de acessar as funcionalidades da aplicação encapsuladas pelo próprio modelo.

Um componente de visualização renderiza o conteúdo de uma parte particular do modelo e encaminha para o controlador as ações do usuário; acessa também os dados do modelo via controlador e define como esses dados devem ser apresentados.

Um controlador define o comportamento da aplicação , é ele que interpreta as ações do usuário e as mapeia para chamadas do modelo. Em um cliente de aplicações Web essas ações do usuário poderiam ser cliques de botões ou seleções de menus. As ações realizadas pelo modelo incluem ativar processos de negócio ou alterar o estado do modelo. Com base na ação do usuário e no resultado do processamento do modelo , o controlador seleciona uma visualização a ser exibida como parte da resposta a solicitação do usuário. Há normalmente um controlador para cada conjunto de funcionalidades relacionadas.

A arquitetura de 3 camadas é uma implementação do modelo MVC . O modelo MVC esta preocupado em separar a informação de sua apresentação. O padrão MVC está relacionado com a arquitetura da aplicação e em como os componentes se comunicam.

A arquitetura em 3 camadas esta relacionada com a arquitetura do sistema onde você divide as responsabilidades em camada de apresentação, de negócio e de acesso aos dados.

Os conceitos se complementam e podem coexistir harmonicamente sem conflitos. Você pode usar o padrão MVC para a camada de apresentação de uma arquitetura em camadas. (O padrão MVC também pode ser aplicado em aplicações usando apenas uma camada.)

A arquitetura MVC é triangular: a view envia atualizações para o controlador, o controlador atualiza o modelo, e a view é atualizada diretamente do modelo.

Martin Fowler define um padrão "Application Layered" como uma forma de organizar uma aplicação de software em um conjunto de camadas lógicas com a finalidade de gerenciar dependências e criar componentes plugáveis.

O padrão MVC define uma abordagem para a interação entre a apresentação e os componentes de domínio do negócio. Além disso, o padrão MVC não está relacionado com outros problemas de aplicação, como persistência, segurança e escalabilidade.

Fowler e Trowbridge consideram a arquitetura "n-tier" como um padrão de implantação: uma forma de organizar a infraestrutura para a execução das aplicações desenvolvidas. Segundo eles, uma aplicação web pode ser implantada em três camadas: cliente, aplicações web e de dados.

Basicamente, eles afirmam que alguns componentes da aplicação podem ser implementados em um conjunto de máquinas do cliente, outros componentes em um conjunto de servidores de aplicativos web e outros componentes em um conjunto de hosts do servidor de dados.

Considerando estes três níveis, o padrão MVC define uma abordagem para conectar componentes de apresentação na camada do cliente (por exemplo, um telefone celular ou aplicação de internet), com alguns componentes de serviços na camada de aplicação web. O MVC não define nada sobre a interação entre a camada de aplicação web e a camada de dados.

Logo :  MVC não é 3 camadas.

Recursos usados

• Visual Studio 2013 Express for web

Criando o projeto

Abra o  Visual Studio 2013 Express for web e clique em New Project;

A seguir selecione o template Visual Basic -> Web -> ASP .NET Web application e informe o nome Mvc_LeiauteComum e clique no botão OK;

A  seguir selecione o template Empty e marque para adicionar as referências e pasta para MVC e clique no botão OK;

Temos assim um projeto MVC criado com sua estrutura pronta para ser usada contendo as pastas e referências principais definidas conforme podemos ver na janela Solution Explorer.

Criando  o controlador

Clique com o botão direito sobre a pasta Controllers e selecione Add -> Controller;

Na janela a seguir selecione o template MVC 5 Controller - Empty e clique no botão Add;

A seguir informe o nome HomeController e clique no botão Add;

Criando a View

Vamos agora criar a view a partir do controlador criado. Com o arquivo HomeController.vb Aberto clique com o botão direito no interior da Action Index e selecione Add -> View;

A seguir defina o nome da view como Index e selecione o template : Empty(without model) e clique no botão Add;

A seguir defina o código abaixo no arquivo Index.vbhtml criado na pasta Views/Home :

<!DOCTYPE html>

<html>
<head>
       <meta name="viewport" content="with=device-width" />"
       <title>Index</title> 
</head>
<body>
      <div>
          <h5>Area de Conteúdo</h5>
      </div>
</body>
</html>

Fazendo os ajustes finais

Vamos agora ajustar o conteúdo do arquivo _Layout.vbhtml da pasta Shared e do arquivo _ViewStart.vbhtml na pasta Views.

Abra o arquivo _Layout.vbhtml da pasta Shared. Esse arquivo define o leiaute comum das views vamos alterar o seu conteúdo para obter um novo leiaute para as nossas views.

Altere o conteúdo do arquivo conforme o código abaixo:

@Code
    Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Macoratti .net</title>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <table style="width:900px;" border="1">
        <tr>
            <td colspan="2">
                <h1>Cabeçalho</h1>
            </td>
        </tr>
        <tr>
            <td style="width:20%">
                <h5>Lateral</h5>
            </td>
            <td>
                @RenderBody()
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <h3>Rodapé</h3>
            </td>
        </tr>
    </table>
</body>
</html>

Agora abra o arquivo _ViewStart.vbhtml e ajuste o seu código conforme mostrado a seguir:

@Code
    Layout = "~/Views/Shared/_Layout.vbhtml"
End Code

Dessa forma já temos tudo pronto , basta executar o projeto e visualizar o seu novo leiaute:

Tudo bem, tudo bem, eu sei que o antigo leiaute era mais bonito mas o objetivo era mostrar que você pode alterar o leiaute padrão partindo de um projeto vazio. Você pode usar suas habilidades e criar um leiaute muito mais incrementado, ok !

Pegue  o projeto completo aqui: Mvc_LeiauteComum.zip (sem o pacotes e referências)

             Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter
 

Referências:

• Seção VB .NET do Site Macoratti.net

• Super DVD .NET - A sua porta de entrada na plataforma .NET

• Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#

• Seção C# do site Macoratti.net

• Super DVD C#

• Super DVD Visual Basic

• Curso Básico VB .NET - Vídeo Aulas

• Curso C# Básico - Vídeo Aulas

• Seção de Jogos do site Macoratti .net

José Carlos Macoratti