Un poco de AJAX y CSS (Visual studio2005)

Hola amigos acá estoy un poco estresado ya que estoy en época de últimos certámenes y exámenes finales es por eso que no e tenido tiempo para postear pero a pesar de todo igual vamos hacer algo cortito bueno no los aburro mas aquí va el ejemplo.

Veremos 4 controles AJAX los cuales serán, CalendarExterder, TextBoxwaterMark, TabContainer, MutuallyExclusiveCheckBox, y algunas cosas pocas sobre CSS.
Después veremos más ya que solo tengo un ratito desocupado XD.
Bueno primero que todo creamos un nuevo sitio web

(Click en la imagen para agrandar)





Después agregamos un UpdatePanel dentro de este tienen que ir todas la herramientas que usaremos, después agregamos el control Ajax TabContainer con tres lengüetas, dentro de la primera lengüeta agregamos 2 Texbox , 3 botones, 2 CalendarExterder y 4 Label tendría que quedarnos algo así







Después hacemos doble Click sobre el botón “Total De Días De Diferencia” y agregamos el siguiente código en el método del botón el cual validara y ara el cálculo de días de diferencia entre la fecha de inicio y la de termino, el día de inicio no tendrá que ser mayor a la fecha de termino y no tendrá que a ver ninguna caja de texto vacía.

Código del botón

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

       Dim fecha_inicio As String
       Dim fecha_termino As String
       Dim diferencia As String

       fecha_inicio = txtInicio.Text
       fecha_termino = txtTermino.Text

       Try
           If CDate(fecha_inicio) > CDate(fecha_termino) Then
               lblResultado.Text = "La fecha de inicio no debe ser mayor a la fecha de  termino "

           Else

               diferencia = DateDiff("d", fecha_inicio, fecha_termino)

               lblResultado.Text = diferencia
               Label3.Text = "Dias De Diferencia Hay Entre La fecha De Inicio y La De Termino"


           End If

       Catch oMen As Exception
           lblResultado.Text = "Debe Seleccionar Ambas Fechas (Inicio y Termino)"

       End Try




   End Sub

Después tenemos que relacionar los controles Ajax con los botones para poder ver los calendarios y así elegir nuestra fecha de inicio y termino
“Btn1” será el nombre de nuestro botón “ver calendario” que esta el lado de la primera caja de texto y “txtInicio” será la primera caja de texto




Luego en nuestra segunda lengüeta agregaremos 2 Texbox, 1 botón, 2 controles TextBoxwaterMark y 2 Label, nos quedaría algo así





Al igual que el ejercicio anterior hay que relacionar el control Ajax con la caja de texto en la imagen aparece las propiedades del control Ajax en la propiedad TargetControlID seleccionamos que caja de texto que relacionaremos con el control Ajax, esto hay que hacerlo con ambos controles Ajax, o sea control Ajax1 con TextBox1 y control Ajax2 con Texbox2, luego nos dirigimos a las propiedades de la caja de texto y en la propiedad que aparece en la imagen Escribimos “Ingrese Usuario” y lo mismo en la caja de texto de la pass







Luego en nuestra lengüeta numero 3 agregaremos 4 CheckBox, 1 botón, 1 Label y 4 MutuallyExclusiveCheckBox, nos quedaría algo así





Y al Igual que en los anteriores ejemplos hay que relacionar los controles Ajax con los CheckBox, es igual que el ejemplo anterior de la marca de agua, control Ajax1 con CheckBox1 y así con todos…… y luego nos dirigimos a las propiedades del CheckBox y en la propiedad “Key” ponemos el numero 1, en esta ocasión tenemos que poner en cada propiedad “Key” de cada CheckBox el numero 1.

Ver Imagen……………







Luego hacemos doble click en el botón “Ver Selección” y agregamos el siguiente código…

 Protected Sub btnVer_Click(ByVal sender As Object, ByVal e As System.EventArgs)




       If (Me.che1.Checked = True) Then
           Me.lblSeleccion.Text = "Futbol"
       ElseIf (che2.Checked = True) Then
           Me.lblSeleccion.Text = "Tenis"
       ElseIf (che3.Checked = True) Then
           Me.lblSeleccion.Text = "Natacion"
       ElseIf (che4.Checked = True) Then
           Me.lblSeleccion.Text = "Pesas"


       Else
           lblSeleccion.Text = "Primero Debe Seleccionar Un Deporte"
       End If
   End Sub

Ahora agregamos un nuevo elemento en c: (en le raíz del proyecto), nueva hoja de estilos.css y le damos el nombre miEstilo.css y aceptar, nos aparecerá una hoja de estilos con un “body {}” en esta hoja agregamos el siguiente código CSS

body
{
background-color:#2AD4FF;
font:9px Arial;
padding:10px 280px
}
.cajasTexto
{

color:#666666;
font:8px Arial:
}
.botones
{
background:#FACF25;
color:#666666;
font:italic 9px Arial;

}

Para poder usar esta hoja de estilo tenemos que dirigirnos a página Default.aspx y buscamos la propiedad StyleSheet, luego buscamos nuestra página de estilos que creamos…





Después nos vamos a las propiedades de las cajas de texto y los botones y buscamos la propiedad CssClass, en la propiedad CssClass de las caja de texto ponemos “cajasTexto” y en la propiedad CssClass de los botones ponemos “botones”, recuerden que hay que hacer esto con cada botón y cada caja de texto, y así irán cambiando de color y forma nuestros controles “TexBox y Button”.

Bueno acá les dejo una imagen de cómo tendría que quedar la pagina usando CSS





Bueno como es costumbre acá les dejo el ejemplo completo funcionando (con sus respectivas instrucciones por supuesto) y cualquier duda, consulta o crítica es bienvenida ya que todos los días se aprende algo nuevo.

Y nos vemos en un tiempo más ya que empezó el ataque de exámenes finales uyyyyy ojala me baya bien XD………………………

Adiós.

Descargar Ejemplo