AJDev.net

Antes de comenzar con la explicación correcta debemos tener bien claros los conceptos siguientes:

· .Net Framework

· ASP.net

· Visual Basic

· Visual C#

· Base de Datos

· SQL Server 2005 Express Editions

· HTML

· Programación Orientada a Objeto

Que fastidio porque tengo que buscar esos conceptos y no los explica el autor del tutorial?? Pues la respuesta es muy simple, con esos conceptos podrás entender de mejor manera y más rápido lo que se intenta plasmar en este mini-tutorial, además si te lo explico dejaría todo al facilismo y no mostrarías el interés en aprender.

Ahora a seleccionar el entorno donde desarrollaremos nuestro primer aplicativo web así pueden descargar desde la web de Microsoft el Visual Web Developer 2008 Express es totalmente gratuito y no pagaran por licencias J, si lo desean pueden usar Visual Studio 2005 (LINQ Esta para la versión 2008 en adelante) o Visual Studio 2008, Yo estaré usando el Visual Studio 2008 Team Suite que para efectos de este Tutorial no hay diferencias al crear un Proyecto Web.

Cual será nuestro plan de Trabajo dentro de este tutorial y de futuros tutoriales que publicare a partir de este:

1. Crearemos un Aplicación Web

2. Crearemos una página maestra.

3. Temas y Skins

4. Consultar datos de una base de datos de prueba (AdventureWorks)

5. Insertar y Actualizar datos.

Todos estos puntos se estará realizando con los siguientes lenguajes de programación Visual Basic y Visual C# para que el tutorial sea justo lo que necesita para empezar y no se vea limitado por el lenguaje a utilizar. Cabe destacar que el punto 4 y 5 que es Consultar datos e Insertar y Actualizar lo estaremos desarrollando con LINQ el cual es utilizando únicamente el .net Framework 3.5 los demás pueden usarse con .net Framework 2.0 y 3.5 sin problemas.

Arrancaremos con el Punto 1: Crear una Aplicación Web

Primero que nada debemos abrir nuestro Visual Web Developer y nos vamos al menú Archivo->Nuevo->Sitio Web luego les debe aparecer una pantalla de la siguiente manera:

En lo que crean el proyecto verán la página Default.aspx en el “Tags Código” es decir el visor de Visual Studio o de Visual Web Developer se lo mostrara en Código HTML

Formas de Visualizar el formulario Web

· Diseño: En esta Vista observaran el formulario en blanco, aquí arrojaran los controles a utilizar

· Dividir: Podrán ver el código HTML y la Pagina natural al mismo tiempo

· Código: Podrán ver solo el código HTML, esto no quiere decir que verán el código en el lenguaje que seleccionaron.

Imagen del Tag:

Quizás estén algo confundidos con el Tag Código de la Pagina con el Código que iremos desarrollando en la pagina y no es para menos a muchos le ha pasado eso así que no te sientas mal, a medida que te familiarice con la herramienta te reirás de estos primeros momentos, solo te recuerdo ASP.net tiene la posibilidad de tener el código del lenguaje que seleccionaste en otro archivo o mejor dicho en la mayoría de los casos es así pero existen personas que para no deja su modo de trabajar en ASP deciden incrustar el código sea VB o C# dentro del Código en HTML.

Ubicarnos dentro del Entorno de Trabajo

Ok antes de seguir debemos saber dónde estamos ubicados, fíjense en la imagen siguiente:

Ese es nuestro marco de Trabajo allí tenemos a la vista lo siguientes elementos importantes:

1. Web Forms: Esta demás decir que es el lugar donde arrojaremos nuestros controles y empezar a jugar con el código.

2. Explorador de Soluciones: lugar donde estarán nuestros Proyectos, en el caso que no lo lleguemos a ver podremos darle a la combinación de teclas: Ctrl.+Alt+L

a. Nuestro Proyecto: Allí estarán todos los archivos a utilizar en nuestra aplicación, es decir, el diseño de los formularios, los archivos de código, las referencias que se hagan a cierto Espacios de Nombres, etc., etc.

3. Barra de Herramientas: Lugar donde veremos todos los controles a utilizar, ya sean los propios de Visual Studio o los que encontremos en la Web. Combinación de teclas: Ctrl.+Alt+X

