ASP.net mvc

Centro Universitário Luterano de Palmas curso de sistemas de informação linguagem de programação para web

curso de ASP.NET MVC O conteúdo deste curso é baseado na documentação oficial da Microsoft sobre o ASP.NET MVC e no site do projeto: http://asp.net/mvc.

conteúdo Introdução Tutorial Iniciando Criando o primeiro aplicativo Adicionando um Controller Trabalhando com Views Páginas de layout Modificando views Passando dados do Controller para a View Adicionando um Model Adicionando classes Model Criando uma string de conexão Acessando dados do Model a partir de um Controller Examinando o código gerado Modelos fortemente tipados e a palavra @model Processando a requisição POST

Capítulo 1

Introdução Tutorial Este tutorial apresenta o passo-a-passo para a criação de um software de gerenciamento de filmes. O que você vai aprender: ● ● ● ● ●

como criar um projeto ASP.NET MVC como criar Controllers e Views como criar um banco de dados utilizando o paradigma Code First do Entity Framework como retornar e apresentar dados como editar dados e habilitar validação de dados

Iniciando Um aplicativo ASP.NET MVC é diferente de um aplicativo ASP.NET convencional. No Visual Studio, enquanto um aplicativo ASP.NET é criado como um web site, um aplicativo ASP.NET MVC é criado como um projeto. Portanto, para iniciar, crie um novo projeto utilizando File > New Project.

Criando o primeiro aplicativo Na janela New Project selecione o template ASP.NET MVC 3 Web Application e defina onde o projeto será salvo (o nome e a localização do projeto ficam à sua escolha).

Na janela New ASP.NET MVC 3 Project selecione o template Internet Application, marque Use HTML5 Markup e deixe a engine Razor como padrão. Desmarque Create a unit test project, se estiver marcado.

Ao clicar OK o Visual Studio criará o projeto utilizando os templates escolhidos, assim você já tem um bom lugar para começar a trabalhar. Este projeto é um simples “Hello World!”.

Neste momento já é possível executar o projeto e verificar como as coisas estão andando. Há duas formas básicas de iniciar o projeto: em modo de debug (F5) e em modo normal (CTRL+F5); ambas compilam o projeto, o executam e abrem a janela do browser padrão com a primeira página do projeto.

Atente para a URL do site, que tem o formato http://localhost:porta/. http://localhost indica que o site está sendo acessado através do protocolo HTTP. localhost é o nome do servidor. Isto mesmo, você já está utilizando a infraestrutura da internet: o Visual Studio possui um servidor web integrado para desenvolvimento e testes. O servidor web precisa de uma localização e, no caso do Visual Studio, todo projeto web (ASP.NET ou ASP.NET MVC) utiliza o nome localhost (para identificar a máquina local como origem do servidor web) e um número de porta. Utilizar várias portas permite que numa mesma máquina estejam vários servidores web. Ao executar o projeto o servidor web de testes escolhe um número aleatório para a porta.

Importante Durante as modificações no projeto ocorrerão vários processos de compilação. Se houver uma janela do browser aberta, você não precisa fechá-la para que a mais nova versão do software (página web) seja carregada, basta pressionar F5.

Pronto. O projeto acabou de ser criado e você já tem um web site :) O próximo passo é modificar o funcionamento do software e aprender mais sobre o funcionamento do ASP.NET MVC.

Adicionando um Controller MVC significa Model-View-Controller. MVC é um padrão de desenvolvimento de aplicativos que são bem arquitetados e fáceis de manter. Aplicações baseadas em MVC contêm:

Controllers: classes que tratam requisições de entrada para o aplicativo, retornam dados do modelo, e então especificam templates da View que retornam uma resposta para o cliente Models: classes que representam o dado da aplicação e que usam lógica de validação para reforçar regras de negócio para os dados Views: arquivos de template que sua aplicação usa para gerar, dinamicamente, resposta HTML Estes conceitos serão apresentados neste tutorial e os veremos mais em detalhes em outros capítulos. Vamos continuar criando um novo Controller. No Solution Explorer, clique com o botão direito sobre a pasta Controllers e selecione Add > Controller. [figura: adicionando-controller] Chame seu controller de HelloWorldController, use como template Empty controller e clique Add. Será criado o arquivo HelloWorldController.cs, dentro da pasta Controllers. Um controller é uma classe (herda de Controller) que precisa ter sempre o termo “Controller” como parte do nome. Ao criar um controller, o Visual Studio insere código padrão, mas vamos remover o código criado automaticamente para a classe HelloWorldController e substituir pelo código a seguir:

