mi primera aplicación asp

Mi primera aplicación ASP.NET

?010203040506070809101112131415161718192021222324252627

<%--Directiva--%><%@ Page Language="C#" %><%--Codigo en linea--%><script runat="server">protected void btnAceptar_Click(object sender, EventArgs e){ lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty;}</script><%--HTML para dibujar los controles en pantalla--%><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Mi primera aplicacion - Maestros del Web</title></head><body><form id="form1" runat="server"> <div> <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox> <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" onclick="btnAceptar_Click"/> <br/> <asp:Label ID="lblResultado" runat="server" Text="[Resultado]"></asp:Label> </div></form></body></html>

¿Cómo probamos nuestra primera aplicación?

1.- Abrimos el Bloc de Notas, copiamos el código.

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

3.- Creamos nuestro espacio virtual en el IIS

http://www.maestrosdelweb.com/images/2010/11/image0012.png


a.- Abrimos el IIS y creamos un nuevo directorio virtual.

b.- Ingresamos el nombre que tendrá nuestra aplicación 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 aplicación ASP.NET instalada para probar. Ahora abrimos nuestro browser y escribimos en la barra de dirección: http://localhost/MiPrimeraAplicacionWeb/Default.aspx

Estructura de nuestra aplicación web.

La estructura de nuestra primera aplicación es la más simple.


1.- Contiene una directiva:

<%@ Page Language="C#" %>

Le estamos indicando que la pagina usará lenguaje C# (C Sharp)

2.- Código en línea:

?1234567

<script runat="server">protected void btnAceptar_Click(object sender, EventArgs e){ lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty;}</script>

El tag script está indicando que el código se ejecutará del lado del servidor. En esta porción del código van las acciones que ejecutaremos en nuestra aplicación; en este caso sólo tenemos una única acción asociada al botón Aceptar.

3.- Código HTML para la creación de objetos en pantalla.

?010203040506070809101112131415

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Mi primera aplicacion - Maestros del Web</title></head><body><form id="form1" runat="server"> <div> <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox> <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" onclick="btnAceptar_Click"/> <br/> <asp:Label ID="lblResultado" runat="server" Text="[Resultado]"></asp:Label> </div></form></body></html>

En pantalla vemos tres objetos

1. Un TextBox llamado txtNombre (Para ingresar un nombre).2. Un Botón llamado btnAceptar y con el evento OnClick definido (Ejecutamos la

acción de pegar contenido).3. Un label de resultados llamado lblResultado. (Mostramos los resultados luego de

ejecutar el evento del botón).

Creación 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 botón OK para crear la solución.

3.- Una vez creada la solución el IDE genera el primer template.



En la pantalla de edición de código copiamos y pegamos el código anterior y ya tenemos nuestra primera página web dentro del entorno de desarrollo integrado.

Para ejecutar la aplicación dentro del entorno de desarrollo presionamos la tecla F5 y nos pregunta si deseamos habilitar el modo de debug. Presionamos OK.



A continuación se abre nuestro Browser predeterminado ejecutando la aplicación en modo debug. Al trabajar con un entorno de desarrollo no es necesario crear un espacio virtual en el IIS ya que la misma aplicación se encarga de preparar el ambiente.

ASP.NET nos permite factorizar la información de estilo y diseño 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 páginas y controles del sitio. Los cambios en el Estilo de un sitio pueden administrarse realizando cambios al Tema, sin tener que editar las páginas de forma individual.

Los Temas también se pueden compartir con otros desarrolladores. Hay varias formas de aplicar ESTILOS a una página web en ASP.NET pero no todas son las más ó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 diseño 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 deberás hacerlo uno por uno.



La mejor opción es utilizar Hojas de estilo “Cascading Style Sheets” (CSS) factorizar los ajustes de estilo de forma separada de las propiedades de los controles. Veamos cómo podemos aplicar el mismo estilo utilizando hojas de estilo CSS. Lo primero que vamos a hacer es crear un archivo con la extensión CSS. (“StyleSheet.css”).

En este archivo tendremos la definición del estilo. Agregamos la siguiente definición 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 dinámicamente con ASP Net

Código: Hola Mundo en ASP

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %><script runat="server">Sub Page_Loadp1.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 página 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.ValueEnd Sub</script><html>

Ejemplo 3: Concatenar cadenas de texto

Combinar dos cadenas de texto, nombre y apellido y escribirlos en una página web.

Código: 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 & apellidoEnd 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 Números

Aprende a manejar los números y a operar con numeros en ASP.

Código: 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.90Dim numeroB as Double = 3.30Dim suma, resta, multiplicar, dividir as Double Dim sumaS, restaS, multiplicarS, dividirS as String

suma = numeroA + numeroBsumaS = String.Format("{0:c}", suma)sumaId.Text = sumaS

