Aquí vengo de nuevo!, por fin después de algunas semanas me animo de nuevo a poner algo en este blog. Primero que nada quisiera contarles, que todo lo que yo les he puesto anteriormente son cosas que había aprendido en el servicio y en la escuela, ahora ya estoy “trabajando” por así decirlo, y en tan poco tiempo aprendí un chorrotal de cosas que me gustaría irlas viendo poco a poco, y para empezar me gustaría darles una pequeña introducción a lo que es ADO.NET Entity Framework y Linq to Entity, utilizando los componentes que .NET nos proporciona para así aumentar la eficiencia.
Tambien les presumo, que ya tengo Visual Studio 2012, y trae el Framework 4.5, la verdad no me he puesto a estudiar las novedades que trae ASP.NET 4.5, por lo tanto el post tratará sobre el framework 4.0 y Entity Framework que es lo principal que viene en este framework.
Lo que pretendo hacer en este post es un pequeño catalogo donde se muestren diferentes tipos de productos y se puedan filtrar, etc.
Bueno para empezar vamos a crear un proyecto ASP.NET vacio y yo lo llamaré BalusoftPost
OJO, si de casualidad tu tienes visual studio 2012, tendrás que elegir el framework 4, esto para Post posteriores que voy a ahcer y tal vez sean de tu interes. Y finalmente pues tendrémos un proyecto totalmente vacio… obvio
Primeramente hay que ver la base de datos que vamos a utilizar, en este caso les voy a pasar los archivos mdf para hacerlo mas practico, pero de igual manera si la quieren hacer, aqui les dejo el diagrama
muy simple…
Descarga la base de datos: Archivo 1 Archivo 2
En visual studio creamos una carpeta especial de ASP que se llama App_Data y una vez descargado los 2 archivos de arriba, lo arrastramos a nuestro explorador de soluciones guardandolo en la carpeta ASP_data
Si automaticamente te agrego una conexion en visual studio, ignorala, nosotros vamos a crear una base de datos en nuestra instancia de Sql Server express apartir de ese archivo .mdf, para hacer eso nos posicionamos en Database Explorer:
Y damos clic en ¨Connect to Database¨
Escribimos el nombre de nuestro servidor, si no les funciona .\SQLEXPRESS prueben con (local), y en Attach a database file damos la ruta del archivo .mdf que se descargaron y copiaron en la carpeta App_Data, damos OK.
De esta manera ya tendrémos instalada la base de datos que vamos a utilizar
Ahora vamos a crear nuestro modelo a partir de esa base de datos, el modelo que vamos a crear es un modelo ADO.NET Entity Framework, para crear un modelo apartir de la base de datos que ya instalamos tenemos que hacer lo siguiente:
primero creamos una nueva carpeta, que se llamará DAL (Data Access Layer) y en esa carpeta agregaremos un nuevo item
Agregamos el modelo y nos aparecerá el siguiente asistente
Seleccionamos la conexion que ya creamos anteriormente y el nombre de configuracion para Web.Config le ponemos BalusoftEntities
Seleccionamos las tablas que queremos agregar al modelo
Asi ya tenemos el modelo creado, automaticamente .NET nos creo clases con sus propiedades que evidentemente son las que tenemos en las tablas, en este caso solo productos y tipo_producto.
Ahora tenemos que construir nuestra solucion para que se compile el modelo y asi podrémos usarlo.
Mostrar un menu con los tipos de productos
Primero que nada vamos a mostrar un menu que nos permitirá elegir que tipo de producto queremos mostrar, el chiste de esto es hacer un tipo “catalogo” de productos.
Creamos un nuevo webform que se llame default.aspx y agregaremos 2 componentes de la categoria Data: EntityDataSource y un ListView
Primero vamos a configurar el EntityDataSource, los componentes los arrastramos y en modo diseño damos clic a la lista desplegable del componente y le damos en “Configure Data Source”
Y listo, en este data source vamos a tener acceso a la entidad tipo_producto y a los unicos dos campos que contiene, ahora en el listview nos vamos al a vista de codigo y hay que dejarlo exactamente igual:
Aqui estamos difiniendo 3 cosas, el layout de como se mostrara nuestros datos, en este caso es una simple lista <ul>, dentro del PlaceHolder es donde se va a generar los ItemTemplate, o sea todos los elementos que producirá la consulta a tipo_producto, mas delante definimos el ItemTEmplate, que será un numero indefinido de elementos <li> y con la funcion Eval, obtenemos el valor de los campos de la entidad, en este caso id_tipo_producto y mostramos el tipo en el mismo enlace, si guardamos y si tenemos estos datos en la tabla tipo_productos el resultado será el siguiente:
Datos
Resultado
y si vemos el codigo de la pagina en el cliente, vemos como nos genero los enlaces:
Lo notan?, vean el item template y vean como es el resultado, comparen
El primero es el codigo en ASP y el 2do el resultado en puro html en el cliente.
Asi es como funcionan los ListView, la verdad se pueden hacer un chorro de cosas, personalizadas o automaticamente, de esta misma manera vamos a generar el catalogo
Debajo de este listview, vamos a agregar un control llamado Panel, pueden arrastrarlo y configurar desde la interfaz las propiedades, yo por mientras solo les pondré el codigo
Es un Panel, con ID pnlCatalogo y estará oculto por el momento, el chiste es que se muestre este panel cuando ya tenemos una categoria seleccionada del listado que ya hicimos.
Vamos a configurar el Listview igual como lo hicimos en el anterior, pero ahora vamos aplicar estilos CSS para poder mostrarlo como un catalogo mas bonito, entonces haremos:
En nuestra pagina default.aspx vamos a agregar dentro de las etiquetas <head> el siguiente codigo que seran estilos CSS
Ahora dentro del listView que agregamos dentro del panel que tambien agregamos (valga la redundancia) vamos a dejarlo de la siguiente manera:
Y nos vamos al CodeBehind default.aspx.cs y agregamos lo siguiente
Basicamente, como recuerdan, al dar clic en algun tipo de producto nos manda a la misma pagina default.aspx pero con una variable por la URL, entonces en el evento Page_Load por medio de QueryString obtenemos el valor de esa variable que pasamos por la URL, y si es que existe algun valor mandamos a llamar al metodo cargarCatalogo
este metodo privado llamado cargarCatalogo le damos por parametro el id del tipo de producto que se seleccionó, creamos una instancia de nuestro modelo BalusoftEntities que creamos dentro de la carpeta DAL, por eso agregamos el using en la parte de arriba, por medio de linq to entities hacemos una consulta muy sencilla que es un select from where en SQL, finalmente vinculamos los datos y el resultado será el siguiente:
Tengamos en cuenta que en la tabla productos tenemos esta informacion:
Se dan cuenta, nos muestra los productos del tipo 1, dato que se pasa por la URL y se hace todo ese proceso.
Espero y les sirva! un saludo y esperen mas cosas de ASP.NET Entity Framework
Saludos
Ayudame por favor, hago exactamente los pasos pero al momento de instalar la base de datos me sale que la base de datos ya existe o que no se puede abrir el archivo o que estoy de uso compartido de una ruta UNC… Aparte cuando al abrir la base de datos en el explorador de soluciones no aparece la «carpeta diagrama de clases»
La verdad SQL Server se puede volver un poco latoso, te recomiendo que descargues SQL Server Management studio 2008 en su version express y crees tu la base de datos, la base de datos es algo parecido a esto https://balusoft.files.wordpress.com/2012/07/image2.png
Saludos!
Tengo un inconveniente, genera error al momento de dar click en el primer elemento de la lista, en este caso el de electronica, el query me queda cargado de la siguiente manera:
{SELECT [Extent1].[id_productos] AS [id_productos], [Extent1].[nombre] AS [nombre], [Extent1].[descripcion] AS [descripcion], [Extent1].[precio] AS [precio], [Extent1].[id_tipo_producto] AS [id_tipo_producto]FROM [dbo].[productos] AS [Extent1]WHERE [Extent1].[id_tipo_producto] = @p__linq__0} , carga la consulta en el lstvCatalogo.DataSource = query; y hasta hay perfecto, al momento de ejecutar el lstvCatalogo.DataBind(); se genera el siguiente error «El codigo de usuario no controlo NotSupportedException» con la siguiente comentario: Data binding directly to a store query (DbSet, DbQuery, DbSqlQuery) is not supported. Instead populate a DbSet with data, for example by calling Load on the DbSet, and then bind to local data. For WPF bind to DbSet.Local. For WinForms bind to DbSet.Local.ToBindingList().
Solucionado, cambie unas partes del código y funciono perfecto…
protected void Page_Load(object sender, EventArgs e)
{
string selectedId = Request.QueryString[«id»];
// if (selectedId != «» || selectedId != null )
if (!string.IsNullOrEmpty(selectedId ))
cargarCatalogo(Convert.ToInt32(selectedId));
}
private void cargarCatalogo(int SelectedId)
{
pnlCatalogo.Visible = true;
BalusoftEntities1 context = new BalusoftEntities1();
var query =
from q in context.productos
where q.id_tipo_producto == SelectedId
select q;
lstvCatalogo.DataSource = query;
lstvCatalogo.DataSource = query.ToList();
lstvCatalogo.DataBind();
}