public class HelloWorldController : Controller { // GET: /HelloWorld/ public string Index() { return "Esta eh a acao padrao..."; } // GET: /HelloWorld/Welcome/ public string Welcome() { return "Esta eh a mensagem de boas-vindas"; } }

Para chamar o método HelloWorldController.Index() basta acessar a URL http:// localhost:porta/HelloWorld. O método Index() é o método padrão para todo controller, mas vamos ver como modificar isso.

Importante

O projeto precisa ser compilado sempre que for feita alguma modificação nos controllers. Algumas modificações não exigem recompilação, como modificação no código das views.

Veja que o que o browser apresenta é o resultado do método Index(), que é uma string. Se tivéssemos pedido para retornar um número int, o resultado também seria apresentado pelo browser. Isto demonstra um modelo poderoso de gerar conteúdo de retorno para o cliente, entretanto, como você já deve ter percebido, retornar o conteúdo completo de uma página HTML vai dar muito trabalho. Por isso mesmo é que vamos utilizar outros recursos do ASP.NET MVC. ASP.NET MVC invoca diferentes controllers e diferentes métodos dependendo da URL que está sendo solicitada. A lógica padrão para o mapeamento de URLs usa o formato a seguir: /Controller/Acao/Parametros As três partes da URL são, portanto: 1. Controller 2. Ação (mapeada para um método da classe que representa o controller) 3. Parâmetros (mapeados para parâmetros do método que representa a ação) Na verdade, este modelo da URL é simples, mas bastante funcional. No caso do nosso exemplo, a URL http://localhost:porta/HelloWorld é mapeada para o controller HelloWorldController. As três partes da URL são opcionais e é aplicada a seguinte lógica padrão: 1. se houver controller, então o controller é invocado, caso contrário é invocado o controller

HomeController 2. se houver ação, então é invocada a ação do controller, caso contrário é invocada a ação Index 3. se houver parâmetros, os mesmos são passados para a ação, caso contrário a ação é executada sem parâmetros Desta forma, durante este texto vamos chamar de “ação” (ou “action”) os métodos dos controllers. A partir deste momento também não vamos mais utilizar a URL absoluta, a partir de “http”, apenas a URL relativa, a partir de “/” (que representa a raiz do site/aplicativo). Navegue até a URL /HelloWorld/Welcome. A ação HelloWorldController.Welcome() é executada e retorna uma string. Veja que ainda não usamos parâmetros na URL.

Vamos modificar a ação Welcome() para que possamos passar parâmetros para o controller. Por exemplo, queremos usar uma URL como /HelloWorld/Welcome?nome=Jose&contador=4. Modifique a ação Welcome() para que tenha dois parâmetros, conforme o código a seguir:

public string Welcome(string nome, int contador = 1) { string mensagem = string.Format("Olá, {0}! Contador é: {1}", nome, contador); return HttpUtility.HtmlEncode(mensagem); }

Agora navegue até /HelloWorld/Welcome?nome=Jose&contador=4 e você deverá ver uma

saída semelhante ao seguinte:

O código utiliza o recurso de valor padrão de parâmetro do C# para indicar que o parâmetro quantidade possui o valor padrão 1, e assumirá este valor, caso nenhum valor seja passado para este parâmetro. Isso permite que, se for usada a URL /HelloWorld/Welcome?nome=Jose a ação Welcome(string, int) consiga ser executada sem problemas. Ao processar a URL o ASP.NET MVC trata os argumentos da Querystring (o que vem depois do sinal “?”) e associa a parâmetros da ação a ser executada. O importante é que o nome do argumento da Querystring seja o mesmo do parâmetro da ação. Até aqui usamos ações retornando strings que representam o conteúdo HTML da View, entretanto, vamos ver na próxima seção que há técnicas melhores e práticas, como utilizar os “templates”.

Trabalhando com Views O formato que usamos antes, no qual uma ação retorna uma string, que representa o HTML da view, é suficiente para algumas [poucas] situações, o mais adequado é utilizar os chamados “templates”. O ASP.NET MVC 3 introduziu o uso da engine Razor. Templates baseados em Razor possuem a extensão .cshtml e fornecem uma maneira elegante de gerar saída HTML utilizando C#. Vamos começar adicionando uma view para a ação Index() do HelloWorldController. Modifique o código desta ação para o código a seguir e depois clique com o botão direito e escolha Add View...

public ActionResult Index() {

return View(); }

A janela Add View aparece. Deixe os campos como estão, pois são o padrão e clique Add.

É criada a pasta Views\HelloWorld e também o arquivo \Views\HelloWorld\Index.cshtml, como você pode notar no Solution Explorer.

Execute o aplicativo e navegue até /HelloWorld.

A ação HelloWorldController.Index() retorna ActionResult e o código do método possui return View(). Quando esta linha é executada o ASP.NET MVC procura pela view (template) que tem o nome da ação que está sendo executada. Como não informamos um parâmetro para o método View(), o ASP.NET MVC entende que a view padrão é a que tem o nome da ação, ou seja, procura o arquivo /Views/HelloWorld/Index.cshtml. Uma pergunta agora pode ser: de onde veio todo esse código HTML sendo que a view só possui um pouquinho de código? A resposta está no fato de que a view está usando uma “master page” (ou página de layout) e veremos como trabalhar com isso na próxima seção.

Páginas de layout Abra o arquivo /Views/Shared/_Layout.cshtml. Este arquivo é chamado de “página de layout” (ou a conhecida “master page” da programação ASP.NET tradicional) e contém o código HTML que é utilizando em todas as views que usam esta página de layout. Páginas de layout permitem que você defina o HTML que conterá o conteúdo das outras views. Perceba a utilização da instrução @RenderBody(). RenderBody é um “placeholder”, uma marca, que indica a região do HTML que receberá o conteúdo das views.

Modificando views Abra o arquivo /Views/HelloWorld/Index.cshtml. Há dois lugares para fazer mudança: 1. o texto que aparece na barra de título do browser 2. o cabeçalho secundário da página () Modifique a view para que tenha o conteúdo a seguir:

@{ ViewBag.Title = "Filmes"; } Filmes Lista de filmes.

O título da página é modificado através da alteração da propriedade Title do objeto ViewBag. Este objeto é utilizado como uma forma de intercâmbio/transporte de dados entre o controller e a view, e entre view e página de layout, mas vamos tratar disso em outro momento. Na página de layout, perceba que o valor dessa propriedade é apresentado, utilizando @ViewBag.Title.

Passando dados do Controller para a View Controllers são responsáveis por fornecer dados ou objetos necessários para a view, de forma que o conteúdo da view possa ser gerado para o browser. Uma view nunca deveria ter lógica de negócio ou interação direta com o banco de dados. Ao invés disso, deveria sempre trabalhar com os dados fornecidos pelo controller. Manter esta “separação de interesses” ajuda a manter o código limpo e mais fácil de realizar manutenções. Atualmente, a ação Welcome(string, int) do HelloWorldController recebe dois parâmetros, e a mensagem é gerada na ação e apresentada para o browser. Ao invés disso, vamos utilizar templates de views. O template da view irá gerar uma resposta dinâmica, que significa que você precisa passar os dados apropriados do controller para a view. Para fazer isso, vamos usar o objeto ViewBag, que é um objeto dynamic e, portanto, não tem uma estrutura rígida e bem definida, mas pode ter novas propriedades sempre que preciso. Abra o HelloWorldController e altere o método Welcome(string, int) para o seguinte:

public ActionResult Welcome(string nome, int contador = 1) { ViewBag.Nome = nome; ViewBag.Contador = contador; return View(); }

Crie uma view para a ação Welcome(string, int) com o conteúdo a seguir:

@{ ViewBag.Title = "Boas-vindas"; } Bem-vindo! Olá, @ViewBag.Nome! @for (int i = 0; i < ViewBag.Contador; i++) { if (i % 2 == 0) { Seja bem-vindo! } else { Seja bem-vindo! } }

Navegue até a URL /HelloWorld/Welcome?nome=Jose&contador=4. Você verá o resultado da view no browser.

Seguindo o princípio da separação de interesses, a lógica da view deve ser apenas a que é utilizada para gerar a própria view, ou seja, a interface do aplicativo. Vimos também que o objeto ViewBag fornece uma maneira simples de passarmos dados entre controller e view, mas esta ainda não é a parte “M” (do MVC) que queremos trabalhar. Na próxima seção, vamos ver como trabalhar com entidades em um banco de dados.

Adicionando um Model Nesta seção vamos adicionar algumas classes para gerenciar filmes em um banco de dados. Estas classes são a parte “M” (Model) de um aplicativo ASP.NET MVC. Usaremos a tecnologia de acesso a dados do .NET Framework conhecida como Entity Framework para criar as classes que representam o Model. O Entity Framework (também conhecido como EF) suporta um paradigma de desenvolvimento chamado “Code First”. Code First permite que você crie objetos do Model escrevendo classes simples, que são conhecidas como classes POCO -de “Plain-Old CLR Objects”. Code First criará o banco de dados em tempo de execução a partir das suas classes, o que fornece um fluxo de de

senvolvimento bastante limpo e ágil.

Adicionando classes Model No Solution Explorer clique com o botão direito na pasta Models e adicione uma classe, chamandoa “Filme”. Adicione propriedades à classe, de modo que o código seja semelhante ao seguinte:

public class Filme { public int Id { get; set; } public string Titulo { get; set; public DateTime DataDeLancamento public string Genero { get; set; public decimal Preco { get; set; }

} { get; set; } } }

Usaremos a classe Filme para representar filmes no banco de dados. Cada instância (objeto) de Filme corresponderá a uma linha (registro) em uma tabela do banco de dados, e cada propriedade da classe Filme mapeia para uma coluna na tabela. No mesmo arquivo adicione a classe FilmeDbContext:

public class FilmeDbContext : DbContext { public DbSet Filmes { get; set; } }

A classe FilmeDbContext representa o contexto do banco de dados de filmes usado pelo Entity Framework, que trata o retorno, o armazenamento e a atualização de instâncias da classe Filme no banco de dados. FilmeDbContext herda de DbContext, classe-base fornecida pelo Entity Framework. Para ser capaz de referenciar DbContext e DbSet é preciso usar o namespace System.Data.Entity.

Criando uma string de conexão A classe FilmeDbContext trata a tarefa de conexão com o banco de dados e mapeia objetos para registros do banco de dados. Uma pergunta que vem à sua mente agora é como especificar o banco de dados que vai ser conectado? Faremos isso adicionando informações da conexão no arquivo web.config. Abra o arquivo /web.config e adicione a string de conexão ao elemento :

Isso é tudo que precisamos para indicar o banco de dados onde serão armazenados os dados de instâncias de Filme. Na próxima seção veremos como trabalhar com o gerenciamento completo (inserir, atualizar, listar, excluir) dos filmes.

Acessando dados do Model a partir de um Controller Clique com o botão direito sobre a pasta Controllers e crie um novo controller chamado FilmesController. Selecione as opções a seguir: Nome do controller: FilmesController Template: Controller with read/write actions and views, using Entity Framework Model classe: Filme (MvcMovie.Models) Data context class: FilmeDbContext (MvcMovie.Models)

Views: Razor (CSHTML)

O Visual Studio criará o seguinte: arquivo /Controllers/FilmesController.cs pasta /Views/Filmes arquivos Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml e Index.cshtml na pasta /Views/Filmes Daqui a pouco vamos ver o código gerado, mas, por enquanto, apenas execute o aplicativo e navegue até /Filmes. Você verá uma tela semelhante à que ilustra a imagem a seguir:

Para cadastrar um novo filme clique em “Create New”. O browser navegará para /Filmes/Create. Preencha o formulário e clique “Create”.

O browser navega novamente para /Filmes e você vê a lista de filmes com o filme cadastrado.

Para editar, clique em “Edit”; para ver detalhes, em “Details”, e para excluir, em “Delete”. Perceba as URLs utilizadas: Editar: /Filmes/Edit/1 Detalhes: /Filmes/Details/1 Excluir: /Filmes/Delete/1 Perceba que agora as URLs estão utilizando o formato completo apresentado antes: controller/ action/parâmetros. Agora que você já conseguiu comprovar que os dados estão, realmente, sendo salvos em uma fonte de dados persistente como um banco de dados do SQL Server, então já podemos examinar o código que o Visual Studio criou automaticamente.

Examinando o código gerado Abra o arquivo \Controllers\FilmesController.cs e examine o código gerado. A primeira consideração interessante é a respeito do atributo db, do tipo FilmeDbContext: private FilmeDbContext db = new FilmeDbContext();

Lembra que, ao criarmos a classe FilmeDbContext fizemos com que ela herdasse de DbContext? DbContext é uma classe que implementa dois padrões de programação e acesso a dados chamados “Unity of Work” e “Repository”. Estes padrões permitem usar uma fonte de dados como

um repositório e agrupar operações de mudanças nos dados, que são enviadas para a fonte de dados como unidades de trabalho semelhantes a transações. Em outras palavras, esta classe é usada para consultar, editar e excluir filmes.

Modelos fortemente tipados e a palavra @model A primeira action do controller FilmesController é a Index(), que apresenta a lista de filmes:

public ViewResult Index() { return View(db.Filmes.ToList()); }

Anteriormente, vimos que a passagem de dados entre contoller e view poderia ser feita através do objeto ViewBag. ASP.NET MVC também possui a habilidade de passar dados fortemente tipados ou objetos para uma view. Esta abordagem fortemente tipada permite melhor checagem em tempo de compilação e também utiliza melhor o recurso de IntelliSense do Visual Studio. Na action Index(), perceba como o tipo de retorno utilizado é ViewResult, que é mais especializado que ActionResult. Veja também, que, para passar os dados para a view Index.cshtml é chamado o método View() passando como parâmetro o resultado de db.Filmes.ToList(). A view Index.cshtml começa definindo qual vai ser o objeto usado na view:

@model IEnumerable

A instrução @model define o tipo de objeto esperado pela view, neste caso é IEnumerable. Esta instrução também indica que o objeto Model será deste tipo, o que permite utilizarmos uma instrução foreach para iterar pela coleção de filmes:

@foreach (var item in Model) { @Html.DisplayFor(modelItem => item.Titulo) @Html.DisplayFor(modelItem => item.DataDeLancamento) @Html.DisplayFor(modelItem => item.Genero) @Html.DisplayFor(modelItem => item.Preco) @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | @Html.ActionLink("Details", "Details", new { id=item.Id }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id })

}

