Академический Документы
Профессиональный Документы
Культура Документы
curso de
ASP.NET MVC
O contedo deste curso baseado na documentao oficial da Microsoft sobre o ASP.NET MVC e no
site do projeto: http://asp.net/mvc.
contedo
Introduo
Tutorial
Iniciando
Criando o primeiro aplicativo
Adicionando um Controller
Trabalhando com Views
Pginas de layout
Modificando views
Passando dados do Controller para a View
Adicionando um Model
Adicionando classes Model
Criando uma string de conexo
Acessando dados do Model a partir de um Controller
Examinando o cdigo gerado
Modelos fortemente tipados e a palavra @model
Processando a requisio POST
Captulo 1
Introduo
Tutorial
Este tutorial apresenta o passo-a-passo para a criao de um software de gerenciamento de filmes.
O que voc vai aprender:
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.
Na janela New ASP.NET MVC 3 Project selecione o template Internet Application, marque Use
HTML5 Markup e deixe a engine Razor como padro. 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 comear a trabalhar. Este projeto um simples Hello World!.
Neste momento j possvel executar o projeto e verificar como as coisas esto andando. H duas
formas bsicas 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 padro com a primeira pgina
do projeto.
Atente para a URL do site, que tem o formato http://localhost:porta/. http://localhost indica
que o site est sendo acessado atravs 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 localizao e, no
caso do Visual Studio, todo projeto web (ASP.NET ou ASP.NET MVC) utiliza o nome localhost (para
identificar a mquina local como origem do servidor web) e um nmero de porta. Utilizar vrias
portas permite que numa mesma mquina estejam vrios servidores web. Ao executar o projeto o
servidor web de testes escolhe um nmero aleatrio para a porta.
Importante
Durante as modificaes no projeto ocorrero vrios processos de compilao. Se houver uma
janela do browser aberta, voc no precisa fech-la para que a mais nova verso do software
(pgina web) seja carregada, basta pressionar F5.
Pronto. O projeto acabou de ser criado e voc j tem um web site :) O prximo 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 padro de desenvolvimento de aplicativos que so
bem arquitetados e fceis de manter. Aplicaes baseadas em MVC contm:
Controllers: classes que tratam requisies de entrada para o aplicativo, retornam dados
do modelo, e ento especificam templates da View que retornam uma resposta para o
cliente
Models: classes que representam o dado da aplicao e que usam lgica de validao para
reforar regras de negcio para os dados
Views: arquivos de template que sua aplicao usa para gerar, dinamicamente, resposta
HTML
Estes conceitos sero apresentados neste tutorial e os veremos mais em detalhes em outros
captulos. Vamos continuar criando um novo Controller. No Solution Explorer, clique com o boto
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 cdigo padro, mas vamos
remover o cdigo criado automaticamente para a classe HelloWorldController e substituir pelo
cdigo a seguir:
Importante
O projeto precisa ser compilado sempre que for feita alguma modificao nos controllers. Algumas
modificaes no exigem recompilao, como modificao no cdigo das views.
Veja que o que o browser apresenta o resultado do mtodo Index(), que uma string. Se
tivssemos pedido para retornar um nmero int, o resultado tambm seria apresentado pelo
browser. Isto demonstra um modelo poderoso de gerar contedo de retorno para o cliente,
entretanto, como voc j deve ter percebido, retornar o contedo completo de uma pgina 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 mtodos dependendo da URL que est
sendo solicitada. A lgica padro para o mapeamento de URLs usa o formato a seguir:
/Controller/Acao/Parametros
As trs partes da URL so, portanto:
1. Controller
2. Ao (mapeada para um mtodo da classe que representa o controller)
3. Parmetros (mapeados para parmetros do mtodo que representa a ao)
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 trs partes da URL so opcionais e aplicada a seguinte lgica padro:
1. se houver controller, ento o controller invocado, caso contrrio invocado o controller
HomeController
2. se houver ao, ento invocada a ao do controller, caso contrrio invocada a ao
Index
3. se houver parmetros, os mesmos so passados para a ao, caso contrrio a ao
executada sem parmetros
Desta forma, durante este texto vamos chamar de ao (ou action) os mtodos dos controllers. A
partir deste momento tambm no 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 ao HelloWorldController.Welcome()
executada e retorna uma string. Veja que ainda no usamos parmetros na URL.
Vamos modificar a ao Welcome() para que possamos passar parmetros para o controller. Por
exemplo, queremos usar uma URL como /HelloWorld/Welcome?nome=Jose&contador=4.
Modifique a ao Welcome() para que tenha dois parmetros, conforme o cdigo a seguir:
O cdigo utiliza o recurso de valor padro de parmetro do C# para indicar que o parmetro
quantidade possui o valor padro 1, e assumir este valor, caso nenhum valor seja passado para
este parmetro. Isso permite que, se for usada a URL /HelloWorld/Welcome?nome=Jose a ao
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 parmetros da ao a ser executada. O importante que o nome do argumento
da Querystring seja o mesmo do parmetro da ao.
At aqui usamos aes retornando strings que representam o contedo HTML da View, entretanto,
vamos ver na prxima seo que h tcnicas melhores e prticas, como utilizar os templates.
return View();
}
A janela Add View aparece. Deixe os campos como esto, pois so o padro e clique Add.
Pginas de layout
Abra o arquivo /Views/Shared/_Layout.cshtml. Este arquivo chamado de pgina de layout
(ou a conhecida master page da programao ASP.NET tradicional) e contm o cdigo HTML que
utilizando em todas as views que usam esta pgina de layout. Pginas de layout permitem que
voc defina o HTML que conter o contedo das outras views. Perceba a utilizao da instruo
@RenderBody(). RenderBody um placeholder, uma marca, que indica a regio do HTML que
receber o contedo das views.
Modificando views
Abra o arquivo /Views/HelloWorld/Index.cshtml. H dois lugares para fazer mudana:
1. o texto que aparece na barra de ttulo do browser
2. o cabealho secundrio da pgina (<h2>)
Modifique a view para que tenha o contedo a seguir:
@{
ViewBag.Title = "Filmes";
}
<h2>Filmes</h2>
<p>Lista de filmes.</p>
O ttulo da pgina modificado atravs da alterao da propriedade Title do objeto ViewBag. Este
objeto utilizado como uma forma de intercmbio/transporte de dados entre o controller e a view,
e entre view e pgina de layout, mas vamos tratar disso em outro momento. Na pgina de layout,
perceba que o valor dessa propriedade apresentado, utilizando <title>@ViewBag.Title</
title>.
@{
ViewBag.Title = "Boas-vindas";
}
<h2>Bem-vindo!</h2>
<p>Ol, @ViewBag.Nome!</p>
<ul>
@for (int i = 0; i < ViewBag.Contador; i++)
{
if (i % 2 == 0) {
<li style=color:red>Seja bem-vindo!</li>
} else {
<li>Seja bem-vindo!</li>
}
}
</ul>
Seguindo o princpio da separao de interesses, a lgica da view deve ser apenas a que utilizada
para gerar a prpria view, ou seja, a interface do aplicativo. Vimos tambm que o objeto ViewBag
fornece uma maneira simples de passarmos dados entre controller e view, mas esta ainda no
a parte M (do MVC) que queremos trabalhar. Na prxima seo, vamos ver como trabalhar com
entidades em um banco de dados.
Adicionando um Model
Nesta seo vamos adicionar algumas classes para gerenciar filmes em um banco de dados. Estas
classes so 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 (tambm conhecido como
EF) suporta um paradigma de desenvolvimento chamado Code First. Code First permite que
voc crie objetos do Model escrevendo classes simples, que so conhecidas como classes POCO -de Plain-Old CLR Objects. Code First criar o banco de dados em tempo de execuo a partir das
suas classes, o que fornece um fluxo de de
}
{ get; set; }
}
}
Usaremos a classe Filme para representar filmes no banco de dados. Cada instncia (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:
A classe FilmeDbContext representa o contexto do banco de dados de filmes usado pelo Entity
Framework, que trata o retorno, o armazenamento e a atualizao de instncias 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.
Isso tudo que precisamos para indicar o banco de dados onde sero armazenados os dados de
instncias de Filme. Na prxima seo veremos como trabalhar com o gerenciamento completo
(inserir, atualizar, listar, excluir) dos filmes.
Para cadastrar um novo filme clique em Create New. O browser navegar para /Filmes/Create.
Preencha o formulrio 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 esto utilizando o formato completo apresentado antes: controller/
action/parmetros.
Agora que voc j conseguiu comprovar que os dados esto, realmente, sendo salvos em uma fonte
de dados persistente como um banco de dados do SQL Server, ento j podemos examinar o cdigo
que o Visual Studio criou automaticamente.
Lembra que, ao criarmos a classe FilmeDbContext fizemos com que ela herdasse de DbContext?
DbContext uma classe que implementa dois padres de programao e acesso a dados
chamados Unity of Work e Repository. Estes padres permitem usar uma fonte de dados como
um repositrio e agrupar operaes de mudanas nos dados, que so enviadas para a fonte de
dados como unidades de trabalho semelhantes a transaes. Em outras palavras, esta classe usada
para consultar, editar e excluir filmes.
Anteriormente, vimos que a passagem de dados entre contoller e view poderia ser feita atravs do
objeto ViewBag. ASP.NET MVC tambm possui a habilidade de passar dados fortemente tipados ou
objetos para uma view. Esta abordagem fortemente tipada permite melhor checagem em tempo de
compilao e tambm 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 tambm, que, para passar os dados para a view Index.cshtml chamado o
mtodo View() passando como parmetro o resultado de db.Filmes.ToList().
A view Index.cshtml comea definindo qual vai ser o objeto usado na view:
@model IEnumerable<MvcMovie.Models.Filme>
A instruo @model define o tipo de objeto esperado pela view, neste caso
IEnumerable<MvcMovie.Models.Filme>. Esta instruo tambm indica que o objeto Model ser
deste tipo, o que permite utilizarmos uma instruo foreach para iterar pela coleo de filmes:
</td>
</tr>
}
Os links para as aes de editar, ver detalhes e excluir so gerados atravs do mtodo
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 parmetro o texto do link que vai ser gerado; o segundo o nome da action a
ser invocada; o terceiro representa os valores passados como parmetro para a action. Isso junto
representa uma rota.
(!) Importante
Outra forma de passar parmetros para a action, que j vimos, atravs 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 parmetros. O padro da URL
{controller}/{action}/{id}. Na verdade, outras rotas podem ser criadas, para URLs mais
elaboradas, mas este o formato de rota padro, e est definido no arquivo Global.asax.cs:
Vamos tratar mais sobre rotas e tambm ver como podemos criar nossas prprias rotas para
propsitos mais especficos. Por enquanto, basta a voc saber que o formato da URL e como ele
interpretado pelo ASP.NET MVC no mgica :)
Abra o controller Filmes e vamos analisar os dois mtodos Edit().
[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 mtodo Edit(Filme) est marcado com o atributo HttpPost. Este atributo especifica que
esta sobrecarga do mtodo Edit() s pode ser invocada por requisies POST. O que vimos antes
disso foi, na verdade, que o ASP.NET MVC atende, por padro, a requisies GET, e por isso no
necessrio usar o atributo HttpGet. Para diferenciarmos a forma de requisio de certas aes,
principalmente as que usam sobrecarga, vamos usar os atributos HttpGet e HttpPost.
O mtodo HttpGet Edit(id) usa o parmetro id para procurar um filme utilizando o mtodo 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 cdigo para renderizar os elementos <label> e <input>
para cada propriedade da classe.
@model MvcMovie.Models.Filme
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/
javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Filme</legend>
@Html.HiddenFor(model => model.Id)
<div class="editor-label">
O cdigo gerado automaticamente usa vrios html helpers para gerar a marcao HTML:
Html.LableFor apresenta o nome da propriedade
Html.EditFor apresenta um elemento <input> para editar o valor da propriedade
Html.ValidationMessageFor apresenta mensagens de validao associadas com a
propriedade
Execute o aplicativo e navegue at a URL /Filmes. Edite um filme e veja o cdigo-fonte HTML, que
semelhante ao seguinte:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
...
<h2>Edit</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></
script>
<form action="/Filmes/Edit/2" method="post">
<legend>Filme</legend>
<fieldset>
<input data-val="true" data-val-number="The field Id must be a number." dataval-required="The Id field is required." id="Id" name="Id" type="hidden" value="2" />
<div class="editor-label">
<label for="Titulo">Titulo</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Titulo" name="Titulo" type="text"
value="When Harry Met Sally" />
<span class="field-validation-valid" data-valmsg-for="Titulo" datavalmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="DataDeLancamento">DataDeLancamento</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-valrequired="The DataDeLancamento field is required." id="DataDeLancamento"
name="DataDeLancamento" type="text" value="01/01/1989 00:00:00" />
<span class="field-validation-valid" data-valmsg-for="DataDeLancamento"
data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Genero">Genero</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Genero" name="Genero" type="text"
value="Comdia" />
<span class="field-validation-valid" data-valmsg-for="Genero" datavalmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Preco">Preco</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The
field Preco must be a number." data-val-required="The Preco field is required."
id="Preco" name="Preco" type="text" value="10,00" />
<span class="field-validation-valid" data-valmsg-for="Preco" data-valmsgreplace="true"></span>
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
</form>
<div>
<a href="/Filmes">Back to List</a>
</div>
</section>
<footer>
</footer>
</div>
</body>
</html>
[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 formulrio e cria um objeto Filme que passado
como o parmetro filme. A propriedade ModelState.IsValid checa se os dados enviados pelo
formulrio podem ser usados para modificar um objeto Filme, ou seja, se os dados so vlidos.
Se forem vlidos, o cdigo salva os dados do filme na coleo de filmes do objeto db, instncia
da classe FilmeDbContext; o cdigo ento salva o filme no banco de dados chamando o mtodo
SaveChanges deste mesmo objeto. Aps salvar os dados o cdigo redireciona o usurio para a ao
Index(), que apresenta a lista de filmes atualizada.
Se os valores postados no so vlidos, eles so apresentados novamente no formulrio. As
mensagens de erro de validao so apresentadas pelo Html.ValidationMessageFor.
<div class="editor-label">
<label for="DataDeLancamento">DataDeLancamento</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-valrequired="The DataDeLancamento field is required." id="DataDeLancamento"
name="DataDeLancamento" type="text" value="01/01/1989 00:00:00" />
<span class="field-validation-valid" data-valmsg-for="DataDeLancamento"
data-valmsg-replace="true"></span>
</div>
chamado jQuery Validate. H dois detalhes importantes para tratarmos antes de prosseguirmos:
1. A mensagem de validao est em ingls
2. Valores numricos esto sendo tratados de forma incorreta
Para resolver isso precisamos trabalhar com um recurso de internacionalizao e globalizao, que
veremos mais para frente.