ASP.NET MVC ASP.NET MVC é um framework para desenvolvimento de aplicações web que usa os padrões MVC (Model View Controller) e Convention over Configuration. O padrão MVC aplicado a aplicações web conduz a uma separação de responsabilidades. Esta separação explícita de responsabilidades adiciona uma pequena quantidade de complexidade extra ao projecto de uma aplicação, mas os benefícios compensam o esforço extra. Modelos: são classes que representam o domínio. Os objectos do domínio encapsulam os dados armazenados numa base de dados assim como o código usado para manipular esses dados e para aplicar lógica de negócio específica do domínio. Incluiem a camada de acesso a dados (Data Access Layer DAL) podendo usar uma ferramenta como Entity Framework. Vistas: são templates para gerar dinamicamente HTML. Controladores: classes que respondem às interacções do utilizador, acedem ao Modelo e decidem que Vista usar. Em Asp.Net estas classes têm o sufixo Controller. O framework ASP NET MVC usa convenções em vez de configurações (Convention over Configuration), o que permite fazer assunções baseadas nos nomes dos diretórios. O uso de convenções reduz a quantidade de código que é necessário escrever, e também facilita a compreensão do projecto por outros desenvolvedores. Construção de uma aplicação ASP.NET MVC4 File > New Project > Visual C#, Web, ASP.NET MVC4 Web Application Name: MvcApplication1 Project Template: Internet Application contém o princípio de uma aplicação Web MVC, incluindo funções de gestão de contas (que correm no sistema Membership Asp.Net). É possível correr a aplicação logo após ser criada. View Engine: linguagem usada para gerar código HTML. Duas opções: Razor View Engine ou ASPX View Engine. Selecionar Razor. Os projectos Asp.Net MVC criados com o template Internet Application apresentam 9 directórios top level: /Controllers para colocar classes Controller que tratam os pedidos. /Models para colocar classes que representam e manipulam os dados e objectos de negócio. /Views para colocar ficheiros template responsáveis por gerar output, tal como HTML. /Scripts para colocar ficheiros JavaScript.
/Images para colocar imagens usadas no site. /Content para colocar código CSS e outro conteúdo do site sem ser scripts e imagens. /Filters para colocar código de filtros. /App_Data para colocar ficheiros de bases de dados para leitura e escrita. /App_Start para colocar ficheiros de configuração para Routing, Bundling, e API Web. É possível mudar esta estrutura, por exemplo colocar as classes do modelo num projecto class library separado. Contudo esta estrutura do projecto corresponde à convenção dos directórios por omissão. O directório /Controllers contém 2 classes Controller: HomeController e AccountController. O directório /Views contém 3 subdirectórios: Home, Account, e Shared. Os directórios /Content e /Script contêm um ficheiro Site.css e bibliotecas JavaScript jquery. 1. Controladores Os controladores respondem aos pedidos HTTP e retornam informação para o browser. Recebem os dados de entrada, muitas vezes efectuam mudanças no modelo e fornecem dados para a vista. São responsáveis pelo fluxo da aplicação. Nos frameworks Web tradicionais um URL era mapeado num ficheiro do disco do servidor web. Por exemplo um pedido feito com o URL /Produtos.aspx ou /Produtos.php é processado pelos ficheiros Produtos.aspx ou Produtos.php. Em MVC o mecanismo de routing mapeia um URL num método de uma classe Controller. O mecanismo de routing decide que classe Controller instanciar, que método de acção invocar, e fornece os argumentos necessários a esse método. O método de acção do controlador decide que vista usar e a vista gera o HTML. Asp.Net MVC implementa a variante Front Controller do padrão MVC. Analisemos o que está incluído no projecto criado usando o template Internet Application. 2 Controladores, subclasses da classe Controller: HomeController responsável pelas home page, about page e contact page na raiz do website. AccountController responsável por login e registo. F5 Start Debugging
HomeController O método Index é responsável pela home page: Colocar no IE o endereço ou ou http://localhost:xxx/ http://localhost:xxx/home http://localhost:xxx/home/index Criar um novo Controlador Controllers > Add > Controller > StoreController Empty MVC Controller O Controlador já tem um método Index. Suponhámos que o método Index será para listar os itens, vamos acrescentar mais 2 métodos: Browse para pesquisar itens e Details para mostrar os detalhes de um item. Estes métodos dentro do controlador são chamados métodos de Acção têm a responsabilidade de responder aos pedidos, realizar as acções apropriadas e retornar a resposta para o browser. 1. Mudar a assinatura do método Index() para retornar uma string public string Index() return "Olá de Store/Index()"; 2. Adicionar métodos de acção para Browse e Details. // GET: /Store/ public string Index() return "Olá de Store/Index()"; // GET: /Store/Browse public string Browse() return "Olá de Store/Browse()"; // GET: /Store/Details public string Details() return "Olá de Store/Details()"; 3. Correr o projecto. Não usámos modelos nem vistas. http://localhost:1755/store http://localhost:1755/store/browse http://localhost:1755/store/details
4. Parâmetros nos Action Methods de um Controlador Vamos modificar o método de acção Browse() para receber um valor de uma query string // GET: /Store/Browse?genero=Disco public string Browse(string genero) return ("Olá de Store/Browse(), Género = " + genero; Testar: http://localhost:1755/store/browse http://localhost:1755/store/browse?genero=disco Vamos modificar o método de acção Details() para receber um parâmetro com o nome ID do tipo inteiro. // GET: /Store/Details/5 public string Details(int id) return "Olá de Store/Details(), ID = " + id; Testar: http://localhost:1755/store/details dá erro. http://localhost:1755/store/details?id=5 http://localhost:1755/store/details/5 É como se o browser invocasse directamente métodos no Controlador. Modificar o método de acção Details() colocando um valor por omissão para o parâmetro com o nome ID. // GET: /Store/Details/5 public string Details(int id = 0) return "Olá de Store/Details(), ID = " + id; Testar: http://localhost:1755/store/details já não dá erro.
2. Vistas A primeira impressão que um utilizador tem de uma Aplicação Web depende da vista e toda a interacção com a aplicação é realizada através de vistas. Os controladores e os modelos são muito importantes mas esse trabalho não é visível. Já vimos como um controlador poderia retornar uma string, mas a maior parte das acções dos controladores necessitam de mostrar informação dinâmica no formato HTML. A vista é responsável por construir a interface com o utilizador (UI). Recebe o modelo (a informação que o controlador necessita de mostrar) e a vista transforma esse modelo num formato próprio para ser apresentado ao utilizador. As vistas não são directamente acessíveis pelo browser. Uma vista é sempre invocada pelo controlador que lhe fornece os dados. Convenções em Asp.Net MVC As aplicações Asp.Net MVC, por omissão, funcionam com base em convenções. Isto evita ter de especificar tudo o que pode ser inferido através de convenções. MVC usa uma estrutura de nomes de directórios baseados em convenções que permite determinar os templates das vistas referidos pelos controladores sem especificar a localização. O ficheiro com o template da vista referido num método de um controlador encontra se no directório \Views\<Nome_do_Controlador>\ e tem o nome igual ao método do qual é invocado. As convenções do MVC podem ser substituídas quando necessário. Este conceito é designado por convenções em vez de configurações (convention over configuration). Este conceito foi introduzido pelo Ruby on Rails. Convenções Asp.Net MVC: O nome de cada classe Controlador termina em Controller, e é colocada no directório Controllers. Há um único directório Views para todas as vistas da aplicação. As vistas que cada Controlador usa são colocadas num subdirectório de Views com o nome do Controlador (excepto o sufixo Controller). Todas as vistas partilhadas são colocadas no subdirectório de Views com o nome Shared.
Especificação das Vistas O directório Views contém um subdirectório por controlador, com o mesmo nome do controlador, mas sem o sufixo controller. Dentro de cada um destes subdirectórios existe um ficheiro view para cada método de acção, com o mesmo nome do método de acção. Este é o processo base de associação de vistas a métodos de acção. Exemplo1: Se o método de acção do controlador não especificar o nome da vista aplica se a convenção para localizar o objecto ViewResult retornado pelo método View(): é retornada uma vista com o mesmo nome do método de acção dentro do directório Views/Nome_do_Controlador. Para o método /Store/Index a vista seleccionada será /Views/Store/Index.cshtml Modificar o método Index do Controlador StoreController: public class StoreController : Controller // GET: /Store/ public ActionResult Index() ViewBag.Mensagem = "Mensagem de Store/Index"; return View();... Botão direito do rato em cima do código deste método e Add View... View name: Index Retirar a selecção a Use a Layout or master page Obtém se o seguinte ficheiro: @ Layout = null; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device width" /> <title>index</title> </head> <body> <div> </div> </body> </html>
Acrescentar no div do body: <h1>@viewbag.mensagem</h1> Executar: http://localhost:1755/store/ A vista mostra a mensagem colocada pelo controlador usando a expressão ViewBag.Mensagem. Exemplo2: Se pretendermos que o método de acção /Store/Index retornasse uma vista diferente colocada no subdirectório Store (por exemplo Teste.cshtml) temos de fornecer o nome da vista. Copiar o ficheiro Index.cshtml, colocar no mesmo directório com o nome Teste.cshtml, e fazer a modificação. <body> <div> <h1>da vista Teste: @ViewBag.Mensagem</h1> </div> </body> No Index de StoreController alterar: public ActionResult Index() ViewBag.Mensagem = "Mensagem de Store/Index"; return View("Teste"); Executar. Exemplo3: Se pretendermos que o método de acção /Store/Index retornasse uma vista diferente colocada num subdirectório diferente de Store (por exemplo Teste.cshtml em /Views/Home/) temos de fornecer o nome completo da vista usando sintaxe com ~. Nesta sintaxe com ~ também temos de fornecer a extensão porque não é usado o mecanismo interno de procura de vistas. Mudar a localização do ficheiro Teste.cshtml para Views/Home Executar. Dá erro. Alterar para return View("~/Views/Home/Teste"); Executar. Dá erro. Alterar para return View("~/Views/Home/Teste.cshtml"); Executar. Não dá erro
Vistas fortemente Tipadas Para passar um objecto modelo para a vista, podemos colocá lo como argumento do método View(). Na vista este objecto é colocado na propriedade Model. Mas esta propriedade é do tipo dinâmico, isto é, o seu tipo de dados só é determinado em tempo de execução. Podemos usá la deste modo mas também é possível atribuir lhe o tipo de dados correcto. Atribuindo o tipo correcto beneficiamos do Intellisense do Visual Studio quando acedemos às propriedades do objecto, e também às verificações em tempo de compilação (compile time checking). Para que lhe seja atribuído o tipo de dados correcto temos de indicar à vista o tipo de dados da propriedade Model com a seguinte declaração: @model IEnumerable<MvcApplication1.Models.Album> View Models Muitas vezes uma vista tem necessidade de mostrar informação que não mapeia directamente num objecto do modelo do domínio. Como na vista só podemos ter um objecto Model, uma possibilidade para mostrar informação extra que não faça parte do modelo da vista é enviá la através do ViewBag. Embora seja uma solução flexível, os dados obtidos pela vista através do VIewBag não são fortemente tipados, pelo que o programador da vista não terá a vantagem do intellisense do Visual Studio. Assim, pode ser útil construir uma classe para agregar toda a informação necessária para fornecer à vista, designada por ViewModel, um modelo (classe) construído com o único objectivo de fornecer informação para a vista. Uma classe ViewModel serve para encapsular múltiplos dados representados por instâncias de outras classes num objecto para passar à Vista. Não há nenhuma localização pré defenida para colocar os ViewModels. Normalmente cria se um directório ViewModels na raiz do projecto MVC. Nesse directório colocam se todos os ViewModels, um ficheiro para cada classe, com a designação do nome do Controlador seguida do nome do método de acção (ou Vista).
Exemplo1: MvcApplication1 > Add > New Folder: ViewModels ViewModels/StoreIndexViewModel.cs public class StoreIndexViewModel public int NumeroDeGeneros get; set; public List<string> Generos get; set; Consideremos o seguinte método de acção: Controllers/StoreController.cs using MvcApplication1.ViewModels; public ActionResult Index2() // Criar uma lista de géneros var generos = new List<string> "Rock", "Jazz", "Country", "Pop", "Disco"; var viewmodel = new StoreIndexViewModel NumeroDeGeneros = generos.count(), Generos = generos ; return View(viewModel); Criar uma Vista Uma vista pode ser criada escrevendo código e adicionada ao directório Views. Mas é muito mais fácil de criar através da ferramenta do Visual Studio Add View. Clicando com o botão direito do rato em qualquer parte do código de um método de acção, seleccionar Add View Na janela de diálogo Add View : View name: inicializado com o nome do método de acção. View engine: Razor ou ASPX. Create a strongly typed view: esta selecção permite escrever ou seleccionar uma classe para modelo a enviar à vista. A lista de classes para modelos é preenchida usando reflexão. Portanto é importante compilar o projecto antes de seleccionar uma classe para modelo. Scaffold template: A selecção de um modelo a enviar à vista permite seleccionar também um template para gerar a vista baseado no modelo seleccionado.
Scaffolding é usado por muitas tecnologias de software para significar geração rápida de um esquema do software que depois se pode editar. O template que gera este esquema inicial do código é usado como um andaime (scaffold) a partir do qual se constrói um programa mais poderoso. Tipos de templates: Empty: Cria uma vista vazia. Create: Cria uma vista com um formulário para criar instâncias do modelo. Delete: Cria uma vista com um formulário para apagar instâncias do modelo. Details: Cria uma vista que mostra o valor de cada propriedade do modelo. Edit: Cria uma vista com um formulário para editar instâncias do modelo. List: Cria uma vista com um tabela das instâncias do modelo. A tabela apresenta uma coluna para cada propriedade do modelo. O modelo que é passado pelo método de acção à vista tem de ser do tipo de dados IEnumerable<Modelo>. Esta vista também apresenta links para as acções create/edit/delete. Reference script libraries: a selecção desta opção na criação de uma vista que contenha entrada de dados, tal como Edit ou Create, faz com que a vista gerada referencie ficheiros JavaScript adequados para essa vista, tais como jquery Validation library. Create as a partial view: gera uma vista parcial, que vai constituir apenas parte de uma página, sem a opção layout. O layout, por omissão, está definido no ficheiro _ViewStart.cshtml. Use a layout or master page: permite determinar se a vista referencia um layout (ou master page) diferente do layout por omissão ou se é uma vista completa. Botão direito do rato no código do método public ActionResult Index2(): Seleccionar Add View Na janela de diálogo Add View : View name:index2 View engine: Razor Create a strongly typed view: selecionar Model class: StoreIndexViewModel (MvcApplication1.ViewModels) Scaffolf template: Details Reference script libraries: selecionar Create as a partial view: : não selecionar Use a layout or master page: não selecionar Add
O ficheiro Views/Store/Index2.cshtml é criado com o seguinte código: @model MvcA.ViewModels.StoreIndexViewModel @ Layout = null; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device width" /> <title>index2</title> </head> <body> <fieldset> <legend>storeindexviewmodel</legend> <div class="display label"> @Html.DisplayNameFor(model => model.numerodegeneros) </div> <div class="display field"> @Html.DisplayFor(model => model.numerodegeneros) </div> </fieldset> <p> @Html.ActionLink("Edit", "Edit", new /* id=model.primarykey */ ) @Html.ActionLink("Back to List", "Index") </p> </body> </html> Alterar o conteúdo do <div> para: <div class="display label"> @Html.DisplayNameFor(model => model.numerodegeneros) : @Html.DisplayFor(model => model.numerodegeneros) </div> <div class="display field"> @Html.DisplayNameFor(model => model.generos) : @Html.DisplayFor(model => model.generos) </div>
Layouts Os layouts têm a mesma finalidade das master pages nas Web Forms. Podemos usar um layout para definir um template comum para o site ou parte do site. Este template conterá um ou mais placeholders. As outras vistas da aplicação fornecerão conteúdos para estes placeholders. Exemplo: Layout1.cshtml <!DOCTYPE html> <html> <head><title>@viewbag.title</title></head> <body> <header> <h1>@viewbag.title</h1> </header> <div id="main content">@renderbody()</div> <footer>@rendersection("footer", required: false)</footer> </body> </html> Index.cshtml @ Layout = "~/Views/Shared/Layout1.cshtml"; ViewBag.Title = "Index"; <p>conteudo principal</p> @section Footer Este é o footer @RenderBody() é um placeholder que marca o lugar onde as vistas que usam este layout colocarão o seu conteúdo principal. @RenderSection( Footer ) é um placeholder que marca o lugar onde as vistas que usam este layout colocarão o conteúdo especificado na secção @section Footer. As vistas têm de fornecer conteúdo para todas as secções definidas no layout, a não ser que a secção seja definida como opcional: @RenderSection( Footer, required: false) ViewStart Cada vista pode especificar a sua página de layout usando a propriedade Layout.
Mas para um grupo de vistas que usem o mesmo layout podemos colocar num directório um ficheiro com o nome _ViewStart.cshtml. Este código é executado antes do código de qualquer vista nesse directório ou subdirectórios. _ViewStart.cshtml: @ Layout = "~/Views/Shared/_Layout.cshtml"; Forms e HTML Helpers Html.Label O helper Html.Label( idtitulo ) cria o elemento html <lable for= idtitulo >Titulo</label> O objectivo do tag label é definir um label para um elemento input (tal como campo de texto, checkbox, ou radio button), e melhorar a acessibilidade, porque se o utilizador clicar no texto do label o browser transfere o foco para o controlo de input associado. O atributo for deve conter o id do elemento input associado. Html.DropDownList e Html.ListBox Estes helpers criam elementos select. Html.Label( idtitulo ) cria o elemento html <lable for= idtitulo >Titulo</label> O objectivo do tag label é definir um label para um elemento input (tal como campo de Exemplo de DropDownList Ficheiro Controllers/HomeController.cs: public ActionResult SelecionarCategoria() List<SelectListItem> itens = new List<SelectListItem>(); itens.add(new SelectListItem Text = "Ação", Value = "0", Selected = true ); itens.add(new SelectListItem Text = "Drama", Value = "1" ); itens.add(new SelectListItem Text = "Comedia", Value = "2" ); itens.add(new SelectListItem Text = "Ficção Científica", Value = "3" ); ViewBag.TipoFilme = itens; return View();
Ficheiro SelecionarCategoria.cshtml: @ ViewBag.Title = "SelecionarCategoria"; <h2>selecionarcategoria</h2> @using (Html.BeginForm("CategoriaEscolhida", "Home", FormMethod.Get)) <fieldset> Tipo de Filme @Html.DropDownList("TipoFilme") <p> <input type="submit" value="submit" /> </p> </fieldset> Código html gerado: <h2>selecionarcategoria</h2> <form action="/home/categoriaescolhida" method="get"> <fieldset> Tipo de Filme <select id="tipofilme" name="tipofilme"> <option value="0">ação</option> <option value="1">drama</option> <option selected="selected" value="2">comedia</option> <option value="3">ficção Científica</option> </select> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> Exemplo de ListBox Semelhante ao exemplo anterior excepto no Ficheiro SelecionarCategoria.cshtml: Alterado para: @Html.DropDownList("TipoFilme") @Html.ListBox("TipoFilme") Código html gerado: <h2>selecionarcategoria</h2> <form action="/home/categoriaescolhida" method="get"> <fieldset>
Tipo de Filme <select id="tipofilme" multiple="multiple" name="tipofilme"> <option value="0">ação</option> <option value="1">drama</option> <option selected="selected" value="2">comedia</option> <option value="3">ficção Científica</option> </select> <p> <input type="submit" value="submit" /> </p> </fieldset> </form>