Os links para as ações de editar, ver detalhes e excluir são gerados através do método ActionLink(string, string, object) do “html helper”, representado pelo objeto Html. No browser isso representa, por exemplo, a URL /Filmes/Edit/1, quando se está prestes a editar o filme com Id = 1. O primeiro parâmetro é o texto do link que vai ser gerado; o segundo é o nome da action a ser invocada; o terceiro representa os valores passados como parâmetro para a action. Isso junto representa uma “rota”.

(!) Importante Outra forma de passar parâmetros para a action, que já vimos, é através da querystring. Por exemplo, a URL /Filmes/Edit/1 é tratada da mesma forma que /Filmes/Edit?id=1.

A “rota” representa um conceito fundamental no ASP.NET MVC. Toda rota é traduzida pelo ASP.NET MVC em um conjunto composto por: controller, action e parâmetros. O padrão da URL é {controller}/{action}/{id}. Na verdade, outras rotas podem ser criadas, para URLs mais elaboradas, mas este é o formato de rota padrão, e está definido no arquivo Global.asax.cs:

public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", "{controller}/{action}/{id}", new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); }

Vamos tratar mais sobre rotas e também ver como podemos criar nossas próprias rotas para propósitos mais específicos. Por enquanto, basta a você saber que o formato da URL e como ele é interpretado pelo ASP.NET MVC não é mágica :) Abra o controller Filmes e vamos analisar os dois métodos Edit().

