none
Pegar e Trabalhar Valores Grid Usando JQuery RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    2
    Entrar para Votar
    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    2
    Entrar para Votar
    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Obrigado, funcionou perfeitamente !
    segunda-feira, 26 de agosto de 2013 11:04
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |