Tutorial Crear Un Aplicacion Web Para Principiantres

5/14/2018 Tutorial Crear Un Aplicacion Web Para Principiantres - slidepdf.com

http://slidepdf.com/reader/full/tutorial-crear-un-aplicacion-web-para-principiantres 1/16

Tutorial: Crear una Aplicación Web - PrincipiantesPublicado: 28/10/2009 | Autor: alex jimenez | |

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 nomostrarí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 totalmentegratuito 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 apartir 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 VisualBasic 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 WebPrimero 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:

http://go.microsoft.com/?linkid=7653519






En lo que crean el proyecto verán la página Default.aspx en el “Tags Código” es decir el visor deVisual Studio o de Visual Web Developer se lo mostrara en Código HTMLFormas 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 iremosdesarrollando 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 otroarchivo 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

http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacinWebPrincipiante_928/image_8.png






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, eldiseñ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 lospropios 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 ocurramientras 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:

Control Nombre Texto

Label lblmensaje

TextBox txtmensajeButton btnmensaje Mostrar Mensaje

Para cambiar el Identificador del control basta con seleccionar el Control e ir a las propiedades yen 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 almomento 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 lospunto 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ásproblemas 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 losmismos. 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ódigoescrita es lo que dispara el evento Click del Botón, es decir, que al momento de darle click albotó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 WebDeveloper 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

Tutorial: Crear una Aplicacion Web –

Principiantes Parte IIPublicado: 29/10/2009 | Autor: alexjimenez | |

En el capitulo anterior vimos como le dábamos comienzo a este tutorial, aprendiendo algunos

conceptos básicos y útiles para el progreso de este tutorial así que sin mas ni mas comencemos

con la parte II donde conoceremos las ventajas de las MasterPages.

Link al Capitulo I: Tutorial- Crear una Aplicacion Web - Principiantes

Creando Páginas Maestras En muchas ocasiones hemos optado por tener un diseño único en las páginas y cuando teníamos

que editar una imagen un color o algo de ese diseño nos tocaba las de Caín J revisar todas laspáginas y hacerles el cambio a todas. La idea fundamental de las MasterPages en ASP.net es

precisamente tener una página principal con el diseño y con las secciones habilitadas(ContentPlaceHolder) para editarlas en las páginas que se generen a partir de la MasterPages.Ventajas de tener una página maestra:

1. Ahorrarnos el copiar y pegar de página en página, es decir, si ya teníamos un modelo de cómo

se verán nuestras páginas nosotros optábamos en copiar todo su HTML y lo pegábamos en lasnuevas páginas para mantener el diseño. Permitiendo centralizar diseño de las páginas para que

las modificaciones puedan llevarse a cabo en un solo lugar.

2. Permiten crear un diseño coherente para las páginas de la aplicación

3. Aparte del aspecto y el diseño también podemos controlar el comportamiento estándar quedesea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola

MasterPage.

4. Mas fácil la edición del HTML en las paginas hijas, ya que las nuevas adiciones en las paginasestán contenidas dentro de un ContePlaceHolder.

Ok comencemos a nuestro proyecto que hemos creado en el Post anterior le daremos con el botón

derecho del mouse o se van al Menú “Sitio Web” y seleccionamos la opción “Agregar Nuevo

Elemento” y buscaremos una plantilla llamada “MasterPages” le asignan el nombre que ustedesdeseen, yo le diré “MasterPrincipal”. Veamos como se muestra en la siguiente Imagen.

Antes de agregar el diseño es conveniente borrar el ContentPlaceHolder que se encuentra dentrodel Tag Body del HTML que aparece al crear la MasterPage<body>

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

http://es.wikipedia.org/wiki/Web.config



http://ajdev.net/Publicacion/Articulo/43.aspx






















<div><asp:ContentPlaceHolder id="ContentPlaceHolder1"

runat="server"></asp:ContentPlaceHolder>

</div></form>

</body>

Mientras que el ContentPlaceHolder que aparece en el Head lo dejaremos allí para futuras