public ActionResult Edit(int id) {

Filme filme = db.Filmes.Find(id); return View(filme); }

[HttpPost] public ActionResult Edit(Filme filme) { if (ModelState.IsValid) { db.Entry(filme).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(filme); }

Note que o método Edit(Filme) está marcado com o atributo HttpPost. Este atributo especifica que esta sobrecarga do método Edit() só pode ser invocada por requisições POST. O que vimos antes disso foi, na verdade, que o ASP.NET MVC atende, por padrão, a requisições GET, e por isso não é necessário usar o atributo HttpGet. Para diferenciarmos a forma de requisição de certas ações, principalmente as que usam sobrecarga, vamos usar os atributos HttpGet e HttpPost. O método HttpGet Edit(id) usa o parâmetro id para procurar um filme utilizando o método Find() da classe DbSet e retorna o filme selecionado para a view Edit. Quando o Visual Studio criou a view Edit, ele examinou a classe Filme e criou código para renderizar os elementos e para cada propriedade da classe.

@model MvcMovie.Models.Filme @{ ViewBag.Title = "Edit"; } Edit @using (Html.BeginForm()) { @Html.ValidationSummary(true) Filme @Html.HiddenFor(model => model.Id)

@Html.LabelFor(model => model.Titulo) @Html.EditorFor(model => model.Titulo) @Html.ValidationMessageFor(model => model.Titulo) @Html.LabelFor(model => model.DataDeLancamento) @Html.EditorFor(model => model.DataDeLancamento) @Html.ValidationMessageFor(model => model.DataDeLancamento) @Html.LabelFor(model => model.Genero) @Html.EditorFor(model => model.Genero) @Html.ValidationMessageFor(model => model.Genero) @Html.LabelFor(model => model.Preco) @Html.EditorFor(model => model.Preco) @Html.ValidationMessageFor(model => model.Preco) } @Html.ActionLink("Back to List", "Index")

O código gerado automaticamente usa vários html helpers para gerar a marcação HTML: Html.LableFor apresenta o nome da propriedade Html.EditFor apresenta um elemento para editar o valor da propriedade Html.ValidationMessageFor apresenta mensagens de validação associadas com a propriedade Execute o aplicativo e navegue até a URL /Filmes. Edite um filme e veja o código-fonte HTML, que é semelhante ao seguinte:

Edit ... Edit Filme



Titulo DataDeLancamento Genero

Preco Back to List

Processando a requisição POST Vejamos com mais detalhes o método HttpPost Edit(Filme):

[HttpPost] public ActionResult Edit(Filme filme) { if (ModelState.IsValid) { db.Entry(filme).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(filme); }

O ASP.NET MVC possui um mecanismo chamado model binder (algo como “vinculador de modelo”) que recebe o valor postado pelo formulário e cria um objeto Filme que é passado como o parâmetro filme. A propriedade ModelState.IsValid checa se os dados enviados pelo formulário podem ser usados para modificar um objeto Filme, ou seja, se os dados são válidos. Se forem válidos, o código salva os dados do filme na coleção de filmes do objeto db, instância

da classe FilmeDbContext; o código então salva o filme no banco de dados chamando o método SaveChanges deste mesmo objeto. Após salvar os dados o código redireciona o usuário para a ação Index(), que apresenta a lista de filmes atualizada. Se os valores postados não são válidos, eles são apresentados novamente no formulário. As mensagens de erro de validação são apresentadas pelo Html.ValidationMessageFor.

Vamos analisar um trecho da página HTML gerada:

DataDeLancamento

Perceba que as mensagens de validação são embutidas no HTML através de atributos nos elementos . O responsável por isso é um “plugin” do jQuery para o ASP.NET MVC

chamado “jQuery Validate”. Há dois detalhes importantes para tratarmos antes de prosseguirmos: 1. A mensagem de validação está em inglês 2. Valores numéricos estão sendo tratados de forma incorreta Para resolver isso precisamos trabalhar com um recurso de internacionalização e globalização, que veremos mais para frente.