Aprendendo Na Prtica: Aplicativos

Web Com Asp.Net MVC em C# e

Entity Framework Code First
Tags: Framework ASP.NET MVC, Linguagem C#, Visual Studio Express
2013, Entity Framework Code First
Apresentao
 Um pouco sobre mim
Daniel Souza Makiyama
E-mail: daniel.makiyama@gmail.com
Graduado em Cincia da Computao pela FEI;
Cursando Mestrado em Cincia da Computao pela UFABC;
Microsoft Certified Professional (Desenvolvimento Web em ASP.NET 4.5);
Scio-Fundador da Donuts4u Desenvolvimento e Comunicao Via
Web
 Um pouco sobre voc
Nome
Formao
Experincia Profissional
Qual a sua experincia com Asp.Net?
O que voc espera aprender no curso de Aplicativos Web Com
Asp.Net MVC em C# e Entity Framework Code First?
 Plano de Curso
Introduo ao ASP.NET MVC; Entendendo as Views: Razor Engine;
Criando um Hello World; Helpers, Links e Mensagens de Validao;
O padro MVC;
Layout com Razor;
A Web e o Request / Response;
Rotas do MVC; Ajuste nas Telas;
O Projeto : Lista de Tarefas; Lembretes: Refatorando o Modelo;
Tarefas: Criando o Modelo POCO; Migraes do Modelo de Dados;
Scaffold: Gerando Controller e Views a partir do Linq to Entities para Contar Tarefas em Cada Lista;
Modelo;
Criando o Banco de Dados e Testando o seu ViewModels, Mudando a tipagem de suas Views;
Projeto;
Entendendo o Controller: ViewBags, Model Binders
e Validaes;
 Plano de Curso
Data Annotations; Publicando sua Aplicao no IIS;
Ajax; Ajustes Finais no Sistema (logs de acesso, erro,
modificao de estilo CSS, ajuste das mensagens e
Introduo ao Jquery;
componentes);
Views Parciais;
Espao livre pra troca de conhecimentos e
Implementando Filtros e Paginao; fechamento do curso;
Login: Estudando Forms Authentication;
Implementando Login;
Implementando Captcha;
Noes de Criptografia;
Filtros de Ao para Controle de Acesso;
 Motivao / Oportunidade
Bolsas de Iniciao Cientfica
Web Architecture:
Pesquisa e Desenvolvimento em Extensibilidade e Orientao a Objetos na
Arquitetura de Componentes e Plugins para Aplicativos na Internet e Mobile;
Web e Mobile
Robtica
Introduo ao ASP.NET MVC
adaptado de http://www.asp.net/mvc/tutorials/mvc-5
 Hello World
Abra o Visual Studio Express
2013;
No menu clique em File > New
Project;
 Hello World
Em New Project clique na
esquerda em Visual C# > Web
e selecione ASP.NET Web
Application;
Nomeie ListaDeTarefas e
clique OK;
 Hello World
Em New ASP.NET Project, clique
MVC e ento OK;

O Visual Studio cria uma

aplicao automaticamente para
voc, sem esforo!
 Executando o Hello World
Pressione F5 no teclado para
debugar a aplicao utilizando
o servidor web local IISExpress;
O Visual Studio inicializa o
navegador com a pgina inicial
da sua aplicao;
 Executando o Hello World
O site possui endereo
http://localhost:porta/ pois
trata-se de uma verso local
instalada em sua mquina,
ainda no disponvel na
internet;

Quando o Visual Studio executa

um projeto web, uma porta
randmica utilizada para o
servidor web local, ex:
http://localhost:60471;
O Padro MVC

ATUALIZA MODEL MANIPULA

VIEW CONTROLLER

VISUALIZA UTILIZA

USURIO
ASP.NET MVC
MODEL: Classes que representam os dados e a validao lgica destes
dados;

VIEWS: Arquivos template usados dinamicamente para gerar

respostas HTML;

CONTROLLERS: Recebem as solicitaes do usurio, obtm os dados a

partir dos modelos, e especificam os templates de visualizao que
retornaro como resposta ao navegador;
 Criando um Controller
No Solution Explorer, clique com o boto
direito no diretrio Controllers, clique em
Add e ento Controller;
Em Add Scaffold, clique em MVC 5
Controller Empty e clique em
Adicionar;
Nomeie o seu Controller
HelloWorldController e clique em Add;
Verifique que um novo arquivo
HelloWorldController.cs foi criado na
pasta Controllers e uma nova pasta
HelloWorld foi criada na pasta View;
Clique no arquivo
HelloWorldController.cs para abr-lo;
 Criando um Controller - Aes
Altere a ao Index para retornar
uma string Ol Mundo! <br/> Meu
nome <b>Seu Nome</b>;

Crie uma nova ao entitulada

BemVindo que retorna uma string
Seja bem-vindo ao meu aplicativo!;

Aps criar a ao, rode o aplicativo e

acesse as URLs:
http://localhost:porta/HelloWorld/
http://localhost:porta/HelloWorld/BemVindo/
A Web e o Request / Response
RESPONSE REQUEST
CLIENTE
Na web, toda a comunicao realizada atravs
de Requests (solicitaes do navegador) e
Responses (respostas do servidor). ROTAS DE
URL

Em ASP.NET MVC as requests invocam as rotas de VIEW

URL, que acessam as aes presentes nos
controllers, que preenchem os models a partir CONTROLLER
de informaes do banco de dados, que so
usados nas views, e que por fim so enviadas
em HTML como response para o cliente;
MODEL

A regra padro de roteamento ASP.NET MVC :

/[Controller]/[Ao]/[Parametros]
DB
 Rotas do MVC
O controle de Rotas est em App_Start/RouteConfig.cs

Quando voc acessa http://localhost:XXXX/ o sistema

de rotas devolve a ao Index do controller Home;

A primeira parte da URL determina o controller e a

segunda parte a ao que deve ser executada. Ex.:
http://localhost:XXXX/HelloWorld/BemVindo/ o
sistema de rotas entende esta URL como chamada ao
controller HelloWorld e ao BemVindo;

O nome do controller : NomeController, no

entanto, na URL voc no utiliza o sufixo Controller;

Caso o usurio no informe o nome da ao, por

padro o MVC buscar a ao Index. Faa um teste;
 Rotas do MVC
Acesse o HelloWorld controller e modifique a ao
Index para receber o parmetro dimenso e nome;

Rode sua aplicao e teste a URL

http://localhost:XXXX/HelloWorld/Index/?id=3&no
me=joaquim , passando diferentes nomes e
dimenses.

O smbolo ? representa o incio dos parmetros e o

smbolo & representa a separao entre os
parmetros;

O sistema de Model Binding (ligao de modelo)

do ASP.NET MVC transforma os parmetros
recebidos via QueryString (barra de endereo) em
parmetros da ao.
 Rotas do MVC
A mesma ao do exemplo anterior com os
mesmos parmetros pode ser chamada
atravs da URL:
http://localhost:XXXX/HelloWorld/Index/
3/?nome=joaquim pois o parmetro id um
parmetro especificado na rota padro;

Em ASP.NET MVC mais comum receber

parmetros especificados na rota (+SEO
friendly), do que via querystring. Modifique a
sua classe RouteConfig.cs de acordo com o
cdigo ao lado e faa um teste chamando a
URL:
http://localhost:60471/HelloWorld/Index/Joaq
uim/3
 O Projeto : Lista de Tarefas
Desenhar uma lista de tarefas pode ser
complexo!
 O Projeto : Lista de Tarefas
Mas podemos comear de forma simples,
baby steps!

Requisitos?
 O Projeto : Lista de Tarefas
Permitir o cadastro de listas de tarefas;
Permitir marcar tarefas como concludas;
Permitir cancelar tarefas;
Permitir editar tarefas;
Permitir cancelar listas de tarefas;
Permitir que usurios se cadastrem na
aplicao atravs de e-mail e senha;
 Tarefas: Criando o Modelo POCO