4. La ventana de Propiedades: Allí definiremos las características que tendrá los controles y el formulario. Combinación de teclas: F4

5. Explorador de Servidores: Allí veremos y podremos colocar los Servidores de Base de Datos con lo que estaremos trabajando. Combinación de teclas: Ctrl.+Alt+S

6. Lista de Errores: Aquí podrás observar los errores, advertencias o información que ocurra mientras realizas las compilaciones del tu aplicación web. Combinación de teclas: Ctrl.+W

Teniendo claro nuestro entorno de trabajo, arrojaremos tres simples controles que serán:

Para cambiar el Identificador del control basta con seleccionar el Control e ir a las propiedades y en la propiedad ID le colocaran el nombre arriba descrito. La idea es arrancar con un simple “Hola mundo” o lo que deseen mostrar J con la intención de validar que entendemos el entorno y que cada control que arrojemos al formulario web tengan un identificador único de esta manera al momento de referenciarlo desde el código no tengamos ningún inconveniente.

Nuestro código html dentro del tag de Body quedara de esta manera:

<body>

    <form id="form1" runat="server">

     <div>

         <asp:Label ID="lblmensaje" runat="server" Text=""></asp:Label>

         <asp:TextBox ID="txtmensaje" runat="server"></asp:TextBox>

         <asp:Button ID="btnmensaje" runat="server" Text="Mostrar Mensaje"/>

     </div>

    </form>

 </body>

Nótese que en la página los controles están desordenado asi que si queremos que se vea mas arreglado debemos utilizar hojas de estilos (css) o sencillamente insertar tablas y dentro de ellas agregar los controles.

Ahora le damos doble clic al botón y le agregaremos el siguiente código:

Visual Basic:

Protected Sub btnmensaje_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
Handles btnmensaje.Click

     lblmensaje.Text = txtmensaje.Text

End Sub

Visual C#:

protected void btnmensaje_Click(object sender, EventArgs e)

 {

     lblmensaje.Text = txtmensaje.Text;

 }

Notese la diferencia entre los dos lenguajes en C# es muy similar a C++ por la utilización de los punto y comas y llaves. Recomendación al momento de asignar el identificador de los controles traten de tener un estándar y una nomenclatura para hacer mas fácil su lectura y futuras modificaciones, es decir si lo escribes en minúsculas mantenlo de esa manera y no tendrás problemas en el código ya que en C# el entiende minúsculas y mayúsculas de manera diferente, ejemplo txtFoto no es igual txtfoto mientras que en Visual Basic si puede entender que son los mismos. En cuanto a la nomenclatura es si el control es un Label utilice lbl y si un textbox use txt antes del nombre que les quieran asignar... de esta manera se evitan dolores de cabezas de identificadores repetidos, de igual pasa en las declaraciones de variables.

Además de las diferencias de lenguaje quiero resaltar que al momento de darle doble click con el mouse al botón nos hemos redireccionado a una hoja de código aparte y esas líneas de código escrita es lo que dispara el evento Click del Botón, es decir, que al momento de darle click al botón la pagina leerá lo que esta en el TextBox (txtmensaje) y lo escribirá en el Label (lblmensaje). Asi que probemos nuestra aplicación presionando F5.

Al ser la primera ves que compilamos nuestra aplicación el Visual Studio o Visual Web Developer necesita escribir un Tag en nuestro archivo de configuración llamado web.config por lo que nos mostrara el siguiente mensaje, el cual daremos al botón Aceptar

Quieres saber que es el Web.Config pues entra en la definición que da WikiPedia

Con esto terminamos el Punto 1, por lo que estén atentos al resto de los puntos que estaré publicando por este medio y por día, ya que he logrado terminar mis artículos :).

Los siguientes capitulos:

Link al Capitulo II: Tutorial- Crear una Aplicacion Web – Principiantes Parte II

Link al Capitulo III: Tutorial- Crear una Aplicacion Web - Principiantes Parte III

Link al Capitulo IV: Tutorial- Crear una Aplicacion Web - Principiantes Parte IV

Te ha gustado este Post?

Compartir

Compartir |