FACULTAD INGENIERIA COORDINACION DE COMPUTACIÓN · incluirán contenido reemplazable. A su vez, el...

Guía #6: Master Pages y Entity Framework

Desarrollo de aplicaciones con software propietario 2

UNIVERSIDAD DON BOSCO

FACULTAD INGENIERIA

COORDINACION DE COMPUTACIÓN

Ciclo 1/2020

GUIA DE LABORATORIO # 6

Nombre de la Práctica:

Lugar de Ejecución:

Tiempo Estimado:

MATERIA:

Master Pages y Entity Framework

Centro de cómputo

2 horas con 30 minutos

Lenguaje de Programación II

II. OBJETIVOS

Que el estudiante:

1. Conozca los fundamentos teóricos sobre LINQ en ASP.NET

2. Implemente clases de LINQ a SQL en una aplicación web

3. Manipule datos y el control de operaciones desde una página web

II. INTRODUCCIÓN TEÓRICA

Entity Framework Entity Framework es un ORM que permite la utilización de objetos de dominio para manipular datos en bases de datos relacionales, eliminando así la necesidad de una gran parte del código para acceder a los datos.

ORM

Object-Relational Mapping es un modelo que mapea estructuras de una base de datos relacional, sobre una estructura lógica de entidades utilizando lenguaje orientado a objetos.

Componentes de Entity Framework

▪ EDM (Entity Data Model) ▪ Conceptual Model ▪ Storage Model ▪ Mapping ▪ LINQ to Entities ▪ Entity SQL ▪ Object Service ▪ Entity Client Data Provider ▪ ADO.NET Data Provider



Modos de trabajo

Master Pages

Las páginas principales de ASP.NET permiten crear un diseño coherente para las páginas de la aplicación.

Puede definir el aspecto, el diseño y el comportamiento estándar que desea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola página principal. A continuación, puede crear páginas de

contenido individuales que incluyan el contenido que desea mostrar. Cuando los usuarios solicitan las páginas de contenido, éstas se combinan con la página principal para dar como resultado una página con el

diseño de la página principal y el contenido de la página de contenido.

Marcadores de posición de contenido reemplazables

Además del texto estático y los controles que aparecerán en todas las páginas, la página principal también

incluye uno o varios controles ContentPlaceHolder. Estos controles PlaceHolder definen las regiones que

incluirán contenido reemplazable. A su vez, el contenido reemplazable se define en las páginas de contenido.

Páginas de contenido

Para definir el contenido de los controles PlaceHolder de la página principal, cree páginas de contenido individuales, que son páginas ASP.NET (archivos .aspx y, opcionalmente, archivos de código subyacente) que

están enlazadas a una página principal concreta. El enlace se establece en la directiva @ Page de la página de contenido al incluir un atributo MasterPageFile que apunta a la página principal que se va a utilizar. Por

ejemplo, una página de contenido podría tener la siguiente directiva @ Page, que la enlaza con la página Master1.master.

En la página de contenido, cree el contenido agregando los controles Content y asignándolos a los controles ContentPlaceHolder de la página principal. Por ejemplo, la página principal podría tener

marcadores de posición de contenido denominados Main y Footer.



En la página de contenido, puede crear dos controles Content, uno asignado al control ContentPlaceHolderMain y el otro asignado al control ContentPlaceHolderFooter, como se muestra en

la ilustración siguiente.

Reemplazar el contenido del marcador de posición

Después de crear los controles Content, agrégueles texto y controles. En una página de contenido, todo lo que

no esté dentro de los controles Content (excepto los bloques de script del código del servidor) producirá un

error. En una página de contenido puede realizar las mismas tareas que en una página de ASP.NET. Por

ejemplo, puede generar el contenido de un control Content utilizando controles de servidor y consultas de

base de datos u otros mecanismos dinámicos.

Ventajas de las páginas principales

Las páginas principales proporcionan una funcionalidad que tradicionalmente los programadores creaban

copiando el código, el texto y los elementos de control existentes repetidamente, mediante conjuntos de

marcos, archivos de inclusión de elementos comunes, controles de usuario de ASP.NET, etc. Entre las ventajas

de las páginas principales se incluyen las siguientes:

• Permiten centralizar las funciones comunes de las páginas para que las actualizaciones puedan llevarse a cabo en un solo lugar.

• Facilitan la creación de un conjunto de controles y código, y aplican los resultados en un conjunto de

páginas. Por ejemplo, puede utilizar los controles en la página principal para crear un menú que se

aplique a todas las páginas.

• Proporcionan un control más preciso sobre el diseño de la página final al permitir controlar el modo en que se representan los controles PlaceHolder.

