Libro ASP - Net-Parte 1
Libro ASP - Net-Parte 1
Libro ASP - Net-Parte 1
www.jlarico.com
2013
Captulo 1:
Introduccin a ASP.NET
Objetivos del Capitulo Despus de completar este captulo Ud. estar en condicin de 1. Comprender la filosofa que ASP.NET propone para el desarrollo de aplicaciones web. 2. Comprender y aprovechar las ventajas que proporciona el .NET Framework, as como el entorno de Visual Studio.NET para el desarrollo de aplicaciones web.
www.jlarico.com
Introduccin
ASP.NET es un marco (Framework) de programacin que ha sido construido sobre el .NET Framework y que nos permite construir aplicaciones web de gran performance y a nivel empresarial. Esto se logra gracias al aprovechamiento que hace de otras tecnologas constituyentes del Framework: XML, ADO.NET principalmente. ASP.NET no es, entonces una nueva versin de ASP, sino una nueva filosofa de programacin a la que apuesta Microsoft con Visual Studio.NET
Por qu cambiar?
ASP se lanz como una alternativa flexible para el desarrollo web, que fue ganando aceptacin rpidamente. Sin embargo, sincermonos, tena varios puntos en contra con relacin a sus competidores ms cercanos. 1 Es un lenguaje de scripts: Es decir bsicamente interpretado y con dos sabores para escoger un lenguaje. VBScript o JavaScript. El problema con esto tambin viene en dos sabores: no existen tipos (como en Visual Basic o c++) y el cdigo no se compila. Estos factores conllevan a una prdida de performance y poca escalabilidad 2 Cdigo muy extenso: Por ms que sea una tarea, esta muchas veces requiere de varias lneas de cdigo, dando como resultado un pequeo engendro viviendo en nuestra pgina. Cdigo poco legible y difcil de mantener que llevo al uso de los archivos de inclusin como una solucin salvadora. 3 Presentacin y lgica unidos: Qu desarrollador de ASP no ha pasado por el suplicio al trabajar en equipo, que un colega (lase diseador grfico) ha modificado o borrado accidentalmente parte de su cdigo? Cunto tiempo perdido buscando la manera de no estropear el trabajo del otro y lograr un resultado consistente y coordinado? 4 Incompatibilidad de browsers: El mundo actual necesita de soluciones multibrowser, multi-dispositivo, multi-plataforma (y mientras ms multis mejor). Parece difcil lograr un producto que sirva para todos, sin embargo, acaso no se podran aprovechar los estndares existentes (entre ellos XML como el ms reconocido)?
Qu ha cambiado?
Digamos que explicar en uno o dos prrafos los cambios que trae ASP.NET es una empresa que poco menos que imposible, as que resumamos: ASP.NET mejora muchas de las cosas que ya sabamos hacer con ASP e incluye muchas novedades En este material se buscara una explicacin lo ms detallada posible sobre los puntos bsicos de ASP.NET tomando como premisa que el lector no conoce nada de ASP. Ahora bien, para los que conocen les sugiero de todas formas la molestia de leer las temas conocidos ya que encontraran muchas novedades y datos interesantes, como deben hacer ahora las cosas que ya saban hacer.
www.jlarico.com
ASP vs ASP.NET
Tranquilos desarrolladores de ASP, ASP.NET permite combinar en una aplicacin web pginas con extensin, ASP y ASPX. Adems, el tiempo invertido en aprender ASP les servir pues, como se indic anteriormente, existen caractersticas que no han cambiado.
Beneficios
ASP.NET trae un paquete interesante de ventajas para nosotros los sufridos desarrolladores 1 Cdigo ms limpio. Ahora la programacin se realiza en un archivo separado al que aloja la presentacin. Estos archivos de cdigo son conocidos como code-behind y tienen la extensin .aspx.vb. Ahora bien, si Ud. lo desea ASP.NET aun permite la creacin de pginas con todo mezclado. Esto permitir sin duda la transicin suave para los que desarrollan con ASP, aunque, si este no es su caso, le regamos evitar esta opcin en lo posible 2 Soporte para mltiples lenguajes: Ya que ASP.NET est construido bajo el .NET Framework permite el uso de mltiples lenguajes como VB.NET, C#. ahora bien, esto lleva consigo otras ventajas adicionales como el hecho de disponer por fin de lenguajes compilados(mas que interpretados) y con una capacidad muy superior a lo que uno tena acceso antes(si ya conoce VB.NET debe entender esto fcilmente) 3 Procesamiento en el servidor: ASP nos tena acostumbrados a la ejecucin secuencial (arriba-abajo) del cdigo. ASP.NET propone al desarrollador la programacin al estilo Visual Basic, esto es, definicin de la interfaz y luego realizacin del cdigo. Para esto ingresa a nuestro mundo el concepto de controles que corren en el servidor. As tenemos que, si en ASP un control del tipo texto se defina de la siguiente manera: <INPUT name=Nombre type=text value=Ingrese su nombre> Ahora deber escribir lo siguiente <INPUT Id=Nombre type=text value=Ingrese su nombre runat=server> Not los cambios? Disculpe si la pregunta fue ofensiva, estoy seguro que si Los controles ahora se identifican por ID, como en DHTML El atributo runat permite indicar que el control correr en el servidor 4 Soporte para mltiples browsers y dispositivos. En ASP.NET existen 2 tipos de controles de servidor. HTML server( el que se mostro en el ejemplo anterior) y web server <ASP:TextBox id=txtNombre runat=server>Ingrese su nombre</ASP:TextBox> Este ltimo es mucho mas inteligente ya que puede generar su propio cdigo HTML, el cual puede variar dependiendo del browser que tenga el cliente. Si, es cierto, atrs quedan entonces los clsico cdigos para verificar el tipo de browser y en base a este ejecutar uno u otro cdigo.
www.jlarico.com
importante con relacin a las paginas ASP tradicionales, la cual permite mayor seguridad, funcionalidad y soporte para mltiples browsers. Los web forms tambin son conocidos como paginas ASP.NET o paginas aspx. Esta extensin hace la diferencia con sus antecesores, lo cual posibilita la integracin de pginas .asp y aspx en una misma aplicacin web.
Significado Define el lenguaje en el cual el script esta escrito. Pueden usarse vb, csharp y JScript AutoEventWireup False por defecto. Este atributo permite que el nombre del procedimiento de evento pueda ser diferente al nombre del evento que maneja. Es decir, podemos tener procedimiento llamado MiCodigo el cual responda al evento txtBasico.Click. Esto rompe con la costumbre VB6 de tener un procedimiento con un nombre asociado al evento. Se recomienda no cambiar el valor por defecto. CodeFile Identifica la pgina que tiene el cdigo (lgica) asociada al web form. Esta pgina se crea en forma automtica cuando se agrega un web form. Inherits Indica el nombre de la clase de la cual hereda el cdigo. Esta clase esta definida en la pagina code-behind y se crea en forma automtica. Si Ud. crea una aplicacin llamada Demo01 y agrega una pagina Ingreso.aspx el nombre de la clase ser Demo01.Ingreso ya que la clase se crea con el nombre del web form. 2 Body: Define la apariencia de los objetos que son mostrados en el browser del cliente 3 Form: El tag <form> define la manera como sern procesados los controles de la pagina, mas no toda la pagina. Esto significa que se pueden tener vario formularios por pagina, aunque slo uno de ellos podr tener el atribulo runat=server <form id="form1" runat="server"> </form> Atributo method Significado Identifica como serna enviados los valores de vuelta al servidor. Las opciones son Post. Los datos son pasados en pares nombres/valor dentro del body Get. Los datos son pasados como una cadena concatenada(querystring) Este atribulo causa que el formulario ponga (post) los datos
www.jlarico.com
Atributo Language
runat
Julio Javier Larico Tipula
de vuelta al servidor, donde el cdigo ser ejecutado. De no indicarse, el formulario ser tratado como un form HTML. Prctica1 1 Crear y usar un web form 2 Inicie Visual Studio 3 Seleccione, File, New Project
5 En plantillas, elija ASP.NET web Application 6 En Name, ingrese un nombre para el proyecto Demo01 y haga clic en OK
7 Por defecto se crea una pgina llamada Default.aspx. haga clic derecho sobre esta pgina y elija Delete
Julio Javier Larico Tipula www.jlarico.com
8 Haga clic derecho sobre el nombre del proyecto (En el explorador de soluciones) Add, New Item
10 En nombre escriba.Ingreso.aspx y haga clic en Add 11 Disee el web form tomando como muestra la siguiente pantalla. Use los controles Label, TextBox, DropDownList y Button
www.jlarico.com
12
Valor Ingreso de datos Nombre Cliente <vacio> lblPrecio txtCliente dropProducto Calcular btnCalcular Limpiar btnLimpiar
Modelo final
www.jlarico.com
Ingreso.aspx Ingreso.aspx Ingreso.aspx.vb La extensin de la pagina code-behind puede varias de acuerdo al lenguaje usado, as tenemos que podra ser .aspx.vb o aspx.cs si fue hecha con vb.net o C# respectivamente. Habra que mencionar que no se pueden mezclar 2 lenguajes en una misma pgina. Prctica 2 Agregar cdigo 1 Abra el proyecto Demo01 que cre anteriormente
2 Haga clic en el botn Show All Files (ubicado en el solution explorer) 3 Esto mostrara las pginas Code-behind que por defecto estn ocultas
www.jlarico.com
5 En Class Name elija Form1 6 En Method Name elija Load 7 Despus de ejecutar el procedimiento anterior, deber crearse el siguiente procedimiento
Private Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load ........... ........... End Sub
9Abra la lista Class Name y escoja btnCalcular. Abra la lista Method Name y escoja click. Debera crearlo lo siguiente
Private Sub btnCalcular_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCalcular.Click ........... ........... End Sub
12 Guarde y ejecute su proyecto. 13 Abra la lista productos, observara 3 productos. Haga clic en el boton Calcular, debe aparecer el precio de acuerdo al producto seleccionado. Haga clic en el boton Limpiar para limpiar el cuadro de texto y la etiqueta, y deseleccionar el dropdownlist.
Julio Javier Larico Tipula www.jlarico.com
Captulo 2
www.jlarico.com
www.jlarico.com
4 Pase a la vista cdigo (Source), busque la etiqueta input que se ha creado por la accin anterior. Agregue los siguientes manejadores de evento:
onclick ="cliente();" onserverclick ="servidor" runat ="server"
7 Guarde y ejecute su proyecto. 8 No ingrese ningun texto en el cuadro de Cliente. Luego haga clic en el boton Validar. Observe el orden en que se ejecutan las validaciones. Practica 4
Disear la pagina aspx llamada alumnos.aspx que permita calcular el promedio de un alumno.
1 Establecer las siguientes propiedades. * Insertar una tabla de 10F y 2C, ancho 400Px Objeto Propiedad Textbox1 ID DropDownList1 ID Textbox2 ID Textbox3 ID Textbox4 ID Textbox5 ID Label ID
Julio Javier Larico Tipula
Button Button
ID ID
btnCalcular btnNuevo
4 Para agregar los Item al control ddlCurso. a Seleccionar el control b Seleccionar su propiedad Items
www.jlarico.com
c Clic en Examinar
d Clic en Add
e En text escribir el valor correspondiente f Repetir los pasos para agregar otros Items * La propiedad width de todos los controles es 150Px
www.jlarico.com
Prctica 5 Disear una pgina (sueldo.aspx) web que calcule el sueldo de un empleado El sueldo depende del cargo a) Gerente 4000 b) Jefe 3500 c) Empleado 1200 d) Seguridad 1200 Bonificacin segn estado civil a) Divorciada 50 b) Casado 100 c) Divorciado 80 d) Viudo 90
Instituto de Educacin Superior Tecnolgico Pblico Arturo Sabroso Montoya imp1 = total * 0.1 Else imp1 = 0 End If If chkImpuesto.Items(1).Selected Then imp1 = total * 0.02 Else imp2 = 0 End If
Prctica 6 Desarrollar una aplicacin web que permite recopilar la preferencia de nuestros clientes Diseo de la pgina default.aspx
1 Establecer el nombre de los controles de acuerdo a la siguiente tabla Control Propiedad Valor TextBox1 ID TxtNombre TextBox2 ID txtEmail CheckBoxList ID chkInformacion
Julio Javier Larico Tipula www.jlarico.com
RadioButtonList
Internet Sistemas operativos Ofimatica rbInternet Si No LsUsoPC TxtCaracteristicas Multiline BtnEnviarDatos btnRestablecer
3 Cambiar las propiedades de acuerdo a la siguiente tabla Control Propiedad Valor Label1 ID lblNombres Label2 ID lblEmail Label3 ID lblInformacion Label4 ID lblConexion Label5 ID lblActividades Label6 ID lblCaracteristicas 4 Cdigo de la pgina default.aspx
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If IsPostBack Then Session("informacion") = "" Session("sistemas") = "" Session("ofimatica") = "" Session("trabajo") = "" Session("juego") = "" End If End Sub Protected Sub btnEnviarDatos_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnEnviarDatos.Click Session("nombre") = txtNombre.Text Session("email") = txtEmail.Text
www.jlarico.com
Instituto de Educacin Superior Tecnolgico Pblico Especialidad de Computacin e Informtica Arturo Sabroso Montoya 'informacion '-----------------------------------If chkInformacion.Items(0).Selected Then Session("informacion") = chkInformacion.Items(0).Text End If If chkInformacion.Items(1).Selected Then Session("sistemas") = " ," & chkInformacion.Items(1).Text End If If chkInformacion.Items(2).Selected Then Session("ofimatica") = " ," & chkInformacion.Items(2).Text End If '-----------------------------------'Te conectas a internet desde tu casa '-----------------------------------If rbInternet.Items(0).Selected Then Session("internet") = rbInternet.Items(0).Text Else Session("internet") = rbInternet.Items(1).Text End If '-----------------------------------'Uso de la pc '-----------------------------------If lsUsoPC.Items(0).Selected Then Session("trabajo") = lsUsoPC.Items(0).Text End If If lsUsoPC.Items(1).Selected Then Session("juego") = lsUsoPC.Items(1).Text End If '-----------------------------------Session("caracteristicas") = txtCaracteristicas.Text Response.Redirect("Informe.aspx") End Sub
www.jlarico.com
Prctica 7 Desarrollar una aplicacin que permita seleccionar uno o varias opciones haciendo uso del control checkboxlist 1 Agregar el siguiente cdigo en la seccion head
<script runat="server"> Sub Check_Clicked(sender as Object, e As EventArgs) Message.Text = "Item Seleccionado(s):<br /><br />" Dim i As Integer For i=0 To checkboxlist1.Items.Count - 1 If checkboxlist1.Items(i).Selected Then Message.Text &= checkboxlist1.Items(i).Text & "<br />" End If Next End Sub </script>
www.jlarico.com
4 Proyecto en ejecucin
Prctica 8 Desarrollar una aplicacin web que permita elegir una opcin de varias. Emplear el control RadioButtonList 1 Agregar el siguiente cdigo en la seccin head
<script language="VB" runat="server"> Sub Button1_Click(Source As Object, e As EventArgs) If RadioButtonList1.SelectedIndex > - 1 Then Label1.Text = "Usted Selecciono: " & RadioButtonList1.SelectedItem.Text End If End Sub Sub chkLayout_CheckedChanged(sender As Object, e As EventArgs) If chkLayout.Checked = True Then RadioButtonList1.RepeatLayout = RepeatLayout.Table Else RadioButtonList1.RepeatLayout = RepeatLayout.Flow End If End Sub Sub chkDirection_CheckedChanged(sender As Object, e As EventArgs) If chkDirection.Checked = True Then RadioButtonList1.RepeatDirection = RepeatDirection.Horizontal Else RadioButtonList1.RepeatDirection = RepeatDirection.Vertical End If End Sub </script>
www.jlarico.com
<asp:RadioButtonList id="RadioButtonList1" runat="server"> <asp:ListItem>Item 1</asp:ListItem> <asp:ListItem>Item 2</asp:ListItem> <asp:ListItem>Item 3</asp:ListItem> <asp:ListItem>Item 4</asp:ListItem> <asp:ListItem>Item 5</asp:ListItem> <asp:ListItem>Item 6</asp:ListItem> </asp:RadioButtonList> <br /> <asp:CheckBox id="chkLayout" OnCheckedChanged="chkLayout_CheckedChanged" Text="Display Table Layout" Checked="true" AutoPostBack="true" runat="server" /> <br /> <asp:CheckBox id="chkDirection" OnCheckedChanged="chkDirection_CheckedChanged" Text="Display Horizontally" AutoPostBack="true" runat="server" /> <br /> <asp:Button id="Button1" Text="Submit" onclick="Button1_Click" runat="server"/> <br /> <asp:Label id="Label1" font-names="Verdana" font-size="8pt" runat="server"/>
4 Proyecto en ejecucin
www.jlarico.com
Captulo 3
Controles avanzados
Objetivos del Captulo Despus de completar este captulo Ud. Estar en condicin de 1. Trabajar con el Control AdRotator 2. Desarrollar aplicaciones web empleando el control FileUpLoad
www.jlarico.com
El Control AdRotator
AdRotator permite que cada vez que se carga la pgina, un banner es escogido de forma aleatoria y de acuerdo a los pesos que le asignemos. Prctica 9 Crear una aplicacin web que muestre un banner de forma aleatoria. Procedimiento 1 Crear un nuevo proyecto web:AdRotator 2 Agregar un control AdRotator 3 Agregar tres imgenes al proyecto web: cables.jpg, cadena.jpg, candado.jpg 4 Agregar un archivo de tipo *.xml y establecer el nombre a banner.xml
www.jlarico.com
7 Grabe y ejecute su proyecto. La imagen deber mostrarse en forma aleatoria. Esto depender del peso establecido a cada imagen
www.jlarico.com
El Control Panel
Acta como contenedor de otros controles. Prctica 10 Crear una aplicacin web que muestre el uso del control panel Procedimiento 1 Iniciar un nuevo proyecto web: Panel 2 Agregar dos controles, el panel y un control checkbox 3 Dentro del panel escribir: Ejemplo de panel
4 Seleccionar el control CheckBox y cambiar las siguientes propiedades AutopostBack True Checked True 5 Hacer doble clic izquierdo sobre el control Checkbox y agregar el siguiente cdigo
Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) Handles CheckBox1.CheckedChanged Panel1.Visible = CheckBox1.Checked End Sub
www.jlarico.com
www.jlarico.com
MultiView
Es un contenedor para un grupo de controles view. Permite definir un grupo de controles View en el que cada control View contiene controles secundarios Prctica11 Disear un proyecto web que muestra el uso del control multiview y view Procedimiento 1 Crear un nuevo proyecto web: Multiview 2 Agregar un control Multiview 3 Dentro del Multiview, agregar 4 controles view(tambin agregar el texto: Contenido de)
4 Agregar un control RadioButtonList (fuera del Multiview) y agregar los tems Item 0 1 2 3
www.jlarico.com
5 Seleccionar el control Multiview y establecer la propiedad ActiveViewIndex a 0 6 Seleccionar el control RadioButtonList y activar la propiedad AutoPostBack
FileUpload
Muestra un control de cuadro de texto y un botn de bsqueda que permite a los usuarios seleccionar un archivo para cargarlo al servidor.
www.jlarico.com
Prctica 12 Desarrollar una aplicacin web que permite al usuario, subir un archivo al servidor. Procedimiento 1 Crear un nuevo proyecto web: Fileupload 2 Agregar un control FileUpload y un button
www.jlarico.com
Captulo 4
Validaciones
Objetivos del Captulo Despus de completar este captulo Ud. estar en condicin de 1. Trabajar con los controles de validaciones 2. Darle consistencia a nuestro proyecto web 3. Realizar validaciones en el cliente 4. Realizar validaciones en el servidor
www.jlarico.com
Validaciones
Un aspecto importante de la creacin de pginas Web ASP.NET para la entrada de datos por el usuario consiste en poder comprobar que la informacin que introducen los usuarios es vlida. ASP.NET ofrece un conjunto de controles de validacin que proporciona una forma eficaz y fcil de usar para comprobar errores y, si es necesario, mostrar mensajes al usuario 1 ValidationSummary Muestra un resumen de todos los errores de validacin en lnea en una pgina Web, en un cuadro de mensaje. Comentarios La clase ValidationSummary se utiliza para resumir los mensajes de error de todos los controles de validacin de una pgina Web, en una sola ubicacin. El resumen puede aparecer en forma de lista, de lista con vietas o como un nico prrafo, en funcin de la propiedad DisplayMode. El resumen puede aparecer en una pgina Web y en un cuadro de mensaje estableciendo las propiedades ShowSummary y ShowMessageBox, respectivamente. 2 RequiredFieldValidator Utilice el control RequiredFieldValidator para validar que el usuario ha escrito un valor de datos en un control SelectionList o TextBox.
Establezca la propiedad ControlToValidate del control RequiredFieldValidator en el ID del control SelectionList o TextBox que se va a validar. Si no hay ningn valor de datos, el control RequiredFieldValidator muestra el valor de su propiedad ErrorMessage. 3 RangeValidator Comprueba si el valor de un control de entrada est comprendido en un intervalo especificado de valores. Comentarios El control RangeValidator comprueba si el valor de un control de entrada est dentro de un intervalo especificado. El control RangeValidator utiliza cuatro propiedades clave para realizar la validacin. La propiedad ControlToValidate contiene el control de entrada que se va a validar. Las propiedades MinimumValue y MaximumValue especifican los valores mnimo y mximo del intervalo vlido. 4 RegularExpressionValidator Evala el valor de un control de entrada para determinar si coincide con un modelo definido por una expresin regular.
www.jlarico.com
Comentarios El control RegularExpressionValidator se utiliza para determinar si el valor de un control de entrada coincide con un patrn definido por una expresin regular. Este tipo de validacin permite comprobar secuencias de caracteres previsibles, como las de los nmeros de la seguridad social, las direcciones de correo electrnico, los nmeros de telfono y los cdigos postales, entre otras. 5 CompareValidator Compara el valor especificado por el usuario en un control de entrada con el valor especificado en otro control de entrada o con un valor constante. Comentarios Utilice el control CompareValidator para comparar el valor especificado por el usuario en un control de entrada, como un control TextBox, con el valor especificado en otro control de entrada o con un valor constante. El control CompareValidator supera la validacin si el valor del control de entrada coincide con los criterios especificados por las propiedades Operator, ValueToCompare o ControlToCompare. 6 CustomValidator Realiza una validacin definida por el usuario en un control de entrada. Comentarios Use el control CustomValidator para proporcionar una funcin de validacin definida por el usuario para un control de entrada. El control CustomValidator es un control distinto del control de entrada que valida, lo que permite controlar dnde se muestra el mensaje de validacin. Los controles de validacin siempre realizan la validacin en el servidor. Tambin tienen una implementacin completa en el cliente que permite a los exploradores compatibles con secuencias de comandos (como Internet Explorer versin 4.0 o posterior) realizar la validacin en el cliente. La validacin en el cliente mejora el proceso de validacin, ya que se comprueba la entrada del usuario antes de enviarla al servidor. De este modo, se puede detectar los errores en el cliente antes de enviar el formulario y se evita el recorrido de ida y vuelta de la informacin necesaria para la validacin en el servidor. Propiedades Generales ID Identificador del control ErrorMessage Mensaje de muestra si ocurre un error Text Muestra de un carcter que indica donde ocurri un error Propiedades de CustomValidator Value valor del control a validar en el momento de ser enviado IsValid Devuelve un estado verdadero o falso.
www.jlarico.com
Prctica 13 Crear la aplicacin de tipo Aplicacin web ASP.NET que permita validar el ingreso de datos. La edad permitida debe ser entre 18 y 60 1. Ingresar en nombre : login
3. Eliminar la etiqueta div que aparece inicialmente en nuestra pagina 4. Hacer clic dentro de form e insertar una tabla a. Filas 8 b. Col 2 c. Alineacin Centrar d. Ancho 400px
www.jlarico.com
6. Pegar dentro de la carpeta imgenes el archivo logo01.jpg (solicitar el profesor de curso) 7. Para continuar haga clic derecho en la carpeta imgenes y seleccione Agregar, Elemento existente
www.jlarico.com
Insertar la imagen logo01.jpg en la primera fila A partir de la segunda fila digitar lo siguiente (ver modelo) y ubicar los cuadros de texto respectivos
www.jlarico.com
Cambiar la propiedad ID de los cuadros de texto Textbox1 txtNombre TextBox2 txtApellidos TextBox3 txtEdad Textbox4 txtCodigo Seleccionar la sexta fila y combinar las dos celdas Insertar un control Button en la sexta fila, cambiar su propiedad Text a Enviar y luego centrarlo Cambiar la propiedad width del control Button a 100px Insertar el control RequeriedFielValidator (uno por cada fila)
1 2 3 4
Configurar el control RequiredFielValidator de acuerdo a la siguiente informacin RequiredFieldValidator1 ID ErrorMessage Text ControlValidate reqNombres Debe escribir su nombre * txtNombres
ControlValidate
txtApellidos
RequiredFieldValidator3 ID reqEdad ErrorMessage Debe escribir su edad Text * ControlValidate txtEdad RequiredFieldValidator4 ID reqFecFac ErrorMessage Debe escribir su fecha de nacimiento Text * ControlValidate txtFecNac Para Edad agregar un control RangeValidator y establecer sus propiedades a. ID reqValidaEdad b. ErrorMessage Su edad no es permitida c. Text * d. MaximunValue 60 e. MinimunValue 18 f. ControlToValidate txtEdad Combinar las dos celdas de la stima fila Finalmente agregar un control ValidationSummary en la stima fila
www.jlarico.com
Combinar las dos celdas de la octava fila y pintarlo de color :Hex={33,99,FF} Diseo final
www.jlarico.com
Prctica 14 Realizar una aplicacin web que solicite una contrasea al usuario. Si es correcto mostrar la pgina de bienvenido.htm Realizar el siguiente diseo para la pgina principal
1 Crear el un nuevo proyecto web asp.net: validaciones 2 Cambiar a la vista cdigo 3 En la seccin Head agregar el siguiente cdigo
<SCRIPT runat="server"> Sub pasar (obj As Object, e As EventArgs) If Page.IsValid Then Response.Redirect("validar3.htm") End If End Sub </SCRIPT>
<asp:RequiredFieldValidator ID="valPassword1" Runat="server" ControlToValidate="txtPassword" EnableClientScript="True" Display="None" ErrorMessage="<br><div align=center><b>Contrasea</b> es un campo obligatorio.</div>" /> <asp:CompareValidator ID="valPassword2" Runat="server" ControlToValidate="txtPassword" ValueToCompare="xxx" Operator="Equal" EnableClientScript="True" Display="None" ErrorMessage="<br><div align=center><b>Contrasea</b> no vlida.</div>" /> <asp:RequiredFieldValidator id="valConfirmar" ControlToValidate="txtConfirmar" EnableClientScript="true" Display="None" Runat="server" ErrorMessage="<br><div align=center><b>Repetir contrasea</b> es un campo obligatorio.</div>" /> <asp:CompareValidator id="valComparar" ControlToValidate="txtConfirmar" ControlToCompare="txtPassword" Display="None" EnableClientScript="true" ErrorMessage="<br><div align=center>Ambas contraseas deben <b>coincidir</b>.</div>" Runat="server" /> <br> <asp:ValidationSummary runat="server" DisplayMode="SingleParagraph" ShowSummary="True" ShowMessageBox="False" ID="valSumario" HeaderText="<div align=center><u>Se han encontrado los siguientes errores</u>: </div>" FontSize="10pt" Font-Names="Verdana" /> </div> </FORM >
www.jlarico.com
Validacin Cliente
Una vez definido nuestro esquema inicial, el siguiente paso ser escribir la funcin de validacin del lado del cliente para lo cual ser necesario cambiar a la vista a Cdigo. La funcin de validacin puede estar en cualquier lenguaje scripting (VbScript, JavaScript) FuncionQueValida (source, arguments) , en donde el parmetro source representa el objeto que origin la validacin, arguments contiene la funcionalidad mediante la cual indicaremos el estado de la validacin (Valida o No Valida) A continuacin crearemos un proyecto el cual tendr como finalidad asegurarse que se introduzcan una secuencia valida de nmeros incremental en 2 posiciones. Secuencia Valida: 1,3,5,7,9 Secuencia No Valida: 1,3,4,5,6 Cdigo
<script language=javascript> function ValidaSecuencia(source, arguments) { //Obtiene valor inicial var Valor = document.all.TextBox1.value; //Comprobacin de valor numerico if (isNaN(parseInt(Valor))) { arguments.IsValid = false; return; } Valor = parseInt(Valor); //Se hace el cast a int ya que proviene de un string var incn; //Bucle para comparar los valores introducidos en las cajas de texto for (incn = 2; incn < 6; incn++) { Valor += 2; //Se incremente el valor en dos posiciones textbox = eval("document.all.TextBox" + incn); //Se obtiene el objeto de texto if (textbox.value != Valor) {//Se realiza la comparacin del valor esperado Julio Javier Larico Tipula www.jlarico.com
Instituto de Educacin Superior Tecnolgico Pblico Especialidad de Computacin e Informtica Arturo Sabroso Montoya arguments.IsValid = false; return; } } arguments.IsValid = true; //Si llego hasta aqui entonces la validacin fue exitosa } </script>
Seleccionar el control CustomValidator y escribir ClientValidationFunction : ValidaSecuencia ErrorMessage : Secuencia de datos no valida
Validacin Servidor
Prctica 16
La validacin en el servidor debe contener la misma funcionalidad que contemplamos dentro de la validacin del lado del cliente, la diferencia por supuesto, ser que sta ya no ser en cdigo script, dicha validacin la realizaremos dependiendo del lenguaje en el que estemos desarrollando nuestra aplicacin. Lo que haremos ser escribir cdigo para el evento ServerValidate de nuestro control CustomValidator1, la estructura de la funcin es similar a la descrita para la funcin cliente, recibe dos parmetros sender y args.
Private Sub CustomValidator1_ServerValidate(ByVal source As System.Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate 'Obtiene valor inicial Dim Valor As Integer = -1 Try Julio Javier Larico Tipula www.jlarico.com
Instituto de Educacin Superior Tecnolgico Pblico Especialidad de Computacin e Informtica Arturo Sabroso Montoya 'Intenta hacer la conversin a int para comprobar que sera un valor numerico Valor = Int32.Parse(TextBox1.Text) Catch args.IsValid = False Exit Sub End Try 'Bucle para comparar los valores introducidos en las cajas de texto For incn As Integer = 2 To 5 Valor += 2 'Se incremente el valor en dos posiciones Dim objTxt As TextBox = Page.FindControl("TextBox" + Convert.ToString(incn)) 'Se obtiene el objeto de texto Try If (CType(objTxt.Text, Int32) <> Valor) Then 'Se realiza la comparacin del valor esperado args.IsValid = False Exit Sub End If Catch 'No es un valor numerico args.IsValid = False Exit Sub End Try Next args.IsValid = True 'Si llego hasta aqui entonces la validacin fue exitosa End Sub Agregar el siguiente cdigo en el botn Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click If (Page.IsValid) Then Response.Write("Nmeros Validos") End If End Sub
Seleccionar el control custom validator y en su propiedad Error Message escribir: Error...datos no validos
www.jlarico.com
Prctica 17
Seleccionar el control de validacin y escribir en su propiedad ErrorMessage: Debe indicar un valor par Agregar el siguiente cdigo en el Button Enviar
Protected Sub btnEnviar_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnEnviar.Click If Page.IsValid = True Then Response.Write("La pagina es valida") Else Response.Write("La pagina no es valida") End If End Sub
www.jlarico.com
Captulo 5
Navegacin
Objetivos del Captulo Despus de completar este captulo Ud. estar en condicin de 1. Trabajar con los controles de Navegacin 2. Trabajar con hojas de estilo en cascada 3. Enlazar el archivo css a nuestra pgina aspx
www.jlarico.com
Controles de Navegacin
Los controles Menu, TreeView, SiteMapPath y SiteMapDataSource generan una interface de usuario (IU) de navegacin basada en los datos de navegacin. Estos datos pueden ser almacenados en archivos XML, o usando las capacidades de almacenamiento de la Navegacin del Sitio Prctica 18 1. Crear el sitio DemoASP 2. Agregar una carpeta: Imagenes 2. Eliminar la pgina default.aspx 3. Agregar una pgina principal: Site1.Master
Cuerpo
www.jlarico.com
5. Colocar las imgenes correspondientes desde la carpeta imgenes. 6. Para el caso de lateral, establecer como color de fondo: Hex={FF,FF,CC} 7. Agregar el control ContentPlaceHolder1 en la seccin cuerpo. 8. Agregar el control de Navegacin Men a la seccin men y configurar sus propiedades Orientacin : Horizontal With : 100px 9. En tareas de men para el control seleccionar clsica
10. Agregar un control Treeview en la seccin lateral 11. En tareas de Treeview seleccionar el estilo MSDN. Tambin activar Mostrar lneas
www.jlarico.com
12. Agregar la pgina de contenido Inicio.aspx en la raz del sitio 13. Agregar las siguientes pginas dentro de las carpetas correspondientes Contactos Acercade.aspx Desarrollo Appweb.aspx Appwin.aspx Descargas Sisop.aspx Visualbasic.aspx Visualcs.aspx Visualweb.aspx Soporte helpdesk.aspx 14. Configurar el control men para acceder a las pginas aspx correspondiente
www.jlarico.com
15. Configurar el control treeview para acceder a las pginas aspx correspondientes.
Trabajando con Hojas de Estilos CSS( Cascading Style Sheets ) Las hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin.
www.jlarico.com
18. En la pgina Maestra Site1.master, agregar la referencia a la hoja de estilo creada fuente.css 19. Aplicar el estilo correspondiente. Estilo titulos Prrafo ASP.NET Facilidad de uso Historia A los dems prrafos
www.jlarico.com
Captulo 6
Base de Datos
Objetivos del Captulo Despus de completar este captulo Ud. estar en condicin de 1. Trabajar con ADO.NET y ASP.NET 2. Conectar con una base de datos MYSQL 3. Conectar con una base de datos de ACCESS 4. Conectar con una base de datos de EXCEL 5. Conectar con una base de datos de ORACLE
www.jlarico.com
ADO.NET Y MYSQLSERVER
Objetivos Realizar la conexin con MySqlServer Importar el espacio de nombres para declarar objetos para MySqlServer Crear la base de datos y la tabla en MySQL Mostrar los datos en una pagina web aspx Prctica 19 1 Abrir la consola de MySqlServer
www.jlarico.com
5 Iniciar un nuevo proyecto con nombre demoMYSQL 6 Hacer clic derecho en el nombre del proyecto (Explorador de Soluciones) y elegir propiedades 7 Clic en Referencias y luego clic en el botn Agregar 8 Seleccionar Mysql.Data
www.jlarico.com
10 Agregar el control Gridview en la pagina web 11 En el evento load de la pgina web agregar el siguiente codigo
Dim cnn As New MySqlConnection("Database=demoASP; data source=localhost; user id=root; password=") cnn.Open() Response.Write("ok") Dim ds As New DataSet Dim da As New MySqlDataAdapter("select * from datos", cnn) da.Fill(ds, "datos") GridView1.DataSource = ds.Tables(0) GridView1.DataBind()
www.jlarico.com
4 Agregar el control Gridview en la pgina web 5 Agregar el siguiente cdigo en el evento load de la pagina web
Dim cnn As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\demo.mdb;Persist Security Info=False") Try cnn.Open() Response.Write("conexion ok") Dim da As New OleDbDataAdapter("select * from datos", cnn) Dim ds As New DataSet da.Fill(ds, "datos") GridView1.DataSource = ds.Tables(0) GridView1.DataBind() Catch ex As Exception Response.Write(ex.Message) End Try
3 Seleccionar el rango A1:B3 y establecer el nombre del rango a datos. Esto representara a nuestra tabla de nuestra base de datos llamada demo 4 Iniciar VWD y crear un proyecto llamado demoExcel 5 Agregar el control Gridview a la pgina web 6 importar el espacio de nombres
Imports System.Data.OleDb
www.jlarico.com
Dim cadenaCon As String = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:\demo.xls; Extended Properties=Excel 8.0" Dim cn As OleDbConnection = New OleDbConnection(cadenaCon) Try cn.Open() Response.Write("Conexion ok") Dim da = New OleDbDataAdapter("SELECT * FROM datos", cn) Dim ds = New DataSet da.Fill(ds, "datos") GridView1.DataSource = ds.Tables("datos") GridView1.DataBind() Catch ex As Exception Response.Write(ex.Message) End Try
www.jlarico.com
ASP.NET Y ORACLE
Prctica 22 1 Agregar un Modulo
Imports System.Data.OleDb Module Module1 Public cn As New OleDbConnection("Provider=MSDAORA.1;Password=admin;User ID=jjlarico;Data Source=orcl;Persist Security Info=True") Public ds As New DataSet End Module
GridView1.DataSource = dsCurso.Tables(0)
www.jlarico.com
Captulo 8
ADO.NET
Objetivos del Captulo Despus de completar este captulo Ud. estar en condicin de 1. Trabajar con ADO.NET 2. Mostrar datos en una pgina aspx
www.jlarico.com
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication2._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ListBox ID="ListBox1" runat="server" Height="397px" Width="665px"> </asp:ListBox> </form> </body> </html>
Instituto de Educacin Superior Tecnolgico Pblico Especialidad de Computacin e Informtica Arturo Sabroso Montoya cmd.CommandText = "Select * from clientes" cnn.Open() Dim dr As OleDbDataReader dr = cmd.ExecuteReader Do While dr.Read() ListBox1.Items.Add(dr("IdCliente") & " , " & dr("NombreCompaa") & " , " & dr("NombreContacto") & " , " & dr("CargoContacto") & dr("Direccin")) Loop dr.Close() cnn.Close() End Sub End Class
4 Ejecutar el proyecto
Prctica 24 1 Disear la siguiente aplicacin que muestre una relacin de uno a varios. Elegir un producto del Primer Control. El control label mostrara el detalle y el ListBox la categora a la que pertenece.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <br /> <asp:DropDownList ID="ddlProductos" runat="server"> </asp:DropDownList> <br /> <asp:Label ID="lblRecordInfo" runat="server" Text="Label"></asp:Label> <br /> <br /> <asp:ListBox ID="lstCategoria" runat="server"></asp:ListBox> <br /> <br /> <asp:Button ID="btnActualizar" runat="server" Text="Actualizar" /> Julio Javier Larico Tipula www.jlarico.com
Instituto de Educacin Superior Tecnolgico Pblico Arturo Sabroso Montoya </form> </body> </html>
5 Cdigo de ddlproductos
Protected Sub ddlProductos_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ddlProductos.SelectedIndexChanged Dim seleccionarProducto As String = "select NombreProducto, CantidadPorUnidad,NombreCategora From Productos INNER JOIN Categoras on Categoras.IdCategora=Productos.IdCategora where IdProducto=@IdProducto" Dim cn As New SqlConnection(cad) Dim cmdProductos As New SqlCommand(seleccionarProducto, cn) cmdProductos.Parameters.AddWithValue("@IdProducto", ddlProductos.SelectedValue) Using cn cn.Open() Dim reader As SqlDataReader = cmdProductos.ExecuteReader reader.Read() 'Actualizar la informacion lblRecordInfo.Text = "<b>Nombre Producto:</b> " & _ reader("NombreProducto") & "<br />" lblRecordInfo.Text &= "<b>Cantidad por Unidad:</b> " & _ reader("CantidadPorUnidad") & "<br />" lblRecordInfo.Text &= "<b>Nombre Categora:</b> " & _ reader("NombreCategora") 'Almacenando el correspondiente NombreCategoria para futuras referencias Dim matchCategoria As String = reader("NombreCategora") reader.Close()
www.jlarico.com
Dim selectCategoria As String = "Select NombreCategora, Idcategora From Categoras" Dim cmdCategorias As New SqlCommand(selectCategoria, cn) lstCategoria.DataSource = cmdCategorias.ExecuteReader lstCategoria.DataTextField = "NombreCategora" lstCategoria.DataValueField = "IdCategora" lstCategoria.DataBind() lstCategoria.Items.FindByText(matchCategoria).Selected = True End Using End Sub
6 Cdigo de btnActualizar
Protected Sub btnActualizar_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnActualizar.Click Dim updateCmd As String = "Update Productos set IdCategora=@IdCategora where IdProducto=@IdProducto" Dim cn As New SqlConnection(cad) Dim cmd As New SqlCommand(updateCmd, cn) cmd.Parameters.AddWithValue("@IdCategora", lstCategoria.SelectedItem.Value) cmd.Parameters.AddWithValue("IdProducto", ddlProductos.SelectedValue) Using cn cn.Open() cmd.ExecuteNonQuery() End Using End Sub End Class
7 Ejecutar la aplicacin
www.jlarico.com
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Pgina sin ttulo</title> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddlProductos" runat="server" AutoPostBack="True" DataSourceID="sourceProducto" DataTextField="NombreProducto" DataValueField="IDProducto"> </asp:DropDownList> <br /> <br /> <asp:DetailsView ID="DetalleProducto" runat="server" DataSourceID="sourceProductoDetalles" Height="50px" Width="125px"> </asp:DetailsView> </div> <asp:SqlDataSource ID="sourceProducto" runat="server" ConnectionString="Data Source=PCSERVER;Initial Catalog=Nwind;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT NombreProducto, IdProducto FROM Productos"> </asp:SqlDataSource> <asp:SqlDataSource ID="sourceProductoDetalles" runat="server" ConnectionString="Data Source=PCSERVER;Initial Catalog=Nwind;Integrated Security=True" ProviderName="System.Data.SqlClient" Julio Javier Larico Tipula www.jlarico.com
Instituto de Educacin Superior Tecnolgico Pblico Especialidad de Computacin e Informtica Arturo Sabroso Montoya SelectCommand="SELECT * FROM Productos WHERE (IdProducto = @IdProducto)"> <SelectParameters> <asp:ControlParameter ControlID="ddlProductos" Name="IdProducto" PropertyName="SelectedValue" /> </SelectParameters> </asp:SqlDataSource> <br /> </form> </body> </html>
2 Ejecutar el Proyecto
Prctica 26 Mostrar los datos de la tabla productos en una pagina web aspx 1 Agregar un control GridView
www.jlarico.com
2 Cdigo de la Aplicacin <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Diseado por Julio Larico</title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </div> </form> </body> </html> 3 Importar el espacio de nombres para sql server Imports System.Data.SqlClient
5 Ejecutar el proyecto
www.jlarico.com
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Ejercicio5._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddlProductos" runat="server" AutoPostBack="True" DataSourceID="sourceProductos" DataTextField="NombreProducto" DataValueField ="IdProducto" Width ="184px"> </asp:DropDownList> <br /> <asp:SqlDataSource ID="sourceProductos" runat="server" ConnectionString="Data Source=PCSERVER;Initial Catalog=Nwind;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="Select * From Productos" > </asp:SqlDataSource> <asp:SqlDataSource ID="sourceProductosFull" runat="server" ConnectionString="Data Source=PCSERVER;Initial Catalog=Nwind;Integrated Security=True" ProviderName="System.Data.SqlClient" selectCommand="Select * from Productos where IdProducto=@IdProducto"> <SelectParameters> <asp:ControlParameter name="IdProducto" controlID="ddlProductos" propertyName="SelectedValue" /> </SelectParameters> </asp:sqlDataSource> <asp:FormView ID="formProductosDetalles" runat="server" DataSourceID="sourceProductosFull"> <ItemTemplate> <ItemTemplate> <b>En Stock:</b> Julio Javier Larico Tipula www.jlarico.com
Instituto de Educacin Superior Tecnolgico Pblico Especialidad de Computacin e Informtica Arturo Sabroso Montoya <%# eval("UnidadesEnExistencia") %> <br /> <b>En Pedido:</b> <%# Eval("UnidadesEnPedido") %> <br /> <b>Registro:</b> <%# Eval("NivelNuevoPedido") %> <br /> </ItemTemplate> </ItemTemplate> </asp:FormView> <br /> </div> </form> </body> </html>
2 Ejecutar el proyecto
Congratulaciones.
Consigue nuevas publicaciones de este autor. Carrito de Compras, Sistemas de Ventas, Sistema de Matricula, Sistema de Facturacin web.
www.jlarico.com