Jan

25

ASP.NET MVC + JQuery

Filed Under (.NET, ASP.NET, ASP.NET MVC, Visual Studio 2010) by Vinicius Quaiato on 25-01-2010

Tagged Under : , , , ,

Neste artigo mostrarei um pouco de como usar o ASP.NET MVC com o Jquery para criar páginas mais dinâmicas e funcionais.

Este não é um artigo introdutório ao ASP.NET MVC, posso escrever sobre isso depois, e você pode encontrar tudo sobre o MVC do asp.net aqui: http://www.asp.net/mvc/.

Neste exemplo estou utilizando o VS2010 beta 2, Asp.Net MVC 2 e Jquery 1.3.2. Também utilizarei o plugin DataTables para o Jquery, que você deve baixar aqui: http://datatables.net/

Primeiramente vamos criar um website do tipo Asp.Net MVC no VS2010. Feito isso eu vou excluir todas as Views e Controllers que são criados por padrão, mantendo apenas os configs e a pasta Scripts.

Agora vamos criar um Controller para retornar uma lista de objetos, para que possamos montar um grid e executar algumas ações. Vou criar um Controller chamado HomeController, e adicionar o código abaixo:

public ActionResult Index()
{
    var items = new List<ExpandoObject>();
    for (int i = 0; i < 10; i++)
    {
        dynamic item = new ExpandoObject();
        item.Id = i + 1;
        item.Nome = string.Format("Item {0}", i + 1);
        item.Valor = 10 + i;
        item.Descricao = string.Format("Descricao do Item {0}", i + 1);
 
        items.Add(item);
    }
 
    ViewData["items"] = items;
    return View();
}

O código é bastante simples, cria apenas uma lista de ExpandoObjects e manda esta lista para a View(leia mais sobre ExpandoObjects aqui).

Agora crie uma pasta chamada Home dentro da pasta Views e então crie uma View chamada Index dentro da pasta Home, a solution deve ficar assim:

Solution com View e Controller

Solution com View e Controller

Vamos para o código .aspx da nossa View que deve ficar assim:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>HomeView</title>
</head>
<body>
    <div>
        <table id="dataTable">
            <thead>
                <tr style="background-color:#aabbcc; color:#fff;">
                    <th style="width: 50px;">
                        Id
                    </th>
                    <th style="width: 100px;">
                        Nome
                    </th>
                    <th style="width: 70px;">
                        Preço
                    </th>
                    <th style="width: 200px;">
                        Descrição
                    </th>
                </tr>
            </thead>
            <tbody>
                <%
                    var items = ViewData["items"] as List<System.Dynamic.ExpandoObject>;
                    foreach (dynamic item in items)
                    {
                %>
                <tr id="<%=item.Id %>">
                    <td>
                        <%=item.Id %>
                    </td>
                    <td>
                        <%=item.Nome %>
                    </td>
                    <td>
                        R$
                        <%=item.Valor.ToString("N2") %>
                    </td>
                    <td>
                        <%=item.Descricao %>
                    </td>
                </tr>
                <%} %>
            </tbody>
        </table>
    </div>
</body>
</html>

Tudo que este código faz é obter nossa lista de items e então desenhá-los na tela em forma de uma tabela.
Agora vamos usar o Jquery para ir até o servidor, excluir um item da lista no servidor, e então removê-lo da lista no client utilizando Ajax.

Para isso incluiremos uma referência para o Jquery em nossa View. O Jquery já vem junto com os projetos MVC do asp.net em sua versão 2, basta arrastar o arquivo da pasta Scripts para dentro da View que a referência é adicionada:

<head id="Head1" runat="server">
    <title>HomeView</title>
    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
</head>

Agora vamos criar uma function javascript que fará a chamada via Ajax para o Controller:

1
2
3
4
5
6
7
8
9
10

function Remover(action, param) {
    $.post(action + "/" + param,
    function (data) {
        alert(data);
 
        $("#" + param).fadeOut("slow");
    });
 
    return false;
}

Esta function recebe 2 parâmetros, o primeiro é o nome da Action que executaremos no Controller, e o segundo é o parâmetro que passaremos, nesse caso o id do nosso item.
A linha 2 utiliza uma função do Jquery para fazer chamas Ajax usando post. O primeiro parâmetro é a url a ser chamada, no nosso exemplo será algo como “remover/5″. O segundo parâmetro é uma function de callback, que será executada depois que a resposta vier do servidor, e o que estamos fazendo é exibindo a resposta, e então removendo da nossa tabela a linha excluída, utilizando uma animação do Jquery chamada fadeOut.

No nosso Controller adicionaremos um método para simular a exclusão do item, como pode ser visto abaixo:

[AcceptVerbs(HttpVerbs.Post)]
public string Remover(int id)
{
    return string.Format("removeu item: {0}", id);
}

Tudo que esta Action faz é retornar uma string dizendo que o item foi removido.
Agora precisamos fazer com que exista um link na nossa tabela para executar esta ação, e para isso incluiremos mais uma coluna, a coluna Ação, e este código será necessário para renderizar os dados:

<td>
    <a href="remover/<%=item.Id %>" onclick="return Remover('remover','<%=item.Id %>')">
        Remover</a>
</td>

Pronto! Agora já temos uma tabela capaz de excluir itens usando Ajax e ainda ter a linha removida da tabela utilizando um efeito bem bacana.

E para deixar as coisas um pouco mais “profissionais” vamos deixar esta tabela com cara e comportamente de grid, usando o plugin DataTables.
Para isso inclua o arquivo jquery.dataTables.js que você baixou dentro da pasta Scripts, e então arraste o mesmo até a View, para incluir a referência.
Agora coloque o seguinte código javascript dentro do da sua view:

$(document).ready(function () {
    $("#dataTable").dataTable();
});

Este código irá aplicar o plugin na nossa tabela, e o resultado será como mostrado abaixo:

table usando plugin DataTables

table usando plugin DataTables

Agora podemos filtrar, ordenar e paginar nossos dados, sem nenhum esforço adicional, veja um exemplo de filtro abaixo:

plugin DataTable filtrando dados

plugin DataTable filtrando dados

Bom galera, é isso!
O código fonte desta solução está disponível aqui.

Qualquer dúvida, email ou comentários.

Abraços,
Vinicius Quaiato.

No related posts.

No Comments
Read More

Leave a Reply