ASP .NET MVC - Usando WebGrid com paginação e ordenação
 Neste artigo vamos mais uma vez mostrar como criar uma aplicação ASP .NET MVC 5 usando um WebGrid com paginação e ordenação.(Não é um CRUD, ainda)

Para acompanhar este artigo você deverá ter conhecimento prévio de alguns conceitos que eu já abordei em outros artigos. A seguir você tem os links destes artigos, e, eu sugiro que você leia os artigos antes de continuar se você não tem noções de Razor, HTML Helpers e ASP .NET MVC.

  1. ASP .NET - Apresentando o ASP .NET MVC 3 - Macoratti.net
  2. ASP .NET - Apresentando a sintaxe Razor - Macoratti.net
  3. ASP .NET MVC -  Usando os recursos da Microsoft Web Helpers

Agora voltando ao artigo vou abordar alguns recursos do componente WebGrid que é usado para renderizar dados tabulares em informações no formato linhas/colunas. Podemos utilizar este componente tanto no WebMatrix como na ASP .NET MVC.

Recursos usados

Criando o projeto ASP .NET MVC no VS 2013

Abra o Visual Studio 2013 Express for web e clique em New Project;

Selecione a linguagem de sua preferência e clique em  Web;

Informe o nome Mvc_Crud;

Observe que agora você tem uma única opção chamada ASP .NET Web Application :

E dentro desta nova opção única para aplicação Web ASP.NET, você verá uma janela de diálogo familiar contendo todos os principais tipos de modelos de projeto que você pode usar ou encontrar ao desenvolver uma aplicação Web ASP.NET:

Para o nosso projeto vamos aceitar apenas a referência ao MVC.

Além disso, clicando no botão Change Authentication podemos ver as seguintes opções de autenticação disponíveis:

Opção   Quando usar ?
No Authentication   Para aplicações que não necessitam de qualquer autenticação do usuário
Individual User Accounts   Para aplicações que armazenam informações do perfil do usuário em um banco de dados local, Os Usuários podem se registrar ou se autenticar usando suas contas no Facebook, Twitter, Google,  Microsoft ou outro provedor.
Organizational Accounts   Para aplicações que autenticam os usuário como Active Directory, Windows Azure Archive Directory ou Office 365.
Windows Authentication   Para aplicações intranet. 
Em nosso exemplo iremos usar a opção Individual User Accounts.
Clicando no botão OK será criado o projeto com a estrutura abaixo visualizada na janela Solution Explorer:
Apenas para lembrar vamos declarar qual o conteúdo de cada pasta criada na estrutura do projeto:
 Pasta  Papel no projeto
 App_Data  Armazena arquivos de dados e informações como um banco de dados SQL Express;
 App_Start  Contém as classes de configuração para inicialização do site MVC com : rotas, autenticação, filtros e Web API; 
 Content  Contém os arquivos de estilos usados no site;
 Controllers  Contém os controladores usados no site. Os arquivos são nomeados usando a sintaxe; NomeArquivoController
 fonts  Contém as fontes usadas pelos estilos;
 Models  Possui as classes do Model (Um model MVC contém toda a lógica da sua aplicação que não esta contida no Controlador ou na Visão)
 My Project  Possui as referências do projeto
 Scripts  Contém os arquivos de scripts jQuery, BootStrap, etc.
 Views  Contém os arquivos de visualização, páginas HTML, .aspx, etc. Possui subpastas para cada Controlador.

Definindo imagens na pasta Imagens do projeto

Vamos criar  uma pasta Imagens em  nosso projeto e incluir nesta pasta imagens que serão usadas no WebGrid para as ações Incluir, Deletar, Detalhes e Criar.

Clique no menu PROJECT e a seguir em New Folder;

Informe o nome Imagens e  seguir copie e cole 4 arquivos de imagens nesta pasta conforme a figura abaixo:

Criando o banco de dados a tabela Produtos e o modelo de entidades com o Entity Framework

Antes de prosseguir vamos criar um banco de dados Cadastro.mdf usando o Server Explorer no SQL Server LocalDB e a seguir vamos criar a tabela Produtos com a seguinte estrutura:

Nota : Vamos incluir também alguns dados apenas para realizar testes.

Agora vamos criar um Entity Data Model usando o Entity Framework.

No menu PROJECT clique em Add New Item e a seguir selecione a guia Data e o template ADO .NET Entity Data Model informando o nome Cadastro.edmx:

A seguir selecione a opção Generate from database e clique no botão Next>;

Selecione a conexão com o banco de dados Cadastro e aceite o nome CadastroEntities e clique no botão Next>;

Na próxima janela selecione a tabela Produtos e marque as opções conforme a figura abaixo e clique em Finish:

Ao final teremos o modelo de entidades gerado para tabela Produtos com o nome Produto.edmx conforme a figura abaixo:

Criando o controlador para Produtos

Vamos criar um controlador para Produtos na pasta Controllers do projeto.

