Web Part Proveedor de Filtro con un árbol Silverlight en un ModalDialog

Empecé con esto hace un par de días... No quería hacerlo, porque sabría que iba a ser doloroso... pero me obligaron... Y entonces pensé que sería un post perfecto para el blog por lo de painful.

Lo que queríamos conseguir era filtrar elementos en un List View Web Part por Entidad. En nuestra solución tenemos una jerarquía de entidades por lo que pensamos que sería buena idea que el web part mostrase la jerarquía como un árbol.
Bien, así que necesitamos un web part con un TreeView que sea capaz de mandar la entidad seleccionada como filtro a un LVWP. Fantástico. Lo hice... Y no le gustó a nadie. Lo querían en Silverlight y no solo eso, lo querían en una ventana pop up. Sip, me cogieron, nunca había hecho nada parecido pero, ¿Quién dijo miedo?

Es un montón de código, la mayor parte feo así que solo postearé la parte interesante (básicamente la parte relacionada con la comunicación entre las páginas y el Silverlight) y las URLs de donde cogí las ideas.
Lo primero es poner a funcionar un Filter Provider Web Part. Para ello seguí las instrucciones de aquí. Primero lo intenté con un IWebPartRow, pero no era lo que yo quería así que cambié a ITransformableFilterValues. Esta parte es bastante simple así que no comentaré nada más.
La segunda parte es crear una ventana emergente. Después de googlear si googlear te parece un palabro raro deberías escucharme decir overridar o rollupear un rato me enconté con este post, que me pareció un buen sitio para empezar. Mi código en el web part terminó así:

view plainprint?

1.         protected override void OnLoad(EventArgs e)  
2.         {  
3.             if (Page.IsPostBack)  
4.             {  
5.                 if (!string.IsNullOrEmpty(GetFormValue("HiddenEntityName")))  
6.                 {  
7.                     Page.Session["SelectedEntityName"] = Page.Request.Form["HiddenEntityName"];  
8.                     Page.Session["SelectedEntityID"] = Page.Request.Form["HiddenEntityID"];  
9.   
10.                     RenderHeader();  
11.   
12.                     //SelectedEntityText.Text = string.Format("{0}  ", Page.Request.Form["HiddenEntityName"], Page.Request.Form["HiddenEntityID"]);  
13.                 }  
14.                 else  
15.                     RenderHeader();  
16.             }  
17.   
18.             string CurrentWeb = SPContext.Current.Web.Url;  
19.             string height = "500";  
20.             string width = "500";  
21.             string page = "/_layouts/stratex/EntityTree.aspx";  
22.   
23.             // use next line for direct with <base target="_self"> between  and    
24.             string scrp = @"  
25.                             <script javascript??="" text="" type="">  
26.                                 var ReturnValue = new Array("","");  
27.                                 function ShowModalDialog(){  
28.                                     ReturnValue = window.showModalDialog('" + page + "?CurrentWeb=" + CurrentWeb + "&SelectedEntityID=" + Page.Session["SelectedEntityID"] + "&dialogHeight:" + height + " px;dialogWidth:" + width + @" px;');  
29.                                     if(ReturnValue[0] != null){  
30.                                         document.getElementById('HiddenEntityName').value = ReturnValue[0];  
31.                                         document.getElementById('HiddenEntityID').value = ReturnValue[1];  
32.                                         __doPostBack('','');  
33.                                     }  
34.                                 }  
35.                               
36. </script>";  
37.   
38.             Type t = this.GetType();  
39.             if (!Page.ClientScript.IsClientScriptBlockRegistered(t, "bindWebserviceToAutocomplete"))  
40.                 Page.ClientScript.RegisterClientScriptBlock(t, "bindWebserviceToAutocomplete", scrp);  
41.         }  

        protected override void OnLoad(EventArgs e)
        {
            if (Page.IsPostBack)
            {
                if (!string.IsNullOrEmpty(GetFormValue("HiddenEntityName")))
                {
                    Page.Session["SelectedEntityName"] = Page.Request.Form["HiddenEntityName"];
                    Page.Session["SelectedEntityID"] = Page.Request.Form["HiddenEntityID"];

                    RenderHeader();

                    //SelectedEntityText.Text = string.Format("{0}  ", Page.Request.Form["HiddenEntityName"], Page.Request.Form["HiddenEntityID"]);
                }
                else
                    RenderHeader();
            }

            string CurrentWeb = SPContext.Current.Web.Url;
            string height = "500";
            string width = "500";
            string page = "/_layouts/stratex/EntityTree.aspx";

            // use next line for direct with  between  and  
            string scrp = @"
                            ";

            Type t = this.GetType();
            if (!Page.ClientScript.IsClientScriptBlockRegistered(t, "bindWebserviceToAutocomplete"))
                Page.ClientScript.RegisterClientScriptBlock(t, "bindWebserviceToAutocomplete", scrp);
        }

