MVC e Entity Framework Parte 2

Caro(a) Leitor(a), gostaria de informar que este artigo é uma continuação da parte 1 publicado anteriormente no link abaixo. Antes de começar a ler este artigo, comece pela parte 1.

Link: http://ecode10.com/artigo/1657/MVC-e-Entity-Framework-Parte-1

O que falei na parte 1 não vou repetir nesta parte 2, vou continuar o passo a passo. bem simples. Na parte 1 nós falamos do banco de dados pronto e da string de conexão.

Ferramenta: Visual Studio 2012

Plataforma: Web MVC

Linguagem: C#

Banco de dados: SQL Server 2008

Criamos uma classe de contexto chamada iSACContext.cs herdando de DbContext. Criamos uma classe que é exatamente a tabela do banco de dados, ou seja, possui os mesmos atributos.

É uma tabela simples chamada Sites, ela possui os atributos CHSite, NOSite e SITSite, a chave primária, nome do site e situação do site. Essa classe Site.cs foi criada na pasta Models do projeto. Esse é o primeiro passo que precisa ser feito depois da conexão com o banco de dados. Listagem 1.

Listagem 1 - Classe Site.cs dentro da pasta Models

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.Entity;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

namespace MVCSAC.Models

{

    public class Site

    {

        [Key]

        public int CHSite { get; set; }

        [Required(ErrorMessage=("Digite o nome do site."))]

        [Display(Name="Nome do Site")]

        public string NOSite { get; set; }

        [Required(ErrorMessage=("Digite a situação"))]

        [Display(Name="Situação")]

        public string SITSite { get; set; }

    }

}

Depois da “Model” criada, passamos para a “Controller”. A “Controller” fica em outra pasta chamada “Controllers” no plural. A classe deve ser ser chamada com o mesmo prefixo e a palavra “controller”, por exemplo: SiteController.cs. 

Para criar, basta clicar com o botão direito em cima da pasta, escolha a opção “Add” e depois “Controller”. Figura 1.

Figura 1 - Criando “Controller” 

Clicando na opção “Controller”, aparece outra tela para colocar o nome e escolher o tipo de “template” apropriado. Lembrando que neste primeiro momento, escolheremos uma opção simples e vazia “empty”. Imagem 2.

Figura 2 - Colocando o nome no “Controller” e escolhendo “template”

Note que na figura 2, é colocado o nome como “SiteController” e o “template” escolhido como MVC controller with empty read/write actions. Depois disso clique no botão Add.

Dentro desse “Controller” são criados métodos específicos do MVC. Por exemplo, o método chamado “Index” é acionado quando alguém entra na primeira página. Toda vez que alguém digitar o endereço http://localhost:8080/MVC/Site o primeiro método que o código vai passar é o “Index”.

Se você precisa preencher alguma “dropboxlist” ou qualquer outro objeto, preencha-o dentro do método “Index”. Continuando o exemplo aqui, para preencher uma lista, busquei diretamente do banco de dados.

Antes criei uma instância da classe de contexto falada na primeira parte de outro artigo, a parte 1. Listagem 2.

Listagem 2 - Gerando instância e mostrando Index.

public class SiteController : Controller

{

        iSACContext db = new iSACContext();

        //

        // GET: /Site/

        public ActionResult Index()

        {

            var site = db.Sites.ToList();

            return View(site);

        }

}

Veja que antes da classe Index(), adicionei a linha iSACContext db = new iSACContext(). Essa linha significa que a classe está preparada para buscar as informações dentro do banco de dados.

A variável “db” pode ser usada na classe toda. Posso usá-la pra tudo. Passando agora para classe “Index”, eu escrevi duas linhas. A primeira para buscar uma lista de coisas e a outra para mostrar os dados na página.

Quando crio o “var site = db.” e adiciono o ponto final, aparece todas as classe disponíveis para acesso ao banco de dados. Figura 3.

Figura 3 - Clicando o ponto e aparecendo classes.

Todas as classes que aparecem (mostradas na figura 3) estão disponíveis para o uso direto com o banco de dados. A classe Sites funciona como se fosse uma tabela no SQL Server.