Clique com o botão direito do mouse sobre a pasta Controllers e selecione Add -> Controller;

A seguir selecione a opção MVC 5 Controller - Empty e clique em Add:

Na janela Add Controller altere nome Default1Controller para ProdutosController e clique no botão Add;

Agora vamos alterar a classe Index() gerada no controlador incluindo o código abaixo nesta Action :

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace Mvc_Crud.Controllers
{
    public class ProdutosController : Controller
    {
        //
        // GET: /Produtos/
        public ActionResult Index()
        {
            CadastroEntities db = new CadastroEntities();                   
            List<Produto> produtos = db.Produtos
               .OrderByDescending(x => x.Id)
               .ToList<Produto>();
            return View(produtos);
        }
    }
}

Neste código estamos obtendo os dados da tabela Produtos e repassando para nossa view;

Vamos agora criar a View.

Clique  com o botão direito do mouse no interior da Action Index() e clique em Add View;

Na janela Add View aceite o nome Index para a view, selecione o template Empty , e defina a pagina de layout e as demais opções conforme a figura abaixo e clique no botão Add;

Será gerado o arquivo Index.cshtml na pasta Views->Produtos com o código abaixo:

@model List<Mvc_Crud.Produto>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>

Vamos alterar esse código e incluir um WebGrid para gerenciar as operações de inclusão , exclusão, edição e criação de registros.

@model List<Mvc_Crud.Produto>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <style type="text/css">
       .grid{    width:100%; }
    </style>
}
<h2>Lista de Produtos</h2>
<div style="padding:7px 0;">
    <input type="button" value="Incluir Novo Produto" onclick="OpenCreatePopup()" />
</div>
<div style="width:100%;">
    @{
    WebGrid grid = new WebGrid(Model);
    @grid.GetHtml(
         tableStyle: "grid",
         fillEmptyRows: false,
         headerStyle: "gvHeading",
         alternatingRowStyle: "gvAlternateRow",
         rowStyle: "gvRow",
         footerStyle: "gvFooter",
         mode: WebGridPagerModes.All,
         firstText: "<< Primeiro",
         previousText: "< Anterior",
         nextText: "Próximo >",
         lastText: "Último >>",
         columns: new[] {
         grid.Column("Id",header: "ID"),
         grid.Column("Nome",header: "Produto"),
         grid.Column("Preco", header: "Preço",  style: "text-align-center", format: (item) => string.Format("{0:C}", item.Preco)),
         grid.Column("Quantidade"),
         grid.Column("ContatoId", header: "Ação", canSort:false,
         format: @<text>
            @Html.Raw("<img src='/Imagens/edita.png' title='Edita' onclick='EditaProduto("+ item.Id + ")'/>")
            @Html.Raw("<img src='/Imagens/deleta.png' title='Deleta' onclick='DeletaProduto("+ item.Id +")'/>")
           </text>
        )
     })
            }
        </div>
    <div id="DivToAppendPartialView"></div>
    <script type="text/javascript">
    function EditaProduto(pid) {
        var ph = $("#DivToAppendPartialView");
        ph.load("/Produtos/edit?id=" + pid , function () {
            ph.dialog({
                modal: true,
                width: 500,
                height: 438,
                title: "Edita Produto",
                resizable: false
            });
        });
    }
    function DeletaProduto(pid) {
        if (confirm("Deseja deletar este produto : " + pid)) {
            var data = { 'd': pid }
            $.post('/Produtos/Delete', data,
            function (data) {
                if (data == true)
                    location = location.href;
                else
                    alert("Não foi possível deletar");
            });
        }
    }
    function OpenCreatePopup() {
        var div = $("#DivToAppendPartialView");
        div.load("/Produtos/Create", function () {
            div.dialog({
                modal: true,
                width: 500,
                height: 438,
                title: "Incluir Novo Produto",
                resizable: false
            });
        });
    }
    </script>

Vamos também fazer alguns ajustes no arquivo de Layout.cshtml e executar a aplicação pressionando F5.

Na página inicial teremos um link para Produtos que após ser clicado irá apresentar a seguinte página:

Embora ainda não tenhamos definidos as funcionalidades para editar, excluir e criar produtos já podemos visualizar a relação de produtos na página Index.cshtml na pasta Produtos e realizar a ordenação pelas colunas e a paginação dos dados.

Vou deixar como tarefa a definição das operações CRUD (no arquivo já tem um esboço pronto). Basta criar um model para os produtos na pasta Models e definir os métodos no Controlador ProdutosController e gerar as Views.

Pegue o projeto aqui : Mvc_Crud.zip (sem as referências e o banco de dados)

João 1:26 Respondeu-lhes João: Eu batizo em água; no meio de vós está um a quem vós não conheceis (Jesus).
João 1:27 aquele que vem depois de mim, de quem eu não sou digno de desatar a correia da alparca.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

 

 

             Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter
 

Referências:

José Carlos Macoratti