Tuve problemas trayéndome los valores del ModalDialog. No era capaz de encontrar los ID ni los Titles de los controles porque son creados dinámicamente. El truco que usé fue crear dos campos ocultos en el CreateChildControls:

view plainprint?

1. protected override void CreateChildControls()  
2. {  
3.     base.CreateChildControls();  
4.   
5.     ...  
6.   
7.     Page.ClientScript.RegisterHiddenField("HiddenEntityName", "");  
8.     Page.ClientScript.RegisterHiddenField("HiddenEntityID", "");  
9.   
10.     ...  
11. }  

        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            ...

            Page.ClientScript.RegisterHiddenField("HiddenEntityName", "");
            Page.ClientScript.RegisterHiddenField("HiddenEntityID", "");

            ...
        }

Oye Chan, ¿Te has dado cuenta que podrías usar solo la sesión y olvidarte de los HiddenFields? No preguntes, te lo advierto…
La próxima parte es crear la página aspx para el modal dialog. La guardé en un directorio que me creé en _layouts. El código de la página quedó así:

view plainprint?

1. <%@ Page Language="C#" Inherits="StratExFramework.EntityTree,StratExFramework,Version=2.2.0.0,Culture=neutral,PublicKeyToken=311246df7412ca98" %>  
2.   
3. <html>  
4. <head>  
5. <title>Select Entity for filtering</title>  
6. <script type='text/javascript'>  
7.     function PassParameterAndClose(EntityName, EntityID) {  
8.   
9.         window.returnValue = new Array( EntityName, EntityID) ;  
10.   
11.         var version = parseFloat(navigator.appVersion.split('MSIE')[1]);  
12.         if (version >= 7)   
13.             { window.open('', '_parent', ''); }  
14.         else  
15.             { window.opener = self; }  
16.   
17.         window.close();  
18.     }  
19. </script>  
20. </head>  
21. <body></body>  
22. </html>  

<%@ Page Language="C#" Inherits="StratExFramework.EntityTree,StratExFramework,Version=2.2.0.0,Culture=neutral,PublicKeyToken=311246df7412ca98" %>

<html>
<head>
<title>Select Entity for filtering</title>
<script type='text/javascript'>
    function PassParameterAndClose(EntityName, EntityID) {

        window.returnValue = new Array( EntityName, EntityID) ;

        var version = parseFloat(navigator.appVersion.split('MSIE')[1]);
        if (version >= 7) 
            { window.open('', '_parent', ''); }
        else
            { window.opener = self; }

        window.close();
    }
</script>
</head>
<body></body>
</html>

También me creé una clase de code behind como puedes ver en la primera línea del aspx... :

view plainprint?

