Mi Primera Aplicación ASP

Mi primera aplicacin ASP.
NET
? 01 02 03<%--Directiva--%> 04<%@ Page Language="C#" %> <%--Codigo en linea--%> 05<script runat="server"> 06protected void btnAceptar_Click(object sender, EventArgs e) 07{ lblResultado.Text = txtNombre.Text; 08 txtNombre.Text = string.Empty; 09} 10</script> 11<%--HTML para dibujar los controles en pantalla--%> 12<html xmlns="http://www.w3.org/1999/xhtml"> 13<head runat="server"> <title>Mi primera aplicacion - Maestros del Web</title> 14</head> 15<body> 16<form id="form1" runat="server"> <div> 17 <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox> 18 <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" 19 onclick="btnAceptar_Click"/> 20 <br/> <asp:Label ID="lblResultado" runat="server" 21 Text="[Resultado]"></asp:Label> 22 </div> 23</form> 24</body> 25</html> 26 27
Cmo probamos nuestra primera aplicacin?

1.- Abrimos el Bloc de Notas, copiamos el cdigo.
2.- Guardamos el archivo con el nombre Default.aspx
3.- Creamos nuestro espacio virtual en el IIS
a.- Abrimos el IIS y creamos un nuevo directorio virtual. b.- Ingresamos el nombre que tendr nuestra aplicacin web.
c.- Indicamos el directorio donde guardamos nuestra pagina web Default.aspx.
Seguimos hasta el final para que quede creada nuestro directorio virtual. Listo, ya tenemos nuestra primera aplicacin ASP.NET instalada para probar. Ahora abrimos nuestro browser y escribimos en la barra de direccin: http://localhost/MiPrimeraAplicacionWeb/Default.aspx
Estructura de nuestra aplicacin web.

La estructura de nuestra primera aplicacin es la ms simple.
1.- Contiene una directiva:

<%@ Page Language="C#" %>
Le estamos indicando que la pagina usar lenguaje C# (C Sharp) 2.- Cdigo en lnea: ? 1 <script runat="server"> 2protected void btnAceptar_Click(object sender, EventArgs e) 3{ lblResultado.Text = txtNombre.Text; 4 txtNombre.Text = string.Empty; 5 } 6</script> 7 El tag script est indicando que el cdigo se ejecutar del lado del servidor. En esta porcin del cdigo van las acciones que ejecutaremos en nuestra aplicacin; en este caso slo tenemos una nica accin asociada al botn Aceptar. 3.- Cdigo HTML para la creacin de objetos en pantalla. ? 01<html xmlns="http://www.w3.org/1999/xhtml"> 02<head runat="server"> 03 <title>Mi primera aplicacion - Maestros del Web</title> 04</head> 05<body> <form id="form1" runat="server"> 06 <div> 07 <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox> <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" 08 09onclick="btnAceptar_Click"/> <br/> 10 <asp:Label ID="lblResultado" runat="server" 11Text="[Resultado]"></asp:Label> 12 </div> 13</form> 14</body> </html> 15
En pantalla vemos tres objetos

1. Un TextBox llamado txtNombre (Para ingresar un nombre). 2. Un Botn llamado btnAceptar y con el evento OnClick definido (Ejecutamos la accin de pegar contenido). 3. Un label de resultados llamado lblResultado. (Mostramos los resultados luego de ejecutar el evento del botn).
Creacin de un proyecto ASP.NET con Visual Studio