Instalando o Entity Framework 6

No menu Tools, selecionar Library

Package Manager e clicar em
Package Manager Console. Uma
console ser aberta no canto
inferior esquerdo, ao lado de
output;

No prompt desta console, digitar

Install-Package EntityFramework;
 Tarefas: Criando o Modelo POCO
Clicar com boto direito na pasta
Models > Add > Class;

Em Add New Item, escolher o template

Class, digitar Modelo.cs e clicar em
Add;

Na classe Modelo.cs, definir as

entidades do sistema;

Quais devem ser as entidades do

sistema?
 Tarefas: Criando o Modelo POCO
Entidades iniciais:
Lista;
Tarefas;
Usurios;
 Tarefas: Criando o Modelo POCO
Propriedades iniciais:
Nome;
Ativa;
Concluda;
E-mail;
Senha;

{ get; set; } a forma contrata de implementao do getter e setter. A forma

completa seria:

string _nome;
public string Nome
{
get
{
return _nome;
}
set
{
_nome = value;
}
}
 Tarefas: Criando o Modelo POCO
Colees:
Lista 1..n Tarefas
Usuario 1..n Listas

Chaves Estrangeiras:
Lista -> Usurio
Tarefa -> Lista

Chaves
Sugesto: Nome da Entidade + Id;
Decorar com [Key]
 Tarefas: Criando o Modelo POCO
Clicar com boto direito na pasta
Models > Add > Class;

Em Add New Item, escolher o template

Class, digitar TarefaContexto.cs e clicar
em Add;

Na classe TarefaContexto.cs, definir o

contexto de acesso aos dados;
 Tarefas: Criando o Modelo POCO
A classe que coordena a funcionalidade do
framework de entidades para um modelo de dados
a classe de context. Nesta classe voc identifica
quais entidades esto includas no modelo e pode
customizar o seu comportamento;

Importar System.Data.Entity, a classe herda de

DbContext;

A chave da string de conexo no web.config (a ser

criada em breve) passada no construtor;

Incluir uma propriedade DbSet para cada entidade

do modelo;

Sobrescrever OnModelCreating para especificar

configuraes durante a criao do modelo no
banco de dados;
 Tarefas: Criando o Modelo POCO
Caso deseje, voc pode criar uma
classe de inicializao de dados, para
testar o modelo;

Para que o inicializador seja utilizado

necessrio informar ao entity
framework via web.config da pasta raiz;
<contexts>
<context type="ListaDeTarefas.Models.TarefasContexto, ListaDeTarefas">
<databaseInitializer type="ListaDeTarefas.Models.TarefasInicializador,
ListaDeTarefas" />
</context>
 Tarefas: Criando o Modelo POCO
A string de conexo do banco de dados precisa ser especificada no web.config;
Utilizaremos LocalDb que uma verso simplificada da Engine de banco de dados SQL Express;
 Scaffold: Gerando Controller e Views a partir do Modelo

Clicar com boto direito na pasta

Controllers > Add > New Scaffolded
Item;

Em Add Scaffold, escolher o template

MVC 5 Controller with views, using
Entity Framework e clicar em Add;
 Scaffold: Gerando Controller e Views a partir do Modelo

Nome do controller: ListaController;

Classe do Modelo: Lista (Models);
Contexto: TarefasContexto (Models);

O controller e as views sero geradas;

Repita o processo para Tarefa e Usurio;

Por fim, execute o projeto pressionando

a tecla F5;
 Criando o Banco de Dados e Testando o seu Projeto
Aps fazer o Scaffold de todas as
entidades, execute o projeto
pressionando a tecla F5;

Acesse a URL
http://localhost:XXXX/Usuario/

Em alguns segundos o banco de dados

criado automaticamente e sua aplicao
simplesmente funciona!!!

...e veja, o dado de teste Curso de

Frias tambm j foi inserido;
 Criando o Banco de Dados e Testando o seu Projeto
