ASP.NET 4 “Entity Framework” [Visual Studio 2012]

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

image

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 Smile with tongue out

image

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

image

muy simple…

Descarga la base de datos: Archivo 1 Archivo 2

image

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

image

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:

image

Y damos clic en ¨Connect to Database¨

image

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.

image

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

image

Agregamos el modelo y nos aparecerá el siguiente asistente

image Next…

imageSeleccionamos la conexion que ya creamos anteriormente y el nombre de configuracion para Web.Config le ponemos BalusoftEntities

image

Seleccionamos las tablas que queremos agregar al modelo

image 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.

image

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”

image

image

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:

image

 

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

image

Resultado

image

y si vemos el codigo de la pagina en el cliente, vemos como nos genero los enlaces:

image

Lo notan?, vean el item template y vean como es el resultado, comparen

image

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

image

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

image

Ahora dentro del listView que agregamos dentro del panel que tambien agregamos (valga la redundancia) vamos a dejarlo de la siguiente manera:

image

Y nos vamos al CodeBehind default.aspx.cs y agregamos lo siguiente

image

image

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:

image

Tengamos en cuenta que en la tabla productos tenemos esta informacion:

image

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

Autor: Isaac Ojeda

Computer Systems Engineer. Full stack DotNet developer. Expert in Web technologies, and lifelong learner in all existing technologies for software development.

4 opiniones en “ASP.NET 4 “Entity Framework” [Visual Studio 2012]”

  1. 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»

  2. 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().

  3. 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();

    }

Replica a William Cancelar la respuesta