Arquivo da tag: Janela

Criando uma janela Popup estilo Facebook com JQuery e ASP.NET.

O legal de usar o Facebook é copiar as ideias de suas implementações e aplicá-las em nossos projetos. 😛

Vou mostrar como fiz para criar uma janela Popup parecida com as que são usadas no Facebook. Acho que ficou legal :-).

Primeiramente, no projeto ASP.NET devemos criar um arquivo do tipo Generic Handler. O Generic Handler é como se fosse uma página ASP.NET mais leve, pois não tem interface HTML e eventos no servidor, etc. Possui apenas um método, o ProcessRequest(HttpContext context) que é responsável por processar as requisições que chegam.

No método ProcessRequest deve ser codificado o HTML que será enviado à página que fez a requisição ao Generic Handler.

public class HandlerJanelaExemplo : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string containerId = "#" + context.Request.QueryString["containerId"];

        string html = @"
            <div class=""divPopup""
                    style=""left: 323.5px; top: 145.5px; width: 600px; position: fixed; z-index: 10001;"">
                    <div style=""margin: 10px"">
						AQUI VOCÊ COLOCA O TÍTULO DA JANELA
                        <div style=""overflow: auto; height: 150px"">
                            AQUI VOCÊ COLOCA CONTEÚDO DA JANELA
                        </div>
                    </div>
                <div style=""width: 590px; background-color: #CCCCCC; text-align: right; padding: 5px;"">
                    <input type=""button"" value=""Fechar"" onclick=""@acaoFechar"" class=""botaoFerramenta""/>
                </div>
            </div>";

        //DEFININDO A AÇÃO DO BOTÃO FECHAR (SIMPLEMENTE LIMPA O HTML DO SPAN DA PÁGINA QUE REQUISITOU A JANELA).
        string acaoFechar = "$('" + containerId + @"').html('')";
        html = html.Replace("@acaoFechar", acaoFechar);

        context.Response.ContentType = "text/plain";
        context.Response.Write(html);
        context.Response.Flush();
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Na página HTML que vai chamar a janela Popup deve existir um link e um elemento span. O link irá chamar uma função Javascript que utilizará JQuery para fazer uma requisição ao Generic Handler criado anteriormente. E o Generic Handler retornará o HTML contendo a janela Popup para função Javascript, que por sua vez atualizará o elemento span.

Código HTML da página.

<form id="form1" runat="server">
<div>
    <h1>Minha Página</h1>
    <br />
    <br />
    <asp:HyperLink ID="hlkJanela" runat="server" NavigateUrl="javascript:;">Chamar janela...</asp:HyperLink>
    <span id="spanPopup"></span>
</div>
</form>

Na página é necessário associar a função Javacript ao link pelo C#.

protected void Page_Load(object sender, EventArgs e)
{
    hlkJanela.Attributes.Add("onclick", "chamarJanela()");
}

A função Javascript usa JQuery para fazer a requisição ao Generic Handler. A informação URL recebe o endereço do Generic Handler e como parâmetro o ID do elemento span. O ID do elemento span será usado dentro do Handler para implementação do botão fechar da Popup.

function chamarJanela() {
    $.ajax({
        type: "GET",
        url: "HandlerJanelaExemplo.ashx?containerId=spanPopup",
        dataType: "text",
        success: function (retorno) {
            $("#spanPopup").html(retorno);

        },
        error: function (retorno) {
            alert('Erro');
        }
    });
}

Veja o resultado.

E é isso pessoal. É um exemplo bem simples que pode ser evoluido para uma solução robusta.
Baixe o exemplo para ver os detalhes da implementação.

Até mais…