Desenvolvimento Web Com Asp.Net MVC em C# C Sharp com MVC e Entity Framewo… · Aprendendo Na...

Click here to load reader

  • date post

    29-Jul-2018
  • Category

    Documents

  • view

    220
  • download

    2

Embed Size (px)

Transcript of Desenvolvimento Web Com Asp.Net MVC em C# C Sharp com MVC e Entity Framewo… · Aprendendo Na...

  • Aprendendo Na Prtica: Aplicativos Web Com Asp.Net MVC em C# e

    Entity Framework Code FirstTags: Framework ASP.NET MVC, Linguagem C#, Visual Studio Express

    2013, Entity Framework Code First

  • Apresentao

  • Um pouco sobre mim

    Daniel Souza MakiyamaE-mail: [email protected] 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;

    Criando um Hello World;

    O padro MVC;

    A Web e o Request / Response;

    Rotas do MVC;

    O Projeto : Lista de Tarefas;

    Tarefas: Criando o Modelo POCO;

    Scaffold: Gerando Controller e Views a partir do Modelo;

    Criando o Banco de Dados e Testando o seu Projeto;

    Entendendo o Controller: ViewBags, Model Binders e Validaes;

    Entendendo as Views: Razor Engine;

    Helpers, Links e Mensagens de Validao;

    Layout com Razor;

    Ajuste nas Telas;

    Lembretes: Refatorando o Modelo;

    Migraes do Modelo de Dados;

    Linq to Entities para Contar Tarefas em Cada Lista;

    ViewModels, Mudando a tipagem de suas Views;

  • Plano de Curso

    Data Annotations;

    Ajax;

    Introduo ao Jquery;

    Views Parciais;

    Implementando Filtros e Paginao;

    Login: Estudando Forms Authentication;

    Implementando Login;

    Implementando Captcha;

    Noes de Criptografia;

    Filtros de Ao para Controle de Acesso;

    Publicando sua Aplicao no IIS;

    Ajustes Finais no Sistema (logs de acesso, erro, modificao de estilo CSS, ajuste das mensagens e componentes);

    Espao livre pra troca de conhecimentos e fechamento do curso;

  • 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 MVCadaptado 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

    MODEL

    VIEW CONTROLLER

    VISUALIZA UTILIZA

    MANIPULAATUALIZA

    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!
    Meu nome Seu Nome;

    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

    Na web, toda a comunicao realizada atravs de Requests (solicitaes do navegador) e Responses (respostas do servidor).

    Em ASP.NET MVC as requests invocam as rotas de URL, que acessam as aes presentes nos controllers, que preenchem os models a partir de informaes do banco de dados, que so usados nas views, e que por fim so enviadas em HTML como response para o cliente;

    A regra padro de roteamento ASP.NET MVC : /[Controller]/[Ao]/[Parametros]

    VIEW

    DB

    CONTROLLER

    ROTAS DE URL

    CLIENTE

    MODEL

    RESPONSE REQUEST

  • 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&nome=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/Joaquim/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 emAdd;

    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 clicarem 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 identificaquais entidades esto includas no modelo e podecustomizar o seu comportamento;

    Importar System.Data.Entity, a classe herda de DbContext;

    A chave da string de conexo no web.config (a sercriada em breve) passada no construtor;

    Incluir uma propriedade DbSet para cada entidadedo modelo;

    Sobrescrever OnModelCreating para especificarconfiguraes 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;

  • 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

    < Preenche a propriedade ViewBag.UsuarioId com uma lista de todos os usurios do banco

    < Retorna a view. Por padro ele busca uma view com o mesmo nome da ao Create. Busca na pasta Lista e depois na pasta Shared

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

    < 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;

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

  • 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 ;

    @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

    < Fim do Formulrio

    < Boto para Submeter 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

  • 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;

    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;

    Menu Superior alterado

  • 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 Voc pode criar classe para

    representar informaes que sero enviadas para sua view que no sejam somente uma entidade;

    Uma das propriedades do ViewModel pode ser uma entidade do Modelo;

    ViewModel

    Action do Controller

  • 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 Para implementar busca

    basta incluir formulrio apontando para ao de busca, um input e um boto de submit, receber o termo na ao, filtrar e retornar o resultado para a mesma View, ou outra view de resultado;

    Action de Busca

    View de Index com Form de Busca

  • Implementando Filtros e Paginao usando Ajax Para implementar busca

    basta incluir formulrio apontando para ao de busca, um input e um boto de submit, receber o termo na ao, filtrar e retornar o resultado para a mesma View, ou outra view de resultado;

    Action de Busca

    View de Index com Form de Busca

  • Implementando Filtros e 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;

    Para paginar a lista precisa estar ordenada;

    Aes de Paginao

    View com Paginao

  • Implementando Filtros e 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;

    Para paginar a lista precisa estar ordenada;

    Aes de Paginao

    View com Paginao

  • 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/packages/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

    ?