1. public class EntityTree : WebPartPage  
2. {  
3.     string CurrentWeb;  
4.     string SelectedEntityID;  
5.   
6.     protected void Page_Load(object sender, System.EventArgs e)  
7.     {  
8.         CurrentWeb = Request.Params["CurrentWeb"];  
9.         SelectedEntityID = Request.Params["SelectedEntityID"];  
10.     }  
11.   
12.     protected override void CreateChildControls()  
13.     {  
14.         base.CreateChildControls();  
15.   
16.         string Source = CurrentWeb + "/Lists/XAPLibrary/SilverlightEntityTreeSelector.xap";  
17.         string SilverlightHeight = "515";  
18.         string SilverlightWidth = "500";  
19.   
20.         LiteralControl obj = new LiteralControl();  
21.         obj.Text = "<object id='silverlightHost' style='height: " + SilverlightHeight + "; width: " + SilverlightWidth + @"; margin: 0; padding: 0;' data='data:application/x-silverlight-2,' type='application/x-silverlight-2'>  
22.                         <param name='Source' value='" + Source + @"' />  
23.                         <param name='MinRuntimeVersion' value='3.0.40624.0' />  
24.                         <param name='Background' value='#FFFFFFFF' />  
25.                         <param name='initParams' value='" +  
26.                             string.Format("{0}={1}", "site", HttpUtility.UrlEncode(CurrentWeb)) +  
27.                             string.Format(", {0}={1}", "selectedentityid", HttpUtility.UrlEncode(SelectedEntityID)) +  
28.                             @"' />  
29.                         </object>";  
30.         this.Controls.Add(obj);  
31.     }  
32.   
33.     public override void VerifyRenderingInServerForm(Control control)  
34.     {  
35.         return;  
36.     }  
37. }  

    public class EntityTree : WebPartPage
    {
        string CurrentWeb;
        string SelectedEntityID;

        protected void Page_Load(object sender, System.EventArgs e)
        {
            CurrentWeb = Request.Params["CurrentWeb"];
            SelectedEntityID = Request.Params["SelectedEntityID"];
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            string Source = CurrentWeb + "/Lists/XAPLibrary/SilverlightEntityTreeSelector.xap";
            string SilverlightHeight = "515";
            string SilverlightWidth = "500";

            LiteralControl obj = new LiteralControl();
            obj.Text = "<object id='silverlightHost' style='height: " + SilverlightHeight + "; width: " + SilverlightWidth + @"; margin: 0; padding: 0;' data='data:application/x-silverlight-2,' type='application/x-silverlight-2'>
                            <param name='Source' value='" + Source + @"' />
                            <param name='MinRuntimeVersion' value='3.0.40624.0' />
                            <param name='Background' value='#FFFFFFFF' />
                            <param name='initParams' value='" +
                                string.Format("{0}={1}", "site", HttpUtility.UrlEncode(CurrentWeb)) +
                                string.Format(", {0}={1}", "selectedentityid", HttpUtility.UrlEncode(SelectedEntityID)) +
                                @"' />
                            </object>";
            this.Controls.Add(obj);
        }

        public override void VerifyRenderingInServerForm(Control control)
        {
            return;
        }
    }

Lo que hago aquí es coger los parámetros del entorno en donde se ejecuta el web part y pasárselos al Silverlight. Uso el CurrentWeb para decirle a los web services del Silverlight cual es el contexto y el SelectedEntityID para resaltar la entidad que fue seleccionada la última vez que se abrió la ventana modal. Este es el código del Silverlight.

view plainprint?

1. namespace SilverlightEntityTreeSelector  
2. {  
3.     public partial class MainPage : UserControl  
4.     {  
5.         public MainPage()  
6.         {  
7.             InitializeComponent();  
8.   
9.             Tree.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(Tree_PropertyChanged);  
10.   
11.             Tree.Show(string.Empty);  
12.         }  
13.   
14.         void Tree_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)  
15.         {  
16.             if (e.PropertyName == "SelectedEntityID")  
17.                 HtmlPage.Window.Invoke("PassParameterAndClose", Tree.SelectedEntityName, Tree.SelectedEntityID);  
18.             else if (e.PropertyName == "TreeLoaded")  
19.                 if (Application.Current.Resources.Contains("selectedentityid"))  
20.                     if (!string.IsNullOrEmpty(Application.Current.Resources["selectedentityid"] as string))  
21.                         Tree.ChangeSelectedItemTo(Application.Current.Resources["selectedentityid"] as string);  
22.         }  
23.     }  
24. }  

namespace SilverlightEntityTreeSelector
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            Tree.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(Tree_PropertyChanged);

            Tree.Show(string.Empty);
        }

        void Tree_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "SelectedEntityID")
                HtmlPage.Window.Invoke("PassParameterAndClose", Tree.SelectedEntityName, Tree.SelectedEntityID);
            else if (e.PropertyName == "TreeLoaded")
                if (Application.Current.Resources.Contains("selectedentityid"))
                    if (!string.IsNullOrEmpty(Application.Current.Resources["selectedentityid"] as string))
                        Tree.ChangeSelectedItemTo(Application.Current.Resources["selectedentityid"] as string);
        }
    }
}

Ya tenemos todos los componentes.
Esto funciona de la siguiente manera: Seleccionas una entidad en el árbol de Silverlight, luego el Silverlight llama a la función javascript de la ventana modal y que pasa los parámetros al web part padre y cierra el popup. Finalmente el web part manda el filtro al List View WebPar.
Si usas este código te faltarán algunos métodos, pero lo que quería compartir aquí es el método que he seguido para conseguirlo básicamente porque no quiero tener que volver a pensarlo si alguna vez me vuelven a pedir que haga algo parecido en el futuro.

Me encantaría enseñaros algunas fotos, pero los web parts no han sido retocados por las hábiles manos de Adam, nuestro diseñador, y se os podrían salir los ojos de las órbitas.