Inicio > C#, Cómo hacer, JavaScript > Mostrar una ventana emergente desde un WebPart

Mostrar una ventana emergente desde un WebPart


En SharePoint 2010 introdujeron para muchas cosas ventanas emergentes, aprovechando que todo el sitio ahora cuenta con soporte para Ajax a través del UpdatePanel. Para que podamos hacer algo similar, basta usar un sencillo código en JavaScript.

<script type="text/javascript" language="javascript">
    function openAsgardDialog() 
    {
        var options = {
            url: "/Pages/AsgardPantheon.aspx",
            width: 800,
            height: 650,
            title: "Hola mundo",
	    };
	    SP.UI.ModalDialog.showModalDialog(options);
    }
</script>";

Al ser invocada dicha función, aparecerá una ventana emergente con el título y dimensiones especificadas, y cargará la página /Pages/AsgardPantheon.aspx, o cualquier otra que especifiquemos.

Ahora bien, para hacer esto desde un WebPart, tres cosas deben ocurrir.

1.- Asegurarnos que el master page cuenta con un UpdatePanel. Esto es esencial, puesto que si no Ajax no funciona. Es el comportamiento por default en SharePoint, sólo una precaución por si alguien lo quitó.

2.- El WebPart deberá registrar el script que permitirá mostrar la ventana emergente.

private void RegisterOpenHelloWorldDialogScript()
{
    string script =
        @"<script type=""text/javascript"" language=""javascript"">
            function openAsgardDialog() 
            {{
                var options = {{
                    url: ""{0}/Pages/AsgardPantheon.aspx"",
                    width: 800,
                    height: 650,
                    title: ""ASGARD"",
	            }};
	            SP.UI.ModalDialog.showModalDialog(options);
            }}
            </script>";
    script = string.Format(script, SPContext.Current.Web.Url);

    Page.ClientScript.RegisterClientScriptBlock(GetType(),
            "OpenAsgardDialogScript", script);
}

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    RegisterOpenHelloWorldDialogScript();
}

3.- Llamamos a nuestro JavaScript desde algún control. En este caso, creamos una etiqueta <a> que haga lo propio.

protected override void CreateChildControls()
{
    Literal literal = new Literal();
    literal.Text = "<h3>Ejemplo Ventana Emergente</h3>" +
                           "Haga <a href="\&quot;#\&quot;" onclick="\"javascript:openAsgardDialog();\"">" +
                           "click aqu&iacute;</a> para abrir. ";
    Controls.Add(literal);
}

Y eso es todo. Una imagen de cómo luciría el WebPart…

image

…y la ventana emergente.

image

  1. L. Marysthel
    octubre 30, 2011 a las 3:04 pm

    Hola. me podrías decir, que es SP y SPcontext? porque me marca error en esas partes

  1. junio 14, 2011 a las 6:36 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s