none
Pegar e Trabalhar Valores Grid Usando JQuery RRS feed

  • Pergunta

  • Boa tarde!

    Preciso de uma ajuda, por favor.

    Tenho uma aplicação Web Form que possui um GridView com algumas informações. Preciso pegar o valor dessas informações e realizar um cálculo através do textChange porem gostaria que a página não realizasse o postback.

    Ex:

    <asp:GridView ID="gdvTeste" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Numero 1">
                        <ItemTemplate>
                            <asp:TextBox runat="server" ID="txtNumero1Edit" Text='<%# Eval("Numero1")%>' AutoPostBack="true"
                                EnableViewState="false" OnTextChanged="txtNumero1Edit_textChanged" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Número 2">
                        <ItemTemplate>
                            <asp:TextBox runat="server" ID="txtNumero2Edit" Text='<%# Eval("Numero2")%>' AutoPostBack="true"
                                EnableViewState="false" OnTextChanged="txtNumero2Edit_textChanged" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <div style="text-align: center">
                                Resultado
                            </div>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <div style="text-align: center">
                                <asp:Label ID="lblResultado" Text='<%# Eval("Resultado") %>' runat="server" />
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

           

    protectedvoidtxtNumero1Edit_textChanged(objectsender, EventArgs e)

            {

                GridViewRow row = ((GridViewRow)((TextBox)sender).NamingContainer);

                TextBox txtNumero1 = (TextBox)row.FindControl(

    "txtNumero1Edit");

                TextBox txtNumero2 = (TextBox)row.FindControl(

    "txtNumero2Edit");

                Label txtResultado = (Label)row.FindControl(

    "lblResultado");

               

    if(txtNumero1.Text != ""&& txtNumero2.Text != "")

                {               

                    txtResultado.Text = Convert.ToString((Convert.ToInt32(txtNumero1.Text) + Convert.ToInt32(txtNumero2.Text)));

                }

            }

    Da forma que está postado acima, funciona, porem ocorre o postback. Gostaria de fazer a mesma coisa utilizando JQuery.

    Obrigado.

    sexta-feira, 23 de agosto de 2013 18:27

Respostas

  • Olá Rafael,

    Aqui vai um exemplo, a função simplesmente se preocupa em recuperar apenas os elementos da linha que você esta alterando e calcular novamente:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            function Calcular(control) {
                var tr = $(control).parents('tr');
    
                var numero1 = $(tr).find("input[id*='txtNumero1Edit']").val();
                var numero2 = $(tr).find("input[id*='txtNumero2Edit']").val();
    
                if ((numero1 != null && numero1 != '') && (numero2 != null && numero2 != '')) {
                    $(tr).find("span[id*='lblResultado']").text(parseInt(numero1) + parseInt(numero2));
                }
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="gdvTeste" runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:TemplateField HeaderText="Numero 1">
                            <ItemTemplate>
                                <asp:TextBox runat="server" ID="txtNumero1Edit" onkeyup="Calcular(this);" Text='<%# Eval("Numero1")%>'
                                    EnableViewState="false"/>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Número 2">
                            <ItemTemplate>
                                <asp:TextBox runat="server" ID="txtNumero2Edit" onkeyup="Calcular(this);" Text='<%# Eval("Numero2")%>'
                                    EnableViewState="false" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <div style="text-align: center">
                                    Resultado
                                </div>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:Label ID="lblResultado" Text='<%# Eval("Resultado") %>' runat="server" />
                                </div>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    


    Vitor Mendes | http://www.vitormendes.com.br/

    "Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)

    • Marcado como Resposta Rafael Pétrus segunda-feira, 26 de agosto de 2013 11:04
    sábado, 24 de agosto de 2013 01:14

Todas as Respostas

  • Cara vc pode utilizar o ajax, funciona bem.

    é só colocar seu txt dentro das tags abaixo.

    <!--Caso utilize marster page colocar a tag desta maneira se não pode colocar na página aspx mesmo-->
    <form runat="server">
      <asp:ScriptManager ID="ScriptManagerPrincipal" runat="server" EnablePageMethods="true">
      </asp:ScriptManager>
    </form>
    
    
    
    <!--Página on se encontra txt-->
    <asp:UpdatePanel ID="UpdatePanelDefault" runat="server">
        <ContentTemplate>
             <!--colocar txt aqui-->
        </ContentTemplate>
    </asp:UpdatePanel>

    Desta maneira sua página não da aquele refresh.

    Abraço!

    sexta-feira, 23 de agosto de 2013 18:57
  • Obrigado pela resposta !

    Usar o UpdatePanel não está dando certo porque a execução do textChanged fica lenta, demora uns 5~6 segundos, tirando a agilidade do usuário na hora de inserir a informação.

    sexta-feira, 23 de agosto de 2013 19:33
  • Olá Rafael,

    Aqui vai um exemplo, a função simplesmente se preocupa em recuperar apenas os elementos da linha que você esta alterando e calcular novamente:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            function Calcular(control) {
                var tr = $(control).parents('tr');
    
                var numero1 = $(tr).find("input[id*='txtNumero1Edit']").val();
                var numero2 = $(tr).find("input[id*='txtNumero2Edit']").val();
    
                if ((numero1 != null && numero1 != '') && (numero2 != null && numero2 != '')) {
                    $(tr).find("span[id*='lblResultado']").text(parseInt(numero1) + parseInt(numero2));
                }
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="gdvTeste" runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:TemplateField HeaderText="Numero 1">
                            <ItemTemplate>
                                <asp:TextBox runat="server" ID="txtNumero1Edit" onkeyup="Calcular(this);" Text='<%# Eval("Numero1")%>'
                                    EnableViewState="false"/>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Número 2">
                            <ItemTemplate>
                                <asp:TextBox runat="server" ID="txtNumero2Edit" onkeyup="Calcular(this);" Text='<%# Eval("Numero2")%>'
                                    EnableViewState="false" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <div style="text-align: center">
                                    Resultado
                                </div>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:Label ID="lblResultado" Text='<%# Eval("Resultado") %>' runat="server" />
                                </div>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    


    Vitor Mendes | http://www.vitormendes.com.br/

    "Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)

    • Marcado como Resposta Rafael Pétrus segunda-feira, 26 de agosto de 2013 11:04
    sábado, 24 de agosto de 2013 01:14
  • Obrigado, funcionou perfeitamente !
    segunda-feira, 26 de agosto de 2013 11:04
  • Olá Vitor,

    O código que você me passou funcionou perfeitamente no exemplo que eu dei, porem esse código de teste não era o meu cenário real, fui implementar no projeto que estou desenvolvendo e me deparei com um problema.

    A página possui uma MasterPage, e essa MasterPage está estruturada em forma de tabela

    Ex:

    <

    body>


       

    <formid="form1"runat="server">


       

    <table>


           

    <tbody>


               

    <tr>


                   

    <td>


                       

    <asp:ContentPlaceHolderrunat="server"ID="conteudo"EnableViewState="true">


                       

    </asp:ContentPlaceHolder>


                   

    </td>


               

    </tr>


           

    </tbody>


       

    </table>


       

    </form>

    </

    body>

    Na hora de calcular, o cálculo está sendo feito somente para os valores da primeira linha e replicando o resultado em todos as linhas de resultado.

    segunda-feira, 26 de agosto de 2013 13:24