Elementos Web y controles de usuario

Elementos Web
Permiten cambiar la configuración de partes del sitio par que se ajusten a sus necesidades y
preferencias.
Se crean y gestionan en la partes superior de la personalización, usando el componente
estructural WebPartManager, para gestionar la interacción de elementos Web y controles de
interfaz de usuario.
Cada página Web Parts tiene un control WebPartManager. Es un control invisible que registra
todos los controles de elemento Web individuales y gestiona las zonas Web.

Edición y cambios de disposición

Los elementos Web permiten a los usuarios cambiar el diseño de los controles de elemento Web
arrastrándolos de una zona a otra. Para editar el contenido de zonas o mover controles de una
zona a otra, tenemos que poder pasar a modo de edición y de diseño. Para ello, podemos crear
un control que permita cambiar a los modos Examinar, Editar y Diseño.
Una vez creado un ddl que permita este intercambio, deberemos incluir un Editorzote que
contenga un AppearanceEditroParty y un LayoutEditor Part. Así podremos editar o mover los
elementos Web una vez que hayamos seleccionando Edit.

El código sería:

public partial class archivoWeb : System.Web.UI.Page

{
//hará referencia al WebPartManager actual
WebPartManager webpartactual;
public void Page_Init(object sender, EventArgs e)
{
Page.InitComplete +=new EventHandler(Page_InitComplete);

}
//cuando la página está inicializada
public void Page_InitComplete(object sender, EventArgs e)
{
webpartactual = WebPartManager.GetCurrentWebPartManager(Page);
String examinador = WebPartManager.BrowseDisplayMode.Name;
foreach (WebPartDisplayMode modo in
webpartactual.SupportedDisplayModes)
{
String nombreModo = modo.Name;
if (modo.IsEnabled(webpartactual))
{
ListItem elemento = new ListItem(nombreModo, nombreModo);
DropDownList1.Items.Add(elemento);
}
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs
e)
{
String modoseleccion = DropDownList1.SelectedValue;
WebPartDisplayMode modo =
webpartactual.SupportedDisplayModes[modoseleccion];
if (modo != null)
{
webpartactual.DisplayMode = modo;
}
}
public void Page_Prerender(object sender, EventArgs e)
{
ListItemCollection li = DropDownList1.Items;
int selectedIndex =
li.IndexOf(li.FindByText(webpartactual.DisplayMode.Name));
DropDownList1.SelectedIndex=selectedIndex;
}
}

ASP.NET Elementos Web y Controles de usuario 1/2

Agregar elementos desde un catálogo
Mediante el control CatalogZone permitimos al usuario que pueda agregar elementos Web a
diferentes zonas.
Dentro del CatalogZone debemos arrastrar un control DelcarativeCatalogPart y en sus plantillas
incluímos controles Web a nuestro gusto.
El código anterior, permitirá el funcionamiento de este Catálogo.

Práctica
Crea un tabla en donde tengamos seis celdas. En cada celda debemos añadir un WebPartZone.
Colocamos en cada WebPartZone una Label, ListBox y una Imagen.
Prueba que funcionan los elementos Web.
Para gestionar su edición y Diseño vamos a crear un ddl que permita editar Elementos Web. lo
colocamos en un Panel en otra celda vacía.
Probamos que podemos mover y editar los elementos Web.
En otra de las celdas añade un catálogo que nos permita sustituir la Label anterior por un
Calendar, Imagen o FileUpLoad.

Controles de usuario
Nos permiten guardar una parte de una página y reutilizarla en otras páginas. Las diferencias
con una página aspx normal son.
Su extensión es ascx
No tienen etiquetas html, body o form
Tienen una directiva Control en lugar de Page
Podemos crear un control de usuario con Agregar nuevo elemento.
Creamos un Copyright.
Tagprefix es el nombre que sustituye a asp en el código HTML
Tagname es el nombre de control Web.

Controles de usuario con código

Creamos un sitio Web en donde tengamos un control de usuario con un DataList que nos permita
visualizar la tabla Clientes de Neptuno.mdb.

public partial class WebUserControl2 : System.Web.UI.UserControl

{
public int CuantasColumnas
{
get {
return numeroColumnas; }
set { numeroColumnas = value; }
}
public RepeatDirection Direccion
{
get { return direccion; }
set { Direccion = value; }
}
private int numeroColumnas = 4;
private RepeatDirection direccion =
RepeatDirection.Horizontal;
protected void Page_PreRender(object sender, EventArgs e)
{
this.DataList1.RepeatColumns = this.numeroColumnas;
this.DataList1.RepeatDirection = this.direccion;
}
}

Podemos unar un control en otro sitio Web mediante Agregar elemetnos existente. Prueba el
control de usuario con código.

Práctica
Crea un control de usuario que nos permita mostrar en un GridView algunas columnas de la tabla
Custormer de NorthWind.
Aplica código a este control para habilitar la paginación correspondiente.
Utiliza este control de usuario en otro sitio Web.
¿Podrías crear un ddl que permitiera filtrar los datos por City a este control de usuario?

ASP.NET Elementos Web y Controles de usuario 2/2