ASP.

NET
3.5 -
Tutorial
Simple
Controles
de
servidor
ASP.NET


Krzysztof
Mossakowski
Tutoriales
Goles:
Mostrar un ejemplo del uso de elementos Web.
Pasos:
1. Crear un nuevo proyecto de aplicacin Web ASP.NET en Visual Studio.
2. En este tutorial vamos a crear una pgina web que contiene un encabezado
y 3 columnas personalizables. Creacin de una presentacin de la pgina,
por ejemplo, el uso de tablas:El cdigo:

< table cellpadding ="5" style =" width : 100% ; vertical-
align : top ; ">
< tr >
< td colspan ="3" class ="header">
Header
</ td >
</ tr >
< tr >
< td class ="column">
1st columna
</ td >
< td clase = "columna">
segunda columna
</ td >
< td clase = "columna">
tercera columna
</ td >
</ tr >
</ mesa >
Estilos CSS:
.header
{
text-align : center ;
background-color : #CCCCFF ;
}

.column
{
vertical-align : top ;
width : 33% ;
background-color : #CCFFCC ;
}
3. Aadir una WebPartManager control a la pgina. Aadir tambin
3 WebPartZone de control s , uno por columna. El WebPartManager tiene
que entrar el cdigo de marcado antes de todo WebPartZone.

o Por defecto, la personalizacin habilitado propiedad del
WebPartManager se establece en true. Esto significa, que se utilizar
el mecanismo de personalizacin ASP.NET basado en la base de
datos SQL Server. Para saber cundo ser necesario, establecer en
false ahora.
o Tenga en cuenta que en la salida de estos controles agregados son
invisibles:

4. Agregue un poco de contenido a las columnas: los controles de servidor
web, controles de usuario, controles personalizados, los controles de
servidor HTML, texto de fila, o elementos HTML: Echa un vistazo a los
resultados: Para deshacerse de estos feos 'Untitled [#]' texto, el cdigo
fuente de la pgina debe ser modificada manualmente en la vista
Cdigo. Agregar una propiedad de ttulos con texto deseado para cada
control:





5. Es hora de que el usuario pueda modificar el diseo (cambiar de lugar de los
controles, ocultar o mostrar ellos, e incluso modificar algunas de sus
propiedades) ahora. Los elementos web se basan en los modos. El modo
actual slo permite visualizar elementos web sin posibilidad de hacer
modificaciones.
o Aadir un DropDownList de control donde se mostrar una lista de
todos los modos disponibles: Agregar cdigo para el Init evento de la
pgina para rellenar dinmicamente el control DropDownList con los
nombres de todos los modos disponibles:

protected void Page_Init( object sender, EventArgs e)
{
if (!IsPostBack)
{
foreach ( WebPartDisplayMode mode in WebPartManage
r1.SupportedDisplayModes)
{
string modeName = Mode.Name;
si (mode.IsEnabled (WebPartManager1))
{
ListItem item = nuevo ListItem (MODENAME,
MODENAME);
modeDropDownList.Items.Add (item);
}
} } }

o Ejecute la pgina y observe que slo un modo ya est disponible:

6. Es hora de entender cmo los elementos Web se conectan con la
personalizacin. Elementos web permiten al usuario realizar cualquier
cambio en su diseo slo si va a haber un mecanismo para almacenar estos
cambios. La personalizacin es tal mecanismo, por lo que si queremos dar la
posibilidad al usuario modificar el contenido de la pgina, la personalizacin
debe estar habilitado.
o Establezca la Personalizacin habilitado propiedad del control
WebPartManager1 a true:
< asp : WebPartManager ID ="WebPartManager1" runat ="serve
r">
< Personalization Enabled ="True" />
</ asp : WebPartManager >
o Tenga en cuenta que la personalizacin requiere un proveedor de
personalizacin. El proveedor predeterminado utiliza SQL Server
2005 Express Edition, por lo que ahora se requiere una instancia de
trabajo de este servidor (por defecto, se utiliza la instancia. /
SQLEXPRESS, as que todo debe empezar a trabajar de forma
automtica).
o Ejecute la pgina y nota la diferencia: En Internet Explorer puede
parecer diferente:



o El modo de diseo est en una lista de los modos admitidos.
o Adems, para cada control se aade a cualquier control WebPartZone
a enlaces aparecido: Minimizar y Cerrar.
o Tenga en cuenta tambin que, en App_Data del proyecto carpeta una
base de datos SQL Server se crea automticamente -
ASPNETDB.MDF.
7. Ver el modo de diseo.
o En respuesta a la SelectedIndexChanged evento del control
modeDropDownList, establezca el modo elegido en el
WebPartManager.
protegida vaco modeDropDownList_SelectedIndexChanged
( objeto sender, EventArgs e)
{
string NewMode = modeDropDownList.SelectedValue;
WebPartDisplayMode mode =
WebPartManager1.SupportedDisplayModes [NewMode];
si (modo =! nula )
{
WebPartManager1.DisplayMode = modo;
}
}
o Para realizar una devolucin de datos despus de cambiar el
elemento seleccionado en la lista, establezca
la AutoPostBack propiedad del control modeDropDownList true.
o En el modo de diseo, el usuario puede arrastrar y soltar los
controles entre las zonas: Desafortunadamente, esta caracterstica
slo funciona en Internet Explorer.

8. El usuario puede cerrar un control utilizando el vnculo Cerrar, pero no
puede mostrar un control oculto. Para permitir que l haga esto, los
controles de elementos Web adicionales se deben agregar a la pgina.
o Aadir una CatalogZone control a la pgina. Dentro de este nuevo
control, coloque un nuevo PageCatalogPart control.

o Valo en accin: ejecutar la pgina, el modo de cambio de Catlogo
(nota, esta es una nueva modalidad, disponible debido a
existir e ncia del control CatalogZone). Todos los controles cerrados
se enumeran en el Catlogo.

9. El ltimo modo es Editar.
o El modo de edicin est disponible para el usuario si hay
un EditorZone control de la pgina, as que aadiremos a la pgina:

o Es slo un lugar para los editores, para que sea funcional, algunos
editores se deben agregar a la misma. Aadir
un AppearanceEditorPart y LayoutEditorPart :

o Ejecute la pgina. Elija el modo de edicin y que haga clic en la
opcin Editar disponible para un control visible:

o Como resultado, los editores aparecen: