Search This Blog

Wednesday 21 November 2012

Passando parametros para o Controller ASP MVC pela Store do EXTJS 4


Olá, Pessoal
Vamos continuar com os exemplos com EXTJS e .NET .

Uma das maiores dificuldades que tive quando comecei a desenvolver com EXT JS foi passar parâmetros entre o JS e o método do controller do ASP MVC. Vou demonstrar com o exemplo de uma consulta passando o parâmetro string ou array para o controle do ASP MVC.
 
CODE C#

public JsonResult GetClientList(string Nome)
{
    try
    {

        if (!string.IsNullOrEmpty(Nome))
        {
            return Json(new
            {
                total = _list.Where(l => l.Value.ToUpper().Contains(Nome.ToUpper())).ToList().Count,
                data = _list.Where(l => l.Value.ToUpper().Contains(Nome.ToUpper())).ToList()
            }, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json(new
            {
                total = _list.Count,
                data = _list.ToList()
            }, JsonRequestBehavior.AllowGet);
        }


    }
    catch (Exception ex)
    {
        throw ex;
    }
}
 
CODE JAVASCRIPT

<script type="text/javascript">

    // Defina um modelo de dados
    Ext.define('Cliente', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'Key', type: 'string' },
            { name: 'Value', type: 'string' }         
        ]
    });

    
    // Crie uma Store e defina o tipo de Proxy e URL
    var store = Ext.create('Ext.data.Store', {
        model: 'Cliente',
        autoload: false,
        proxy: {
            type: 'ajax',
            //nome do controller e o método de consulta com json result
            url: '/Cliente/GetClientList',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total'
            }
        }
    });
        
    
    // Crie e carregue a grid
    var grid = new Ext.grid.Panel({
        width: 300,
        height: 200,
        title: 'Lista de Clientes',
        renderTo: Ext.getBody(), //Aonde vai ser renderizada a grid , no caso poderia ser uma div        
        store: store, // Vincular Store á grid
        columns: [
                    {
                        dataIndex: 'Key',
                        text: 'Cod',
                        width: 70
                    },
                    {
                        dataIndex: 'Value',
                        text: 'Nome',
                        width: 100
                    }
                  ],
        tbar: [ // Adicionar barra de ferramentas superior
                  {
                  xtype: 'textfield',
                  id: 'txtConsultar',
                  fieldlabel: 'Nome'
              },
                  {
                      xtype: 'button',
                      text: 'Consultar',
                      handler: function () {

                          // Pegar o que foi digitado no text
                          var txt = Ext.getCmp('txtConsultar');
                          
                          //Passando o parametro para o método do controlle 
                          store.load({
                              params: {
                                  'Nome': txt.value
                              }
                          }
                          );
                      }
                  }
               ]
    }
         );

  
   //Carregue a store
   store.load();

</script>
 
Até a próxima.

Friday 28 September 2012

Ext JS 4 Grid com ASP MVC 3 primeiros passos

Olá , Pessoal

Venho com novidades, hoje vou começar as primeiras iterações com dados entre o EXTJS e o ASP MVC 3 , estou tentando simplificar ao máximo para que todos que tenham um pouco de noção da ferramenta .Net , consiga entender o funcionamento e possa aplicar em seu dia dia, essa ferramenta excelente , que tem uma variedade enorme de facilidades .

Requisitos VS 2010 , Framework EXT JS 4. 

Adicione um novo Controller ao projeto

Clique direito na pasta Controllers e Add













Defina o nome e adicione
















Adicione um nova View ao projeto 



Clique direito no Action Result dentro do Controller
E Add view e Add



Crie um método que vai servir de consulta ao seus dados
 
public JsonResult GetClientList()
        {
            try
                Dictionary<string, string> _list = new Dictionary<string, string>();
                _list.Add("01", "João");
                _list.Add("02", "José");
                _list.Add("03", "Maria");                

                return Json(new
                {
                    total = _list.Count,
                    data = _list.ToList()
                }, JsonRequestBehavior.AllowGet);

            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

E na view adicione o script do EXT JS

<script type="text/javascript">

    // Defina um modelo de dados
    Ext.define('Cliente', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'Key', type: 'string' },
            { name: 'Value', type: 'string' }         
        ]
    });

    // Crie uma Store e defina o tipo de Proxy e URL
    var store = Ext.create('Ext.data.Store', {
        model: 'Cliente',
        proxy: {
            type: 'ajax',
            //nome do controller e o método de consulta com json result
            url: '/Cliente/GetClientList',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total'
            }
        }
    });
    
    // Crie e carregue a grid
    var grid = new Ext.grid.Panel({
        width: 300, 
        height: 200,               
        renderTo : Ext.getBody(),  //Aonde vai ser renderizada a grid , no caso poderia ser uma div
        title: 'Lista de Clientes',
        store: store,        
        columns: [
                    {
                        dataIndex: 'Key',
                        text: 'Cod',
                        width: 70
                    },
                    {
                        dataIndex: 'Value',
                        text: 'Nome',
                        width: 100
                    }                                                
                  ]
                });

   
   //Carregue a store
   store.load();