asignaciones J, ahora si procedemos a darle un diseño sencillo por lo que utilizaremos “3 Div”diferentes uno lo llamaremos dvCabezal, el otro dvMenu, y por ultimo dvContenido dentro de

este último Div agregaremos un ContentPlaceHolder que llamaremos cphContenido.

Esto debe quedar como la siguiente Imagen:

Con todo esto podemos seguir con el resto del tutorial, ahora para ver (probar) nuestra

MasterPage borramos del proyecto la página Default.aspx y luego nos dirigimos al Menú “Sitio

Web” y seleccionamos la opción “Agregar Nuevo Elemento” y buscaremos una plantilla llamada“Web Forms” le asignan el siguiente nombre “Default” y marcan la casilla de verificación

llamada “Seleccionar la Pagina Principal” (Fig. Nuevo Elemento) le damos aceptar y luego

seleccionamos Nuestra MasterPage” (Fig. Seleccionar MasterPage).

Fig. Nuevo Elemento

http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacionWebPrincipiant_D4FC/image_3.png

http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacionWebPrincipiant_D4FC/image.png


http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacionWebPrincipiant_D4FC/image.png



Fig. Seleccionar MasterPage Ahora veremos la página de la siguiente manera:

Ahora puedes arrojar los controles que desees en la sección cphContenido y probar presionando

la tecla F5, ya sé que se ve blanco y feo nuestro sitio pero en los próximo capítulo te diré comosolventar ese detalle.

Tutorial: Crear una Aplicacion Web – Principiantes Parte

IIIPublicado: 04/11/2009 | Autor: alexjimenez | |

Continuando con este tutorial, nos enfocaremos en intentar colocar nuestra aplicación web un poco más agradable a la vista .Temas (Themes): Aparecen por primera vez en ASP.net 2.0 para contrarrestar los problemas que enfrentan los desarrolladorespara definir el diseño de los controles de servidor y que parezcan coherente a la aplicación general, con el mínimo posible además

tener un mayor control del diseño cuando se trabaja con Paginas Maestras permitiendo tener un diseño único y que al momento demodificar la masterpages modificamos de una vez todas las páginas que hereden esa masterpages, porque si recuerdan o los queaún lo siguen haciendo, siempre nos enfrentamos a un diseño único y copiamos ese diseño de una página a otra y cuando tocamodificar pues venia el dolor de cabeza porque era modificar todas las páginas . Para ello con la Aparición de Themes enASP.net podemos tener una carpeta dedicada a este punto que es el “App_Theme” haciéndolos más fácil de administrar einterpolar de acuerdo a sus necesidades.Para agregar una carpeta Theme solo debemos darle botón derecho a nuestro proyecto WebAgregar Carpeta ASP.netTema (

como se muestra en la siguiente imagen).

Para esa primera carpeta le llamaremos Azul, esto es porque el color predominante de la página estará en azul obviamente, sigustan pueden cambiarle el nombre y agregar sus propios colores





http://ajdev.net/Publicacion/Articulo/$clip_image002%5b9%5d.jpg



Dentro de la Carpeta podemos guardar las imágenes (ejemplo: imagen de fondo, imagen de botones, de cabecera, etc. etc.), Hojas

de Estilos (los famosos css), Mascaras (Skin ya hablaremos de estos archivos).Mascaras (Skin): Un archivo de máscara tiene la extensión .skin y contiene los valores de propiedades para los controlesindividuales como por ejemplo Botón, Label, TextBox, etc, etc. La configuración de las máscaras del control se parece al queescribimos en la propia página cuando es arrastrado, es decir que si en la página tenemos esto (le coloque algunas características

extras para diferenciar mejor):<asp:TextBox ID="TextBox1" runat="server" BorderStyle="Solid" BorderWidth="1px" ForeColor="#000066" Width="150px" BorderColor="#AED7FF"></ asp:TextBox>Mientras que si agregamos un archivo de Skin a nuestro tema copio la estructura anterior sin el ID podemos arrastar los siguientes

