ASP.NET Passo a Passo ASP.NET MVC

ASP.NET Passo a Passo ASP.NET MVC
Conteúdo do Capítulo Entender o padrão de projeto MVC Criar sites utilizando o padrão 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

Criando uma aplicação ASP.NET MVC Crie uma aplicação ASP.NET MVC4 Web Application de nome MVC4ORama. Selecione Internet Application e View Engine ASPX

Estrutura da aplicação ASP.NET MVC 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

Alterando o cabeçalho da aplicação exemplo 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”

Alterando o cabeçalho da aplicação exemplo 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

HomeController – Gerenciador do menu da aplicação 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

Index.aspx – Página de entrada da aplicação 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.

Index.aspx – Página de entrada da aplicação

Conectando com o banco de dados utilizando LINQ 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.

Conectando com o banco de dados utilizando LINQ 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

Conectando com o banco de dados utilizando LINQ 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.

Conectando com o banco de dados utilizando LINQ 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; }

Camada de Modelo 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

Camada de Visão 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.

Camada de Visão 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> <%: Html.DisplayNameFor(model => model.AuthorLastName) %> <%: Html.DisplayNameFor(model => model.AuthorFirstName) %> <%: Html.DisplayNameFor(model => model.Topic) %> <%: Html.DisplayNameFor(model => model.Publisher) %> <th></th> </tr> <% foreach (var item in Model) { %> <td> <%: Html.DisplayFor(modelItem => item.Title) %> </td> <%: Html.DisplayFor(modelItem => item.AuthorLastName) %> <%: Html.DisplayFor(modelItem => item.AuthorFirstName) %> <%: Html.DisplayFor(modelItem => item.Topic) %> <%: Html.DisplayFor(modelItem => item.Publisher) %> <%: Html.ActionLink("Edit", "Edit", new { id=item.ID }) %> | <%: Html.ActionLink("Details", "Details", new { id=item.ID }) %> | <%: Html.ActionLink("Delete", "Delete", new { id=item.ID }) %> <% } %>

Camada de Controle 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(); }

Camada de Controle 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); }

Modelo, Visão e Controle 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.

Configurando o Menu 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>

Página com cadastro de referências .NET

Atividade Incluir página com cadastro de links .NET 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

Atividade Incluir página com cadastro de links .NET 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.

Atividade Leiaute da página com cadastro de links .NET

ASP.NET Passo a Passo ASP.NET MVC

Apresentações semelhantes

Apresentação em tema: "ASP.NET Passo a Passo ASP.NET MVC"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

ASP.NET Passo a Passo ASP.NET MVC

Apresentações semelhantes

Apresentação em tema: "ASP.NET Passo a Passo ASP.NET MVC"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback