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
	
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..
 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()
 };
 
 //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/>
 <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>
Criando a página de consulta:
@{
 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="btn btn-primary" id="botaoconsulta">
 Consultar Contas
 </button>
 <br/>
 <br/>
 <div id="mensagem"></div>
 </div>
 <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; }
 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();
 }
 }
 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) {
 //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/>
 <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.
@{
 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' dográfico
 $.each(dadosGrafico, function (i, point) {
 point.y = point.data;
 });
 $("#grafico").highcharts({
 chart: { type: "pie" },
 title: { text: "Resumo de Contas" },
 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>
 </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
 }
}
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()
 {
 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...
16