A ferramenta de Scaffold responsvel por, a
partir de um modelo de dados, criar as aes
de CRUD: Create, Read, Update and Delete;

Clique em Create New e crie um novo

usurio;

Tente salvar sem preencher o campo Ativo: o

sistema apresentar uma mensagem para
voc, e em portugus! O sistema j consegue
inferir algumas regras de validao a partir do
modelo;

Teste tambm os links de edit, details e delete

da pgina principal;
 Criando o Banco de Dados e Testando o seu Projeto

Faa a mesma coisa para as outras

entidades, lembrando de acess-las a
partir da URL:
http://localhost:XXXX/controller/

Veja que em Tarefa, devido chave

estrangeira, o campo ListaId
representado por um combobox;

O mesmo acontece em Lista, onde

possvel atribuir o usurio Lista;
 Entendendo o Controller: ViewBags, Model Binders e Validaes

Acesse o controller ListaController e encontre as

Aes de Criao de Lista: public ActionResult
Create();

As duas aes possuem o mesmo nome

Create a diferena est na decorao do
mtodo: [HttpPost];

Na ao de get, um objeto dinmico chamado

ViewBag utilizado.

Com o Viewbag possvel definir propriedades

dinmicas, sem se preocupar com o tipo e a
declarao da varivel. Ideal para persistir
dados entre o controller e a view
correspondente;

O tempo de vida de uma ViewBag dura da

chamada do Controller at a exibio da View;
 Entendendo o Controller: ViewBags, Model Binders e Validaes

Model Binders so os responsveis por

traduzir dados enviados recebidos via
querystring, ou enviados via post de
formulrio para uma ao, como
parmetros tipados desta ao;

O Model State um dicionrio que

controla os valores submetidos ao
servidor. Alm de gravar o nome e valor
de cada campo, trambm grava erros de
validao associados. No confundir
Model State com Model Binder.

Coloque um breakpoint em ModelState.IsValid e teste

esta ao, inspecionando os elementos que compem
o ModelState;
Entendendo o Controller: ViewBags, Model Binders e Validaes

< URL: http://localhost:xxxx/Lista/Create

< URL: http://localhost:xxxx/Lista/Create
< Preenche a propriedade
< Retorna a view. Por padro ele busca uma view com o ViewBag.UsuarioId com uma lista de
mesmo nome da ao Create. Busca na pasta Lista e todos os usurios do banco
depois na pasta Shared

< Limita a origem a um request do tipo POST com variveis que podem ser vinculadas s propriedades da classe Lista
< Mecanismo de segurana para evitar submisses cross-site
< Variveis postadas transformadas em Objeto
tipado. A sintaxe Bind evita overposting
< O ModelState vlido quando no h nenhum erro de validao
entre os dados submetidos e o modelo
< Adiciona o objeto postado ao DBSet do Entity Framework, indicando que o mesmo deve ser salvo no banco de dados.
< Varre todos os DBSets buscando inseres, delees ou modificaes e as executa no banco de dados.
< Redireciona o usurio Ao Index

< Caso os dados submetidos possuam erro de validao necessrio preencher novamente o ViewBag.UsuarioId e passar para
a View o objeto lista com os dados submetidos no post, para que o formulrio seja reconstrudo com os dados que foram
enviados no submit;
 Entendendo as Views: Razor Engine
Em solution explorer, localize a pasta
Views -> Lista e clique no arquivo
Create.cshtml

O primeiro elemento @model o

modelo para o qual a view est
fortemente tipada;

A Engine de Views Razor utilizada para

montagem das Views. Ela permite uma
combinao muito enxuta e flexvel de
HTML e Cdigo;
 Entendendo as Views: Razor Engine
Para chamar um comando de cdigo no Razor
basta digitar @ antes do cdigo, ex:
@Html.ActionLink...;

Um Cdigo Razor pode ser colocado em

qualquer parte de um HTML;

Para escrever um trecho de cdigo com mais

de uma linha (ex: definio de variveis) em
Razor basta delimit-lo com chaves;

Para incluir um HTML dentro de um trecho de

cdigo Razor (como em um foreach), a tag
deve ter abertura e fechamento;
 Entendendo as Views: Razor Engine
A sintaxe @using (Html.BeginForm()) define a
criao de um formulrio HTML <form
action=></form>;

@Html.AntiForgeryToken() um mecanismo
de segurana para evitar posts de fora do
domnio do site;

@Html.ActionLink definem a criao de links

para aes. No caso ao lado o link para a
ao Index e tem como Label: Back to List;

A @section Scripts definem os javascripts da

pgina. O bundle jqueryval possui uma verso
empacotada dos scripts de validao Jquery;
Helpers, Links e Mensagens de Validao
< Incio do Formulrio
< mecanismo de segurana para evitar posts de fora do domnio do site

< sumrio de erros de validao. Opo true indica que erros das propriedades no devem ser apresentados no sumrio.

< helper p/ campo de label. define label automaticamente com base no modelo
< helper para Nome, cria e preenche textbox automaticamente com base no modelo
< helper que apresenta erros de validao da propriedade

< helper p/ Lista de Usurios, cria e preenche combobox automaticamente com base no modelo e
valor padro vazio

< Boto para Submeter Formulrio

< Fim do Formulrio

 Layout com Razor
As views definem o miolo das pginas. O
layout em volta, que geralmente padro
para a maioria das pginas definido na
pgina _Layout.cshtml

O cabealho e footer HTML est na

_Layout.cshtml. ViewBag.Title alterado em
todas as views para assumir o nome da View
em questo. No header declarado um
pacote de estilo e outro de javascript;

Na _Layout.cshtml temos o menu superior

responsivo do site;

Exerccio: alterar a _Layout.cshtml para

refletir a nova aplicao;
 Layout com Razor
O cdigo Html.Partial renderiza uma
partial view que funciona como uma
view parcial dentro de outra view;

O cdigo RenderBody() informa que

neste local sero renderizadas as Views
que tiverem _Layout.cshtml como base;

Abaixo temos o rodap, dois pacotes

(bundles) de javascript;
 Layout com Razor
Para definir um arquivo de Layout para as
suas pginas voc deve especific-lo no
arquivo _ViewStart.cshtml dentro da
pasta Views;

Menu Superior alterado

Execute o projeto (F5) aps as alteraes
realizadas na _Layout.cshtml;

A primeira pgina ainda aponta para o

controller Home. Acesse RouteConfig.cs
e altere a rota padro para apontar para
o controller Tarefa, ao Index;
 Ajustes nas Telas
Vamos ajustar as telas para ficarem mais
de acordo com nosso sistema de Tarefas:

Alterar textos das Views de Ingls para

Portugus;

Alterar sequncia e nomes de colunas

nas telas de lista;
 Lembretes: Refatorando o Modelo
As listas de tarefas devem possuir data
para serem realizadas. Para determinar
estas datas devemos incluir um campo
de data e hora nas listas. O ponto de
interrogao indica que o prazo no
obrigatrio;

Incluir novo campo nas Views;

 Migraes do Banco de Dados
Como o seu modelo mudou voc precisa
atualizar o seu banco de dados utilizando
Code First Migrations;

Acesse o prompt do Package Manager

Console, digite Enable-Migrations -
ContextTypeName
ListaDeTarefas.Models.TarefasContexto e d
enter;

Automaticamente a pasta migration criada

com um arquivo de configuraes e outro de
criao inicial;
 Migraes do Banco de Dados
Abra o arquivo XXXX_initialCreate.cs. Neste
arquivo est a migrao inicial, que cria as
tabelas da verso inicial de modelo do
sistema, veja que o campo novo Prazo no
est nesta verso;
 Migraes do Banco de Dados
