Carregar página de pesquisa com pop up
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 C# adicionaremos o ao TextBox txtId que irá chamar a função JavaScript que abrirá a pop up.
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 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 e . 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.
Espero que seja útil. 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 C# adicionaremos o ao TextBox txtId que irá chamar a função JavaScript que abrirá a pop up.
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
txtId.Attributes.Add("onkeydown", "javascript:Pesquisa('txtId', 'txtDescricao', 'SELECT CODIGO, NOME FROM USUARIOS');");
}
}
Agora crie um arquivo do tipo JScript.js. Vamos chamá-lo de .
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.
// 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 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="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" 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 id="Head1" runat="server"> <title>Página de Pesquisa - Por quintelab</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="C#" AutoEventWireup="false" CodeFile="Pesquisa.aspx.cs" 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 quintelab</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 void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
SqlConnection StringCon = newSqlConnection(@"Data Source=QUINTELAB\SQLEXPRESS;Initial Catalog=ForumImasters;User ID=sa; Pwd=senha;");
StringCon.Open();
SqlDataAdapter Dt;
DataSet Ds = new DataSet();
Dt = new SqlDataAdapter(Request["sql"], StringCon);
Dt.Fill(Ds, "dados");
Dt.Dispose();
StringCon.Close();
gv.DataSource = Ds.Tables["dados"].DefaultView;
gv.DataBind();
}
}
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 void gv_SelectedIndexChanged(object sender, EventArgs e) {
Response.Write(@"");
}
Repare que criamos e alimentamos duas variáveis que recebem os parâmetros que passamos em nossa função Pesquisa, são elas a e . 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.
Espero que seja útil. Abraços...