Web Part en ASP.NET 2.0

Veamos cómo podemos configure una aplicación web ASP.NET     2.0 para que soporte el uso de Web Parts. Los Web Parts proveen de un mecanismo muy sencillo para construir sitios web de manera modular y que se puedan personalizar dinámicamente, incluso al gusto del usuario final ofreciéndole una mejor experiencia. Imagina la idea de que el usuario final decida como desea que se le presente la información de una página, en qué orden y en qué posición los elementos de la misma serán acomodados y presentados. Este concepto es muy común en portales como Windows SharePoint Services y cada vez mas es adoptado en las aplicaciones de hoy en día como por ejemplo los Espacios de MSN o Windows Live que soportan este tipo de comportamiento.

En este pequeño post veremos como con la tecnología para el desarrollo web ASP.NET 2.0 podemos configurar rápidamente algunos componentes del .NET Framework 2.0 que nos permiten habilitar y programar Web Parts en nuestros formularios web.

Los sitios que soportan este concepto de personalización y de modularidad deben de permitir al usuario final la posibilidad de mostrar la pagina en distintos modos:

  • En el modo normal (Normal Mode) el Web Part Framework muestra la página en un estado normal sin la posibilidad alguna de edición o manipulación.
  • En el modo de edición (Edit Mode) el Web Part Framework permite al usuario seleccionar una sección en particular de la pagina para su completa edición como los títulos o colores del Web Part.
  • En el modo de diseno (Design Mode) el Web Part Framework permite a los usuario finales re ajustar el orden de los componentes modulares de la pagina.
  • En el modo catalogo (Catalog Mode) el Web Part Framework despliega una lista de secciones disponibles (Web PAts) que se pueden integrar a la página.

El primer concepto que debemos conocer para habilitar esta funcionalidad es el de zonas. Las zonas son las divisiones de una página susceptibles a mostrar o trabajar con web parts. Estas zonas las podemos declarar dentro de cualquier elemento HTML, normalmente utilizamos tablas para crear el esqueleto donde colocaremos nuestros web parts. Para que las zonas y web parts funcionen correctamente contamos con un control no visual llamado WebPartManager el cual administra los estados de las zonas y su contenido basado en un contexto de usuario. Este control tiene la capacidad de agregar o eliminar los elementos contenidos en cualquiera de las zonas y además la facultad de comunicar o pasar datos entre webparts con otros web parts de otra zona. Podemos declararlo en nuestro pagina aspx o podemos arrastrarlo del cuadro de herramientas de Visual Studio 2005.

<asp:WebPartManager ID="WebPartManager1" runat="server">

</asp:WebPartManager>

Un consejo valioso es que si estas utilizando Master Pages te recomiendo que mejor hagas esta declaración sobre la pagina maestra para replicar esta declaración en todos los formularios de la aplicación y en cualquier momento usar el comportamiento modular.

Antes de continuar con la declaración de las zonas, vamos a crear una tabla como la que se muestra a continuación:

<div style="text-align: center">

<table border="0" cellpadding="5" cellspacing="5" style="width: 800px; height: 400px">

<tr>

<td style="width: 100px">

</td>

<td style="width: 11px">

</td>

<td style="width: 100px">

</td>

</tr>

</table>

</div>

El siguiente paso es declarar nuestras zonas dentro de cada celda de la tabla creada. Utilizando el control WebPartZone de la caja de herramientas de Visual Studio 2005 podemos arrástralo a cada una de las celdas de nuestra tabla. Cabe mencionar que dentro de la zona es donde por fin podremos especificar aquellos controles que estamos acostumbrados a utilizar para programar nuestra aplicación. Tenemos que especificar dentro de nuestra control WebPartZone una sección llamada <ZoneTemplate> que será nuestra plantilla HTML donde podremos colocar los controles de nuestra página. En mi caso utilizare unos controles de usuario creados por mí. Están sencillo solamente muestra información en un control GridView.

Primero agregamos nuestras dos zonas quedando de la siguiente manera:

<table border="0" cellpadding="5" cellspacing="5" style="width: 800px; height: 400px">