resta = numeroA - numeroBrestaS = String.Format("{0:c}", resta)restaId.Text = restaS

multiplicar = numeroA * numeroBmultiplicarS = String.Format("{0:c}", multiplicar)multiplicarId.Text = multiplicarS

dividir = numeroA / numeroBdividirS = 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.

Código: 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 StringDim miFecha as DateTime = DateTime.Now()fechaS = String.Format("{0:dd/MM/yyyy}", miFecha)fechaId.Text = fechaSEnd 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 año: <asp:label ID="fechaId" runat="server"></asp:label><br></body></html>

Ejemplo 6: Sumar dos números introducidos en un formulario

La página creada para explicar esta técnica solicita dos números al visitante. cuando se reenvía 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 (Función), dado que devuelve un valor. El otro procedimientos no devuelve ningún valor dado que es una subrutina (Sub)

Así es como se quedaría montada la estructura de la pagina una vez seguido los pasos y comprendiendo cada símbolo.

<%@ 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."

Elsealvi.Text = "El resultado se muestra" & "debajo"End IfEnd Sub Sub Page_Load(ByVal Sender as Object , Byval E as EventArgs)

If IsPostBack thenMostrarInstrucciones("Final")else

MostrarInstrucciones("Inicial")End If

End Sub

Function AddNums (Num1 as Single, Num2 as Single) as Single AddNums=Num1+Num2End 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: Utilización del evento Unload del sujeto Page

La página creada utilizando esta técnica muestra un texto a los visitantes cuando se carga la página. después 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 IntegerSub Page_Load(ByVal Sender as Object, ByVal E as EventArgs)If Not Paraísos Thenlblprimertiempo.text = "La página se cargó por primera vez " _& "a las "& TimeOfDay()End Iflblotrostiempos.Text = "La última Carga de la página se lanzó " _& "a las "& TimeOfDay()Dim I as StringI = " 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 página Asp.Net que se pueda manipular a través de codigo. Esto se puede conseguir definiendo controles Span. Esta tecnica muestra como hacerlo.

Código: 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 código. Esto resulta útil cuando se debe controlar mediante código la imagen mostrada a los visitantes.

Código: 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: Utilización del control HTMLinputCheckBox

La página creada para describir esta técnica salicita a los visitantes que respondan dos preguntas de tipo sí/no a través de controlesHTMLInputCheckBox.cuando los visitantes envíen la página, verán un texto basado en sus respuestas.


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 Thenmimensage1.InnerHTML = " mimensage1 " & "Esta en nuestra lista" & "de contactos. <br>"

end Ifend 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 añadan 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>


Ejemplo 11: Utilización del control HTMLSelect

El control HTML Select proporciona un método para ofrecer un elemento a los visitantes en forma de lista.


Sub SubmitBtn_Click(Source as Object, E as EventArgs)MiMensage.InnerHTML = "Ha seleccionado como coches Favoritos" & coches.ValueEnd 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>


Ejemplo 2: Inserción de filas y celdas en un control HTMLTable a través de codigo

Ademas de definir las filas y celdas de un control HTMLTable directamente obre el formulario de la página, se puede añadir filas y celdas directamente desde este código.


<%@ 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 HTMLTableRowDim MiCelda as new HTMLTableCellDim i as integer Dim j as integer Tabla1.BGcolor="Ivory"Tabla1.Border=2Tabla1.BorderColor="LawGreen"Tabla1.CellPadding=4Tabla1.CellSpacing=3Tabla1.Align="Center"MiCelda.InnerText = "Columna 1"MiFila.Cells.Add(MiCelda)

MiCelda =New HTMLTableCellMiCelda.InnerText =" Columna 2"MiFila.Cells.Add(MiCelda)Tabla1.Rows.Add(MiFila)For i =2 to 6 MiFila = New HTMLTableRowFor j=1 to 2 NextMiCelda = New HTMLTableCellMiCelda.InnerText="Celda "& i & " ," & jMiFila.Cells.Add(MiCelda)NextEnd 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: Visualialización de un control CheckBox básico

Proporciona un mecanismo para recibir respuestas de tipo vedadero y falso o si o no de los visitantes.

Código: Visualización de un control CheckBox básico

<%@ 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" ThenResponse.Write("<script Language=""JavaScript!"" >" &Chr(13) & "<!-" & chr(13) & "alert(´se han añadido sus datos a nuestra " & "-><" &"/" & "SCRIPT>")End IfEnd 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: Utilización del objeto Webresponse y Webrequest

Lee el código 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) TryDim objResponse As System.Net.WebResponseDim objRequest As System.Net.WebRequestDIM theurlresult as stringDIM 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 ExceptionPage.Controls.Add(new LiteralControl(ex.Message))End TryEnd 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

Documents