textbox y solo aplicar lo siguiente:<asp:TextBox ID="TextBox1" runat="server" SkinID="skinTextBox"></ asp:TextBox> Se ve la diferencia? es mucho mas practico y no nos matamos tanto en cambiar uno a uno los textbox si no que creamos un skin

(o varios dependiendo de ustedes) y le asignamos su SkinID para que tome estas caracteriscas.Bueno ahora si vamos a repotenciar nuestra aplicación web creando una hoja de estilos para ello nos ubicamos en la CarpetaApp_ThemeAzul le damos botón derecho del mouse y le decimos agregar un Nuevo Elemento. Seleccionamos una hoja de

Estilo con el nombre que deseen y le agregaremos las siguientes características: /* Cuerpo o fondo de la Pagina */

body{

margin: 1px;padding: 1px;

border: 0;color: #000;

font-family: Tahoma, Verdana;font-size: small;

font-style: normal;background-color: #F2F9FF;

} /* Nuestro Div de Contenido que creamos en la MasterPages */

#dvContenido{

margin: 1px;padding: 4px 1px 1px 1px;

width: 100%;min-height:300px;height:100%;position: relative;

}

/* Nuestro Div de cabecera que creamos en la MasterPages */ #dvCabezal{

width: auto;

height:150px;margin: 5px;padding: 1px;border: 0;

clear: both;background-color: #C5E6FE;border: 1px solid #0099FF;text-align: right;

vertical-align: top;}

/* Nuestro Div del Menu que creamos en la MasterPages */

#dvMenu{

width: auto;margin: 5px;clear: both;

background-color: #C5E6FE;overflow: hidden;border: 1px solid #0099FF;text-align: left;

vertical-align: middle;

} /* Efectos que le aplicamos a las opciones de Menu esto solo



aplicaria en el Div de Menu */

#dvMenu ul{

list-style-type: none;width: 100%;

margin: 0;padding: 0;

}#dvMenu li

{float: left;

}

#dvMenu a {margin: auto;color: #000;

text-decoration: none;display: block ;

padding: 5px 35px 5px 35px;border: 1px solid #0099FF;background-color: #C5E6FE;

}

#dvMenu a:hover {

color: #000;text-decoration: none;

border: 1px solid #0099FF;background-color: #6FB7FF;

}

Y para crear un Skin es el mismo procedimiento realizado para agregar una hoja de estilo pero esta ocasión seleccionaremos unarchivo de mascara pueden darle un nombre por cada control que deseen colocarle mascara o tener un archivo único.En mi caso agregue dos Skin para los siguientes controles:TextBox:

<asp:TextBox SkinId="skinTextBox" runat="server" BorderStyle="Solid" BorderWidth="1px" ForeColor="#000066" Width="150px" BorderColor="#AED7FF"></ asp:TextBox>GridView

<asp:GridView runat="server" SkinId="SkinGridView" BackColor="White" ><AlternatingRowStyle BackColor="Blue" />

</ asp:GridView>

Ok ya con esto tenemos para adornar los controles que empezaremos agregar en el próximo capítulo de este tutorial, pero porahora antes de finalizar debemos decirle a nuestra Aplicación que tome el Tema que creamos, por tanto debemos abrir elWeb.Config y buscar un Tag llamado <Page> que debe encontrarse dentro de <system.web> y te asignaremos el atributo themecon el nombre de nuestro tema:<pages theme="Azul">

Ya con eso toda la aplicación leera este tema, ahora si deseamos que cada pagina tenga un tema diferente podemos agregar unadirectiva a la pagina llamada Theme con el nombre del tema quedeseamos por lo que quedaría de la siguiente manera:<%@ Page Title="" Theme="Azul"Language="C#" MasterPageFile="~/MasterPrincipal.master"

AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Si con esto no es suficiente pueden decirle en el Load de la Pagina (no es el lugar más correcto pero igual funciona , lorecommendable seria en el Init de la Pagina ) la siguiente línea de código:C#: this.Theme = "Azul";VB: Me.Theme="Azul"

Bueno espero que con esto le sirva para seguir avanzando en su aprendizaje .

Tags: CSS ASP.net Csharp net Framework HTML Principiantes Tutoriales VB Web

Tutorial: Crear una Aplicacion Web – Principiantes ParteIVPublicado: 05/11/2009 | Autor: alexjimenez | |

Hemos llegado al final de este mini tutorial, por tanto le muestro los enlaces a los Capítulos

Anteriores.:

http://ajdev.net/publicacion/tags/CSS


http://ajdev.net/publicacion/tags/ASP.net


http://ajdev.net/publicacion/tags/Csharp


http://ajdev.net/publicacion/tags/net%20Framework


http://ajdev.net/publicacion/tags/HTML


http://ajdev.net/publicacion/tags/Principiantes


http://ajdev.net/publicacion/tags/Tutoriales


http://ajdev.net/publicacion/tags/VB


http://ajdev.net/publicacion/tags/Web














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

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

En este punto se tratara con LINQ para así mostrarle lo último en tecnología ya que se nosaproxima VS2010 y hay muchas cosas más interesante que se debería mostrar

LINQ (Lenguage INtegrated Query), es una tecnología bastante interesante en ella podemos

establecer consultas de manera directa a la base de datos partiendo de un simple query, debemostener en cuenta que no solo base de datos podemos hacer esto si no también a objetos (LINQ to

Objects), XML (LINQ to XML), Entidades y otros manejadores (LINQ to ADO.net), por ello

LINQ se fortalece cada vez mas permitiendo tener una especie de lenguaje único de consulta paralas diferentes formas de obtención de datos.

La definición de la Librería MSDN lo define de esta manera: “ Language-Integrated Query (LINQ) es

un conjunto de características en Visual Studio 2008 que agrega eficaces capacidades de consulta a lasintaxis de los lenguajes C# y Visual Basic. LINQ incluye patrones estándar y de fácil aprendizaje paraconsultar y actualizar datos, y su tecnología se puede extender para utilizar potencialmente cualquier tipo dealmacén de datos. Visual Studio 2008 incluye ensamblados de proveedores para LINQ que habilitan el uso deLINQ con colecciones de .NET Framework, bases de datos de SQL Server, conjuntos de datos de ADO.NET y documentos XML.” Como hemos venido trabajando en el este tutorial vamos a agregar a nuestro sitio web un nuevo

Elemento->Clases de LINQ to SQL el cual lo he llamado dcAdventureWorks.dbml debido a queestaremos utilizando la base de datos AdventureWorks así como resalto en la siguiente imagen.

Luego de dar aceptar nos debe aparecer la siguiente pregunta al cual le daremos a la Opción SI.

Luego nos saldrá un espacio en blanco donde nos pide ver el Explorador de Servidores o el

cuadro de herramientas y así poder arrastrar los objetos (que para nuestro caso serian las tablas dela base de datos AdventureWorks) que deseamos ver en nuestro DataClases por ello

seleccionaremos Explorador de Servidores y en el deben aparecer listado los Servidores de base

de datos que se encuentren configurado de otras aplicaciones de estar vacía que es la forma














http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacionWebPrincipiant_D32A/image_3.png

http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacionWebPrincipiant_D32A/image.png


http://ajdev.net/Archivos/AlexJimenez/Imagenes/TutorialCrearunaAplicacionWebPrincipiant_D32A/image.png






más tradicional de verlo entonces haremos los siguientes pasos para visualizar nuestra base dedatos.

1. Seleccionaremos el icono amarillo con forma de base de datos y un + en la parte superior

como se indica en la imagen siguiente, esto es para conectarnos al servidor de base de datos.

2. Aparecerá un cuadro como muchas maneras de conectarnos a la base de datos y por ellode bemos seleccionar la siguiente. Si es de su preferencia puede dejar la casilla “Utilizar siempreesta selección” por si siempre utilizara esa manera para conectarse a una fuente de datos.

3. Si se ha equivocado al momento de seleccionar el Origen de datos (Paso anterior) puedereajustar la selección con darle al botón Cambiar (ver la siguiente imagen), se la selección es la

correcta usted debe indicar el nombre del servidor de SQL Server donde está la base de datos a

utilizar en mi caso estoy usando un Motor de SQL Server 2005 Developer Editions y por ello miNombre servidor es (local)\SQL2005 en sus casos si está utilizando la versión Express seria de la

siguiente manera (local)\SQLExpress, luego según las características que hallas definido al

momento de instalar el servidor de base de datos pudieras usar una autenticación de modoWindows o de Modo SQL Server y de allí puedas seleccionar tu base de datos.







Nota: por si no sabes quién es (local) vendría siendo tu maquina por lo que en vez de usar (local)

pudieras utilizar el nombre de tu Maquina, el \ServidorSQL seria la instancia donde fue instalado

el servidor de base de datos, es decir seria esta nomemblecatura:{TUMAQUINA\INSTANCIA_SERVIDOR_SQL}. Te recomiendo hacer una prueba de

conexión antes de darle aceptar para validar que te puedes conectar sin problemas.

4. Ahora seleccionaremos todas las tablas de la base de datos o sencillamente podemos usar lastablas que usaremos para el tutorial y luego de seleccionarlas la vamos arrastrando al DataClases

donde las tablas son StateProvince y CountryRegion.

Nota: Fíjense la sección remarcada, allí arrastraríamos los StoreProcedures y Funciones queestén definidos en la base de datos lo cual en código podremos invocarlos como Métodos,

mientras las tablas la invocaremos como Clases.

Ya con esos puntos podemos empezar a lanzar código , pero antes de empezar debo explicarlecomo es la sintaxis de LINQ para que así puedan seguirme, sé que es mucho bla bla bla pero

créanme es lo correcto. La sintaxis tradicional y quizás la más utilizada de LINQ es la siguiente:







La forma de trabajar con LINQ es englobando la consulta y almacenando todo en una variable de

tipo “var” (en C# y en VB es DIM sin la asignación de tipo de datos), veamos como se ve lo

mostrado en la imagen anterior en código:

C#:var consulta = from country in db.CountryRegion

select country;

VB:Dim consulta = From country In db.CountryRegion Select country

Lo que equivale a una consulta al estilo SQL:Select * From Person.CountryRegion

Si lo ven no es tan difícil al contrario nos facilita el poder manejar objetos, xml y otros fuentes de

datos basándonos en un solo esquema, facilitándonos y/o ahorrándonos el tener que aprendercómo obtener los datos y cuál sería su sintaxis .

Como si eso no fuese todo también podemos hacer consultas a la base de datos como si fuesen

métodos así como se muestra en el ejemplo siguiente:C#:var consulta = db.CountryRegion;//.Select(c => new { c.Name, c.StateProvince}); VB:Dim consulta = db.CountryRegion

Es decir que quedaria como la siguiente imagen :

Aquí le dejo otra imagen para notar la forma como se realiza las consultas con LINQ con amboslenguajes (VB y C#) y que el Visual Studio 2008 nos brinda todo el soporte necesario.







Ahora teniendo claro la forma de realizar consultas en LINQ podremos comenzar con agregaruna nueva página seleccionando la MasterPage creada en los capitulos anteriores y la llamaremos

infoCountryRegion.aspx en el solo tendremos el GridView que llamaremos gvCountryRegion yle asignaremos en su propiedad el SkinID=”SkinGridView” que mostrara los datos arrojados delas consultas que realizaremos a la tabla CountryRegion.

En la hoja de código del formulario web (infoCountryRegion.aspx.cs) vamos a crear un método

que llamaremos “LlenarGrid()” dicho método nos servirá para llenar el GridView la carga de lapagina en futuras mejoras al gridview como la paginación y selección de filas.

C#/// <summary>/// Metodo que usaremos para extaer la informacion de la Base de Datos y

llenar el GridView/// </summary>private void LlenarGrid()

{//Obtenemos la cadena de conexion del archivo de configuracion

(Web.config)//Y lo alamcenamos en una variable de tipo stringstring sConfig =

ConfigurationManager.ConnectionStrings["AdventureWorksConnectionString"].ConnectionString;

//Declaramos un tipo DataContext a partir del DataClases que agregamosal proyect y le

//pasamos en el parametro la cadena conexion almacenada en la variablesConfig

dcAdventureWorksDataContext db = new dcAdventureWorksDataContext(sConfig);

//Se construye la Consulta simple para extraer datos de la TablaCountryRegion

var consulta = from c in db.CountryRegionselect c;

//Lugar donde mostraremos la informacion consultada a la tablagvCountryRegion.DataSource = consulta;gvCountryRegion.DataBind();

} VB''' <summary>




''' Metodo que usaremos para extaer la informacion de la Base de Datos yllenar el GridView

''' </summary>Sub LlenarGrid()

'Obtenemos la cadena de conexion del archivo de configuracion(Web.config)

'Y lo alamcenamos en una variable de tipo stringDim sConfig As String =

ConfigurationManager.ConnectionStrings("AdventureWorksConnectionString").ConnectionString

'Declaramos un tipo DataContext a partir del DataClases que agregamosal proyect y le

'pasamos en el parametro la cadena conexion almacenada en la variablesConfig

Dim db As dcAdventureWorksDataContext = New dcAdventureWorksDataContext(sConfig)

'Se construye la Consulta simple para extraer datos de la TablaCountryRegion

Dim consulta = From country In db.CountryRegion Select country'Lugar donde mostraremos la informacion consultada a la tablagvCountryRegion.DataSource = consulta

gvCountryRegion.DataBind()End Sub Mientras que en el Page_Load de la página escribiremos la invocación del método recién creado

colocando una validación de que la Página sea diferente a un PostBack por lo que quedaría así en

el siguiente código:C#

protected void Page_Load(object sender, EventArgs e){

if (!IsPostBack){

LlenarGrid();}

}

VBProtected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.LoadIf (IsPostBack = False) Then

LlenarGrid()End If

End Sub Ahora debemos ubicarnos en el GridView y en sus propiedades ubicaremos la que dice

“AllowPagin” y lo cambiamos a “True” (su Paginación de manera predeterminada es de 10registro si gustan pueden cambiar este valor en la propiedad PageSize) luego manteniendo aun

seleccionado el GridView nos ubicamos en la sección de Eventos y le damos doble clic al evento

y nos llevara a la hoja de código de la página. Por cierto si aún no saber cómo ubicar la sección

de eventos pues ubíquense en las propiedades del GridView y en la parte superior verán un Rayoallí le darán clic y verán todos los eventos disponibles para el GridView como se muestra en la

siguiente imagen:



Ok luego de que sean llevado a la hoja de código colocaran las siguientes líneas de código dentrodel evento que acabamos de crear.

VB:Protected Sub gvCountryRegion_PageIndexChanging(ByVal sender As Object,

ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles gvCountryRegion.PageIndexChanging

gvCountryRegion.PageIndex = e.NewPageIndex'Aqui invocamos al metodo que creamos al inicio que es LlenarGridLlenarGrid()

End Sub C#:

protected void gvCountryRegion_PageIndexChanging(object sender,GridViewPageEventArgs e)

{gvCountryRegion.PageIndex = e.NewPageIndex;//Aqui invocamos al metodo que creamos al inicio que es LlenarGridLlenarGrid();

} Y con esto damos por terminado esta serie de mini tutoriales :) prometo incorporar mas artículos

que se relacionen con este tutorial.


Tutorial Crear Un Aplicacion Web Para Principiantres

Documents

Transcript of Tutorial Crear Un Aplicacion Web Para Principiantres