none
Preencher Gridview utilizando JQuery RRS feed

  • Pergunta

  • Bom dia,

    estou tentando preencher um gridview através do uso de JQuery, tenho os meus códigos que correm tudo mas só os resultados no grid que nao aparecem. vou mostrar passo a passo o que fiz para poderem me ajudar a identificar o que falta ou se estou cometendo algum erro.

    1º tenho o meu gridview

    <asp:GridView ID="gvResultConsumo" runat="server" ForeColor="#333333" Width="295px">
                        <AlternatingRowStyle BackColor="#FAF5F1" />
                        <EditRowStyle BackColor="#7C6F57" />
                        <FooterStyle HorizontalAlign="Center" Font-Bold="True" ForeColor="black" />
                        <HeaderStyle BackColor="#FF6600" Font-Bold="True" ForeColor="White" />
                        <PagerSettings Mode="NumericFirstLast" />
                        <PagerStyle ForeColor="black" HorizontalAlign="Center" Font-Bold="True" />
                        <RowStyle BackColor="#F3F3F3" />
                        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#F8FAFA" />
                        <SortedAscendingHeaderStyle BackColor="#14552b" />
                        <SortedDescendingCellStyle BackColor="#D4DFE1" />
                        <SortedDescendingHeaderStyle BackColor="#14552B" />
                    </asp:GridView>

    depois tenho o script responsável pelo tratamento dos meus dados

    <script type="text/javascript">
    $(document).ready(function () {
    var data1 = $("#textboxInicio").val();
                    var data2 = $("#textboxFim").val();
                    var linha = $("#textboxLinha").val();
                    var data = { data1: $("#textboxInicio").val(), data2: $("#textboxFim").val(), linha: $("#textboxLinha").val() };
    
                    var json_data = JSON.stringify(data);
    
    //gridview
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        url: 'graf2.aspx/ShowGrid',
                        data: json_data,
                        success: function (response) {
                            alert('success');
                            for (var i = 0; i < response.d.length; i++) {
                                $("#gvResultConsumo").append("<tr><td>" + response.d[i].data_emissao + "</td><td>" + response.d[i].valor_total + "</td><td>" + response.d[i].consumo + "</td></tr>");
                            }
                        },
                        error: function (result) {
                            alert("Error " + result.responseText);
                        }
                    });
    
             });
         })

    nesse codigo acima eu passo 3 parametros vindos de 3 texbox diferentes. sao parametros necessarios na hora de trabalhar no meu stored Procedure para buscar os dados.

    depois tenho a funcao ShowGrid que é responsavel pelo tratamento dos dados

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindColumnToGridview();
            }
        }
    
        /// This method is used to bind dummy row to gridview to bind data using JQuery
        private void BindColumnToGridview()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("data_emissao");
            dt.Columns.Add("valor_total");
            dt.Columns.Add("consumo");
            dt.Rows.Add();
            gvResultConsumo.DataSource = dt;
            gvResultConsumo.DataBind();
            gvResultConsumo.Rows[0].Visible = false;
        }
    
    [WebMethod]
        public static GridDetails[] ShowGrid(string data1, string data2, string linha)
        {
            DataTable dt = FuncaoRetornoProcuraConsumo(data1, data2, linha);
    
            List<GridDetails> details = new List<GridDetails>();
    
            foreach (DataRow dtrow in dt.Rows)
            {
                GridDetails grid = new GridDetails();
                grid.data_emissao = dtrow["data_emissao"].ToString();
                grid.valor_total = Convert.ToInt32(dtrow["valor_total"]);
                grid.consumo = Convert.ToInt32(dtrow["consumo"]);
                details.Add(grid);
            }
            return details.ToArray();
        } //responsavel para preparar a gridview
    
    private static DataTable FuncaoRetornoProcuraConsumo(string dt1, string dt2, string linh)
        {
            SqlDataAdapter da = new SqlDataAdapter("Report_Consumo_Geral", enlCon);
            //escolher o tipo de comando
            da.SelectCommand.CommandType = CommandType.StoredProcedure;
    
            da.SelectCommand.Parameters.AddWithValue("@data_inicio", Convert.ToDateTime(dt1));
            da.SelectCommand.Parameters.AddWithValue("@data_fim", Convert.ToDateTime(dt2));
            da.SelectCommand.Parameters.AddWithValue("@nro_linha", linh.Trim());
    
            //definir o objecto dadaset (ds)
            DataSet ds = new DataSet();
            //preencher os dados
            da.Fill(ds);
            return ds.Tables[0];
        }
    
    public class GridDetails{
            public string data_emissao { get; set; }
            public int valor_total{ get; set; }
            public int consumo{ get; set; }
    
            
        }
    

    como podem observar, eu invoco uma funçao que retorna o datatable e este faz todo o tratamento dos dados e o retorna para a funcao showGrid que vai pegar os dados e vai retorna-los em array....

    ao fazer os testes no browser, a msg de sucesso que tenho no codigo javascript 

    alert('success');

    é apresentado, mas nao me é apresentado os valores preenchidos na gridview. alguem pode me ajudar?? será que falta alguma coisa ou estou fazendo algum passo erradamente? agradeço a ajuda.

    terça-feira, 1 de julho de 2014 09:59