permanece al día vía rss

Primera aplicación WEB con C#

Publicado: 15 febrero, 2012 en Asp.Net

Hola a todos, en esta ocasión vamos a ver el procedimiento a seguir para realizar una Aplicación Web básica.

En primer lugar, cuando deseamos entrar en el diseño de aplicaciones y sitios web nos preguntamos ¿Cómo iniciar?; Pues en esta ocasión explicaré como crear una pequeña
aplicación WEB basada en tecnologías Microsoft (C#.NET).

NOTA: Recordemos que para crear una etiqueta HTML hacemos uso de los símbolos en este Post, los símbolos serán reemplazados por “(=<” y “)=>” para evitar
inconvenientes en la visualización del mismo.

Nuestra aplicación tendrá un formulario el cual nos solicitará Nombres y Apellidos y al dar clic sobre un botón, llamaremos una función JavaScript para que nos muestre un
mensaje que le de la bienvenida al usuario ingresado. Manos a la Obra!!!

1. Procedemos a abrir Visual Studio .NET y creamos un Nuevo Proyecto.

2. Dentro de nuestros Tipos de Proyecto seleccionaremos Visual C#….. Web….., Dentro de nuestros Templates utilizaremos ASP.NET Empty Web Application. Y, como
nombre a nuestra aplicación pondremos: PrimeraAplicacion. Después de esto pulsamos en OK.

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/1.png)

3. Al seleccionar una Aplicación Web vacía, la pantalla inicial de Visual Studio sería la siguiente: (Podemos observar que el explorador de Soluciones está prácticamente
vacío, listo para iniciar a desarrollar)

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/2.png)

4. Ahora vamos a agregar un WebForm, para esto picamos sobre el menú Project…. Add New Item…. seleccionamos Web Form…. en Name, ingresamos DatosBasicos.aspx
y por último picamos en Add.

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/3.png)

5. Ya tenemos nuestro formulario Web dentro de nuestra aplicación, listo para empezar a insertarle controles.

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/4.png)

6. Para comenzar con la elaboración de nuestra aplicación, dentro de las etiquetas (title)(/title) pondremos el título de la aplicación, en este caso “(title)Datos Basicos(/title)”

7. Dentro de las etiquetas(div)(/div), insertaremos una tabla para luego colocar cada uno de los controles a usar para escribir nuestros datos básicos. Esta tabla va a ser de 2
columnas por 3 filas. La estructura quedaría así:
(h�ps://andrestrianalopez.files.wordpress.com/2012/02/5.png)

8. Entonces, desde la caja de Herramientas de Visual Studio, insertaremos un Label y un Textbox en la primera fila los cuales se encargarán de solicitar el Nombre. Seguido
de esto, insertaremos otro label y textbox en la segunda fila para solicitar el Apellido. (Podemos dar click en el botón Split que se encuentra en la barra de Estado de VS para
visualizar como queda el diseño)

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/6.png)

9. Notamos que editamos la propiedad Text del control Label para solicitar al usuario los Nombres y Apellidos.

10. Como aun tenemos la tercera fila vacía, en esta insertaremos un botón con el cual al dar clic sobre él, ejecutará una función JavaScript que nos mostrará los Nombres y
Apellidos en una sola cadena de texto.

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/7.png)

11. En este control también modificamos su propiedad Text para mostrar un Nombre más amigable al usuario, para este caso digitamos “Aceptar”.

12. Ahora, para mostrar el mensaje dándole la Bienvenida al Usuario Ingresado, pulsamos Doble clic sobre el botón que creamos para ir al Code Behind y allí programar
nuestro código. Debe aparecer una ventana como la siguiente donde se ha creado el código para el evento Clic.

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/8.png)

13. Para mostrar el mensaje podemos Crear una función en JavaScript que esté embebida dentro de nuestro código HTML ó podemos crearla dentro del Code Behind. para
este ejemplo, la crearemos dentro del Code Behind ya que es solo una alerta.

Debido a que los Nombres y Apellidos se ingresaron en cajas de texto diferentes, debemos unirlas para formar una sola cadena. Para esto debemos acceder a la propiedad
Text de los Textbox creados en nuestro formulario web por medio de su ID. los ID’s de los textbox son TextBox1 y TextBox2 (Estos ID’s los asignamos al momento de
insertar el control TextBox).

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/91.png)

14. Si ejecutáramos la aplicación en este momento, ya nos mostraría el resultado esperado. Pero ahora debemos validar que si el usuario no ha registrado completamente sus
Nombres y Apellidos, el sistema debe alertarlo, para esto agregamos la validación para comprobar que los 2 TextBox se encuentren con información, de lo contrario mostrará
un mensaje informándole al usuario que faltan campos por diligenciar.
(h�ps://andrestrianalopez.files.wordpress.com/2012/02/10.png)

15. Una vez realizados los puntos anteriores, podemos ejecutar nuestra aplicación pulsando F5 y probar el funcionamiento de ésta.

(h�ps://andrestrianalopez.files.wordpress.com/2012/02/111.png)