Practica 5 Master Pages

1.- Insertar un control Label de Standard en la vista Diseño de Default.aspx.

a. Observa el código generado en vista Código y su ubicación en el mismo.
b. En vista Código, generar una línea nueva, dar un enter al final del código generado.
c. De la barra de Herramientas, insertar un control RadioButton de Standard, observar
como se incrusta en forma de código, donde se encuentra el cursor.
d. Borrar el radiButton.
c. Volver a vista Diseño

2.- Enseguida del control Label, colocar un control table de HTML.

3.- Arrastar el control Label a la celda ubicada en la primera columna de la tercera fila
del control table.

4.- Tipear un texto (“Some sample text”) en la celda ubicada en la segunda columna de
la primera

5.- Insertar/arrastar un control Calendar de Standard en la celda ubicada en la primera

columna de la segunda fila del control table.

6.- Seleccionar (con el mouse) el control Calendar, en la ventana de Propiedades:

a. En Accesibilidad en la propiedad Caption, tipear “Click to find the number of days
until the end of the year”, observa que lo anterior aparece arriba del control Calendar.
b. En la propiedad ID, cambiar su valor predeterminado (Calendar1) por
NewYearCountdown.

7.- En la ventana Explorador de solución, expadir Default.aspx, se despliega

Default.aspx.vb, dar doble clic en éste.

8.- Colocar las ventanas de Default.aspx y Default.aspx.vb en forma vertical, mediante

sus pestañas (tabs).

9.- Seleccionar el control Calendar y en la ventana de Propiedades, dar clic en el botón

de eventos, se enciende en Acción la propiedad SelectionChanged, dar doble clic en el
control Calendar en vista diseño. Se genera un procedimiento (NewYearCountdown_
SelectionChanged) en Default.aspx.vb.

10.- Para obtener el número de días que faltan para terminar el año, tipear el siguiente
código dentro de NewYearCountdown_ SelectionChanged:

‘When the user selects a date on the calendar, calculate

‘The number of days left in the year, and display this
‘In the label.
Dim EndOfYear As DateTime = New DateTime(NewYearCountdown.SelectedDate.Year, 12, 31)
Label1.Text = EndOfYear.Subtract(NewYearCountdown.SelectedDate).Days

11.- Compila, ejecuta y publica el sitio Web. Para compilar, selecciona en el menú
desplegable Generar | Generar sitio Web, verificar que en la ventana de Resultados de
unaGeneración satisfactoria.
12.- Para ejecutar, dar clic en el botón Iniciar depuración o en el menú desplegable
Depurar | Iniciar depuración o con la tecla F5.

13. Ver la ejecución en un explorador. Seleccionar un día de un mes de cualquier día y

aparecerá (en el control Label) el número de días que faltan para el fin de año, abajo del
calendario.

14. En la ventana del Explorador de soluciones, en el sitio Web, hacer clic derecho, y
seleccionar Agregar un nuevo elemento…, aparece su ventana correspondiente, hacer
clic en Página principal, en Nombre tipear PageTempalte.master, deseleccionar la
opción “Colocar el código en un archivo independiente”, dar clic en Agregar.

15. En vista Diseño de PageTempalte.master, tipear sobre el ContentPlaceHolder, en el

área de contenido (área blanca) algún texto, “Default content goes here…”.

16. Cambiar PageTemplates.master a vista Código, y observar el texto que se incrusta

sobre el código, dentro de las etiquetas <asp:contentplaceholder>…
</asp:contentplaceholder>

17. Cambiar PageTemplates.master a vista Diseño. Borrar el texto.

18.- Agregar el control menú de Exploración arriba del ContentPlaceHolder.

19.- Seleccionar el control menú, dar clic en la pestaña de Tareas de Menu, seleccionar
“Editar elementos de menú…”, aparece el “Editor de elementos de menú”, dentro de él,
seleccionar el botón “Agregar un elemento de raíz”, hacer lo mismo otra vez. Aparecen
dos nuevos elementos.

20.- En la ventana de Propiedades, para cada uno de los nuevos elementos, en su

propiedad Text, en lugar de Nuevo elemento, tipear “Home” y “Contact Us”.

21.- En la propiedad NavigateUrl para Home tipear o seleccionar Default.aspx.

22.- En la propiedad NavigateUrl para Contact Us tipear contactus.aspx (página que no

se creada, por el momento).

23.- Dar Aceptar. Observar el cambio en la vista Diseño.

24.- Enlazar las páginas Default.aspx con la masterpage PageTempalte.aspx. Ir a la vista

Código de Default.aspx.

25.- En la primera línea de código, después de < Page … insertar:

MasterPageFile=”~/PageTemplate.master”

26.- Enseguida (después) de la primera línea de código, insertar las siguientes etiquetas
de apertura y cerradura y dejar un espacio (unas líneas) entre ellas:
<asp:Content ContentpalceHolderID=”ContentPlaceHolder1 runat=”server”>

</asp:Content>
27.- Eliminar las siguientes líneas de código de Default.aspx hasta la etiqueta <div>.

28.- Eliminar las líneas siguientes (3) de la etiqueta de cerradura </div>

29.- Seleccionar y cortar toda la etiqueta <div> y pegarla entre las etiquetas
<asp:Content ContentpalceHolderID=”ContentPlaceHolder1 runat=”server”> …
</asp:Content>

30.- Crear una WebForm, Agregar un nuevo elemento en el sitio Web, darle el nombre:
contactus.aspx y seleccionar las opciones “Colocar el código en un archivo
independiente” y “Seleccionar la página principal”. Dar Agregar. Seleccionar una
página principal. Solo hay una seleccionada. Dar Aceptar.

31.- Dos opciones: en vista Código de contactus.aspx, insertar el siguiente texto, dentro
de las etiquetas generadas <asp:content …> y </asp:content>:

Feel free to get in touch with us for more information!”

Contoso.Ltd
One Microsoft Way
Redmond, WA 98052

(123) 555-1212

31bis.- O en vista Diseño de contactus.aspx, en el área de contenido (área blanca)

insertar el siguiente texto

Feel free to get in touch with us for more information!”

Contoso.Ltd
One Microsoft Way
Redmond, WA 98052

(123) 555-1212