sexta-feira, junho 10, 2011

Trabalhando com o ModalPopup do Ajax Asp.Net

HI,

Não pretendo nesse post ensinar a implementar um dialogo modal no asp.net. Vou colocar aqui todo o material que me ajudou a deixar o meu dialogo funcional, do jeito que eu queria.

Minha necessidade: Uma tela de pequisa, que jogasse a descrição do item desejado em um textbox da página. Usei o ModalPopupExtender e no panel coloquei um textbox para o usuário digitar o termo, um botão para acionar a pesquisa, um gridview para listar o resultado e um botão para fechar o dialogo.

Problemas que encontrei: Ao clicar no botão de Pesquisar, a dialogo fechava. Na paginação, dava erro ao tentar ir para outra página no gridview. Ao entrar novamente no dialogo, os resultados da pesquisa ainda estavam no gridview.


Sites que usei para elaborar meu dialogo modal de pesquisa.

Para implementar o dialogo:

ModalPopup Demonstration

Working with ModalPopup Ajax Control

Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 application


Evitando que a tela se feche:


Por exemplo, no botão de Pesquisar, coloquei esse código para evitar que a tela desaparecesse
MyModalPopoupExtender.Show()


Para resolver o problema do pageindexchanging:


analisem esse código

protected void StudentLookupGridView_PageIndexChanging(object sender,GridViewPageEventArgs e)

{

// Recapture the current StudentCollection.

StudentLookupGridView.DataSource =

(StudentCollection)Session["LookupStudentCollection"];

// Set to the “new page”.

StudentLookupGridView.PageIndex = e.NewPageIndex;

// Rebind the data.

StudentLookupGridView.DataBind();

}

outro link, ModalPopupExtender and GridView paging problem


Para limpar o resultado da pesquisa:


GridView1.DataSource = null;
GridView1.DataBind();


Para resetar o SelectedIndex e o PageIndex:

GridView1.SelectedIndex = -1;
GridView1.PageIndex = 0;

Usei a opção AutoGenerateSelectButton do gridview para o usuário clicar e indicar o item que ele deseja escolher. Caso não se faça isso, em uma nova busca vai mostrar selecionado no gridview um item qualquer da mesma posiçao do item seleiconado anteriomente. E também vai indicar no contador de paginação a última página clicada.

Coloquei esses códigos no botão de pesquisar, depois de setar o datasource com o resultado da pesquisa.


Definindo o focus de um componente ao abrir o modal dialog

Usei essa solução. Funcionou perfeitamente.

ASP.NET: Setting Focus in Modal Dialogs


Executando a pesquisa ao pressionar ENTER

Definindo a propriedade DefaultButton do panel, funciona. Mas eu quis utilizar o ENTER também para confirmar a linha selecionada, caso o usuário quisesse usar o TAB para navegar pelas linhas do gridview.

Usei uma função no TextBox da pesquisa, para acionar um cliquei no portão de Pesquisa

Achei aqui




Pronto!!!! Foi tudo que achei em dois dias de trabalho para criar a minha tela de pesquisa. Graças a Deus, tá tudo blz. Agora vou trabalhar no layout.

Ficou assim:



Espero que possa ajudar

Fiquem na Paz!!!!

Nenhum comentário: