Pessoal tenho recebido muitas solicitações de ajuda para a utilização do JQuery Dialog com o Asp.Net portando vou dedicar esse artigo a uma classe que acabei de fazer para ajudar nesse problema. Primeiro vou descrever a classe que faz toda a mágica para depois mostrar sua utilização mas para que quizer pular etapas basta baixar o código de exemplo tstJQueryDialog&AspNet.zip (174.62 kb) e logo se divertir :D .
Segue o código da classe que o WebUserControl do dialogo vai herdar para facilitar a nossa vida.
Classe Controladora do WebUserControl do dialogo
using System.Web.UI;
namespace framework
{
/// <summary>
/// Controlado para dialogos com JQuery
/// </summary>
public abstract class UCDialogo : UserControl
{
/// <summary>
/// Carrega as configurações do Dialogo
/// </summary>
/// <param name="idDivPrincipal">ID da Div principal do dialogo</param>
/// <param name="largura">Largura do dialogo</param>
/// <param name="altura">Altura do dialogo</param>
protected abstract void carregaConfigDialogo(out string idDivPrincipal, out int largura, out int altura);
/// <summary>
/// Sobrecarga da renderização do UserControl
/// </summary>
/// <param name="writer">Writer</param>
protected override void Render(HtmlTextWriter writer)
{
writer.Write(montaScript());//Adiciona o script a renderização da página
base.Render(writer);
}
/// <summary>
/// Monta o Script do dialogo em JQuery
/// </summary>
/// <returns>Script montado</returns>
private string montaScript()
{
//====== Montando o script do JQuery ======
string _retorno = @"
<script type='text/javascript'>
jQuery(function () {
jQuery('#div#').dialog({
autoOpen: false,
modal: true,
show: 'Transfer',
hide: 'Transfer',
draggable: true,
width: #largura#,
height: #altura#,
resizable: false,
overlay: {
background: 'black',
opacity: 0.5
},
open: function(event, ui) {
jQuery(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
});
jQuery('#div#').parent().appendTo(jQuery('form:first'));
#mostra#
});
</script>
";
//====== Carregando os dados do dialogo ======
string idDivPrincipal;
int largura, altura;
carregaConfigDialogo(out idDivPrincipal, out largura, out altura);
//====== Alterando os valores dos flags ======
_retorno = _retorno.Replace( //Mostra ou esconde o dialogo
"#mostra#",
Visible ? "jQuery('#div#').dialog('open');" : "jQuery('#div#').dialog('close');"
);
_retorno = _retorno.Replace("#div#", "#" + idDivPrincipal); //Seta a DIV do dialogo
_retorno = _retorno.Replace("#largura#", largura.ToString()); //Seta a largura do dialogo
_retorno = _retorno.Replace("#altura#", altura.ToString()); //Seta a altura do dialogo
return _retorno;
}
}
}
Como você ja deve ter notado essa classe é abstrata e obriga a implementação do método carregaConfigDialogo esse método é quem informar os parametros para a montagem do javascript do JQuery Dialog,
na implementação desse método devem ser repassados três valores:
- idDivPrincipal: Nome da div em que o JQuery vai atuar
- largura: Largura do dialogo
- altura: altura do dialogo
Ao renderizar o WebUserControl o método Render foi sobrecarregado para adicionar o Script do JQuery no div que foi escolhido ai o dialogo aparece.
Para utilizar a classe basta a classe do seu WebUserControl, que vai ser o dialogo, herdar dessa classe descrita a cima e também implementar o método carregaConfigDialogo como esta demonstrado no exemplo abaixo:
Aspx do WebUserControl:
<div id="dlgTeste" title="Titulo do Diáligo">
<asp:Label ID="lblNome" runat="server" Text="Nome" AssociatedControlID="txtNome" />
<asp:TextBox ID="txtNome" runat="server"/>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="OK" />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click"
Text="Cancelar" />
</div>
Code Behind do WebUserControl
using System;
using framework;
public partial class Dialogo : UCDialogo
{
public string texto
{
get { return txtNome.Text; }
set { txtNome.Text = value; }
}
protected override void carregaConfigDialogo(out string idDivPrincipal, out int largura, out int altura)
{
idDivPrincipal = "dlgTeste";
largura = 320;
altura = 120;
}
public event EventHandler QuandoOK;
protected void Button1_Click(object sender, EventArgs e)
{
QuandoOK(this, e);
Visible = false;
}
protected void Button2_Click(object sender, EventArgs e)
{
Visible = false;
}
}
Agora a página que itá utilizar o dialogo
Aspx da página
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="Dialogo.ascx" tagname="Dialogo" tagprefix="uc1" %>
<!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">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body:
{
font-size:small;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<uc1:Dialogo ID="Dialogo1" Visible="false" runat="server" OnQuandoOK="Dialogo1_OK" />
<asp:Button ID="Button1" CssClass="btnDialogo" runat="server" Text="Mostrar"
onclick="Button1_Click" />
</form>
</body>
</html>
Code Behind do aspx
using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Dialogo1.Visible = true;
}
protected void Dialogo1_OK(object sender, EventArgs e)
{
Button1.Text = "Valor digidato foi " + Dialogo1.texto;
}
}
Note que para mostrar ou esconder o dialogo basta setar a propriedade Visible do WebUserControl do dialogo. Espero ter ajudado e até a próxima pessoal.
Subscribe