Aula_03 12 18

Prévia do material em texto

Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
1 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.ComponentModel.DataAnnotations; //validaçõesss 
 
namespace Projeto.Presentation.Models 
{ 
 public class ContaCadastroModel 
 { 
 [MinLength(6, ErrorMessage = "Por favor, informe no mínimo 
 {1} caracteres.")] 
 [MaxLength(50, ErrorMessage = "Por favor, informe no máximo 
 {1} caracteres.")] 
 [Required(ErrorMessage = "Por favor, informe o nome da conta.")] 
 public string Nome { get; set; } 
 
 [Required(ErrorMessage = "Por favor, informe o valor da conta.")] 
 public decimal Valor { get; set; } 
 
 [Required(ErrorMessage = "Por favor, informe a data da conta.")] 
 public DateTime Data { get; set; } 
 
 [Required(ErrorMessage = "Por favor, informe o tipo da conta.")] 
 public string Tipo { get; set; } 
 } 
} 
 
Voltando ao ContaController.cs 
Exibindo as mensagens de erro de validação 
 
using System; 
using System.Collections; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using Projeto.Presentation.Models; 
 
namespace Projeto.Presentation.Controllers 
{ 
 public class ContaController : Controller 
 { 
 // GET: Conta/Cadastro 
 public ActionResult Cadastro() 
 { 
 return View(); 
 } 
 
 // GET: Conta/Consulta 
 public ActionResult Consulta() 
 { 
 return View(); 
 } 
 
 public JsonResult CadastrarConta(ContaCadastroModel model) 
 { 
 //verificando se os dados da model 
 //passaram nas regras de validação.. 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
2 
 if(ModelState.IsValid) 
 { 
 
 //mensagem.. 
 return Json("Cadastro realizado com sucesso."); 
 } 
 else 
 { 
 Hashtable erros = new Hashtable(); 
 
 //percorrer o ModelState 
 foreach(var s in ModelState) 
 { 
 //verificar se o elemento do ModelState 
 //contem erro de validação 
 if(s.Value.Errors.Count > 0) 
 { 
 //armazenar no hashtable.. 
 erros[s.Key] = s.Value.Errors 
 .Select(e => e.ErrorMessage).First(); 
 } 
 } 
 
 Response.StatusCode = 400; //gerando um erro de servidor 
 return Json(erros); 
 } 
 } 
 } 
} 
 
Na página: 
 
@{ 
 ViewBag.Title = "Cadastro"; 
 Layout = "~/Views/Shared/Layout.cshtml"; 
} 
 
@section javascript{ 
 
 <script> 
 
 //função que inicia o jquery na página.. 
 $(document).ready(function () { 
 
 //criando um evento para quando o 
 //botão de cadastro for clicado.. 
 $("#botaocadastro").click(function () { 
 
 //limpando todas as mensagens de validação 
 $(".erro_validacao").html(""); 
 
 //criando um JSON contendo os valores dos campos 
 var model = { 
 Nome: $("#nomeconta").val(), 
 Valor: $("#valorconta").val(), 
 Data: $("#dataconta").val(), 
 Tipo: $("#tipoconta").val() 
 }; 
 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
3 
 //requisição AJAX para o servidor.. 
 $.ajax({ 
 type: "POST", 
 url: "/Conta/CadastrarConta", 
 data: model, 
 success: function (d) { //promisse 
 
 $(".campo_cadastro").val(""); 
 
 $("#mensagem").html(d); 
 $("#janela").modal('toggle'); 
 }, 
 error: function (e) { //promisse 
 
 if (e.status == 400) 
 { 
 var erros = e.responseJSON; 
 
 //erros de validação.. 
 $("#erro_nomeconta").html(erros.Nome); 
 $("#erro_valorconta").html(erros.Valor); 
 $("#erro_dataconta").html(erros.Data); 
 $("#erro_tipoconta").html(erros.Tipo); 
 } 
 
 } 
 }); 
 
 }); 
 
 }); 
 
 </script> 
 
} 
 
<h4>Cadastro de Contas</h4> 
<a href="/Home/Index">Página inicial</a> 
<hr/> 
 
<div class="row"> 
 <div class="col-md-4"> 
 
 <label>Nome da Conta:</label> 
 <input type="text" class="form-control campo_cadastro" 
 id="nomeconta" placeholder="Digite aqui"/> 
 <span id="erro_nomeconta" class="text-danger erro_validacao"></span> 
 <br/> 
 
 <label>Valor da Conta:</label> 
 <input type="text" class="form-control campo_cadastro" 
 id="valorconta" placeholder="Digite aqui"/> 
 <span id="erro_valorconta" class="text-danger erro_validacao"></span> 
 <br/> 
 
 <label>Data da Conta:</label> 
 <input type="date" class="form-control campo_cadastro" 
 id="dataconta"/> 
 <span id="erro_dataconta" class="text-danger erro_validacao"></span> 
 <br/> 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
4 
 <label>Tipo da Conta:</label> 
 <select class="form-control campo_cadastro" id="tipoconta"> 
 <option value="">Selecione uma opção</option> 
 <option value="Receita">Receita</option> 
 <option value="Despesa">Despesa</option> 
 </select> 
 <span id="erro_tipoconta" class="text-danger erro_validacao"></span> 
 <br/> 
 
 <button class="btn btn-success" id="botaocadastro"> 
 Cadastrar Conta 
 </button> 
 
 <br/> 
 <br/> 
 
 <div id="janela" class="modal fade" style="margin-top: 20%;"> 
 <div class="modal-dialog"> 
 <div class="modal-content"> 
 <div class="modal-body text-center"> 
 
 <h4 id="mensagem"></h4> 
 
 <hr/> 
 
 <button class="btn btn-info btn-sm" 
 data-dismiss="modal"> 
 Fechar Janela 
 </button> 
 
 </div> 
 </div> 
 </div> 
 </div> 
 
 </div> 
</div> 
 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
5 
 
 
Criando a página de consulta: 
 
 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
6 
 
 
 
@{ 
 ViewBag.Title = "Consulta"; 
 Layout = "~/Views/Shared/Layout.cshtml"; 
} 
 
@section javascript{ 
 
 <script> 
 //TODO 
 </script> 
 
} 
 
<h4>Consulta de Contas</h4> 
<a href="/Home/Index">Página inicial</a> 
<hr /> 
 
<div class="row"> 
 <div class="col-md-3"> 
 
 <label>Data de:</label> 
 <input type="date" id="datainicio" class="form-control"/> 
 <br/> 
 
 <label>Data até:</label> 
 <input type="date" id="datafim" class="form-control"/> 
 <br/> 
 
 <button class="btnbtn-primary" id="botaoconsulta"> 
 Consultar Contas 
 </button> 
 <br/> 
 <br/> 
 
 <div id="mensagem"></div> 
 
 </div> 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
7 
 <div class="col-md-9"> 
 
 <table id="tabela" class="table table-hover table-bordered 
 table-striped"> 
 <thead> 
 <tr> 
 <th>Código</th> 
 <th>Nome da Conta</th> 
 <th>Valor</th> 
 <th>Data</th> 
 <th>Tipo</th> 
 </tr> 
 </thead> 
 <tbody> 
 
 </tbody> 
 <tfoot> 
 <tr> 
 <td colspan="5"> 
 Quantidade de contas: <span id="quantidade"></span> 
 </td> 
 </tr> 
 </tfoot> 
 </table> 
 
 </div> 
</div> 
 
 
 
Criando uma classe Model para a consulta de contas: 
 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
 
namespace Projeto.Presentation.Models 
{ 
 public class ContaConsultaModel 
 { 
 public int IdConta { get; set; } 
 public string Nome { get; set; } 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
8 
 public string Valor { get; set; } 
 public string Data { get; set; } 
 public string Tipo { get; set; } 
 } 
} 
 
Voltando ao controller: 
 
using System; 
using System.Collections; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using Projeto.Presentation.Models; 
 
namespace Projeto.Presentation.Controllers 
{ 
 public class ContaController : Controller 
 { 
 // GET: Conta/Cadastro 
 public ActionResult Cadastro() 
 { 
 return View(); 
 } 
 
 // GET: Conta/Consulta 
 public ActionResult Consulta() 
 { 
 return View(); 
 } 
 
 public JsonResult CadastrarConta(ContaCadastroModel model) 
 { 
 //verificando se os dados da model 
 //passaram nas regras de validação.. 
 if(ModelState.IsValid) 
 { 
 
 //mensagem.. 
 return Json("Cadastro realizado com sucesso."); 
 } 
 else 
 { 
 Hashtable erros = new Hashtable(); 
 
 //percorrer o ModelState 
 foreach(var s in ModelState) 
 { 
 //verificar se o elemento do 
 //ModelState contem erro de validação 
 if(s.Value.Errors.Count > 0) 
 { 
 //armazenar no hashtable.. 
 erros[s.Key] = s.Value.Errors.Select 
 (e => e.ErrorMessage).First(); 
 } 
 } 
 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
9 
 Response.StatusCode = 400; //gerando um erro de servidor 
 return Json(erros); 
 } 
 } 
 
 
 public JsonResult ConsultarContas() 
 { 
 //criando uma lista da classe de modelo.. 
 List<ContaConsultaModel> lista = new List<ContaConsultaModel>(); 
 
 lista.Add(new ContaConsultaModel 
 { 
 IdConta = 1, Nome = "Salário", Valor = "R$ 2.000,00", 
 Data = "03/12/2018", Tipo = "Receita" 
 }); 
 
 lista.Add(new ContaConsultaModel 
 { 
 IdConta = 2, Nome = "Luz", Valor = "R$ 300,00", 
 Data = "04/12/2018", Tipo = "Despesa" 
 }); 
 
 lista.Add(new ContaConsultaModel 
 { 
 IdConta = 3, Nome = "Aluguel", Valor = "R$ 1.000,00", 
 Data = "05/12/2018", Tipo = "Despesa" 
 }); 
 
 //retornando a lista.. 
 return Json(lista); 
 } 
 } 
} 
 
Voltando para a página de consulta: 
 
 
@{ 
 ViewBag.Title = "Consulta"; 
 Layout = "~/Views/Shared/Layout.cshtml"; 
} 
 
@section javascript{ 
 
 <script> 
 
 //iniciando o jquery na página.. 
 $(document).ready(function () { 
 
 //criando um evento ao clicar no botão de consulta.. 
 $("#botaoconsulta").click(function () { 
 
 //requisição AJAX para o servidor.. 
 $.ajax({ 
 type: "POST", 
 url: "/Conta/ConsultarContas", 
 data: {}, 
 success: function (d) { 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
10 
 //verificar se o array contem elementos.. 
 if (d.length > 0) 
 { 
 var linhas = ""; 
 
 //varrendo o retorno do servidor.. 
 $.each(d, function (i, conta) { 
 linhas += "<tr>"; 
 linhas += "<td>" + conta.IdConta + "</td>"; 
 linhas += "<td>" + conta.Nome + "</td>"; 
 linhas += "<td>" + conta.Valor + "</td>"; 
 linhas += "<td>" + conta.Data + "</td>"; 
 linhas += "<td>" + conta.Tipo + "</td>"; 
 linhas += "</tr>"; 
 }); 
 
 $("#tabela tbody").html(linhas); 
 $("#quantidade").html(d.length); 
 
 $("#tabela").show(); 
 } 
 else 
 { 
 $("#tabela").hide(); 
 } 
 }, 
 error: function (e) { 
 //imprimir o erro no console do navegador.. 
 console.log(e); 
 } 
 }); 
 
 }); 
 
 }); 
 
 </script> 
 
} 
 
<h4>Consulta de Contas</h4> 
<a href="/Home/Index">Página inicial</a> 
<hr /> 
 
<div class="row"> 
 <div class="col-md-3"> 
 
 <label>Data de:</label> 
 <input type="date" id="datainicio" class="form-control"/> 
 <br/> 
 
 <label>Data até:</label> 
 <input type="date" id="datafim" class="form-control"/> 
 <br/> 
 
 <button class="btn btn-primary" id="botaoconsulta"> 
 Consultar Contas 
 </button> 
 <br/> 
 <br/> 
 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
11 
 <div id="mensagem"></div> 
 </div> 
 <div class="col-md-9"> 
 <table id="tabela" class="table table-hover table-bordered table-striped" 
 style="display: none;"> 
 <thead> 
 <tr> 
 <th>Código</th> 
 <th>Nome da Conta</th> 
 <th>Valor</th> 
 <th>Data</th> 
 <th>Tipo</th> 
 </tr> 
 </thead> 
 <tbody> 
 
 </tbody> 
 <tfoot> 
 <tr> 
 <td colspan="5"> 
 Quantidade de contas: <span id="quantidade"></span> 
 </td> 
 </tr> 
 </tfoot> 
 </table> 
 </div> 
</div> 
 
HighCharts (https://www.highcharts.com/) 
API para geração de gráficos em Javascript.Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
12 
 
@{ 
 ViewBag.Title = "Consulta"; 
 Layout = "~/Views/Shared/Layout.cshtml"; 
} 
 
@section javascript{ 
 
 <script src="http://code.highcharts.com/highcharts.js"></script> 
 <script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
 <script> 
 
 //iniciando o jquery na página.. 
 $(document).ready(function () { 
 
 //criando um evento ao clicar no botão de consulta.. 
 $("#botaoconsulta").click(function () { 
 
 //requisição AJAX para o servidor.. 
 $.ajax({ 
 type: "POST", 
 url: "/Conta/ConsultarContas", 
 data: {}, 
 success: function (d) { 
 
 //verificar se o array contem elementos.. 
 if (d.length > 0) 
 { 
 var linhas = ""; 
 
 //varrendo o retorno do servidor.. 
 $.each(d, function (i, conta) { 
 linhas += "<tr>"; 
 linhas += "<td>" + conta.IdConta + "</td>"; 
 linhas += "<td>" + conta.Nome + "</td>"; 
 linhas += "<td>" + conta.Valor + "</td>"; 
 linhas += "<td>" + conta.Data + "</td>"; 
 linhas += "<td>" + conta.Tipo + "</td>"; 
 linhas += "</tr>"; 
 }); 
 
 $("#tabela tbody").html(linhas); 
 $("#quantidade").html(d.length); 
 
 $("#tabela").show(); 
 
 //gerando os dados gráfico.. 
 var dadosGrafico = []; 
 
 dadosGrafico.push({ name: "Receitas", data: 2000 }); 
 dadosGrafico.push({ name: "Despesas", data: 1300 }); 
 
 //configurar o eixo 'y' do gráfico 
 $.each(dadosGrafico, function (i, point) { 
 point.y = point.data; 
 }); 
 
 $("#grafico").highcharts({ 
 chart: { type: "pie" }, 
 title: { text: "Resumo de Contas" }, 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
13 
 series: [ { data : dadosGrafico } ] 
 }); 
 } 
 else 
 { 
 $("#tabela").hide(); 
 } 
 }, 
 error: function (e) { 
 //imprimir o erro no console do navegador.. 
 console.log(e); 
 } 
 }); 
 
 }); 
 
 }); 
 
 </script> 
 
} 
 
<h4>Consulta de Contas</h4> 
<a href="/Home/Index">Página inicial</a> 
<hr /> 
 
<div class="row"> 
 <div class="col-md-3"> 
 
 <label>Data de:</label> 
 <input type="date" id="datainicio" class="form-control"/> 
 <br/> 
 
 <label>Data até:</label> 
 <input type="date" id="datafim" class="form-control"/> 
 <br/> 
 
 <button class="btn btn-primary" id="botaoconsulta"> 
 Consultar Contas 
 </button> 
 <br/> 
 <br/> 
 
 <div id="mensagem"></div> 
 
 </div> 
 <div class="col-md-9"> 
 
 <div id="grafico"></div> 
 
 <br/> 
 
 <table id="tabela" class="table table-hover table-bordered table-striped" 
 style="display: none;"> 
 <thead> 
 <tr> 
 <th>Código</th> 
 <th>Nome da Conta</th> 
 <th>Valor</th> 
 <th>Data</th> 
 <th>Tipo</th> 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
14 
 </tr> 
 </thead> 
 <tbody> 
 </tbody> 
 <tfoot> 
 <tr> 
 <td colspan="5"> 
 Quantidade de contas: <span id="quantidade"></span> 
 </td> 
 </tr> 
 </tfoot> 
 </table> 
 </div> 
</div> 
 
 
 
0 - Modelagem de entidades 
 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace Projeto.Entities.Types 
{ 
 public enum TipoConta 
 { 
 Receita = 1, 
 Despesa = 2 
 } 
} 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
15 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using Projeto.Entities.Types; //importando.. 
 
namespace Projeto.Entities 
{ 
 public class Conta 
 { 
 public int IdConta { get; set; } 
 public string NomeConta { get; set; } 
 public DateTime DataConta { get; set; } 
 public decimal ValorConta { get; set; } 
 public TipoConta TipoConta { get; set; } 
 
 public Conta() 
 { 
 
 } 
 
 public Conta(int idConta, string nomeConta, 
 DateTime dataConta, decimal valorConta, TipoConta tipoConta) 
 { 
 IdConta = idConta; 
 NomeConta = nomeConta; 
 DataConta = dataConta; 
 ValorConta = valorConta; 
 TipoConta = tipoConta; 
 } 
 
 public override string ToString() 
 { 
 return $"Id: {IdConta}, Nome: {NomeConta}, Data: {DataConta}, 
 Valor: {ValorConta}, Tipo: {TipoConta}"; 
 } 
 } 
} 
 
3 - Camada de Acesso a Dados: 
 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Data.SqlClient; 
 
namespace Projeto.Repositories 
{ 
 public class Conexao 
 { 
 public SqlConnection Connection { get; set; } 
 public SqlCommand Command { get; set; } 
 public SqlDataReader DataReader { get; set; } 
 public SqlTransaction Transaction { get; set; } 
 
 public void AbrirConexao() 
 { 
 
 
 
Treinamento em C# WebDeveloper 
 
Aula 
15 
Segunda-feira, 03 de Dezembro de 2018 
 
 
Desenvolvimento Web com Asp.Net MVC 
 
 
16 
 Connection = new SqlConnection(); 
 Connection.Open(); 
 } 
 
 public void FecharConexao() 
 { 
 Connection.Close(); 
 } 
 } 
} 
 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace Projeto.Repositories 
{ 
 public class ContaRepository : Conexao 
 { 
 
 } 
} 
 
Continua...