MS Ajax : Disparando um popUp por javascript

O PopUpControlExtender funciona maravilhosamente bem quando é interligado com uma textBox, por exemplo. É uma verdadeira maravilha.

Mas será que ninguém pensou que na era da Web 2.0 iriamos desejar exibir popUps nos mais diversos eventos e situações ?

Isso pode ser feito, mas não ficou muito fácil não. Para podermos exibir e esconder o popUp devemos utilizar o behavior do popUp em javaScript.

Quando você insere o PopUpControlExtender e o liga com um target, uma das propriedades é o behaviorID. É com esse nome que vamos manipular o popup no javascript. Se esse nome não for preenchido, será usado o clientID do PopUpControlExtender.

Veja o exemplo de duas funções em javascript, uma para exibir outra para esconder o popup :

function exibirPopUp(pop)
{
var pop2=$find(pop)
pop2._onFocus();
}
function esconderPopUp(pop)
{
var pop2=$find(pop)
pop2.hidePopup();
}

É utilizada a instrução $find para localizar o behavior gerado pelo popUpControlExtender, então podemos para exibir chamar o _onFocus() e para esconder chamar o hidePopup()

Nesse caso o nome do popUp está sendo recebido como parâmetro. Inclui a chamada destas funções no mouseOver e mouseOut das linhas de uma gridview, ou seja, conforme o usuário passar com o mouse sobre a linha, visualiza o popup.

Veja como ficou o evento rowdataBound da gridview para fazer isso :

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then
Dim s As String
s = DirectCast(e.Row.FindControl("popupcontrolextender1"), AjaxControlToolkit.PopupControlExtender).BehaviorID

e.Row.Attributes.Add("onmouseover", "exibirPopUp('" & s & "')")
e.Row.Attributes.Add("onmouseout", "esconderPopUp('" & s & "')")
End If
End Sub

Bem simples : Localizamos o popupControlExtender da linha, descobrimos qual será o seu behaviorID (configurar não adianta dentro de um container como a gridview) e incluimos as chamadas através do attributes.add

Dicas Técnicas BufaloInfo

MS Ajax : Disparando um popUp por javascript