</script>

Dowload do código

Até a próxima.

Tuesday 25 September 2012

Configuração do EXT JS 4 com ASP MVC 3

Olá , Pessoal

Segue os primeiros passos para desenvolvimento no framework extjs 4.

No inicio faça o download dos arquivos JS no link
http://www.sencha.com/products/extjs/download/

Você tem a opção de trabalhar com a licença OPEN GNU Lincence 3 ou comercial que é paga.

Crie um novo projeto no VS 2010 em ASP MVC 3 .


Após fazer o download , desempacote o arquivo , e adicone ao seu projeto, somente no inicio, os arquivos JavaScript e CSS minimos.

Conforme imagem abaixo.





































Adicione a referência js e css no seu projeto . No Layout principal.

<link href="@Url.Content("~/Scripts/extjs-4.1.0/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />    
<script src="@Url.Content("~/Scripts/extjs-4.1.0/ext-all.js")" type="text/javascript"></script>

Primeiro script de teste , um Hello Word.

<script type="text/javascript">//Inicio da execução do SCRIPT
    Ext.onReady(function () {
        //Criando um container
        Ext.create('Ext.container.Viewport', {
        //Tipo de layout
        layout: 'fit',
        items: [
        {
            title: 'Olá Ext',
            html: 'Olá! Bem vindo ao Ext JS.'
        }
        ]
        });
});
</script>


Segue o código fonte.

Download

t+.


Friday 14 September 2012

Introdução EXT JS

Olá , Pessoal
Vou começar a postar o que venho descobrindo sobre um mundo novo , um mundo novo extraordinário chamado EXT JS , é um framework baseado em javacript, depois de desenvolver diversas aplicações em Silverlight , comecei a me aventurar com ASP MVC .

Que por sinal não estou me arrependendo por conta das facilidades e flexibilidade que essa dupla oferece .

Para começar no EXT JS vou passar um pouco de como funciona a parte de dados manipulação de dados e estrutura .

MODEL

A princípio temos um modelo dos dados (Model) ou o desenho aonde estará a estrutura que você vai descer do seu proxy, o model você pode definir restrições de validação (Validation ) ou associações (Association) entre outros models .

PROXY

O Proxy é o mapeamento de como você vai consumir o seu dado ou o link de onde vai ser feita essa consulta (Reader) ou escrita (Writer).

STORE

A store é aonde vão ser armazenados os dados podemos ordenar os dados (Sorter) filtrar (Filter) ou agrupar (Grouper).




Até a proxima.

Wednesday 12 September 2012

Agrupar Generic List Usando Reflection

Olá Pessoal,

Conforme tinha falado , estou enviando mais um ajudinha para agrupar dados de uma lista do tipo generics object.

/// <summary>
/// Método para agrupar itens da lista dinamico
/// </summary>
/// <param name="_property"> Propriedade da lista</param>
/// <param name="_list"> Lista que gostaria de Agrupar</param>
/// <returns>Lista Agrupada</returns>
public List<Entidade.Pedido> DoGroup(
                                string _property,                                            
                                List<Entidade.Pedido> _list
                                )
{
_list.GroupBy(c => new { typeof(Entidade.Pedido).GetProperty(_property).Name });   
return _list;
}
Até a próxima.

Tuesday 11 September 2012

Ordenar um GENERIC LIST de modo dinâmico usando Reflection