• Proporcionan un modelo de objetos que permite personalizar la página principal a partir de páginas

de contenido individuales.

Comportamiento en tiempo de ejecución de las páginas principales

En tiempo de ejecución, las páginas principales se controlan en la secuencia siguiente:

1. Los usuarios solicitan una página escribiendo la dirección URL de la página de contenido.


Lenguaje de Programación II 5

2. Cuando se obtiene la página, se lee la directiva @ Page. Si la directiva hace referencia a una página principal, también se lee la página principal. Si las páginas se solicitan por primera

vez, se compilan las dos páginas.

3. La página principal con el contenido actualizado se combina en el árbol de control de la página de contenido.

4. El contenido de los controles Content individuales se combina en el control ContentPlaceHolder correspondiente de la página principal.

5. La página combinada resultante se representa en el explorador.

Este proceso se describe en el diagrama siguiente:

Desde la perspectiva del usuario, la combinación de las páginas principales y de contenido da como resultado una única página. La dirección URL de esta página es la de la página de contenido.

Desde la perspectiva del programador, las dos páginas actúan como contenedores diferentes para sus

respectivos controles. La página de contenido actúa como un contenedor de la página principal. Sin

embargo, se puede hacer referencia a los miembros públicos de una página principal a partir del

código de la página de contenido.

https://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.content(v%3Dvs.100).aspx

https://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.contentplaceholder(v%3Dvs.100).aspx



III. MATERIALES Y EQUIPO

Para la realización de la guía de práctica se requerirá lo siguiente:

No. Requerimiento Cantidad

1 Guía de práctica #10: Conectando a Fuentes de Datos con LINQ 1

2 Computadora con Microsoft Visual Studio 2012 y Microsoft SQL Server instalados.

1

3 Memoria USB o disco flexible 1

IV. PROCEDIMIENTO

Ejercicio #1 – Creación de base de datos usando SQL Server 2012 para que funcione como fuente de

datos.

1. Proceda a iniciar la herramienta de Microsoft SQL Server Management Studio instalada en su

computadora. Una vez cargada, confirme que existe la base de datos “EmpresaPlazaLibre”. Si no existe, debe

crearla desde los recursos.

Ejercicio #2 – Creación de sitio web con Master Pages acceso a datos con Entity Framework

1. Proceda a crear un nuevo proyecto desde Visual Studio de tipo Aplicación web de ASP.NET (.NET Framework) Como sitio web vacío.



2. Una vez creado el proyecto procederemos a agregar las clases para trabajar con Entity Framework, para ello hacemos click derecho en el proyecto, seleccionamos agregar, nuevo elemento.

3. En el apartado Datos elegiremos ADO.NET Entity Data Model, cambiar el nombre a UDBModel y dar click en agregar.



4. Lo siguiente que verá será el asistente para Entity Data Model, en la primera ventana seleccionar EF Designer desde Base de Datos, con esto se estará trabajando con el modo de trabajo Database First, dar click en siguiente.

5. El siguiente paso del asistente es agregar una conexión a Entity Framework, paralo que deberá crear una nueva conexión a la base de Datos con el Asistente de Visual Studio, de click en el botón nueva conexión y complete el formulario con la información de la base de



datos EmpresaPlazaLibre creada en el ejercicio 1, no olvide verificar la conexión haciendo click en el botón probar conexión.



6. De vuelta en el Asistente de Entity Framework seleccione la conexión que creo en el paso anterior y marcar la opción para incluir contraseñas en el archivo web.config, modificar también el nombre con que esta conexión se guardara en dicho archivo, finalmente dar click en siguiente.

7. En el siguiente paso, indicamos la versión de Entity Framework, seleccionar 6.x y dar click en siguiente.



8. Finalmente, seleccionar los objetos de la base de datos con los que se va a trabajar, en este

caso todas las , marcar los cheques de todas las tablas y posteriormente cambiar el espacio de nombres a BDDModel, después de esto dar click en finalizar.

9. Con todo lo anterior se ha logrado generar las clases que Entity Framework utiliza como contexto para manipular la información, en este punto deberá tener abierto un diseñador donde podrá ver todas las tablas de la bdd que ahora se han convertido en clases de entidad, esto esta en el archivo UDBModel.edmx que si lo despliega podrá visualizar todas las clases que se han generado automáticamente para la manipulación de los datos.



10. Una vez creado nuestro sitio web y nuestras clases de entidad, procederemos a configurar las condiciones de trabajo del mismo mediante la creación de carpetas y archivos. Para ello cree 4 carpetas en la raíz del sitio según el detalle de la siguiente tabla. El contenido

de cada carpeta se encuentra como recurso de esta guía, por lo que debe de adicionar el contenido de cada una de las carpetas como ya lo ha realizado anteriormente.

Carpeta

Css

Fonts

Images

Js

11. Procederemos ahora a crear la lógica de nuestra aplicación, para ello se trabajará una parte

con el acceso desconectado, proceda a agregar una nueva clase con el nombre

“ConexionEF.cs” que es donde se alojará todo el código que gestionará los procesos con la

base de datos. Proceda a digitar el siguiente código, tomando en cuenta las instrucciones

“using” adicionales que se han cargado:

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Linq; using System.Web.UI.WebControls; public class ConexionEF { //Declaramos los objetos que utilizaremos en toda nuestra clase DataSet dataSetPrincipal = new DataSet(); public void CopiarBaseDatos() { //Cargamos las tablas al dataset a traves del método CargarTabla CargarTabla("Categories", "CategoryID"); CargarTabla("Suppliers", "SupplierID"); CargarTabla("Products", "ProductID"); //Establecemos la relacion de llaves foraneas entre las tablas, verifique la sintaxis de cada una de ellas ForeignKeyConstraint fk1_cat_pro; fk1_cat_pro = new ForeignKeyConstraint(dataSetPrincipal.Tables["Categories"].Columns["CategoryID"], dataSetPrincipal.Tables["Products"].Columns["CategoryID"]); dataSetPrincipal.Tables["Products"].Constraints.Add(fk1_cat_pro); ForeignKeyConstraint fk1_sup_pro; fk1_sup_pro = new ForeignKeyConstraint(dataSetPrincipal.Tables["Suppliers"].Columns["SupplierID"], dataSetPrincipal.Tables["Products"].Columns["SupplierID"]); dataSetPrincipal.Tables["Products"].Constraints.Add(fk1_sup_pro); } public void CargarTabla(String nombreTabla, String primaryKey) { nombreTabla = nombreTabla.Trim(); //Si la tabla no existe en el contexto actual, procederemos a adicionarla



if (dataSetPrincipal.Tables.IndexOf(nombreTabla) == -1) { dataSetPrincipal.Tables.Add(nombreTabla); if (nombreTabla == "Categories") { using (Conexion contexto = new Conexion()) { List<Categories> categorias = (from x in contexto.Categories select x).ToList(); //Obtenemos la tabla actual y establecemos que se utilizará como llave primaria DataTable tablaActual; tablaActual = dataSetPrincipal.Tables[nombreTabla]; //Llenamos el dataset con la tabla que acabamos de obtener convertToDataTable(categorias, ref tablaActual); DataColumn[] columnasPrincipales = new DataColumn[1]; columnasPrincipales[0] = tablaActual.Columns[primaryKey]; tablaActual.PrimaryKey = columnasPrincipales; } } else if (nombreTabla == "Suppliers") { using (Conexion contexto = new Conexion()) { List<Suppliers> proveedores = (from x in contexto.Suppliers select x).ToList(); //Obtenemos la tabla actual y establecemos que se utilizará como llave primaria DataTable tablaActual; tablaActual = dataSetPrincipal.Tables[nombreTabla]; //Llenamos el dataset con la tabla que acabamos de obtener convertToDataTable(proveedores, ref tablaActual); DataColumn[] columnasPrincipales = new DataColumn[1]; columnasPrincipales[0] = tablaActual.Columns[primaryKey]; tablaActual.PrimaryKey = columnasPrincipales; } } else if (nombreTabla == "Products") { using (Conexion contexto = new Conexion()) { List<Products> productos = (from x in contexto.Products select x).ToList(); //Obtenemos la tabla actual y establecemos que se utilizará como llave primaria DataTable tablaActual; tablaActual = dataSetPrincipal.Tables[nombreTabla]; //Llenamos el dataset con la tabla que acabamos de obtener convertToDataTable(productos, ref tablaActual); DataColumn[] columnasPrincipales = new DataColumn[1]; columnasPrincipales[0] = tablaActual.Columns[primaryKey];



tablaActual.PrimaryKey = columnasPrincipales; } } } } public void LlenarCombo(ref DropDownList comboBox, String nombreTabla, String campoValor, String campoTexto) { //Asociamos al control de combobox la fuente de datos desde donde obtendrá su información nombreTabla = nombreTabla.Trim(); comboBox.DataSource = dataSetPrincipal; comboBox.DataMember = nombreTabla; comboBox.DataValueField = campoValor; comboBox.DataTextField = campoTexto; comboBox.DataBind(); } public object[] GetDataRow(int productID) { //Obtenemos un arreglo genérico con los datos de una fila en específico a la que se le pasa como parametro //el ID a seleccionar desde la tabla object[] datosRetorno = new object[8]; DataRow[] filaSeleccionada; filaSeleccionada = dataSetPrincipal.Tables["Products"].Select("ProductID=" + productID); if (filaSeleccionada.Length == 1) { datosRetorno[0] = filaSeleccionada[0]["ProductID"]; datosRetorno[1] = filaSeleccionada[0]["ProductName"]; datosRetorno[2] = filaSeleccionada[0]["SupplierID"]; datosRetorno[3] = filaSeleccionada[0]["CategoryID"]; datosRetorno[4] = filaSeleccionada[0]["QuantityPerUnit"]; datosRetorno[5] = filaSeleccionada[0]["UnitPrice"]; datosRetorno[6] = filaSeleccionada[0]["UnitsInStock"]; datosRetorno[7] = filaSeleccionada[0]["UnitsOnOrder"]; } return datosRetorno; } public void CargarProductosEnTabla(ref GridView grid, string categoria, string proveedor) { grid.Columns.Clear(); //Cargamos un dataview ya que es el que nos permite hacer filtros sobre la tabla seleccionada DataView vistaFiltro = new DataView(dataSetPrincipal.Tables["Products"]); if (categoria != "0") { vistaFiltro.RowFilter = "CategoryID = " + categoria; } if (proveedor != "0") { vistaFiltro.RowFilter = "SupplierID = " + proveedor; } //Configuramos el gridView que es pasado por referencia para que su fuente de



datos sea el dataview //Configurado y poblado anteriormente, ademas establecemos que el campo principal sea la columna ProductID grid.DataSource = vistaFiltro; grid.DataBind(); grid.AllowPaging = true; grid.DataKeyNames = new String[1] { "ProductID" }; //Configuramos un boton de editar el cual será añadido al grid ButtonField columnaEditar = new ButtonField(); columnaEditar.HeaderText = "Editar"; columnaEditar.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; columnaEditar.ButtonType = ButtonType.Button; columnaEditar.Text = "Editar"; columnaEditar.CommandName = "Seleccionar"; columnaEditar.ControlStyle.CssClass = "button special"; grid.Columns.Add(columnaEditar); //Configuramos un boton de eliminar que será añadido al grid ButtonField columnaEliminar = new ButtonField(); columnaEliminar.HeaderText = "Eliminar"; columnaEliminar.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; columnaEliminar.ButtonType = ButtonType.Button; columnaEliminar.Text = "Eliminar"; columnaEliminar.CommandName = "Eliminar"; columnaEliminar.ControlStyle.CssClass = "button special"; grid.Columns.Add(columnaEliminar); //Recargamos el grid y seteamos los nombres de las columnas grid.DataBind(); grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center; grid.HeaderRow.Cells[2].Text = "ID"; grid.HeaderRow.Cells[3].Text = "Producto"; grid.HeaderRow.Cells[4].Text = "Proveedor"; grid.HeaderRow.Cells[5].Text = "Categoría"; grid.HeaderRow.Cells[6].Text = "Cant/Unidad"; grid.HeaderRow.Cells[7].Text = "Precio"; grid.HeaderRow.Cells[8].Text = "Disponibles"; grid.HeaderRow.Cells[9].Text = "Ordenadas"; grid.PagerStyle.CssClass = "pager"; } public int agregarProducto(String nombreProducto, int idProveedor, int idCategoria, String CantidadPorUnidad, decimal precio, short stock, short orden) { try { using (Conexion contexto = new Conexion()) { Products nuevoProducto = new Products(); nuevoProducto.ProductName = nombreProducto; nuevoProducto.SupplierID = idProveedor; nuevoProducto.CategoryID = idCategoria; nuevoProducto.QuantityPerUnit = CantidadPorUnidad; nuevoProducto.UnitPrice = precio; nuevoProducto.UnitsInStock = stock; nuevoProducto.UnitsOnOrder = orden; contexto.Products.Add(nuevoProducto);



contexto.SaveChanges(); } return 1; }catch(Exception e) { return 0; } } public int ActualizarProducto(int productID, object[] datosActualizados) { DataRow fila2Update; DataTable tablaProductos; tablaProductos = dataSetPrincipal.Tables["Products"]; try { fila2Update = tablaProductos.Rows.Find(productID); fila2Update["ProductName"] = datosActualizados[0].ToString(); fila2Update["SupplierID"] = int.Parse(datosActualizados[1].ToString()); fila2Update["CategoryID"] = int.Parse(datosActualizados[2].ToString()); fila2Update["QuantityPerUnit"] = datosActualizados[3].ToString(); fila2Update["UnitPrice"] = double.Parse(datosActualizados[4].ToString()); fila2Update["UnitsInStock"] = int.Parse(datosActualizados[5].ToString()); fila2Update["UnitsOnOrder"] = int.Parse(datosActualizados[6].ToString()); if (dataSetPrincipal.HasChanges()) { using (Conexion contexto = new Conexion()) { Products productoMod = contexto.Products.Find(productID); productoMod.ProductName = datosActualizados[0].ToString(); productoMod.SupplierID = int.Parse(datosActualizados[1].ToString()); productoMod.CategoryID = int.Parse(datosActualizados[2].ToString()); productoMod.QuantityPerUnit = datosActualizados[3].ToString(); productoMod.UnitPrice = decimal.Parse(datosActualizados[4].ToString()); productoMod.UnitsInStock = short.Parse(datosActualizados[5].ToString()); productoMod.UnitsOnOrder = short.Parse(datosActualizados[6].ToString()); contexto.Entry(productoMod).State = System.Data.Entity.EntityState.Modified; contexto.SaveChanges(); } dataSetPrincipal.AcceptChanges(); } return 1; } catch (Exception e) { return 0; } }



