Assine:
Carregar Página De Pesquisa Com Pop Up
Carregar página de pesquisa com pop up
Escrito por quintelab em .Net. Data: 24/09/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
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:
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.
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:
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:
No código VB do formulário de pesquisa iremos trabalhar com o Page_Load para montar nossa grid com todos os dados:
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:
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.
Artigo em c#: http://www.quintelab.com.br/ShowArtigos.asp?codigo=6
Créditos: quintelab - Bruno Quintella
Abraços...
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:
CODE
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
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.
CODE
// 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');
}
}
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:
HTML
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>
<!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:
HTML
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Pesquisa.aspx.vb" 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>
<!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:
CODE
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
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:
CODE
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
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.
Artigo em c#: http://www.quintelab.com.br/ShowArtigos.asp?codigo=6
Créditos: quintelab - Bruno Quintella
Abraços...
Mais recentes em .Net
- Usando fckeditor
- Por Ivan - Bom galera vai aqui mais um tutorial que será bem últil:...
- Lendo arquivos texto
- Por quintelab - Este artigo traz um assunto simples mas que quase todos...
- Formatando colunas da gridview em tempo de execução
- Por quintelab - Este artigo mostra como formatar uma coluna da gridview...
- Carregar página de pesquisa com pop up
- Por quintelab - O artigo mostra como chamar uma página de pesquisa...
- Exibindo mapa usando a api do google.
- Por Ivan - Usando subgurim.net...
Ver mais Artigos de .Net.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com