1.- Abrimos Visual Studio .NET y creamos un nuevo proyecto web.
2.- Seleccionamos el tipo de proyecto que deseamos realizar.
a.- Seleccionamos ASP.NET Web Site, b.- Indicamos la ruta donde vamos a guardar el proyecto:
c:\MaestrosDelWeb\GuiaASPNET
c.- Determinamos el lenguaje que vamos a utilizar. Visual C#. Por ltimo presionamos el botn OK para crear la solucin. 3.- Una vez creada la solucin el IDE genera el primer template.
En la pantalla de edicin de cdigo copiamos y pegamos el cdigo anterior y ya tenemos nuestra primera pgina web dentro del entorno de desarrollo integrado.
Para ejecutar la aplicacin dentro del entorno de desarrollo presionamos la tecla F5 y nos pregunta si deseamos habilitar el modo de debug. Presionamos OK.
A continuacin se abre nuestro Browser predeterminado ejecutando la aplicacin en modo debug. Al trabajar con un entorno de desarrollo no es necesario crear un espacio virtual en el IIS ya que la misma aplicacin se encarga de preparar el ambiente. ASP.NET nos permite factorizar la informacin de estilo y diseo en un grupo separado de ficheros. Un Tema se puede aplicar a cualquier sitio de forma que afecte a la apariencia y entorno de las pginas y controles del sitio. Los cambios en el Estilo de un sitio pueden administrarse realizando cambios al Tema, sin tener que editar las pginas de forma individual. Los Temas tambin se pueden compartir con otros desarrolladores. Hay varias formas de aplicar ESTILOS a una pgina web en ASP.NET pero no todas son las ms ptimas. Todo control de servidor tiene atributos que nos permiten cambiar su aspecto.
<asp:Label ID="Label1" runat="server" BackColor="#FF6600" BorderColor="#00CC00" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial" Font-Size="10pt" ForeColor="White" Text="Mi label"></asp:Label>
Aplicando este diseo nuestro Label se ve de esta forma.
Aplicar estilos mediante atributos tiene sus ventajas y desventajas. Por un lado la comodidad y velocidad de aplicar un estilo particular a un control determinado. Pero por el otro, al no estar centralizado, no te permite reutilizar el estilo para aplicar a otros controles y si has aplicado este estilo a varios controles y deseas cambiarlo debers hacerlo uno por uno.
La mejor opcin es utilizar Hojas de estilo Cascading Style Sheets (CSS) factorizar los ajustes de estilo de forma separada de las propiedades de los controles. Veamos cmo podemos aplicar el mismo estilo utilizando hojas de estilo CSS. Lo primero que vamos a hacer es crear un archivo con la extensin CSS. (StyleSheet.css). En este archivo tendremos la definicin del estilo. Agregamos la siguiente definicin a nuestro archivo .css:
.MiLabel { border-color: #00CC00; border-style: solid; background-color: #FF6600; color: #FFFFFF; font-family: Arial; font-size: 10pt; font-weight: bold; }
Luego creamos la referencia a la hoja de estilo en nuestro aspx.

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Y por ltimo indicamos a nuestro control LABEL que utilizara la clase MiLabel.
<asp:Label ID="Label1" runat="server" CssClass="MiLabel" Text="Mi label"></asp:Label>
De esta manera cada control que necesitemos aplicarle el mismo estilo simplemente deber indicarle a la propiedad CssClass el nombre del estilo que se desea aplicar.
Ejemplo 1: Hola Mundo en ASP NET

Escribe un texto dinmicamente con ASP Net
Cdigo: Hola Mundo en ASP

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %> <script runat="server"> Sub Page_Load p1.InnerHtml = "<b>Hola Mundo</b> " End Sub </script> <html> <body> <form runat="server"> <p id="p1" runat="server" />
</form> </body> </html>
Ejemplo 2: Leer Formulario y escribir respuesta

Lee un texto escrito en un formulario y escribe la respuesta en la pgina web.

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %> <script runat="server"> Sub submit(sender As Object, e As EventArgs) p1.InnerHtml = "<b>Usted escribio:</b> " & textarea1.Value End Sub </script> <html>
Ejemplo 3: Concatenar cadenas de texto

Combinar dos cadenas de texto, nombre y apellido y escribirlos en una pgina web.
Cdigo: Concatenar cadenas de texto en ASP NET

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %> <script runat="server"> Sub Page_Load(Src As Object, E As EventArgs) Dim nombre, apellido as String nombre = "Felipe" apellido ="Borbon" t1.Text= nombre & apellido End Sub </script><html> <head> <title>Documento sin título</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <asp:label ID="t1" runat="server"></asp:label> </body> </html>
Ejemplo 4: Sumar, Restar, Multiplicar y Dividir Nmeros

Aprende a manejar los nmeros y a operar con numeros en ASP.
Cdigo: Sumar, Restar, Multiplicar y Dividir en ASP NET

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %> <script runat="server"> Sub Page_Load(Src As Object, E As EventArgs) Dim numeroA as Double = 90.90 Dim numeroB as Double = 3.30 Dim suma, resta, multiplicar, dividir as Double Dim sumaS, restaS, multiplicarS, dividirS as String suma = numeroA + numeroB sumaS = String.Format("{0:c}", suma) sumaId.Text = sumaS resta = numeroA - numeroB restaS = String.Format("{0:c}", resta) restaId.Text = restaS multiplicar = numeroA * numeroB multiplicarS = String.Format("{0:c}", multiplicar) multiplicarId.Text = multiplicarS dividir = numeroA / numeroB dividirS = String.Format("{0:c}", dividir) dividirId.Text = dividirS End Sub </script><html> <head> <title>Operar y Formatear Numeros en ASP Net</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Suma: <asp:label ID="sumaId" runat="server"></asp:label><br> Resta: <asp:label ID="restaId" runat="server"></asp:label><br> Multiplicar: <asp:label ID="multiplicarId" runat="server"></asp:label><br> Dividir: <asp:label ID="dividirId" runat="server"></asp:label><br> </body> </html>
Ejemplo 5: Formatos de Fechas en ASP NET

Aprende a manejar las fechas y a darlas cualquier formato.
Cdigo: Sumar, Restar, Multiplicar y Dividir en ASP NET

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" Debug="true" %> <%@ Import Namespace="System.Web"%> <%@ Import namespace="System.Globalization" %> <script runat="server"> Sub Page_Load(Src As Object, E As EventArgs) Dim fechaS as String Dim miFecha as DateTime = DateTime.Now() fechaS = String.Format("{0:dd/MM/yyyy}", miFecha) fechaId.Text = fechaS End Sub </script><html> <head> <title>Formato de Fechas en Asp NET</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Fecha con formato de hoy en dia, mes y ao: <asp:label ID="fechaId" runat="server"></asp:label><br> </body> </html>
Ejemplo 6: Sumar dos nmeros introducidos en un formulario

La pgina creada para explicar esta tcnica solicita dos nmeros al visitante. cuando se reenva la pagina se suman estos numeros.La pagina incluye dos procedimientos definidos por el usuario a los que se llaman desde dos rutinas de tratamientos de eventos.Uno de los procedimientos es una Function (Funcin), dado que devuelve un valor. El otro procedimientos no devuelve ningn valor dado que es una subrutina (Sub) As es como se quedara montada la estructura de la pagina una vez seguido los pasos y comprendiendo cada smbolo. <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server">
Sub MostrarInstrucciones (Mode as String) If Mode ="Inicial" Then alvi.Text = "introduza los dos numeros que" & "desee sumar." Else alvi.Text = "El resultado se muestra" & "debajo" End If End Sub Sub Page_Load(ByVal Sender as Object , Byval E as EventArgs) If IsPostBack then MostrarInstrucciones("Final") else MostrarInstrucciones("Inicial") End If End Sub Function AddNums (Num1 as Single, Num2 as Single) as Single AddNums=Num1+Num2 End Function sub ApretarelBoton(Sender As Object, E As EventArgs) alvi.text="Resultado: " & AddNumS (numeros1.Text, numeros2.Text) End Sub </script> <html> <head> <title>Documento sin título</title> </head> <body> <form runat="server"> <asp:label ID="alvi" runat="server"/> <asp:textbox ID="numeros2" runat="server"/> <asp:textbox ID="numeros1" runat="server" /> <asp:button ID="Botonok" Text="sumar" OnClick="ApretarelBoton" runat="server"/> </form> </body> </html>
Ejemplo 7: Utilizacin del evento Unload del sujeto Page

La pgina creada utilizando esta tcnica muestra un texto a los visitantes cuando se carga la pgina. despus cuando se hs procesado la pagina, se almacena la hora en que se finalizo en una variable persistente. <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <%@ Import Namespace="system.Web.Mail" %> <script runat="server"> Private A as Integer Sub Page_Load(ByVal Sender as Object, ByVal E as EventArgs) If Not Parasos Then lblprimertiempo.text = "La pgina se carg por primera vez " _ & "a las "& TimeOfDay() End If lblotrostiempos.Text = "La ltima Carga de la pgina se lanz " _ & "a las "& TimeOfDay() Dim I as String I = " Hola" End Sub sub ApretarelBoton(Sender As Object, E As EventArgs) End Sub </script> <html> <head> <title>Documento sin título</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> </head> <body> <form runat="server"> <asp:label ID="lblprimertiempo" runat="server" ></asp:label> <br><br> <asp:label ID="lblotrostiempos" runat="server" /> <asp:button ID="Botonok" Text="Aceptar" OnClick="ApretarelBoton" runat="server" /> </asp:label> </form> </body> </html>
Ejemplo 8: Ejemplo de un control Span basico

Si utiliza los controles del espacio de nombres HTMLControls, problamente se encuentre con la necesidad de mostrar texto en la pgina Asp.Net que se pueda manipular a travs de codigo. Esto se puede conseguir definiendo controles Span. Esta tecnica muestra como hacerlo.
Cdigo: Span Basico

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server"> Sub Page_Load(ByVal Sender as Object, Byval E as EventArgs) span2.InnerText = "<B> Este texto no aparece & _ en Negrita.</B>" End sub </script> <html> <head> <title>Documento sin título</title> </head> <body> <span id="Span1" runat="server"><b>Este texto aparece en negrita</b> </span> <br> <br> <span id="Span2" runat="server"> </span> <br> <br> <span id="Span3" runat="server" disabled="true">Este texto aparece inhabilitado </span> <br> <br> <span id="Spand4" runat="Server" visible="false" > este texto no aparece </span> </body> </html>
Ejemplo 9: Presentacion de una imagen a traves del control HTMLImage

Un control HTMLImage proporciona el mecanismo necesario para mostrar una etiqueta HTMLImage simple que se puede manipular mediante cdigo. Esto resulta til cuando se debe controlar mediante cdigo la imagen mostrada a los visitantes.
Cdigo: HTMLimage
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server"> Sub Page_Load(ByVal Sender as Object, Byval E as EventArgs) End sub </script> <html> <head> <title>Documento sin título</title> </head> <body> <img id="image1" runat="server" src="../../NBASALTO.2jpg.jpg"> <br> <img id="image" runat="server" src="../../NBASALTO.2jpg.jpg" alt="Imagen de un boton" border="4"> <br> <img id="image3" runat="server" src="../../NBASALTO.2jpg.jpg" width="300" height="300"> </body> </html>
Ejemplo 10: Utilizacin del control HTMLinputCheckBox

La pgina creada para describir esta tcnica salicita a los visitantes que respondan dos preguntas de tipo s/no a travs de controlesHTMLInputCheckBox.cuando los visitantes enven la pgina, vern un texto basado en sus respuestas. <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server">
Sub SubmitBtn_Click(Source as Object, E as EventArgs)
mimensage.InnerHTML = "" If (chekeoeldibujo.Checked = True ) Then mimensage.InnerHTML = " Ha seleccionado el " & "dibujo. <br>" End If If chekeodecontacto.Checked =True Then mimensage1.InnerHTML = " mimensage1 " & "Esta en nuestra lista" & "de contactos. <br>" end If end sub </script> <html> <head> <title>Documento sin título</title> </head> <body bgcolor="#FFFFFF"> <form runat="server"> <input type="checkbox" id="chekeoeldibujo" runat="server"> obtener un dibujo gratuito? <input id="chekeodecontacto" runat="server" type="checkbox" checkbox> desea q se aadan sus datos a la lista de contactos? <button id="Button1" runat="server" onserverClick="SubmitBtn_Click">Enviar</button> <span ID="mimensage" runat="server"></span> <span ID="mimensage1" runat="server"></span> </form> </body> </html>
Ejemplo 11: Utilizacin del control HTMLSelect

El control HTML Select proporciona un mtodo para ofrecer un elemento a los visitantes en forma de lista. <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server">
Sub SubmitBtn_Click(Source as Object, E as EventArgs) MiMensage.InnerHTML = "Ha seleccionado como coches Favoritos" & coches.Value End sub </script> <html> <head> <title>Documento sin título</title> </head> <body bgcolor="#FFFFFF"> <form runat="server"> <span id="MiMensage" runat="server"></span> <select id="coches" runat="server" multiple="False" size="1"> <option>Familiares</option> <option>Deportivos</option> <option>todoTerrenos</option></select> <button id="boton1" runat="server" onserverclick="SubmitBtn_click">Enviar</button> </form> </body> </html>
Ejemplo 2: Insercin de filas y celdas en un control HTMLTable a travs de codigo

Ademas de definir las filas y celdas de un control HTMLTable directamente obre el formulario de la pgina, se puede aadir filas y celdas directamente desde este cdigo.

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server"> Sub Page_Load(ByVal Sender as Object, E as EventArgs) Dim MIFila as new HTMLTableRow Dim MiCelda as new HTMLTableCell Dim i as integer Dim j as integer Tabla1.BGcolor="Ivory" Tabla1.Border=2 Tabla1.BorderColor="LawGreen" Tabla1.CellPadding=4 Tabla1.CellSpacing=3 Tabla1.Align="Center" MiCelda.InnerText = "Columna 1" MiFila.Cells.Add(MiCelda)
MiCelda =New HTMLTableCell MiCelda.InnerText =" Columna 2" MiFila.Cells.Add(MiCelda) Tabla1.Rows.Add(MiFila) For i =2 to 6 MiFila = New HTMLTableRow For j=1 to 2 Next MiCelda = New HTMLTableCell MiCelda.InnerText="Celda "& i & " ," & j MiFila.Cells.Add(MiCelda) Next End Sub </script> <html> <head> <title>Documento sin título</title> </head> <body bgcolor="#FFFFFF"> <form runat="server"> <table id="Tabla1" runat="server"></table> <table id="TableCell" runat="server"></table> </form> </body> </html>
Ejemplo 13: Visualializacin de un control CheckBox bsico

Proporciona un mecanismo para recibir respuestas de tipo vedadero y falso o si o no de los visitantes.
Cdigo: Visualizacin de un control CheckBox bsico

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <script runat="server"> Sub SubmitBtn_Click(Sender As Object, E As Eventargs) If chkMailingList.Checked = "True" Then Response.Write("<script Language=""JavaScript!"" >" &Chr(13) & "<!-" & chr(13) & "alert(se han aadido sus datos a nuestra " & "-><" &"/" & "SCRIPT>") End If End Sub </script> <html> <head>
<title>Documento sin título</title> </head> <body> <form runat="server"> <br><br> <asp:checkbox ID="chkMailingList" Text="Le gustaria que se las llevasemosa casa la comida que compre?" Checked="true" BackColor="#FFFF00" BorderColor="#FF0000" BorderWidth="3" Font-Size="12pt" Font-Name="Comic Sans MS" TextAlign="Left" runat="server"/> <br><br> <asp:checkbox ID="chkContact" Text=" Le gusta la comida del super?" Checked="false" BackColor="#FFFF00" BorderWidth="3" Font-Size="12pt" Font-Name="Comic Sans MS" TextAlign="Right" runat="server"/> <br><br> <asp:button ID="butOK" Text="Aceptar" type="Submit" OnClick="SubmitBtn_Click" runat="server"/> </form> </body> </html>
Ejemplo 15: Utilizacin del objeto Webresponse y Webrequest

Lee el cdigo de una pagina web y lo presenta en pantalla, puede tambien modificarse para que presente la informacion de la pagina web en cuestion.

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %> <script language="VB" runat="server"> Sub Page_Load(Src As Object, E As EventArgs) Try Dim objResponse As System.Net.WebResponse Dim objRequest As System.Net.WebRequest DIM theurlresult as string DIM theurl as string = "http://www.terra.es/" objRequest = System.Net.HttpWebRequest.Create(theurl) objResponse = objRequest.GetResponse() Dim sr As new system.io.StreamReader(objResponse.GetResponseStream()) theURLresult=server.HTMLencode(sr.ReadToEnd()) Page.Controls.Add(new LiteralControl(theURLresult)) Catch ex As Exception Page.Controls.Add(new LiteralControl(ex.Message)) End Try End Sub
</script> <html><head> <title>Webresponse y Webrequest</title> </head> <body bgcolor="#FFFFFF"> <h3><font face="Verdana">Codigo de la pagina www.terra.es</font></h3> </body></html>

Mi Primera Aplicación ASP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mi Primera Aplicación ASP

Uploaded by

Copyright:

Available Formats

Mi primera aplicacin ASP.

Cmo probamos nuestra primera aplicacin?

2.- Guardamos el archivo con el nombre Default.aspx

3.- Creamos nuestro espacio virtual en el IIS

c.- Indicamos el directorio donde guardamos nuestra pagina web Default.aspx.

Estructura de nuestra aplicacin web.

1.- Contiene una directiva:

En pantalla vemos tres objetos

Creacin de un proyecto ASP.NET con Visual Studio

2.- Seleccionamos el tipo de proyecto que deseamos realizar.

Aplicando este diseo nuestro Label se ve de esta forma.

Luego creamos la referencia a la hoja de estilo en nuestro aspx.

Ejemplo 1: Hola Mundo en ASP NET

Cdigo: Hola Mundo en ASP

</form> </body> </html>

Ejemplo 2: Leer Formulario y escribir respuesta

Cdigo: Hola Mundo en ASP

Ejemplo 3: Concatenar cadenas de texto

Cdigo: Concatenar cadenas de texto en ASP NET

Ejemplo 4: Sumar, Restar, Multiplicar y Dividir Nmeros

Cdigo: Sumar, Restar, Multiplicar y Dividir en ASP NET

Ejemplo 5: Formatos de Fechas en ASP NET

Cdigo: Sumar, Restar, Multiplicar y Dividir en ASP NET

Ejemplo 6: Sumar dos nmeros introducidos en un formulario

Ejemplo 7: Utilizacin del evento Unload del sujeto Page

Ejemplo 8: Ejemplo de un control Span basico

Cdigo: Span Basico

Ejemplo 9: Presentacion de una imagen a traves del control HTMLImage

Ejemplo 10: Utilizacin del control HTMLinputCheckBox

Sub SubmitBtn_Click(Source as Object, E as EventArgs)

Ejemplo 11: Utilizacin del control HTMLSelect

Ejemplo 2: Insercin de filas y celdas en un control HTMLTable a travs de codigo

Cdigo: Hola Mundo en ASP

Ejemplo 13: Visualializacin de un control CheckBox bsico

Cdigo: Visualizacin de un control CheckBox bsico

Ejemplo 15: Utilizacin del objeto Webresponse y Webrequest

Cdigo: Hola Mundo en ASP

You might also like