public int EliminarProducto(int ProductID) { DataRow fila2Delete; DataTable tablaProductos; tablaProductos = dataSetPrincipal.Tables["Products"]; try { fila2Delete = tablaProductos.Rows.Find(ProductID); fila2Delete.Delete(); if (dataSetPrincipal.HasChanges()) { using (Conexion contexto = new Conexion()) { Products productoDel = contexto.Products.Find(ProductID); contexto.Products.Remove(productoDel); contexto.SaveChanges(); } dataSetPrincipal.AcceptChanges(); } return 1; } catch (Exception e) { return 0; } } public void convertToDataTable<T>(IList<T> data, ref DataTable table) { PropertyDescriptorCollection properties = TypeDescriptor.GetProperties(typeof(T)); foreach (PropertyDescriptor prop in properties) table.Columns.Add(prop.Name, Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType); foreach (T item in data) { DataRow row = table.NewRow(); foreach (PropertyDescriptor prop in properties) row[prop.Name] = prop.GetValue(item) ?? DBNull.Value; table.Rows.Add(row); } } }

12. Ahora procederá a crear la Pagina Maestra que definirá el estilo de todas las vistas de la aplicación, para ello de click derecho en el proyecto, agregar y seleccione nuevo elemento, en la ventana emergente seleccione de la categoría Web, Web Form seleccione la opción Web Forms con Página Maestra, cambie su nombre a “Principal.master” y de click en agregar.

