cap22

ASP.NET Passo a Passo
ASP.NET MVC
Conteúdo do Capítulo
1.
2.
Entender o padrão de projeto MVC
Criar sites utilizando o padrão MVC
ASP.NET Passo a Passo
ASP.NET MVC
Conceitos
ASP.NET MVC é um padrão de projeto que divide a aplicação em três camadas,
modelo, visão e controle
A camada de modelo é responsável por definir e manter as informações tratadas de
aplicação, em geral armazenando essa informação em um banco de dados.
A camada de visão é responsável de apresentação das informações ao usuário.
A camada de controle faz a mediação entre a camada de visão e a camada de modelo
recebendo as solicitações do usuário e encaminhando-as a camada responsável por
atende-las
ASP.NET Passo a Passo
ASP.NET MVC
Criando uma aplicação ASP.NET MVC
1.
Crie uma aplicação ASP.NET MVC4 Web Application de nome
MVC4ORama. Selecione Internet Application e View Engine ASPX
ASP.NET Passo a Passo
ASP.NET MVC
Estrutura da aplicação ASP.NET MVC
1.
2.
3.
4.
A aplicação ASP.NET MVC4 é apresentada
como mostrada na figura ao lado.
Pode-se observar que já são criadas as pastas
para separar as camadas Modelo (pasta
Models), visão (pasta views) e controle (pasta
controllers)
Para iniciar o entendimento da estrutura criada
faremos alterações na aplicação exemplo criada
pelo visual studio
Execute a aplicação para observar o exemplo
ASP.NET Passo a Passo
ASP.NET MVC
Alterando o cabeçalho da aplicação exemplo
1.
2.
3.
4.
5.
A página mestre da aplicação (site1.master) encontra-se na pasta view,
subpasta shared.
Identifique no header pa página mestre o link “Your logo here” e substitua
pela imagem “heroAccent.png” que já se encontra no projeto.
Altere também o texto dos ActionLinks “Home”, “About” e “Contact” por
“Principal”, “Sobre” e “Contato”
Observa-se ainda no cabeçalho a TAG
<%: Html.Partial("_LoginPartial") %>
que carrega a página “_LoginPartial” neste local da página mestre
A página “_LoginPartial” contém os ActionLinks “Register” e ”Log In”.
Altere-os para “Criar Usuário” e “Entrar”
ASP.NET Passo a Passo
ASP.NET MVC
Alterando o cabeçalho da aplicação exemplo
6.
7.
8.
9.
10.
Na página Contents da aplicação encontra-se os arquivos de css e skin.
Localize no CSS a TAG “ul#menu li a” que define o estilo de
apresentação do Menu.
Clique com o botão direito e escolha
a opção Construir Estilo. Formate o
estilo para a cor do fonte para azul.
Altere també a cor de fundo da TAG
“#login a” para cinza.
Seu cabeçalho agora tem a aparência
apresentada abaixo
ASP.NET Passo a Passo
ASP.NET MVC
HomeController – Gerenciador do menu da aplicação
1.
2.
3.
4.
5.
A aplicação exemplo inclui dois controladores que ficam armazenados na
pasta Controllers: o AccountController e o HomeController.
O AccountController gerencia as chamadas relativas a Login e o
HomeController gerencias as chamadas relativas ao menu principal da
aplicação.
O HomeController tem 3 métodos: Index, About e Contact. Cada um dos
métodos tem uma visão associada que está armazenada na pasta
Views\Home e tem o mesmo nome do métodos, ou seja, Index.aspx,
About.aspx e Contact.aspx.
Estes métodos definem o conteúdo da variável ViewBag.Message e
chamam a página de visão associada.
O arquivo RouteConfig.cs tem a configuração das rotas, define a visão
de entrada da aplicação. No caso a entrada padrão da aplicação é
configurada para a página Index.aspx do HomeController
ASP.NET Passo a Passo
ASP.NET MVC
Index.aspx – Página de entrada da aplicação
6.
7.
8.
9.
10.
A página Index.aspx tem 3 contents, o indexTitle, o indexFeatured e o
indexContent.
O indexTitle contem o título da aplicação que é apresentado na janela do
navegador. Altere o conteúdo “Home Page - My ASP.NET MVC
Application” para “Minha aplicação MVC”.
O indexTitle é apresentado logo abaixo do cabeçalho contém o texto
”Home Page” numa TAG H1, e o ViewBag.Message definido pelo
controlador numa TAG H2.
Altere o texto “Home Page” para “Página de ”.
Abra o arquivo do controlador HomeController.cs e altere os
ViewBag.Message dos métodos : Index, About e Contact para “Entrada”,
“Informações” e “Contato”, respectivamente.
ASP.NET Passo a Passo
ASP.NET MVC
Index.aspx – Página de entrada da aplicação
ASP.NET Passo a Passo
ASP.NET MVC
Conectando com o banco de dados utilizando LINQ
1.
2.
3.
Baixe e instale no SQL Server o banco de dados exemplo
ASPNETStepByStep4.
Para conectar em um banco de dados utilizando LINQ To SQL deve-se
criar uma classe de modelo que encapsula o acesso ao banco de dados.
Esta classe é do tipo DBLM (Database Markup Language).
Para criar a classe DBML clique
com o botão direito na pasta
Models, selecione adicionar,
novo item, dados e escolha a
opção LINQ To SQL Classes.
Inclua uma classe de nome
DotNetReferences.dbml.
ASP.NET Passo a Passo
ASP.NET MVC
Conectando com o banco de dados utilizando LINQ
4.
5.
6.
Clique no link de gerenciador de servidores que aparece na área do
Object Relacional Designer para acessar tela de Gerenciador de
Servidores que será utilizada para criar a conexão com o banco de
dados ASPNETStepByStep4.
No gerenciador de servidores clique com o
botão direito em Conexões de Dados e
selecione a opção Adicionar Conexão e em
seguida informe usuário e senha do SQL
Server
Abra a conexão e observe a estrutura do
banco de dados. Há duas tabelas:
DotNetLinks e DotNetReferences
ASP.NET Passo a Passo
ASP.NET MVC
Conectando com o banco de dados utilizando LINQ
7.
8.
Clique e arraste a tabela DotNetReferences da
área do Gerenciador de Servidores para a área do
Object Relacional Designer. O arquivo
DotNetReferences.dbml agora inclui uma
referência para a tabela.
Observe no arquivo DotNetReferences.designer.cs
há declarada as classes DotNetReferences que
está associado a um registro da tabela de mesmo
nome e a classe DotNetReferencesDataContext que está associada a
tabela como um todo. Entretanto em sua declaração há diversas TAG’s
que a associam a tecnologia de acesso ao banco de dados.
ASP.NET Passo a Passo
ASP.NET MVC
Conectando com o banco de dados utilizando LINQ
9.
10.
11.
Para manipular a tabela DotNetReferences é interessante portanto criar
uma nova classe para realizar os acessos à tabela. Nela será
encapsulado o acesso a classe padrão criada pelo visual studio.
Clique com o botão direito na pasta Models e adicione uma nova classe
(Novo Item, Código, Classe) de nome DotNetReferencesManager.cs.
Adicione o código abaixo à classe.
public class DotNetReferencesManager
{
DotNetReferencesDataContext dataContext = new
DotNetReferencesDataContext();
public IQueryable<DotNetReferences> GetAllReferences()
{
return dataContext.DotNetReferences;
}
}
ASP.NET Passo a Passo
ASP.NET MVC
Camada de Modelo
12.
13.
14.
Os procedimentos realizados até agora
implementaram a camada de modelo da tabela
DotNetReferences.
O projeto da aplicação é mostrado na figura ao
lado com a aba Models expandida.
Três classes foram adicionadas:
DotNetReferences,
DotNetReferencesDataContext e
DotNetReferencesMananger
sendo as duas primeiras declaradas
no arquivo DotNetReferences.designer.cs
ASP.NET Passo a Passo
ASP.NET MVC
Camada de Visão
1.
2.
3.
Adicione uma subpasta DotNetReferences à pasta visão da aplicação.
Para tal clique com o botão direito na pasta View e selecione Adicionar,
Nova Pasta. Informe o nome DotNetReferences.
Adicione na pasta DotNetReferences
uma View de nome Index que conterá
a interface para manipulação da tabela
de mesmo nome.
Selecione o View Engine APSX(C#),
a classe de modelo
associada (DotNetReferences),
Scaffold template List e
a página mestre Site.Master.
ASP.NET Passo a Passo
ASP.NET MVC
Camada de Visão
4.
Uma página Index.apsx com o código abaixo é adiciona à aplicação
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>
<table>
<tr>
<th>
<%: Html.DisplayNameFor(model => model.Title) %>
</th>
<th>
ASP.NET Passo a Passo
ASP.NET MVC
Camada de Controle
1.
2.
3.
Adicione uma classe de controle à aplicação. Para tal clique com o botão
direito na pasta Controllers e selecione Adicionar, Controller e informe o
nome DotNetReferencesController.
Selecione o template MVC Controller with empty read/write actions
A classe é criada com código similar ao trecho apresentado abaixo
public class
DotNetReferencesController
: Controller
{
//
// GET: /DotNetReferences/
public ActionResult Index()
{
return View();
}
ASP.NET Passo a Passo
ASP.NET MVC
Camada de Controle
4.
O método Index do controlador deverá carregar os dados da tabela
associada e em seguida deverá abrir a página Index.aspx. Para tal,
adicione o código abaixo ao método Index da classe de controle.
public class DotNetReferencesController : Controller
{
DotNetReferencesManager dotNetReferencesManager =
new DotNetReferencesManager();
//
// GET: /DotNetReferences/
public ActionResult Index()
{
var dotNetReferences =
dotNetReferencesManager.GetAllReferences().ToList();
return View("Index", dotNetReferences);
}
ASP.NET Passo a Passo
ASP.NET MVC
Modelo, Visão e Controle
1.
2.
3.
Os procedimentos realizados até agora
implementaram as três camadas para acesso à
tabela DotNetReferences.
O projeto da aplicação é mostrado na figura ao
lado com as abas Controllers, Models e
Views expandidas.
Em relação a ultima figura do projeto
observa-se a adição da classe
DotNetReferencesController.cs,
da pasta DotNetReferences dentro de View,
e da página Index.aspx dentro desta última.
ASP.NET Passo a Passo
ASP.NET MVC
Configurando o Menu
1.
2.
3.
Para poder visualizar a página Index.aspx referente à tabela
DotNetReferences criada, deve-se configurar o menu com a chamada a
nova página.
Abra o arquivo Site1.master. Adicione uma entrada para Referências e
associe à rota DotNetReferences.
Execute a aplicação e clique em referências. A página é apresentada.
<ul id="menu">
<li><%: Html.ActionLink("Principal", "Index", "Home") %></li>
<li><%: Html.ActionLink("Referências", "Index", "DotNetReferences") %></li>
<li><%: Html.ActionLink("Sobre", "About", "Home") %></li>
<li><%: Html.ActionLink("Contato", "Contact", "Home") %></li>
</ul>
ASP.NET Passo a Passo
ASP.NET MVC
Página com cadastro de referências .NET
ASP.NET Passo a Passo
ASP.NET MVC
Atividade
Incluir página com cadastro de links .NET
1.
2.
3.
4.
Criar classe de modelo DotNetLinks.dbml utilizando LINQ to
SQL
Criar classe de modelo DotNetLinkManager.cs e implementar
o método GetAllReferences() que carrega todos os links
cadastrados no banco de dados
Criar pasta de visão DotNetLinks
Adicionar na pasta uma View de nome Index que conterá
a interface para manipulação da tabela selecionando View
Engine APSX(C#), a classe de modelo DotNetLinks, Scaffold
Template List e página mestre Site.Master
ASP.NET Passo a Passo
ASP.NET MVC
Atividade
Incluir página com cadastro de links .NET
5.
6.
7.
Adicione uma classe de controle à aplicação de nome
DotNetLinksController, selecionando o template MVC
Controller with empty read/write actions.
Ajuste o método Index do controlador para carregar os
dados da tabela DotNetLinks e em seguida abrir a página
Index.aspx.
Adicionar na página mestre Site1.master um ActionLink com
o texto “Links Úteis” associando-o à página Index da pasta
DotNetLinks.
ASP.NET Passo a Passo
ASP.NET MVC
Atividade
Leiaute da página com cadastro de links .NET