Note também que estas classes são as mesmas criadas dentro da pasta “Models” e referencias como tabelas na classe de contexto. Listagem 3.

Listagem 3 - Classe de Contexto

    public class iSACContext : DbContext

    {

        //Tabelas

        public DbSet<Site> Sites { get; set; }

        public DbSet<Usuario> Usuarios { get; set; }

        public DbSet<Chamado> Chamados { get; set; }

        public DbSet<Resposta> Respostas { get; set; }

    }

A listagem 3 mostra as variáveis de contexto, isto é, aquelas ligadas ao meu banco de dados SQL Server 2008.

Continuando com o método “Index”, a variável criada chamada “sites” retorna a uma lista de dados (se houver dados na tabela), ou seja, na parte da “View”. Por isso o return View(sites);. 

Com MVC, daqui pra frente tudo funciona com “View”. No nosso caso CSHTML. Depois da classe “Index”, precisamos gerar a parte do HTML, aquela parte onde mostra para o usuário o resultado final.

Para revisar, até agora fizemos a parte de banco de dados na classe de contexto, depois criamos as “models”, agora a “controller” e classe “Index”. Nenhuma delas é a parte de HTML.

No modo MVC, a parte HTML virou CSHTML. Para gerar a parte do usuário, basta clicar em cima do método “Index” localizado dentro da pasta “Controllers”. A figura 4 mostra como funciona.

Figura 4 - Gerando View

Escolhendo “Add View”, uma nova tela aparece com algumas opções. Hoje temos dois tipos de “engine”, a primeira ASPX (C#), aquela que já conhecemos e a outra chamada “Razor” (CSHTML). 

Não vou explicar agora a diferença entre as duas opções, mas vou escolher a opção nova chamada “Razor”. O próximo passo é criar um tipo forte para a View, ou seja, basta indicar a classe “model” chamada “Site” criada dentro da pasta “Models”.

Existe ainda um “template” pra ser escolhido, no nosso caso será uma lista, ou List. Veja a figura 5.

Figura 5 - Adicionando informações para gerar a View

Note que a parte de “Use a layout or master page” está marcada e em branco. Deixe em branco mesmo, depois retornaremos nesse assunto. Depois de selecionado, basta clicar no botão “Add”. 

O Visual Studio 2012 cria uma pasta dentro da pasta “Views” do seu projeto e o nome da pasta é Site. Dentro da pasta um arquivo é criado chamado “Index.cshtml”, ou seja, o mesmo nome da classe criada.

A ferramenta gera tudo pra você num piscar de olhos. A listagem 4 mostra como ficou a página “Index.cshtml”.

Listagem 4 - Index.cshtml criado pela ferramenta

@model IEnumerableSite>

@{

    ViewBag.Title = "Index";

}

<h2>Indexh2>

<p>

    @Html.ActionLink("Create New", "Create")

p>

<table>

    <tr>

        <th>

            @Html.DisplayNameFor(model => model.NOSite)

        th>

        <th>

            @Html.DisplayNameFor(model => model.SITSite)

        th>

        <th>th>

    tr>

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.NOSite)

        td>

        <td>

            @Html.DisplayFor(modelItem => item.SITSite)

        td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id=item.CHSite }) |

            @Html.ActionLink("Details", "Details", new { id=item.CHSite }) |

            @Html.ActionLink("Delete", "Delete", new { id=item.CHSite })

        td>

    tr>

}

table>

Note que a primeira linha indica a “Model” criada anteriormente. Depois uma tabela normal, lá no final um “foreach” buscando a lista da “model” e mostrando os campos retornados do banco de dados.

Vamos ver o resultado final? Segue a figura 6 mostrando o que apareceu na tela.

Figura 6 - Resultado final

Note que no endereço da URL está o caminho /Site. A lista de informações foram mostradas e existe só um dado dentro da tabela. Fico por aqui e em breve publico mais artigos falando sobre MVC.

Qualquer dúvida, pode entrar em contato pelo site www.mauriciojunior.org.