Olá , Pessoal
Estou um pouco ocupado trabalhando com EXTJS com ASP MVC 3 e está um pouco difícil , mas , me sobrou um tempinho para mandar uma dica que achei super útil. Ordenar um GENERIC LIST de modo dinâmico.
 
        /// <summary>
        /// Método para ordernar itens da lista dinamico
        /// </summary>
        /// <param name="_property"> Propriedade da lista </param>
        /// <param name="_direction"> Direção </param>
        /// <param name="_list"> Lista que gostaria de ordenar</param>
        /// <returns>Lista Ordenada</returns>
        public List<Entidade.Pedido> DoOrder (
                                               string _property , 
                                               string _direction , 
                                               List<Entidade.Pedido> _list
                                              )
        {                            

            if (_direction == "ASC")
            {
                _list = _list.OrderBy(plist => typeof(Entidade.Pedido).GetProperty(_property).GetValue(plist, null)).ToList();
            }
            if (_direction == "DESC")
            {
                _list = _list.OrderByDescending(plist => typeof(Entidade.Pedido).GetProperty(_property).GetValue(plist, null)).ToList();
            }

            return _list;
        }
Espero que tenham gostado e vou trazer coisas novas.

Monday 30 April 2012

De Gereric List para DataTable

Olá , Pessoal

Depois de um bom tempo sem postar nada volto eu , para falar sobre uma funcionalidade que achei super interessante , estou voltando a trabalhar com ASP webforms e algumas coisas que estou achando legal vou começar a compartilhar com vocês.

Como exemplo a maioria dos componentes do ASP webforms trabalhão com ADO.NET para persistência de dados , por conta disso temos as vezes , a necessidade de transformar uma lista do tipo LIST ou list generic em uma DataTable com exemplo que vou mostrar para vocês como popular um GridView com uma DataTable que tem como base de informações um LIST.

Exemplo:

Arquivo : DbTools.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.ComponentModel;

namespace aarvaniExample1
{
    public class DbTools
    {
        /// <summary>
        /// Método para conversão de uma lista tipo generic LIST<T> para DataTable
        /// </summary>
        /// <param name="data"> List<T></param>
        /// <returns>DataTable</returns>
        public static DataTable ConvertListToDataTable(List<Object> data)
        {
            //Pegar o primeiro registro e listar suas propriedades            
            PropertyDescriptorCollection properties = TypeDescriptor.GetProperties(data.FirstOrDefault());
            //Criar e instanciar a tabela auxiliar em memória
            DataTable table = new DataTable();

            //Consultar item a item das propriedades
            foreach (PropertyDescriptor prop in properties)
                //Adicionar programaticamente a coluna com seus respectivos tipos
                table.Columns.Add(prop.Name, Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType);

            //Consultar coluna a coluna da tabela auxiliar
            foreach (Object item in data)
            {
                //Criar e instanciar a linha
                DataRow row = table.NewRow();

                //Consultar item a item das propriedades
                foreach (PropertyDescriptor prop in properties)
                    //Adicionar o valor da linha na coluna caso não seja nulo
                    row[prop.Name] = prop.GetValue(item) ?? DBNull.Value; table.Rows.Add(row);
            }

            //Retornar a tabela
            return table;
        }
    }
}

Arquivo : Pedido.cs


namespace Entidade
{
 
    /// <summary>
    /// Classe pedido
    /// </summary>
    public class Pedido
    {

                       
        
        #region Propriedades

        public int      Numero { get; set; }        
        public int      ClienteCodigo { get; set; }
        public double   Valor { get; set; }
        public string   Prazo { get; set; }
        public decimal  Quantidade { get; set; }
        
        #endregion

        #region Listas

        public static List<Pedido>  Lista { get; set; }
               
        
        #endregion

    }
}

Arquivo : pedidos_lista.aspx

CODE
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace aarvaniExample1
{
    public partial class pedidos_lista : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Popular dados
           
            Entidade.Pedido ped = new Entidade.Pedido();
           
            ped.ClienteCodigo = 1;
            ped.Numero = 123;
            ped.Prazo = "30/60";
            ped.Quantidade = 1;
            ped.Valor = 1;
            Entidade.Pedido.Lista = new List<Entidade.Pedido>();
            Entidade.Pedido.Lista.Add(ped);

            List<object> List = new List<object>();
            List.AddRange(Entidade.Pedido.Lista);
           
            gvListaPedidos.DataSource = DbTools.ConvertListToDataTable(List);
            gvListaPedidos.DataBind();
        }

       
    }
}
SOURCE
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pedidos_lista.aspx.cs" Inherits="aarvaniExample1.pedidos_lista" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvListaPedidos" AutoGenerateColumns="true" runat="server" />    
    </div>
    </form>
</body>
</html>

Segue link para baixar o codigo completo.

Download
Espero que gostem .

Até a próxima !

Translate