13. En la página creada digitar el siguiente marcado: <!DOCTYPE html> <html> <head> <title> <asp:ContentPlaceHolder ID="titulo" runat="server"> </asp:ContentPlaceHolder> </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script src="js/jquery.min.js"></script> <script src="js/jquery.scrolly.min.js"></script> <script src="js/jquery.dropotron.min.js"></script> <script src="js/jquery.scrollex.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-xlarge.css" /> </noscript> </head> <body>  <header id="header" class="skel-layers-fixed"> <h1 id="logo"><a href="/">Página Principal</a></h1> <asp:ContentPlaceHolder ID="menu" runat="server"> </asp:ContentPlaceHolder> </header> <style> .pager table { width: auto !important;

} </style>  <div id="main" class="wrapper style1"> <div class="container">  <section> <asp:ContentPlaceHolder ID="contenido" runat="server"> </asp:ContentPlaceHolder> </section> </div> </div>  <footer id="footer"> <ul class="icons"> <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li> </ul> <ul class="copyright"> <li>© 2020. All rights reserved.</li> </ul> </footer> </body> </html>

14. A continuación, se agregará un formulario ASP que implementa la pagina maestra creada en el paso

anterior, de click derecho en el proyecto, agregar, nuevo elemento, y en la ventana emergente en la sección Web, Web Form seleccione Formulario Web con pagina maestra, cambie su nombre a “Default.aspx” y de click en Agregar.



15. Una vez agregado el formulario, se debe indicar con que pagina maestra esta relacionado, seleccione

la pagina maestra creada anteriormente y de click en aceptar.

16. Al agregar los formularios web de esta forma, Visual Studio automáticamente agrega las etiquetas asp:Content correspondientes, proceda a digitar el siguiente marcado en la pagina que acaba de crear: <asp:Content ID="Content1" ContentPlaceHolderID="titulo" runat="server"> Control de Productos </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="menu" runat="server"> <nav id="nav"> <ul> <li><a href=" agregar.aspx" class="button special">Nuevo Producto</a></li> </ul> </nav> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="contenido" runat="server"> <form id="form1" runat="server"> <div class="row uniform 50%"> <div class="5u 12u$(xsmall)"> Categoría <div class="select-wrapper"> <asp:DropDownList ID="ddlCategorias" runat="server"></asp:DropDownList></div> </div> <div class="5u 12u$(xsmall)"> Proveedor <div class="select-wrapper"> <asp:DropDownList ID="ddlProveedor" runat="server"></asp:DropDownList></div> </div> <div class="2u 12u$(xsmall)"> <br /> <asp:Button ID="btnBuscar" runat="server" Text="Buscar" Width="100%" CssClass="special" /> </div> <div class="12u 12u$(xsmall)"> <asp:GridView ID="GridView1" Width="100%" CssClass="alt" runat="server" ></asp:GridView>