A classe Configuration possui as
configuraes bsicas de migrao. Quando
o parmetro AutomaticMigrationsEnabled
false, as migraes devem ser executadas
manualmente atravs de comandos no
package manager console (maior controle e
menor quantidade de erros quando o
desenvolvimento em equipe);

O mtodo Seed um mtodo de

inicializao do banco aps a migrao para
a ltima verso. idntico classe
TarefasInicializador.cs j implementada;
 Migraes do Banco de Dados
As migraes ficam registradas no banco de
dados na tabela __MigrationHistory;
 Migraes do Banco de Dados
Para incluir o novo campo Prazo, uma nova
migrao deve ser gerada;

No package manager console informar o

comando : add-migration dd-mm-yyyy-id ,
ou seja, dia-ms-ano e um identificador
 Linq to Entities para Contar Tarefas em Cada Lista;

Linq to Entities permite navegao entre

entidades que possuem relacionamento por
isso possvel item.Tarefas, sendo item um
elemento de Lista;
ViewModels, Mudando a tipagem de suas
Views
ViewModel
Voc pode criar classe para
representar informaes que
sero enviadas para sua view
que no sejam somente uma
entidade;
Action do Controller
Uma das propriedades do
ViewModel pode ser uma
entidade do Modelo;
ViewModels, Mudando a tipagem de suas
Views
Evita o uso de ViewBags e cria um
cdigo mais estruturado e gerencivel
nas Views, com menor probabilidade
de erros de runtime;

Veja ao lado o cdigo da View, tipado

para ListaViewModel. Para acessar a
entidade Lista basta informar a
propriedade Model.Listas, criada
dentro do ViewModel;
Data Annotations
So decoraes nas
propriedades que atribuem
novas regras e restries s
mesmas;

No h limite para o nmero

de decoraes em uma
propriedade;
View Parciais
So Views que podem ser
includas dentro de outras
Views;

Permite alta flexibilidade;

Ajax Introduo ao JQuery
Cdigo Cliente;
Ajax Acessar servidor sem
recarregar a pgina
Implementando Filtros e Paginao usando
Ajax
Action de Busca
Para implementar busca
basta incluir formulrio
apontando para ao de
busca, um input e um boto
de submit, receber o termo View de Index com Form de Busca
na ao, filtrar e retornar o
resultado para a mesma
View, ou outra view de
resultado;
Implementando Filtros e Paginao usando
Ajax
Action de Busca
Para implementar busca
basta incluir formulrio
apontando para ao de
busca, um input e um boto
de submit, receber o termo View de Index com Form de Busca
na ao, filtrar e retornar o
resultado para a mesma
View, ou outra view de
resultado;
Implementando Filtros e Paginao
Aes de Paginao

Para implementar paginao

basta incluir uma nova ao
e os links de paginao na
View. importante incluir o
parmetro pgina atual no
ViewModel tambm;
View com Paginao

Para paginar a lista precisa

estar ordenada;
Implementando Filtros e Paginao
Aes de Paginao

Para implementar paginao

basta incluir uma nova ao
e os links de paginao na
View. importante incluir o
parmetro pgina atual no
ViewModel tambm;
View com Paginao

Para paginar a lista precisa

estar ordenada;
Login: Estudando Forms Authentication
Colocar authentication
mode Forms (Web.Config)
Login: Estudando Forms Authentication
Criar View com Formulrio
de Login;
Login: Estudando Forms Authentication
Implementar
Actions;
Filtros de Ao para Controle de Acesso
Decorao
authorize no
controle restringe
acesso somente a
usurios logados;

Pode ser colocado

em aes;
Implementando Captcha
Utilizao do NUGET

https://www.nuget.org/pa
ckages/Captcha/
Noes de Criptografia
Importante criptografar senhas
e gravar criptografado no
banco de dados;

Nem o desenvolvedor que possui

acesso ao banco de dados deve ter
acesso senha;
Publicando sua Aplicao no IIS
Diretrio Virtual
Application Pool
Binding
DNS
Ajustes Finais no Sistema
Log de Erros
Css
Mensagens e
Componentes
Dvidas