<tr>

<td style="width: 100px; text-align: left;">

<asp:WebPartZone ID="WebPartZone1" runat="server" Height="400px" Width="390px">

<ZoneTemplate>

<uc1:EmployeeList ID="EmployeeList1" runat="server" />

</ZoneTemplate>

</asp:WebPartZone>

</td>

<td style="width: 11px">

</td>

<td style="width: 100px; text-align: left;">

<asp:WebPartZone ID="WebPartZone2" runat="server" Height="400px" Width="390px">

<ZoneTemplate>

<asp:Calendar ID="Calendar1" runat="server" Height="275px" Width="380px"></asp:Calendar>

</ZoneTemplate>

</asp:WebPartZone>

</td>

</tr>

</table>

Y para finalizar, tenemos que especificar algún mecanismo que nos permita a nuestra pagina cambiar de estado y podamos mover nuestros web parts de zona a zona. Para lograrlo simplemente vamos a agregar un control DropDownList fuera de las zonas y escribimos el siguiente código, no olvidemos seleccionar la propiedad AutoPostBack = True:

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

foreach (WebPartDisplayMode mode in this.WebPartManager1.SupportedDisplayModes)

{

string modeName = mode.Name;

this.DropDownList1.Items.Add(new ListItem(modeName, modeName));

}

}

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

WebPartDisplayMode displayMode = this.WebPartManager1.SupportedDisplayModes[this.DropDownList1.SelectedValue.ToString()];

WebPartManager1.DisplayMode = displayMode;

}

Con este código simplemente se muestran los modos disponibles para nuestra página en una lista desplegable. Al seleccionar el modelo de diseño “Desing” nuestra página mostrará las zonas disponibles y permitirá mover de lugar cada uno de nuestros web parts.

WebParts05.jpg     

8 thoughts on “Web Part en ASP.NET 2.0

  1. Muy interesante su post sobre los wep part, pero yo tengo una pregunta, los web part se pueden trabajar con Atlas?

  2. Muy bueno, quisiera poder implementar en una página una especie de menú, como sería hacer esto con webparts para que al dar click se desplieguen las opciones?

  3. Hola buen día, en la empresa donde trabajamos tenemos un problema, el caso es que existen varías redes interactuando, como ejemplo te menciono los dominios NA, SA y CCM, nuestro portal se encuentra en el dominio CCM y existen relaciones de confianza entre estos 3 dominios. Además entiendo que para grabar la configuración de los WebParts de cada usuario, se utiliza el nombre de inicio de sesion del usuario que accede al portal, por lo que para habilitar la personalización por usuario, el anonymous acces no está permitido. El caso es que esporádicamente estamos presentando el problema de que, dado que el portal está en el dominio CCM, cuando un usuario del dominio NA quiere acceder al portal, el portal arroja un error que dice “No authority could be contacted for authentication” entiendo que el problema es que el portal está buscando al servidor de autentificación del dominio del usuario que accesa, y al parecer o no lo encontró, o no le esta respondiendo correctamente, se que esto es un problema de redes sin embargo la gente que nos da soporte aca de eso no ha encontrado el motivo de la fallá, ya hasta han levantado un caso ante Microsoft y HP y no han avanzado nada, y el problema continua.

    Mi pregunta es: ¿Es posible cachar el error y hacer que la página se muestre aun con la configuración por default? es decir, si no se pudo autentificar el usuario de red con el que se firmo en el IE, que aún así el portal cargue con valores por default? ó estoy delirando? 🙁

    Saludos!

  4. Los pasos a seguir son muy claros, y el codigo es sencillo, gracias .

    Tengo un observacion, cuando se mueva las zonas una de ellas queda vacia, como puedo hacer para q al momento de arrastrar una zona la otra cambie de posicion.

    Origen —–>Destino
    Origen<------Destino Mil gracias ...

  5. puse close en las opciones de las zonas y ahora no puedo ver los controles ni aunq los vuelva a ejecutar que hago

Leave a Reply to Gabo77 Cancel reply

Your email address will not be published. Required fields are marked *