</div> </div> </form> </asp:Content>

17. En la página de código subyacente, agregue una nueva variable de tipo “ConexionEF” que corresponde a la clase que creamos anteriormente. El nombre de la variable debe ser “nuevaConexion”.

18. En el evento “Page_Load”, proceda a digitar el siguiente código, verifique además como se declaró la variable del punto anterior, posterior a ello, proceda a ejecutar su página y observe

lo que se carga en el navegador. ConexionEF nuevaConexion; protected void Page_Load(object sender, EventArgs e) { nuevaConexion = new ConexionEF(); if (!Page.IsPostBack) { nuevaConexion.CopiarBaseDatos(); nuevaConexion.LlenarCombo(ref ddlCategorias, "Categories", "categoryID", "CategoryName"); nuevaConexion.LlenarCombo(ref ddlProveedor, "Suppliers", "SupplierID", "CompanyName"); ddlCategorias.Items.Insert(0, new ListItem("Ver Todos", "0")); ddlProveedor.Items.Insert(0, new ListItem("Ver Todos", "0")); nuevaConexion.CargarProductosEnTabla(ref GridView1, "0", "0"); } }

19. Proceda a programar el evento asociado a la paginación del GridView, en la misma clase

Default.aspx.cs digite el siguiente código teniendo especial cuidado en el nombre del método.

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { nuevaConexion = new ConexionEF(); nuevaConexion.CopiarBaseDatos(); GridView1.PageIndex = e.NewPageIndex; nuevaConexion.CargarProductosEnTabla(ref GridView1, ddlCategorias.SelectedValue, ddlProveedor.SelectedValue);

}

20. A continuación, programe el evento asociado a los botones de eliminar y editar creados mediante código y que son añadidos al GridView en uso, para ello, proceda a digitar el siguiente código.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { int index = Convert.ToInt32(e.CommandArgument); GridViewRow filaSeleccionada = GridView1.Rows[index]; TableCell celdaIdProducto = filaSeleccionada.Cells[2]; if (e.CommandName == "Seleccionar")



{ Response.Redirect("EditarRegistro.aspx?ProductID=" + celdaIdProducto.Text); } else if (e.CommandName == "Eliminar") { nuevaConexion = new ConexionEF(); nuevaConexion.CopiarBaseDatos(); if (nuevaConexion.EliminarProducto(int.Parse(celdaIdProducto.Text)) < 1) { ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "error_msg", "alert('Error al eliminar el registro seleccionado');", true); } else { Response.Redirect("Default.aspx"); } }

}

21. lo único que resta es enlazar dichos eventos con el grid original, para ello, ubíquese en la página Default.aspx en la vista de código y añada los siguientes atributos AL GRIDVIEW,

tal y como se mostrará en la figura. Luego proceda a ejecutar la página nuevamente y verifique la paginación de la tabla, así como también si es posible eliminar un registro de los mostrados en la tabla.

<asp:GridView ID="GridView1" Width="100%" CssClass="alt" runat="server" OnPageIndexChanging="GridView1_PageIndexChanging"

OnRowCommand="GridView1_RowCommand"></asp:GridView>

22. Para programar la opción de filtrado, en la vista de diseño, de doble clic al botón de buscar para que se cree el respectivo método de OnClick asociado al botón, y luego agregue el siguiente código.

protected void btnBuscar_Click(object sender, EventArgs e) { nuevaConexion = new ConexionEF(); nuevaConexion.CopiarBaseDatos(); nuevaConexion.CargarProductosEnTabla(ref GridView1, ddlCategorias.SelectedValue, ddlProveedor.SelectedValue);

}

Proceda a ejecutar nuevamente la página y realice cambios en los filtros de búsqueda para determinar el funcionamiento del mismo.

23. A continuación, cree un nuevo Formulario Web con pagina maestra de la misma forma que hizo en los pasos 14 y 15, llame a este nuevo formulario “Editar Registro.aspx” y agregue el siguiente marcado: <asp:Content ID="Content1" ContentPlaceHolderID="titulo" runat="server"> Edición de Producto </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="menu" runat="server">



</asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="contenido" runat="server"> <form id="form1" runat="server"> <section> <h3>Edición de Registros</h3> <div class="row uniform 50%"> <asp:HiddenField ID="ProductID" runat="server" /> <div class="6u 12u$(xsmall)"> <asp:Label runat="server" Text="Nombre de Producto"></asp:Label> <asp:TextBox ID="ProductName" runat="server"></asp:TextBox> </div> <div class="6u 12u$(xsmall)"> Proveedor <div class="select-wrapper"> <asp:DropDownList ID="SupplierID" runat="server"></asp:DropDownList></div> </div> <div class="6u 12u$(xsmall)"> Categoría <div class="select-wrapper"> <asp:DropDownList ID="CategoryID" runat="server"></asp:DropDownList></div> </div> <div class="6u 12u$(xsmall)"> <asp:Label runat="server" Text="Cantidad por Unidad"></asp:Label> <asp:TextBox ID="QuantityPerUnit" runat="server"></asp:TextBox> </div> <div class="6u 12u$(xsmall)"> <asp:Label runat="server" Text="Precio Unitario"></asp:Label> <asp:TextBox ID="UnitPrice" runat="server"></asp:TextBox> </div> <div class="6u 12u$(xsmall)"> <asp:Label runat="server" Text="Existencias"></asp:Label> <asp:TextBox ID="UnitsInStock" runat="server"></asp:TextBox> </div> <div class="6u$ 12u$(xsmall)"> <asp:Label runat="server" Text="Unidades Ordenadas"></asp:Label> <asp:TextBox ID="UnitsOnOrder" runat="server"></asp:TextBox> </div> <div class="2u 12u$(xsmall)"> <br /> <asp:Button OnClientClick="return confirm('¿Desea proceder con la actualización del registro?');" ID="btnModificar" runat="server" Text="Actualizar" Width="100%" CssClass="special" OnClick="btnModificar_Click" /> </div> </div> </section> </form>



</asp:Content> Como puede notar, no es obligatorio llenar todas las etiquetas de contenido, en este caso la etiqueta asp:Content con id=”menu” no tiene un contenido asignado.

24. En la página de código subyacente, agregue una nueva variable de tipo “ConexionEF” que corresponde a la clase que creamos anteriormente. El nombre de la variable debe ser

“nuevaConexion”.

25. En el evento “Page_Load”, agregue el siguiente código, verifique además como se declaró la variable del punto anterior, posterior a ello, proceda a ejecutar su página y observe lo que se

carga en el navegador.

ConexionEF nuevaConexion; protected void Page_Load(object sender, EventArgs e) { nuevaConexion = new ConexionEF(); if (!Page.IsPostBack) { nuevaConexion.CopiarBaseDatos(); nuevaConexion.LlenarCombo(ref CategoryID, "Categories", "categoryID", "CategoryName"); nuevaConexion.LlenarCombo(ref SupplierID, "Suppliers", "SupplierID", "CompanyName"); object[] datosRetornados = nuevaConexion.GetDataRow(int.Parse(Request.QueryString["ProductID"])); if (datosRetornados != null) { ProductID.Value = datosRetornados[0].ToString(); ProductName.Text = datosRetornados[1].ToString(); SupplierID.SelectedValue = datosRetornados[2].ToString(); CategoryID.SelectedValue = datosRetornados[3].ToString(); QuantityPerUnit.Text = datosRetornados[4].ToString(); UnitPrice.Text = datosRetornados[5].ToString(); UnitsInStock.Text = datosRetornados[6].ToString(); UnitsOnOrder.Text = datosRetornados[7].ToString(); } } }

26. Ahora, en la vista de diseño, de doble clic al botón de buscar para que se cree el respectivo método de OnClick asociado al botón de modificar, y luego proceda a digitar el siguiente código.

protected void btnModificar_Click(object sender, EventArgs e) { nuevaConexion = new ConexionEF(); nuevaConexion.CopiarBaseDatos(); object[] datosActualizados = new object[7] { ProductName.Text, SupplierID.SelectedValue, CategoryID.SelectedValue, QuantityPerUnit.Text, UnitPrice.Text, UnitsInStock.Text,



UnitsOnOrder.Text }; int filasActualizadas = nuevaConexion.ActualizarProducto(int.Parse(ProductID.Value.ToString()), datosActualizados); if (filasActualizadas > 0) { Response.Redirect("Default.aspx"); } else { ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "error_msg", "alert('Error al actualizar los datos ingresados. Verifique que la información ingresada es correcta el registro seleccionado');", true); }

}

27. Proceda a ejecutar la página Default.aspx y luego seleccione un registro para editar, modifique algún dato y posteriormente guarde los cambios.

28. Nuevamente repita los pasos 14 y 15 para agregar otro formulario web, llámelo “agregar.aspx” y agregue el siguiente marcado: <asp:Content ID="Content1" ContentPlaceHolderID="titulo" runat="server"> Creación de Producto </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="menu" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="contenido" runat="server"> <form id="form1" runat="server"> <section> <h3>Edición de Registros</h3> <div class="row uniform 50%"> <asp:HiddenField ID="ProductID" runat="server" /> <div class="6u 12u$(xsmall)"> <asp:Label ID="Label1" runat="server" Text="Nombre de Producto"></asp:Label> <asp:TextBox ID="ProductName" runat="server"></asp:TextBox> </div> <div class="6u 12u$(xsmall)"> Proveedor <div class="select-wrapper"> <asp:DropDownList ID="SupplierID" runat="server"> </asp:DropDownList> </div> </div> <div class="6u 12u$(xsmall)"> Categoría <div class="select-wrapper"> <asp:DropDownList ID="CategoryID" runat="server"> </asp:DropDownList> </div> </div> <div class="6u 12u$(xsmall)"> <asp:Label ID="Label2" runat="server" Text="Cantidad



por Unidad"></asp:Label> <asp:TextBox ID="QuantityPerUnit" runat="server"></asp:TextBox> </div> <div class="6u 12u$(xsmall)"> <asp:Label ID="Label3" runat="server" Text="Precio Unitario"></asp:Label> <asp:TextBox ID="UnitPrice" runat="server"></asp:TextBox> </div> <div class="6u 12u$(xsmall)"> <asp:Label ID="Label4" runat="server" Text="Existencias"></asp:Label> <asp:TextBox ID="UnitsInStock" runat="server"></asp:TextBox> </div> <div class="6u$ 12u$(xsmall)"> <asp:Label ID="Label5" runat="server" Text="Unidades Ordenadas"></asp:Label> <asp:TextBox ID="UnitsOnOrder" runat="server"></asp:TextBox> </div> <div class="2u 12u$(xsmall)"> <br /> <asp:Button OnClientClick="return confirm('¿Desea agregar un nuevo registro?');" ID="btnAgregar" runat="server" Text="Agregar" Width="100%" CssClass="special" OnClick="btnAgregar_Click" /> </div> </div> </section> </form> </asp:Content>

29. El siguiente es paso es programar el evento PageLoad de la página anterior. Para ello, ubique

dicho método y digite el siguiente código.

Recuerde que antes de este método PageLoad se ha agregado una variable de tipo

“ConexionEF”

ConexionEF nuevaConexion; protected void Page_Load(object sender, EventArgs e) { nuevaConexion = new ConexionEF(); if (!Page.IsPostBack) { nuevaConexion.CopiarBaseDatos(); nuevaConexion.LlenarCombo(ref CategoryID, "Categories", "CategoryID", "CategoryName"); nuevaConexion.LlenarCombo(ref SupplierID, "Suppliers", "SupplierID", "CompanyName"); } }



30. Finalmente, configure el evento click del botón de agregar, para ello de doble click en dicho botón desde la vista de diseño, y digite el siguiente código en el evento generado.

protected void btnAgregar_Click(object sender, EventArgs e) { int resultado = nuevaConexion.agregarProducto(ProductName.Text, int.Parse(SupplierID.SelectedValue.ToString()), int.Parse(CategoryID.SelectedValue.ToString()), QuantityPerUnit.Text, Decimal.Parse(UnitPrice.Text.ToString()), short.Parse(UnitsInStock.Text.ToString()), short.Parse(UnitsOnOrder.Text.ToString())); if (resultado != 0) { Response.Redirect("Default.aspx"); } else { ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "error_msg", "alert('Error al registrar producto. Verifique la información ingresada es correcta');", true); }

}

IV. Análisis de Resultados

1. Investigue el modo de trabajo de Entity Framework code first, cree una clase que contenga como mínimo 5 atributos y 3 tipos de datos diferentes, utilice dicha clase para generar la base de datos en SQL Server y cree un mantenimiento sencillo para dicha tabla.

2. Implemente los formularios para los mantenimientos del punto 1 utilizando Master Pages.

V. BIBLIOGRAFÍA

Thierry GROUSSARD. (2013). C# 5: Los fundamentos del lenguaje – Desarrollar con Visual Studio 2012

. Barcelona: ENI.

FACULTAD INGENIERIA COORDINACION DE COMPUTACIÓN · incluirán contenido reemplazable. A su vez, el...

Documents

Transcript of FACULTAD INGENIERIA COORDINACION DE COMPUTACIÓN · incluirán contenido reemplazable. A su vez, el...