Jump to content
Fórum Script Brasil
  • 0

Carregar página de pesquisa com pop up


quintelab

Question

Uma dúvida que já surgiu algumas vezes por diferentes usuário aqui no fórum e que eu tive quando comecei a desenvolver com .NET.

O artigo mostra como chamar uma página de pesquisa dinâmica através de uma pop up e retornar os dados do valor selecionado na GridView para o formulário pai.

No formulário iremos colocar apenas dois TextBox. O primeiro terá o ID de txtId e o segundo TextBox terá o ID de txtDescricao.

No código VB adicionaremos o atributo ao TextBox txtId que irá chamar a função JavaScript que abrirá a pop up.

Código VB:

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        txtId.Attributes.Add("onkeydown", "java script:Pesquisa('txtId', 'txtDescricao', 'SELECT CODIGO, NOME FROM USUARIOS');")
    End Sub
End Class
Agora crie um arquivo do tipo JScript.js. Vamos chamá-lo de funcoes.js. O Código do nosso arquivo funcoes é simples, criaremos uma função com o nome de Pesquisa que receberá os parâmetros necessários para montar uma GridView e chamar o nosso arquivo pop up. JsScript:
// JScript File
function Pesquisa(RecebeId, RecebeDesc, Sql){
    if(event.keyCode == 113) {
        window.open('Pesquisa.aspx?recebeId='+ RecebeId +'&recebeDesc='+ RecebeDesc +'&sql='+ Sql +'', 'Janela', 'menubar=no,scrollbars=yes,statusbar=yes,width=650, height=500');
    }
}
A nossa função pesquisa possui três parâmetros que são os dois campos de retorno no formulário pai e o select que irá buscar os dados. A linha de comando if(event.keyCode == 113) { verifica se o usuário pressionou a tecla F2, este será o nosso atalho para chamar a tela de pesquisa. É necessário referenciar o nosso arquivo Js no HTML do formulário pai. Por fim o código HTML do nosso formulário ficará assim:
<%@ Page Language="V B" AutoEventWireup="false" CodeFile="Default.aspx.v b" Inherits="_Default" %>

<!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>Página de Pesquisa - Por Bruno Quintella</title>
    <script language="javascript" src="funcoes.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtId" runat="server" Width="70px"></asp:TextBox>
        <asp:TextBox ID="txtDescricao" runat="server" Width="350px"></asp:TextBox></div>
    </form>
</body>
</html>
Criaremos agora o formulário de pesquisa, que chamaremos de Pesquisa.aspx. No formulário de pesquisa teremos apena uma GridView com a opção Auto-generate fields marcada e uma coluna com um CommandField do Tipo SELECT. O código html da nossa página de pesquisa ficará da seguinte forma:
<%@ Page Language="V B" AutoEventWireup="false" CodeFile="Pesquisa.aspx.v b" Inherits="Pesquisa" %>

<!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>Página de Pesquisa - Por Bruno Quintella</title>
</head>
<body alink="#000000" bottommargin="0" leftmargin="0" link="#000000" rightmargin="0" topmargin="0" vlink="#000000" style="text-align: center">
    <form id="form1" runat="server">
                    <asp:GridView ID="gv" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="None"
                        BorderWidth="1px" CellPadding="3" Font-Names="Verdana" Font-Size="XX-Small" GridLines="Vertical"
                        Width="569px" AllowPaging="True" PageSize="15">
                        <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                        <RowStyle BackColor="#EEEEEE" ForeColor="Black" HorizontalAlign="Left" />
                        <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Left" Font-Names="Verdana" Font-Size="XX-Small" />
                        <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
                        <AlternatingRowStyle BackColor="Gainsboro" />
                        <Columns>
                            <asp:CommandField SelectText="Selecionar" ShowSelectButton="True" />
                        </Columns>
                    </asp:GridView>
    </form>
</body>
</html>
No código VB do formulário de pesquisa iremos trabalhar com o Page_Load para montar nossa grid com todos os dados:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim StringCon As New SqlConnection("Data Source=BRUNO\SQLEXPRESS;Initial Catalog=ForumImasters;User ID=sa; Pwd=senha;")
            StringCon.Open()
            Dim Dt As SqlDataAdapter
            Dim Ds As New DataSet
            Dt = New SqlDataAdapter(Request("sql"), StringCon)
            Dt.Fill(Ds, "dados")
            Dt.Dispose()
            StringCon.Close()
            gv.DataSource = Ds.Tables("dados").DefaultView
            gv.DataBind()
        End If
    End Sub
Para retonar os dados ao formulário pai, iremos utilizar o evento SelectedIndexChanged da GridView, neste evento iremos utilizar um JavaScript que irá alimentar os TextBox do formulário pai e logo em seguida fechar a janela pop up. Desta forma, fica assim nosso evento:
Protected Sub gv_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles gv.SelectedIndexChanged
        Response.Write("<script language=""javascript"">")
        Response.Write("function returnValue(idValue, descValue) {")
        Response.Write("recebeId = '" & Request("recebeId") & "';")
        Response.Write("recebeDesc = '" & Request("recebeDesc") & "';")

        Response.Write("var vEval = ""opener.document.form1."" + recebeId;")
        Response.Write("var objName = eval(vEval);")
        Response.Write("objName.value = idValue;")

        Response.Write("var vEval = ""opener.document.form1."" + recebeDesc;")
        Response.Write("var objName = eval(vEval);")
        Response.Write("objName.value = descValue;")

        Response.Write("vEval = ""opener.document.form1"";")
        Response.Write("var objForm = eval(vEval);")
        Response.Write("close();")
        Response.Write("}")
        Response.Write("java script:returnValue('" & gv.SelectedRow.Cells(1).Text & "', '" & gv.SelectedRow.Cells(2).Text & "')")
        Response.Write("</script>")
    End Sub

Repare que criamos e alimentamos duas variáveis que recebem os parâmetros que passamos em nossa função Pesquisa, são elas a recebeId e recebeDesc. No evento da GridView, escrevemos nossa função JavaScript com o Response.Write e depois chamamos a função passando como parâmetros as duas colunas da nossa gridView, que irá alimentar os TextBox do formulário pai e logo em seguida fechar a pop up.

Versão c#: http://www.quintelab.com.br/ShowArtigos.asp?codigo=6

Créditos: quintelab - Bruno Quintella

Abraços...

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...