creacion de web en c#.net completo paso a paso

380
 Tutorial 1: Creación de una capa de acceso de datos C#SHARP Scott Mitchell 06 2006 Descargue el ASPNET_Data_Tutorial_1_CS.exe código de ejemplo. Descargar el código de ejemplo ASPNET_D ata_Tutorial_1_C S.exe. Contenido del Tutorial 1 (Visual C #) Introducción Paso 1: Crear un proyecto Web y conexión a la base de datos Paso 2: Creación de la capa de acceso a los datos Paso 3: Agregar los métodos con parámetros de la capa de acceso de datos Paso 4: Actualizar, insertar y eliminar datos Paso 5: Completar el nivel de acceso a datos resumen Introducción Como desarrolladores web, nuestras vidas giran en torno a trabajar con datos. Creamos las bases de datos para almacenar los datos, el código para recuperar y modificar, y las páginas web para recopilar y resumir la misma. Este es el primer tutorial de una serie larga que va a explorar técnicas para implementar estos patrones comunes en ASP.NET 2.0. Vamos a empezar con la creación de unaarquitectura de software compuesto por una capa de acceso a datos (DAL), utilizando conjuntos de datos con tipo, una capa de lógica empresarial (BLL) que hace cumplir las reglas de negocio personalizadas, y una capa de presentación compuesta por páginas ASP.NET que comparten una página común diseño. Una vez que esta base backend se ha establecido, vamos a pasar a la presentación de informes, que muestra cómo mostrar, resumir, recopilar y validar datos de una aplicación web. Estos tutoriales están orientados a ser conciso y ofrecen instrucciones paso a paso las instrucciones con un montón de capturas de pantalla que le guiará a través del proceso visual. Cada tutorial está disponible en C # y Visual Basic y incluye una descarga del código completo usado. (Este primer tutorial es bastante largo, pero el resto se presentan en trozos mucho más digerible.)

Upload: jhonedward

Post on 17-Jul-2015

2.549 views

Category:

Documents


7 download

TRANSCRIPT

Page 1: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 1/380

Tutorial 1: Creación de una capa de acceso de

datosC#SHARP

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_1_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_1_CS.exe.

Contenido del Tutorial 1 (Visual C #)

IntroducciónPaso 1: Crear un proyecto Web y conexión a la base de datosPaso 2: Creación de la capa de acceso a los datosPaso 3: Agregar los métodos con parámetros de la capa de acceso de datosPaso 4: Actualizar, insertar y eliminar datosPaso 5: Completar el nivel de acceso a datosresumen

Introducción

Como desarrolladores web, nuestras vidas giran en torno a trabajar con datos. Creamos bases de datos para almacenar los datos, el código para recuperar y modificar, y laspáginas web para recopilar y resumir la misma. Este es el primer tutorial de una serie larque va a explorar técnicas para implementar estos patrones comunes en ASP.NET2.0. Vamos a empezar con la creación de unaarquitectura de software compuesto por uncapa de acceso a datos (DAL), utilizando conjuntos de datos con tipo, una capa de lógica

empresarial (BLL) que hace cumplir las reglas de negocio personalizadas, y una capa depresentación compuesta por páginas ASP.NET que comparten una página comúndiseño. Una vez que esta base backend se ha establecido, vamos a pasar a la presentacide informes, que muestra cómo mostrar, resumir, recopilar y validar datos de unaaplicación web. Estos tutoriales están orientados a ser conciso y ofrecen instrucciones paa paso las instrucciones con un montón de capturas de pantalla que le guiará a través deproceso visual. Cada tutorial está disponible en C # y Visual Basic y incluye una descargadel código completo usado. (Este primer tutorial es bastante largo, pero el resto sepresentan en trozos mucho más digerible.)

Page 2: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 2/380

Para estos tutoriales vamos a utilizar un Microsoft SQL Server 2005 Express Edition versióde la base de datos Neptuno situado en elApp_Data directorio. Además de los archivos debase de datos, el App_Data carpeta también contiene los scripts de SQL para crear la basede datos, en caso de que desee utilizar una versión de base de datos diferente. Estosscripts pueden también ser descargadas directamente desde Microsoft , si ustedprefiere. Si utiliza una versión diferente de SQL Server de la base de datos Northwind,usted tendrá que actualizar la NORTHWNDConnectionString configuración de la aplicaciónde Web.config archivo. La aplicación web ha sido desarrollado usando Visual Studio 2005

Professional Edition como sistema de archivos basado en proyecto de sitio Web. Sinembargo, todos los tutoriales funcionan igual de bien con la versión gratuita de VisualStudio 2005, Visual Web Developerhttp: / / msdn.microsoft.com / vstudio / express / vwd

En este tutorial vamos a empezar desde el principio y crear la capa de acceso a datos(DAL), seguido por la creación de la capa de lógica empresarial (BLL) en la segunda tutory trabajando en el diseño de página y la navegación en el tercero. Los tutoriales despuésde la tercera se basará en los fundamentos establecidos en los tres primeros. Tenemosmucho que cubrir en este primer tutorial, así que dispara a Visual Studio y vamos aempezar!

Paso 1: Crear un proyecto Web y conexión a la basede datos

Antes de que podamos crear nuestra capa de acceso a datos (DAL), primero tenemos quecrear un sitio web y la configuración de nuestra base de datos. Comience por crear unsistema de archivos basado en nuevo sitio web ASP.NET. Para lograr esto, vaya al menúArchivo y seleccione Nuevo sitio web, mostrando el nuevo sitio Web cuadro de diálogo. Ela plantilla Sitio Web ASP.NET, establezca la ubicación de la lista desplegable Sistema dearchivos, elija una carpeta para colocar el sitio web, y configurar el idioma de C #.

Figura 1. Crear un nuevo archivo basado en el sistema del sitio Web

Page 3: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 3/380

Esto creará un nuevo sitio web con un Default.aspx página ASP.NET y un App_Data carpeta

Con el sitio web creado, el siguiente paso es agregar una referencia a la base de datos eel Explorador de servidores de Visual Studio.Mediante la adición de una base de datos pael Explorador de servidores puede agregar tablas, procedimientos almacenados, vistas, etodo ello desde Visual Studio. También puede ver los datos de la tabla o crear sus propiaconsultas ya sea a mano o gráficamente a través del Generador de consultas. Además,cuando construimos los conjuntos de datos con tipo para el DAL tendremos que punto de

Visual Studio para la base de datos de los que los conjuntos de datos con tipo se debeconstruir. A pesar de que puede proporcionar esta información de conexión en ese puntoen el tiempo, Visual Studio rellena automáticamente una lista desplegable de las bases ddatos ya registrados en el Explorador de servidores.

Los pasos para agregar la base de datos Northwind al Explorador de servidores dependerde si desea utilizar el servidor SQL Server 2005 Express Edition de base de datos enel App_Data carpeta o si tiene un Microsoft SQL Server 2000 o 2005, la configuración delservidor de base de datos que desea utilizar en su lugar.

Utilizando una base de datos en el App_Data Carpeta

Si usted no tiene un servidor SQL Server 2000 o Server 2005 de base de datos paraconectarse a, o simplemente quieres evitar tener que añadir la base de datos a un servidde base de datos, puede utilizar el SQL Server 2005 Express Edition versión de la base dedatos Neptuno que se encuentra en el sitio web de descarga de App_Data carpeta( northwnd.mdf ).

Una base de datos colocados en el App_Data carpeta se agregan automáticamente a la deExplorador de servidores. Asumiendo que tiene SQL Server 2005 Express Edition instaladen su máquina usted debe ver a un nodo llamado northwnd.mdf en el Explorador deservidores, que se puede expandir y explorar sus tablas, vistas, procedimientosalmacenados, y así sucesivamente (ver Figura 2).

El App_Data carpeta también puede tener Microsoft Access . mdb archivos, que, al igual qusus homólogos de SQL Server, se agregan automáticamente a la del Explorador deservidores. Si no desea utilizar cualquiera de las opciones de SQL Server, siempre sepuededescargar una versión de Microsoft Access del archivo de base de datos Northwindcaer en el App_Data directorio. Tenga en cuenta, sin embargo, que las bases de datos deacceso no son tan características como las de SQL Server, y no están diseñados para serutilizados en los escenarios del sitio web. Además, un par de los 35 + tutoriales utilizarácierto nivel de base de datos de características que no son compatibles con el acceso.

Conexión a la base de datos en un servidor de Microsoft SQL Server 200o 2005 Server base de datos

Alternativamente, usted puede conectarse a una base de datos Neptuno instalada en unservidor de base de datos. Si el servidor de base de datos no tiene ya la base de datosNorthwind instalado, primero debe agregar el servidor de base de datos ejecutando elscript de instalación incluido en la descarga de este tutorial o por la descarga de la versióSQL Server 2000 de Neptuno y el script de instalación directamente desde el sitio Web dMicrosoft.

Page 4: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 4/380

Una vez que haya instalado la base de datos, vaya al Explorador de servidores en VisualStudio, haga clic en el nodo Conexiones de datos y seleccione Agregar conexión. Si no veExplorador de servidores vaya al Explorador de Vista / Server, o pulse Ctrl + Alt + S.Conello se abre el cuadro de diálogo Agregar conexión, en el que puede especificar el servidopara conectarse a la información de autenticación y el nombre de base de datos. Una vezque haya configurado correctamente la información de conexión de base de datos y haceclic en el botón Aceptar, la base de datos se agrega como un nodo bajo el nodo Conexionde datos. Puede expandir el nodo de base de datos para explorar sus tablas, vistas,

procedimientos almacenados, y así sucesivamente.

Figura 2. Agregar una conexión de base de datos del servidor de bases de datode Northwind

Paso 2: Creación de la capa de acceso a datos

Cuando se trabaja con datos de una opción es integrar la lógica de los datos específicosdirectamente en la capa de presentación (en una aplicación web, las páginas ASP.NETrepresentan la capa de presentación). Esto puede tomar la forma de escribir código deADO.NET en la parte de código de la página ASP.NET o mediante el control SqlDataSourcde la porción de marcado. En cualquier caso, este enfoque fuertemente a las parejas lalógica de acceso a datos con la capa de presentación. Lo que se recomienda, sin embarges separar la lógica de acceso a los datos de la capa de presentación. Esta capa separadse conoce como la capa de acceso a datos, DAL, para abreviar, y normalmente seimplementa como un proyecto de bibliotecas de clase independiente. Los beneficios deesta arquitectura en capas están bien documentadas (ver "Otras lecturas", al final de esttutorial para obtener información sobre estas ventajas) y es el enfoque que tendrá en estserie.

Page 5: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 5/380

 Todo el código que es específico para el origen de datos subyacente - como la creación duna conexión a la base de datos, la emisiónde SELECCIONAR , INSERTAR , ACTUALIZAR y ELIMINAR comandos, etc - deben estar ubicados en DAL. La capa de presentación no debe contener ninguna referencia a dicho código deacceso de datos, sino que debe hacer llamadas a la DAL para cualquier y todos los datossolicitados. Las capas de acceso a datos normalmente contienen métodos para acceder alos datos de base de datos subyacente.La base de datos Northwind, por ejemplo,tiene Productos y Categorías tablas que registran los productos para la venta y las

categorías a las que pertenecen. En nuestro DAL tendremos métodos como:

• GetCategories (), que devuelven información acerca de todas las categorías• GetProducts () , que devuelve información sobre todos los productos• GetProductsByCategoryID ( IdCategoría ) , que devolverá todos los productos que

pertenecen a una categoría• GetProductByProductID ( productID ) , que devuelve información sobre un producto

particular

Estos métodos, cuando se invoca, se conectará a la base de datos, ejecutar la consulta dsu caso, y devolver los resultados. ¿Cómo podemos devolver estos resultados es

importante. Estos métodos sólo puede devolver un DataSet o DataReader poblada por laconsulta de bases de datos, pero los resultados idealmente estos deben ser devueltoscon los objetos con establecimiento inflexible . Un objeto con establecimiento inflexible eaquel cuyo esquema está rígidamente definido en tiempo de compilación, mientras que lcontrario, un objeto débilmente escrito, es un esquema que no se conoce hasta el tiempode ejecución.

Por ejemplo, el DataReader y DataSet (por defecto) son objetos vagamente escrito, ya qusu esquema está definido por las columnas devueltas por la consulta de base de datosutilizada para poblarlas. Para acceder a una columna en particular a partir de unavagamente escrito DataTable tenemos que utilizar una sintaxis como: DataTable filas

[. Índice ] [" columnName "] . Escribir suelta el DataTable en este ejemplo se demuestrapor el hecho de que tenemos que acceder a nombre de la columna mediante una cadenaun índice ordinal. Un establecimiento inflexible de tipos DataTable, por el contrario, tendcada una de sus columnas implementan como propiedades, lo que resulta en el código qse ve así: DataTable . Filas [ índice ]. columnName .

Para devolver los objetos con establecimiento inflexible, los desarrolladores pueden creasus propios objetos de negocio personalizados o utilizar conjuntos de datos con tipo. Unobjeto de negocio se lleva a cabo por el promotor como una clase cuyas propiedadessuelen reflejar las columnas de la tabla de base de datos subyacente del objeto de negocrepresenta. Un DataSet es una clase generada para usted por Visual Studio basado en unesquema de base de datos y cuyos miembros son de tipado fuerte de acuerdo con esteesquema. El DataSet se compone de clases que extienden el conjunto de datos ADO.NETDataTable, DataRow y clases. Además de las tablas de datos con establecimiento inflexibconjuntos de datos con tipo ahora también incluyen TableAdapters, que son clases conmétodos para llenar el conjunto de datos de tablas de datos y la propagación de lasmodificaciones en la tablas de datos de vuelta a la base de datos.

Nota Para obtener más información sobre las ventajas y desventajas del uso deconjuntos de datos con tipo en comparación con los objetos de negocio personalizados,consulte Diseño de componentes de niveles y traspaso de datos a través de éstos .

Page 6: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 6/380

Vamos a utilizar conjuntos de datos con establecimiento inflexible de la arquitectura estotutoriales. La Figura 3 muestra el flujo de trabajo entre las diferentes capas de unaaplicación que utiliza conjuntos de datos con tipo.

Figura 3. Todos los datos de Código de Acceso es relegado a la DAL

Creación de un DataSet con tipo y el adaptador de la tabla

Para empezar a crear nuestra DAL, se inicia mediante la adición de un DataSet a nuestroproyecto. Para lograr esto, haga clic derecho en el nodo del proyecto en el Explorador desoluciones y seleccione Agregar nuevo elemento. Seleccione la opción de conjunto dedatos de la lista de plantillas y el nombre de Northwind.xsd .

Figura 4. Optar por añadir un nuevo conjunto de su proyecto

Después de hacer clic en Agregar, cuando se le pide que agregue el conjunto de datos ala App_Code carpeta, seleccione Si. El Diseñador de DataSet se mostrará, y el Asistente pala configuración de TableAdapter se inicia, lo que le permite añadir su TableAdapterprimero en el DataSet.

Page 7: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 7/380

Un DataSet sirve como una colección con establecimiento inflexible de datos, sino que secompone de instancias de DataTable inflexible de tipos, cada uno de los cuales a su vez scompone de casos DataRow inflexible de tipos. Vamos a crear un establecimiento inflexibde tipos DataTable para cada una de las tablas de base de datos subyacente que tenemoque trabajar en esta serie de tutoriales.Vamos a empezar con la creación de un DataTabpara los productos de mesa.

 Tenga en cuenta que DataTables inflexible de tipos no incluyen ninguna información sob

cómo acceder a los datos de la tabla de base de datos subyacente. Con el fin de recuperalos datos para llenar el DataTable, se utiliza una clase TableAdapter, que funciona comonuestra capa de acceso a datos. Para nuestros productos DataTable, TableAdaptercontendrá los métodos - GetProducts () ,GetProductByCategoryID ( IdCategoría ) , y así sucesivamente - que vamos a invocar a partir de la capa de presentación. El papel delDataTable es la de servir como objetos con establecimiento inflexible utiliza para pasardatos entre las capas.

El Asistente para la configuración de TableAdapter comienza le pedirá que seleccione qubase de datos para trabajar. La lista desplegable muestra las bases de datos en elExplorador de servidores. Si no añadir la base de datos Northwind al Explorador de

servidores, puede hacer clic en el botón Nueva conexión en este momento para hacerlo.

Figura 5. Elegir la base de datos Northwind de la lista desplegable

Después de seleccionar la base de datos y hacer clic en Siguiente, se le pedirá si deseaguardar la cadena de conexión en elWeb.config archivo. Al guardar la cadena de conexiónque va a evitar tener que codificado en las clases TableAdapter, lo que simplifica las cosasi los cambios de cadena de conexión la información en el futuro. Si opta por guardar la

Page 8: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 8/380

cadena de conexión en el archivo de configuración que es colocado enel <connectionStrings> sección, que puede ser opcionalmente encriptada para mayorseguridad o modificas fuera de plazo a través de la nueva página de ASP.NET 2.0 enpropiedad de la herramienta de interfaz gráfica de administración de IIS, que es más ideapara los administradores.

Figura 6. Guardar la cadena de conexión en Web.config

A continuación, tenemos que definir el esquema de la primera DataTable conestablecimiento inflexible y dar el primer método para nuestro TableAdapter utilizar alrellenar el DataSet con tipos declarados. Estos dos pasos se llevan a cabo de formasimultánea mediante la creación de una consulta que devuelve las columnas de la tablaque queremos que se refleja en nuestro DataTable. Al final del asistente le daremos unnombre de método para esta consulta. Una vez que se ha logrado, este método puede seinvocado desde nuestra capa de presentación. El método se ejecutará la consulta definidy rellenar un DataTable con establecimiento inflexible.

Para empezar a definir la consulta SQL, primero debemos indicar cómo queremos que el TableAdapter que ejecutar la consulta.Podemos utilizar una sentencia SQL ad-hoc, crear nuevo procedimiento almacenado, o utilizar un procedimiento almacenado existente. Parestos tutoriales vamos a utilizar ad-hoc sentencias SQL. Se refieren a BrianNoyes artículo, construir una capa de acceso a datos con el Diseñador de DataSet de VisuStudio 2005 para ver un ejemplo del uso de procedimientos almacenados.

Page 9: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 9/380

Figura 7. Consulta de los datos mediante una declaración ad hoc de SQL

En este punto se puede escribir en la consulta SQL a mano. Cuando se crea el primermétodo en el TableAdapter que normalmente queremos tener el retorno consulta lascolumnas que deben ser expresados en la correspondiente DataTable. Podemos lograr esmediante la creación de una consulta que devuelve todas las columnas y todas las filas dlos Productos de la tabla:

Page 10: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 10/38

Figura 8. Introduzca la consulta SQL en el cuadro de texto

Como alternativa, utilice el Generador de consultas y gráficamente la construcción de laconsulta, como se muestra en la Figura 9.

Page 11: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 11/38

Figura 9. Crear la consulta de forma gráfica, a través del Editor de consultas

Después de crear la consulta, pero antes de pasar a la siguiente pantalla, haga clic en elbotón Opciones avanzadas. En proyectos de sitio web, "Generar instrucciones Insert,Update y Delete" es la única opción avanzada seleccionada por defecto, si se ejecuta estasistente desde una biblioteca de clases o un proyecto de Windows la opción "Usarconcurrencia optimista" opción también serán seleccionados. Deja la opción "Usarconcurrencia optimista" opción desactivada por el momento. Vamos a examinar laconcurrencia optimista en futuros tutoriales.

Page 12: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 12/38

Figura 10. Seleccione sólo la opción "Generar instrucciones Insert, Update yDelete" Opción

Después de verificar las opciones avanzadas, haga clic en Siguiente para pasar a lapantalla final. Aquí se nos pide que seleccione cuáles son los métodos para agregar a la TableAdapter. Hay dos modelos para rellenar los datos:

• Llenar un DataTable - con este método es un método que se creó en un DataTab

como parámetro, que se llena basándose en los resultados de la consulta. La claseDataAdapter de ADO.NET, por ejemplo, implementa este modelo con su relleno

()método.• Devuelve una DataTable - con este enfoque, el método crea y llena el DataTable

para usted y lo devuelve como el valor de retorno métodos.

Usted puede tener el TableAdapter implementar uno o ambos de estos patrones. Tambiépuede cambiar el nombre de los métodos establecidos aquí. Vamos a dejar las dos casillamarcada, a pesar de que sólo va a utilizar el patrón de esta última a través de estostutoriales. Además, vamos a cambiar el nombre del lugar genérico GetData métodopara GetProducts .

Si está activada, la casilla final, "GenerateDBDirectMethods," crea Insert () , Update() y Delete () los métodos de TableAdapter. Si deja esta opción sin marcar, todas lasactualizaciones se deben hacer a través del TableAdapter único Update () método, quetiene en el DataSet, DataTable, un único objeto DataRow o una matriz de objetosDataRow. (Si ha desactivado la "Generar instrucciones Insert, Update y Delete" desde laspropiedades avanzadas en la Figura 9 establecimiento de esta casilla no tendrá ningúnefecto.) Vamos a dejar esta casilla seleccionada.

Page 13: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 13/38

Figura 11. Cambiar el nombre del método de GetData para GetProducts

Complete el asistente, haga clic en Finalizar. Después se cierra el asistente que sedevuelven al Diseñador de DataSet, lo que demuestra la DataTable que acabamos decrear. Usted puede ver la lista de columnas de la Productos DataTable( ProductID , ProductName , y así sucesivamente), así como los métodos dela ProductsTableAdapter ( Fill () y GetProducts () ).

Figura 12. Los productos de DataTable y ProductsTableAdapter se han añadido alconjunto de datos con tipo

En este momento tenemos un DataSet con un solo DataTable ( Northwind.Products ) y unaclase DataAdapter inflexible de tipos (NorthwindTableAdapters.ProductsTableAdapter ) conun GetProducts () método. Estos objetos se pueden utilizar para acceder a una lista detodos los productos de código como:

NorthwindTableAdapters.ProductsTableAdapter productsAdapter = newNorthwindTableAdapters.ProductsTableAdapter ();Northwind.ProductsDataTable productos;

productos productsAdapter.GetProducts = ();

foreach (Northwind.ProductsRow productRow en los productos)Response.Write ("del producto:" + + productRow.ProductName "<br />");

Este código no nos obligan a escribir un poco de acceder a los datos específicos delcódigo. No tuvimos que crear una instancia de las clases ADO.NET, no tiene que referirsecualquier tipo de cadena de conexión, las consultas SQL o procedimientos almacenados. cambio, el TableAdapter proporciona el código de bajo nivel de acceso de datos paranosotros.

Page 14: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 14/38

Cada objeto que se utiliza en este ejemplo es también inflexible de tipos, lo que permiteque Visual Studio proporciona IntelliSense y en tiempo de compilación comprobación detipos. Y lo mejor de todas las tablas de datos devueltos por el TableAdapter se puedeenlazar a datos de ASP.NET Controles Web, tales como los controles GridView, DetailsVieDropDownList, CheckBoxList, y varios otros. El siguiente ejemplo ilustra la unión DataTabdevuelto por el GetProducts () método a un GridView en tan sólo unos escasos tres líneasde código en el Page_Load controlador de eventos.

AllProducts.aspx

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "AllProducts.aspx.cs"Inherits = "todosProductos"%>

<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">

<title> Ver todos los productos en un GridView </ title><link rel="stylesheet" href="Styles.css" type="text/css" />

</ Head>

<body><form id="Form1" runat="server"><div

<h1>Todos los productos </ h1>

<p><asp:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle">

<HeaderStyle CssClass="HeaderStyle" /><AlternatingRowStyle CssClass="AlternatingRowStyle" />

</ Asp: GridView></ P>

 </ Div>

</ Form></ Body></ Html>

AllProducts.aspx.cs

using System;using System.Data;utilizando System.Configuration;using System.Collections;using System.Web;using System.Web.Security;utilizando System.Web.UI;

utilizando System.Web.UI.WebControls;utilizando System.Web.UI.WebControls.WebParts;utilizando System.Web.UI.HtmlControls;utilizando NorthwindTableAdapters;

pública todosProductos clase parcial: System.Web.UI.Page{

protected void Page_Load (object sender, EventArgs e){

ProductsTableAdapter productsAdapter = new ProductsTableAdapter ();GridView1.DataSource productsAdapter.GetProducts = ();GridView1.DataBind ();

}

Page 15: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 15/38

}

Figura 13. La lista de los productos se muestra en un GridView

Aunque este ejemplo requiere que escribir tres líneas de código en nuestra página deASP.NET Page_Load controlador de eventos, en futuros tutoriales vamos a examinar cómousar el ObjectDataSource para recuperar los datos de forma declarativa de la DAL. Con eObjectDataSource que no tendrá que escribir ningún código y obtener el apoyo de

paginación y la clasificación también!

Paso 3: Agregar los métodos con parámetros de lacapa de acceso a datos

En este punto ProductsTableAdapter clase tiene un solo método, GetProducts () , quedevuelve todos los productos en la base de datos. Si bien es capaz de trabajar con todoslos productos es, sin duda útil, hay veces en que vamos a querer recuperar informaciónsobre un producto específico, o todos los productos que pertenecen a una categoríaparticular. Para agregar esta funcionalidad a nuestro nivel de acceso a los datos quepodemos añadir los métodos con parámetros para el TableAdapter.

Vamos a añadir el GetProductsByCategoryID ( IdCategoría ) método. Para agregar un nuevmétodo para la DAL, volver al Diseñador de DataSet, haga clic enel ProductsTableAdapter sección y elija Agregar consulta.

Page 16: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 16/38

Figura 14. Haga clic con el TableAdapter y elegir Agregar consulta

En primer lugar nos pregunte si queremos acceder a la base de datos usando un ad-hocinstrucción SQL o un procedimiento nuevo o ya existente almacenadas. Vamos a optar poutilizar una sentencia SQL ad-hoc de nuevo. A continuación, se nos pregunta qué tipo deconsulta SQL que nos gustaría utilizar. Debido a que desea devolver todos los productosque pertenecen a una categoría determinada, queremos escribiruna SELECCIONAR declaración que devuelve filas.

Page 17: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 17/38

Figura 15. Seleccione Crear un SELECT de declaración que devuelve filas

El siguiente paso es definir la consulta SQL utilizada para acceder a los datos. Como nosquieren regresar sólo aquellos productos que pertenecen a una categoría particular, yo uel mismo SELECT de declaración de GetProducts () , pero añade losiguiente DONDEcláusula: DONDE CategoryID = @ CategoryID . El @ CategoryID parámetro indicque el asistente de TableAdapter que el método que estamos creando requerirá unparámetro de entrada del tipo correspondiente (es decir, un entero nulos).

Page 18: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 18/380

Figura 16. Escriba una consulta para devolver sólo los productos en unacategoría

En el último paso podemos elegir que los patrones de acceso de datos a utilizar, así comopersonalizar los nombres de los métodos generados. Para el patrón de relleno, vamos acambiar el nombre a FillByCategoryID y para el regreso un patrón de cambio DataTable(el Obtén X métodos), vamos a usar GetProductsByCategoryID .

Page 19: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 19/380

Figura 17. Elegir los nombres de los métodos de TableAdapter

Después de completar el asistente, el Diseñador de DataSet incluye los métodos de TableAdapter nuevo.

Figura 18. Los productos que ahora se pueden consultar por categoría

 Tómese un momento para agregar un GetProductByProductID ( productID ) método queutiliza la misma técnica.

Page 20: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 20/38

Estas consultas con parámetros se puede probar directamente desde el Diseñador deDataSet. Haga clic derecho sobre el método en el TableAdapter y elija Vista previa dedatos. A continuación, introduzca los valores de uso para los parámetros y haga clic enVista previa.

Figura 19. Los productos pertenecientes a la categoría de bebidas se muestran

Con la GetProductsByCategoryID ( IdCategoría ) método en nuestra DAL, ahora podemoscrear una página ASP.NET que muestra sólo los productos de una categoría especificada.siguiente ejemplo muestra todos los productos que se encuentran en la categoría debebidas, que tienen un CategoryID de 1.

Beverages.aspx

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Beverages.aspx.cs"Inherits = "Bebidas"%>

<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">

Página <title> título </ title><link rel="stylesheet" href="Styles.css" type="text/css" />

</ Head><body>

<form id="Form1" runat="server"><div

<h1> Bebidas </ h1><p>

<asp:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle"><HeaderStyle CssClass="HeaderStyle" />

Page 21: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 21/38

<AlternatingRowStyle CssClass="AlternatingRowStyle" /></ Asp: GridView></ P>

</ Div></ Form>

</ Body></ Html>

Beverages.aspx.cs

using System;using System.Data;utilizando System.Configuration;using System.Collections;using System.Web;using System.Web.Security;utilizando System.Web.UI;utilizando System.Web.UI.WebControls;utilizando System.Web.UI.WebControls.WebParts;utilizando System.Web.UI.HtmlControls;utilizando NorthwindTableAdapters;

pública Bebidas clase parcial: System.Web.UI.Page{

protected void Page_Load (object sender, EventArgs e){

ProductsTableAdapter productsAdapter = new ProductsTableAdapter ();GridView1.DataSource = productsAdapter.GetProductsByCategoryID (1);GridView1.DataBind ();

}}

Figura 20. Los productos en la categoría de bebidas es mostrado

Page 22: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 22/38

Paso 4: Actualizar, insertar y eliminar datos

Hay dos patrones de uso general para insertar, actualizar y eliminar datos. El primerpatrón, que yo llamaré el modelo de base de datos directa, implica la creación de métodoque, cuando se invoca, emitir una INSERTAR , ACTUALIZAR , o DELETE comandos a la base dedatos que opera en un registro de base de datos única. Estos métodos suelen ser aprobaen una serie de valores escalares (enteros, cadenas, booleanos, datetimes, y así 

sucesivamente) que corresponden a los valores a insertar, actualizar o eliminar. Porejemplo, con este patrón para el Productos mesa del método de eliminación podría tener un parámetro entero, lo que indica elProductID del registro que desea eliminar, mientrasque el método de inserción tomaría en una cadena para el ProductName , un punto decimapara el PrecioUnidad , un número entero para el UnitsOnStock , y así sucesivamente.

Figura 21. Cada inserción, actualización y solicitud de eliminación se envía a labase de datos inmediatamente

El otro patrón que me referiré como el patrón de actualización por lotes, es actualizar unDataSet, DataTable o colección de objetos DataRow en una llamada al método. Con estepatrón de un desarrollador de eliminaciones, inserciones, y modifica el DataRow en unDataTable y luego pasa a los objetos DataRow o DataTable en un método deactualización. Este método, a continuación se enumeran los objetos DataRow pasado en,determina si se han modificado, añadido o eliminado (a través de la DataRow de lapropiedad RowState de valor), y las cuestiones de la solicitud de base de datos apropiadapara cada registro.

Page 23: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 23/38

Figura 22. Todos los cambios se sincronizan con la base de datos cuando elmétodo de actualización se invoca

El TableAdapter utiliza el patrón de actualización por lotes por defecto, pero también escompatible con el patrón directo DB. Dado que hemos seleccionado la opción "Generarinstrucciones Insert, Update y Delete" desde las propiedades avanzadas al crear nuestro TableAdapter, el ProductsTableAdapter contiene una actualización () método, queimplementa el patrón de actualización por lotes.En concreto, el TableAdapter contieneuna actualización () método que se puede pasar el DataSet, DataTable inflexible de tipoo uno o más objetos DataRow. Si dejó el "GenerateDBDirectMethods" casilla de verificacimarcada la primera vez que la creación del TableAdapter el modelo DB directa también sllevará a cabo a través de Insert () , Update () y Delete () métodos.

Ambos patrones de modificación de datos usar el

 TableAdapter InsertCommand , UpdateCommand y DeleteCommand propiedades para emitirsu INSERTAR , ACTUALIZAR , y DELETE comandos a la base de datos. Usted puede inspeccionamodificar el InsertCommand ,UpdateCommand y DeleteCommand propiedades haciendo clic en el TableAdapter en el Diseñador de DataSet y luego ir a la ventana Propiedades. (Asegúresede haber seleccionado el TableAdapter, y que el ProductsTableAdapter objeto es laseleccionada en la lista desplegable en la ventana Propiedades.)

Page 24: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 24/38

Figura 23. El TableAdapterha InsertCommand , UpdateCommand y DeleteCommand Propiedades

Para examinar o modificar cualquiera de estas propiedades de base de datos de comandhaga clic en el CommandTextsubpropiedad, que se abre el Generador de consultas.

Page 25: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 25/38

Figura 24. Configurar el INSERTAR , ACTUALIZAR , y DELETE declaraciones en elGenerador de consultas

El siguiente ejemplo muestra cómo utilizar el modelo de actualización por lotes para

duplicar el precio de todos los productos que no se suspenda y que tienen 25 unidades estock o menos:

NorthwindTableAdapters.ProductsTableAdapter productsAdapter = newNorthwindTableAdapters.ProductsTableAdapter ();

/ / Para cada producto, el doble de su precio si no se interrumpe y/ / Hay 25 artículos en stock o menosProductos Northwind.ProductsDataTable productsAdapter.GetProducts = ();foreach (producto Northwind.ProductsRow en los productos)

if (! product.Discontinued & & product.UnitsInStock <= 25)product.UnitPrice *= 2;

/ / Actualización de los productosproductsAdapter.Update (productos);

El código siguiente muestra cómo utilizar el modelo directo DB para eliminar medianteprogramación un producto en particular, a continuación, actualizar, y luego añadir unonuevo:

NorthwindTableAdapters.ProductsTableAdapter productsAdapter = newNorthwindTableAdapters.ProductsTableAdapter ();

/ / Eliminar el producto con ProductID 3productsAdapter.Delete (3);

Page 26: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 26/38

/ / Actualizar Chai (ProductID de 1), en el UnitsOnOrder a 15productsAdapter.Update ("Chai", 1, 1, "10 cajas x 20 bolsas", 18.0m, de 39 años,15, 10, falso, 1);

/ / Añadir un nuevo productoproductsAdapter.Insert ("Producto Nuevo", 1, 1, "12 latas por caja",14.95m, 15, 0, 10, false);

Creación de inserción personalizados, actualización y eliminación de losmétodos

El Insert () , Update () y Delete () los métodos creados por el método directo DB puede sun poco engorroso, sobre todo para las tablas con muchas columnas. Mirando el ejemplode código anterior, sin la ayuda de IntelliSense no es particularmente claroquéproductos mapas columna de la tabla para cada parámetro de entrada a la actualizac

() y Insert () métodos. Puede haber momentos en los que sólo quiere actualizar una solcolumna o dos, o quiere una medida de inserción () método que, tal vez, devolver el valdel registro recién insertado IDENTIDAD (incremento automático) sobre el terreno.

Para crear un método personalizado, vuelva al Diseñador de DataSet. Haga clic derecho el TableAdapter y elija Agregar consulta, volviendo a la asistente de TableAdapter. En lasegunda pantalla podemos indicar el tipo de consulta para crear. Vamos a crear un métoque agrega un nuevo producto y luego devuelve el valor del registro que acaba de agregel ProductID . Por lo tanto, optar por crear un INSERTAR consulta.

Figura 25. Crear un método para agregar una nueva fila a la Productos Tabla

Page 27: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 27/38

En la siguiente pantalla el InsertCommand 's CommandText aparece. Aumentar esta consultaagregando SCOPE_IDENTITY SELECT () al final de la consulta, lo que devolverá el último valode identidad insertado en una IDENTIDAD columna en el mismo ámbito. (Vealadocumentación técnica para obtener más información acerca de SCOPE_IDENTITY () y poqué es probable que desee utilizar SCOPE_IDENTITY () en lugar de @ @ IDENTITY .)Asegúrese de que finalice la INSERTAR declaración con un punto y coma antes de añadirel SELECCIONE comunicado.

Figura 26. Aumentar la consulta para devolver el SCOPE_IDENTITY () Valor

Por último, el nombre del nuevo método InsertProduct .

Page 28: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 28/380

Figura 27. Establecer el nombre de Nuevo método para InsertProduct

Cuando regresa al Diseñador de DataSet se verá que la ProductsTableAdapter contiene unnuevo método, InsertProduct . Si este nuevo método no tiene un parámetro para cadacolumna de la Productos de mesa, es probable que usted se olvidó de poner finalINSERTAR declaración con un punto y coma. Configurar el InsertProduct método yasegurarse de que tiene un punto y coma de la delimitación dela INSERTAR y SELECCIONAR declaraciones.

Por defecto, métodos de inserción de edición no-query métodos, lo que significa quedevolverá el número de filas afectadas. Sin embargo, queremos queel InsertProduct método para devolver el valor devuelto por la consulta, no el número defilas afectadas.Para lograr esto, ajustar el InsertProduct método ExecuteMode propiedada escalar .

Page 29: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 29/380

Figura 28. Cambiar el ExecuteMode de propiedades para escalar

El siguiente código muestra este nuevo InsertProduct método en acción:

NorthwindTableAdapters.ProductsTableAdapter productsAdapter = newNorthwindTableAdapters.ProductsTableAdapter ();

/ / Añadir un nuevo productoint = new_productID Convert.ToInt32 (productsAdapter.InsertProduct ("Producto Nuevo", 1,1, "12 latas por caja", 14.95m, 10, 0, 10, false));

/ / Aunque pensándolo bien, eliminar el productoproductsAdapter.Delete (new_productID);

Paso 5: Completar el nivel de acceso a datos

 Tenga en cuenta que la ProductsTableAdapters clase devuelve el Id. decategoría y IdProveedor valores de los productos de la tabla, pero no incluyeel CategoryName columna de la Categorías de mesa o el CompanyName de la columnade Proveedores de mesa, aunque es probable de las columnas que desea mostrar cuando muestran los productos de la información. Podemos aumentar el método del TableAdapte

inicial, GetProducts () , que incluye tanto la CategoryName y CompanyName valores de lacolumna, que se actualizará el establecimiento inflexible de tipos DataTable para incluirestas nuevas columnas también.

Esto puede representar un problema, sin embargo, como los métodos del TableAdapterpara insertar, actualizar y eliminar datos están basados en este métodoinicial. Afortunadamente, los métodos de auto-generado para insertar, actualizar y eliminno se ven afectados por subconsultas en la SELECT de la cláusula. Teniendo cuidado deañadir nuestras consultas a las categorías yproveedores como subconsultas, en lugarde UNETE s, vamos a evitar tener que reelaborar esos métodos para la modificación de

Page 30: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 30/38

datos. Haga clic derecho en el GetProducts () método en el ProductsTableAdapter y elijaConfigurar. A continuación, ajustar elSELECCIONAR cláusula para que se vea así:

SELECT ProductID, ProductName, IdProveedor, CategoryID,CantidadPorUnidad, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, descatalogados,(SELECT CategoryName de categorías en las que Categorías.IdCategoría = Products.Categorycomo CategoryName, (SELECT CompanyName de ProveedoresDONDE Suppliers.SupplierID = Products.SupplierID) como SupplierNameFROM Productos

Figura 29. Actualizar el SELECCIONE Declaración para el GetProducts () Método

Después de actualizar el GetProducts () método a utilizar esta nueva consulta de laDataTable se incluyen dos nuevas columnas:CategoryName y SupplierName .

Page 31: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 31/38

Figura 30. Los productos DataTable tiene dos nuevas columnas

 Tome un momento para actualizar el SELECCIONE cláusula en el GetProductsByCategoryID( IdCategoría ) método.

Si actualiza el GetProducts () SELECT de uso de ÚNETE sintaxis el Diseñador de DataSet noserá capaz de generar automáticamente los métodos para insertar, actualizar y borrardatos de base de datos utilizando el modelo de base de datos directa. En su lugar, ustedtendrá que crear manualmente al igual que hicimos con el InsertProduct métodoanteriormente en este tutorial. Además, de forma manual tendrá que proporcionar

la InsertCommand , UpdateCommand y DeleteCommand valores de la propiedad, si desea utilizar emodelo de actualización por lotes.

Agregando el restante TableAdapters

Hasta ahora, sólo hemos mirado en el trabajo con un TableAdapter único para una tabla dbase de datos única. Sin embargo, la base de datos Neptuno contiene varias tablasrelacionadas que tendremos que trabajar en nuestra aplicación web. Un DataSet puedecontener múltiples tablas de datos relacionadas. Por lo tanto, para completar nuestra DAtenemos que añadir tablas de datos para las otras tablas que usaremos en estostutoriales. Para añadir un nuevo objeto TableAdapter a un DataSet, abra el Diseñador de

DataSet, haga clic en el Diseñador, y seleccione Agregar / TableAdapter. Esto creará unnuevo objeto DataTable y TableAdapter y caminar a través del asistente se examinóanteriormente en este tutorial.

 Tómese unos minutos para crear la siguiente TableAdapters y los métodos que utilizan lasiguientes consultas. Tenga en cuenta que las consultas en el ProductsTableAdapter incluylas subconsultas para agarrar la categoría de cada producto y los nombres de losproveedores. Además, si usted ha estado siguiendo a lo largo, que ya ha añadidoel ProductsTableAdapter clase GetProducts () yGetProductsByCategoryID( IdCategoría ) métodos.

Page 32: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 32/38

ProductsTableAdapter

GetProducts:

SELECT ProductID, ProductName, IdProveedor, CategoryID,CantidadPorUnidad, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel,Discontinuadas, (SELECT CategoryName de categorías en las queCategorías.IdCategoría = Products.ProductID) como CategoryName, (SELECTNombreCompañía de Proveedores DONDE Suppliers.SupplierID =

Products.SupplierID) como SupplierNameFROM Productos

GetProductsByCategoryID:

SELECT ProductID, ProductName, IdProveedor, CategoryID,CantidadPorUnidad, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel,Discontinuadas, (SELECT CategoryName de categorías en las queCategorías.IdCategoría = Products.ProductID) como CategoryName, (SELECTNombreCompañía de Proveedores DONDE Suppliers.SupplierID =Products.SupplierID) como SupplierNameFROM ProductosDONDE CategoryID = @ CategoryID

GetProductsBySupplierID

SELECT ProductID, ProductName, IdProveedor, CategoryID,CantidadPorUnidad, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel,Discontinuadas, (SELECT CategoryName de categorías en las queCategorías.IdCategoría = Products.ProductID) como CategoryName, (SELECTNombreCompañía de Proveedores DONDE Suppliers.SupplierID =Products.SupplierID) como SupplierNameFROM ProductosDONDE IdProveedor = @ IdProveedor

GetProductByProductIDSELECT ProductID, ProductName, IdProveedor, CategoryID,CantidadPorUnidad, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel,Discontinuadas, (SELECT CategoryName de categorías en las queCategorías.IdCategoría = Products.ProductID) como CategoryName, (SELECTNombreCompañía de Proveedores DONDE Suppliers.SupplierID =Products.SupplierID) como SupplierNameFROM ProductosWHERE ProductID = @ ProductID

CategoriesTableAdapter

GetCategoriesSeleccione CategoryID, CategoryName DescripciónFROM Categorías

GetCategoryByCategoryID

Seleccione CategoryID, CategoryName DescripciónFROM CategoríasDONDE CategoryID = @ CategoryID

SuppliersTableAdapter

Page 33: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 33/38

GetSuppliersSELECCIONAR IdProveedor, CompanyName, Dirección, Ciudad, País, TeléfonoA partir de proveedores

GetSuppliersByCountry

SELECCIONAR IdProveedor, CompanyName, Dirección, Ciudad, País, TeléfonoA partir de proveedoresDONDE País = @ País

GetSupplierBySupplierID

SELECCIONAR IdProveedor, CompanyName, Dirección, Ciudad, País, TeléfonoA partir de proveedoresDONDE IdProveedor = @ IdProveedor

EmployeesTableAdapter

GetEmployeesSeleccione EmployeeID, Apellido, Nombre, Título, Fecha de contratación ReportsTo, PaísFROM Empleados

GetEmployeesByManager

Seleccione EmployeeID, Apellido, Nombre, Título, Fecha de contratación ReportsTo, PaísFROM EmpleadosDONDE ReportsTo = @ ManagerID

GetEmployeeByEmployeeID

Seleccione EmployeeID, Apellido, Nombre, Título, Fecha de contratación ReportsTo, PaísFROM EmpleadosDONDE EmployeeID = @ EmployeeID

Figura 31. El Diseñador de DataSet después de los cuatro TableAdapters se hanañadido

Agregar código personalizado a la DAL

Los TableAdapters y tablas de datos añadido al conjunto de datos con tipo se expresancomo un archivo de definición de esquemas XML ( Northwind.xsd ). Usted puede ver estainformación de esquema, haga clic en el Northwind.xsd archivo en el Explorador desoluciones y elegir Ver código.

Page 34: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 34/38

Figura 32. La definición de esquema XML (XSD) para el conjunto de datos contipo Neptuno

Esta información de esquema se traduce en C # o Visual Basic en tiempo de diseño cuanse compila o en tiempo de ejecución (si es necesario), momento en que usted puedecaminar a través de ella con el depurador. Para ver este código generado automáticamevaya a la Vista de clases y profundizar en el TableAdapter o clases DataSet. Si usted no vla Vista de clases en su pantalla, diríjase al menú Ver y seleccione a partir de ahí, o pulse

Ctrl + Mayús + C. De la Vista de clases se puede ver las propiedades, métodos y eventosde las clases DataSet y TableAdapter. Para ver el código de un método en particular, hagdoble clic en el nombre del método en la Vista de clases o el botón derecho sobre él yseleccione Ir a definición.

Page 35: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 35/38

Figura 33. Inspeccionar el código generado automáticamente por la Selección Ia definición de la Vista de clases

Mientras que genera automáticamente el código puede ser un gran ahorro de tiempo, elcódigo es a menudo muy genérica y tiene que ser personalizado para satisfacer lasnecesidades específicas de una aplicación. El riesgo de extender código generadoautomáticamente, sin embargo, es que la herramienta que generó el código podría decidque es hora de "regenerar" y sobrescribir las personalizaciones. Con. NET 2.0 's nuevoconcepto de clase parcial, es fácil dividir una clase en varios archivos. Esto nos permiteañadir nuestros propios métodos, propiedades y eventos para las clases generadasautomáticamente sin tener que preocuparse acerca de Visual Studio sobrescribir nuestrapersonalizaciones.

Page 36: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 36/38

Para demostrar cómo personalizar la DAL, vamos a añadir una GetProducts () método pala SuppliersRow clase. El SuppliersRowclase representa un único registro de la Proveedores dmesa, cada proveedor puede proveedor de cero a muchos productos, por loque GetProducts () devolverá los productos del proveedor especificado. Para lograr estocrear un nuevo archivo de clase en elApp_Code carpeta con el nombre SuppliersRow.cs yagregue el siguiente código:

using System;

using System.Data;utilizando NorthwindTableAdapters;

pública parcial de la clase Neptuno{

SuppliersRow public partial class{

pública GetProducts Northwind.ProductsDataTable (){

ProductsTableAdapter productsAdapter = new ProductsTableAdapter ();volver productsAdapter.GetProductsBySupplierID (this.SupplierID);

}}

}

Esta clase parcial indica al compilador que cuando la construcción dela Northwind.SuppliersRow de clase para incluir el GetProducts () el método que acabamos definir. Si usted construye su proyecto y luego volver a la Vista de clases verá GetProduct

() aparece ahora como un método de Northwind.SuppliersRow .

Figura 34. El GetProducts () Método es ahora parte de la Northwind.SuppliersRow clas

El GetProducts () método que ahora se puede utilizar para enumerar el conjunto deproductos de un proveedor en particular, como muestra el siguiente código:

Page 37: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 37/38

NorthwindTableAdapters.SuppliersTableAdapter suppliersAdapter = newNorthwindTableAdapters.SuppliersTableAdapter ();

/ / Obtener todos los proveedoresNorthwind.SuppliersDataTable proveedores suppliersAdapter.GetSuppliers = ();

/ / Enumere los proveedoresforeach (proveedor Northwind.SuppliersRow de proveedores){

Response.Write ("Proveedor:" + supplier.CompanyName);

Response.Write ("<ul>");

/ / Lista de los productos para este proveedorProductos Northwind.ProductsDataTable supplier.GetProducts = ();foreach (producto Northwind.ProductsRow en los productos)

Response.Write ("<li>" + product.ProductName + "</ li>");

Response.Write ("</ ul> </ p>");}

Estos datos también se pueden visualizar en cualquiera de los controles ASP.NET 's Web datos. La siguiente página enlaza a un control GridView con dos campos:

• A BoundField que muestra el nombre de cada proveedor, y• Un TemplateField que contiene un control BulletedList que está enlazado a los

resultados devueltos por el GetProducts ()método para cada proveedor.

Vamos a examinar cómo se muestra como maestro-detalle en los informes futurostutoriales. Por ahora, este ejemplo sirve para ilustrar el método personalizado añadido ala Northwind.SuppliersRow clase.

SuppliersAndProducts.aspx

<% @ Page Language = "C #" AutoEventWireup = "true"CodeFile = "SuppliersAndProducts.aspx.cs" Inherits = "SuppliersAndProducts"%>

<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">

Página <title> título </ title><link rel="stylesheet" href="Styles.css" type="text/css" />

</ Head><body>

<form id="Form1" runat="server"><div

<h1>Proveedores y sus productos </ h1>

<p><asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

CssClass="DataWebControlStyle"><HeaderStyle CssClass="HeaderStyle" /><AlternatingRowStyle CssClass="AlternatingRowStyle" /><columnas>

<asp:BoundField DataField="CompanyName" HeaderText="Supplier" /><asp:TemplateField HeaderText="Products">

<ItemTemplate>

Page 38: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 38/380

<Asp:. BulletedList ID = "BulletedList1" runat = "server"DataSource ='<%# (. (Northwind.SuppliersRow) ((System.Data.DataRowView)Container.DataItem) Fila) GetProducts ()%> '

DataTextField = "ProductName"></ Asp: BulletedList>

</ ItemTemplate></ Asp: TemplateField>

</ Columns></ Asp: GridView></ P>

 </ Div></ Form>

</ Body></ Html>

SuppliersAndProducts.aspx.cs

using System;using System.Data;utilizando System.Configuration;using System.Collections;using System.Web;using System.Web.Security;utilizando System.Web.UI;utilizando System.Web.UI.WebControls;utilizando System.Web.UI.WebControls.WebParts;utilizando System.Web.UI.HtmlControls;utilizando NorthwindTableAdapters;

pública SuppliersAndProducts clase parcial: System.Web.UI.Page{

protected void Page_Load (object sender, EventArgs e){

SuppliersTableAdapter suppliersAdapter = new SuppliersTableAdapter ();GridView1.DataSource suppliersAdapter.GetSuppliers = ();

GridView1.DataBind ();}

}

Page 39: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 39/380

Figura 35. Nombre del Proveedor compañía cotiza en la columna de la izquierdasus productos en el derecho

Resumen

Al construir una aplicación web la creación de la DAL debe ser uno de los primeros pasosque se producen antes de empezar a crear la capa de presentación. Con Visual Studio, lacreación de una DAL sobre la base de conjuntos de datos con tipo es una tarea que puedrealizarse en 10-15 minutos, sin escribir una sola línea de código. Los tutoriales de avanz

se basará en esta DAL. En el siguiente tutorial vamos a definir una serie de reglas denegocio y ver cómo ponerlas en práctica en una capa de lógica de negocios por separado

Programación feliz!

Leer más

Para más información sobre los temas tratados en este tutorial, consulte los siguientesrecursos:

Page 40: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 40/38

• La construcción de una DAL mediante TableAdapters inflexible de tipos y tablas dedatos en VS 2005 y ASP.NET 2.0

• Diseño de componentes de niveles y traspaso de datos a través de niveles• Construir una capa de acceso a datos con el Diseñador de DataSet de Visual Studio

2005• Cifrar información de configuración de aplicaciones ASP.NET 2.0• Información general sobre TableAdapter•  Trabajando con un DataSet• Utilizando el acceso a datos con tipos en Visual Studio 2005 y ASP.NET 2.0• Cómo ampliar los métodos de TableAdapter• Recuperación de datos escalares de un procedimiento almacenado

Sobre el autor

Scott Mitchell, autor de seis ASP / ASP.NET libros y fundador de 4GuysFromRolla.com, haestado trabajando con tecnologías Web de Microsoft desde 1998. Scott trabaja comoconsultor independiente, instructor y escritor, recientemente completando su últimolibro,Sams Teach Yourself ASP.NET 2.0 en 24 horas . Él puede ser alcanzadoen [email protected] oa través de su blog, que se puede encontrar

en http://ScottOnWriting.NET .

Gracias especiales a ...

Esta serie de tutoriales fue revisado por muchos usuarios útil. Los examinadores principapara este tutorial incluyen Ron Green, Giesenow Hilton, Dennis Patterson, Shulok Liz, AbeGómez, y Carlos Santos. Interesados en revisar mis artículos de MSDN que viene? Si es ame escriba a [email protected] .

Tutorial 2: Crear una capa de lógica denegocios 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_2_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_2_CS.exe.

Page 41: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 41/38

Contenido del Tutorial 2 (Visual C #)

IntroducciónPaso 1: Creación de la BLL ClasesPaso 2: Acceso a los conjuntos de datos con tipo A través de la BLL ClasesPaso 3: Agregar validación a nivel de campo a las clases DataRowPaso 4: Agregar reglas personalizadas de negocios a la BLL de ClasesResumen

Introducción

La capa de acceso a datos (DAL), creada en el primer tutorial separa claramente la lógicade acceso a los datos de la lógica de presentación. Sin embargo, mientras que el DALsepara claramente los detalles de acceso a los datos de la capa de presentación, que nohace cumplir las reglas de negocio que se pueden aplicar. Por ejemplo, para nuestraaplicación podemos querer para no permitir elCategoryID o IdProveedor campos de los

productos de mesa, podrá modificarse cuando las interrumpidas campo está establecido e1, o puede ser que deseemos hacer cumplir las reglas de antigüedad, la prohibición de la

situaciones en que es administrado por un empleado alguien que fue contratado despuésde ellos. Otra situación común es la autorización - tal vez sólo los usuarios de una funciónparticular se puede eliminar productos o cambiar el PrecioUnidad valor.

En este tutorial vamos a ver cómo centralizar las reglas de negocio en una capa de lógicaempresarial (BLL) que sirve como intermediario en el intercambio de datos entre la capa presentación y el DAL. En una aplicación real, el plomo en sangre debe ser aplicado en unproyecto de bibliotecas de clase independiente, sin embargo, para estos tutoriales vamoimplementar el BLL como una serie de clases en el App_Code carpeta con el fin de simplificla estructura del proyecto. La Figura 1 ilustra las relaciones entre la arquitectura de la cade presentación, BLL, y DAL.

Page 42: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 42/38

Figura 1. El BLL separa la capa de presentación de la capa de acceso a datos e

impone reglas de negocio

Paso 1: Creación de las clases BLL

Nuestra BLL se compone de cuatro clases, una para cada TableAdapter en el DAL, cada ude estas clases BLL tendrá métodos para recuperar, insertar, actualizar y eliminar de la TableAdapter respectivos en el DAL, aplicando las reglas de negocio adecuado.

Para separar de forma más limpia de la DAL y BLL-clases relacionadas, vamos a crear dosubcarpetas en el App_Code carpeta, DAL yBLL . Simplemente haga clic en el App_Code carpeen el Explorador de soluciones y elija Nueva carpeta. Después de crear estas dos carpetamover el DataSet con tipo creada en el primer tutorial en el DAL subcarpeta.

A continuación, cree los cuatro archivos de clase en el BLL BLL subcarpeta. Para lograr eshaga clic en el BLL subcarpeta, seleccione Agregar nuevo elemento, y elija la plantilla de Clase. Nombre de las cuatro clases ProductsBLL , CategoriesBLL , SuppliersBLL yEmployeesBL

Page 43: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 43/38

Figura 2. Añadir cuatro nuevas clases a la App_Code Carpeta

A continuación, vamos a agregar métodos a cada una de las clases para envolversimplemente los métodos definidos para la TableAdapters desde el primer tutorial. Porahora, estos métodos sólo se llame directamente a la DAL, vamos a volver más tarde paragregar la lógica empresarial necesaria.

Nota Si está utilizando Visual Studio Standard Edition o superior (es decir, ustedes no utilizar Visual Web Developer), si lo desea, puede diseñar sus clases de forma visuautilizando el Diseñador de clases . Consulte el blog de Diseñador de clases para másinformación sobre esta nueva característica de Visual Studio.

Para el ProductsBLL clase hay que añadir un total de siete métodos:

• GetProducts () - devuelve todos los productos• GetProductByProductID ( productID ) - devuelve el producto con el ID de producto

especificado• GetProductsByCategoryID ( IdCategoría ) - devuelve todos los productos de la

categoría indicada• GetProductsBySupplier ( supplierID ) - devuelve todos los productos desde el

proveedor especificado• AddProduct ( productName, supplierID, categoryID, CantidadPorUnidad, precioUnitari

UnitsInStock, UnidadesEnPedido, reorderLevel, suspendido ) - se inserta un nuevoproducto en la base de datos con los valores pasados en; devuelve el ProductID val

del registro recién insertado• UpdateProduct ( productName, supplierID, categoryID, CantidadPorUnidad, precioUnitario, UnitsInStock, UnidadesEnPedido, reorderLevel, suspendido,

ProductID ) - actualizaciones de un producto ya existente en la base de datos con lovalores pasados en, devuelve verdadero si, precisamente, una fila se haactualizado, falso de lo contrario

• DeleteProduct ( productID ) - elimina el producto especificado a partir de la base dedatos

ProductsBLL.cs

Page 44: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 44/38

using System;using System.Data;utilizando System.Configuration;using System.Web;using System.Web.Security;utilizando System.Web.UI;utilizando System.Web.UI.WebControls;utilizando System.Web.UI.WebControls.WebParts;utilizando System.Web.UI.HtmlControls;utilizando NorthwindTableAdapters;

[System.ComponentModel.DataObject]pública ProductsBLL clase{

privado ProductsTableAdapter _productsAdapter = null;ProductsTableAdapter adaptador protegidos{

get {if (_productsAdapter == null)

_productsAdapter = new ProductsTableAdapter ();

volver _productsAdapter;}

}

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Select, true)]

pública GetProducts Northwind.ProductsDataTable (){

Adapter.GetProducts retorno ();}

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Select, false)]

pública Northwind.ProductsDataTable GetProductByProductID (int ProductID){

volver Adapter.GetProductByProductID (ProductID);}

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Select, false)]

pública Northwind.ProductsDataTable GetProductsByCategoryID (int categoryID){

volver Adapter.GetProductsByCategoryID (IdCategoría);}

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Select, false)]

pública Northwind.ProductsDataTable GetProductsBySupplierID (int supplierID)

{ volver Adapter.GetProductsBySupplierID (supplierID);}[System.ComponentModel.DataObjectMethodAttribute

(System.ComponentModel.DataObjectMethodType.Insert, true)]pública AddProduct bool (productName cadena, int? supplierID, int? IdCategoría,

CantidadPorUnidad cadena,decimal? precioUnitario, corto? UnitsInStock, corto?

UnidadesEnPedido, corto? reorderLevel,bool suspendido)

{/ / Se crea una instancia nueva ProductRowProductos Northwind.ProductsDataTable = new Northwind.ProductsDataTable ();

Page 45: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 45/38

Northwind.ProductsRow producto = products.NewProductsRow ();

product.ProductName = productName;if (supplierID == null) product.SetSupplierIDNull (); más product.SupplierID =

supplierID.Value;if (IdCategoría == null) product.SetCategoryIDNull (); más product.CategoryID =

categoryID.Value;if (CantidadPorUnidad == null) product.SetQuantityPerUnitNull (); más

product.QuantityPerUnit CantidadPorUnidad =;if (precioUnitario == null) product.SetUnitPriceNull (); más product.UnitPrice =

unitPrice.Value;if (UnitsInStock == null) product.SetUnitsInStockNull (); más product.UnitsInSto

= unitsInStock.Value;if (UnidadesEnPedido == null) product.SetUnitsOnOrderNull (); más

product.UnitsOnOrder = unitsOnOrder.Value;if (reorderLevel == null) product.SetReorderLevelNull (); más product.ReorderLev

= reorderLevel.Value;product.Discontinued = interrumpidas;

/ / Añadir el nuevo productoproducts.AddProductsRow (producto);int = rowsAffected Adapter.Update (productos);

/ / Devuelve verdadero si, precisamente, una fila se inserta, de lo contrariofalsovolver rowsAffected == 1;

}

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, true)]

pública UpdateProduct bool (productName cadena, int? supplierID, int? IdCategoría,CantidadPorUnidad cadena,

decimal? precioUnitario, corto? UnitsInStock, corto?UnidadesEnPedido, corto? reorderLevel,

bool interrumpido, int ProductID){

Productos Northwind.ProductsDataTable = Adapter.GetProductByProductID (ProductID

if (products.Count == 0)/ / Ningún registro coincidente, devuelva falsoreturn false;

Northwind.ProductsRow producto = productos [0];

product.ProductName = productName;if (supplierID == null) product.SetSupplierIDNull (); más product.SupplierID =

supplierID.Value;if (IdCategoría == null) product.SetCategoryIDNull (); más product.CategoryID =

categoryID.Value;if (CantidadPorUnidad == null) product.SetQuantityPerUnitNull (); más

product.QuantityPerUnit CantidadPorUnidad =;

if (precioUnitario == null) product.SetUnitPriceNull (); más product.UnitPrice =unitPrice.Value;if (UnitsInStock == null) product.SetUnitsInStockNull (); más product.UnitsInSto

= unitsInStock.Value;if (UnidadesEnPedido == null) product.SetUnitsOnOrderNull (); más

product.UnitsOnOrder = unitsOnOrder.Value;if (reorderLevel == null) product.SetReorderLevelNull (); más product.ReorderLev

= reorderLevel.Value;product.Discontinued = interrumpidas;

/ / Actualizar el registro del productoint = rowsAffected Adapter.Update (producto);

Page 46: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 46/38

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsavolver rowsAffected == 1;

}

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Delete, true)]

pública DeleteProduct bool (int ProductID){

int = rowsAffected Adapter.Delete (ProductID);

/ / Devuelve verdadero si, precisamente, una fila se ha eliminado, false en casocontrario

volver rowsAffected == 1;}

}

Los métodos que devuelva los datos- GetProducts , GetProductByProductID , GetProductsByCategoryID yGetProductBySuppliersID - ebastante sencillo ya que basta con llamar hacia abajo en el DAL. Mientras que en algunoscasos puede haber reglas de negocio que deben aplicarse a este nivel (por ejemplo, lasreglas de autorización basado en el usuario actualmente conectado o el papel al quepertenece el usuario), simplemente a dejar estos métodos como está. Para estos métodoentonces, el plomo en sangre sirve solamente como un proxy a través del cual la capa depresentación accede a los datos subyacentes de la capa de acceso a datos.

El AddProduct y UpdateProduct métodos tanto tomar como parámetros los valores de loscampos de producto y añadir un nuevo producto o actualización de uno ya existente,respectivamente. Como muchos de los productos columnas de la tabla se puedeaceptarNULL valores ( CategoryID , IdProveedor y Precio por unidad , por nombrar algunos),los parámetros de entrada para AddProduct yUpdateProduct que se asignan a tales columnausan el uso de tipos anulables . Los tipos anulables son nuevos. NET 2.0 y proporcionar utécnica para indicar si un tipo de valor que, en cambio, ser nula . En C # se puede marca

un tipo de valor como un tipo anulable añadiendo ? después de que el tipo (porejemplo, int x,? ). Se refieren a la tipos anulables sección en la Guía de programación de# para más información.

Los tres métodos devuelven un valor booleano que indica si se inserta un registro,actualizado o eliminado desde la operación no puede resultar en una fila afectada. Porejemplo, si el desarrollador de páginas llamadas DeleteProduct pasando un ProductID de uproducto no existe, el DELETE comunicado emitido a la base de datos no tendrá ningúnefecto y por lo tanto la DeleteProduct método devolverá falso .

 Tenga en cuenta que cuando se añade un nuevo producto o actualización de uno ya

existente que tomamos en los valores de campo del nuevo producto o modificar como unlista de los escalares en lugar de aceptar un ProductsRow ejemplo. Este enfoque fueescogido debido a que el ProductsRow clase se deriva de la ADO.NET DataRow de clase, queno tiene un constructor predeterminado sin parámetros. Con el fin de crear unnuevo ProductsRow ejemplo, primero debe crear una ProductsDataTable instancia y luegollamar a su NewProductRow () método (que hacemos en AddProduct ). Esta carencia se levala cabeza cuando nos referimos a la inserción y actualización de los productos utilizando ObjectDataSource. En resumen, el ObjectDataSource intenta crear una instancia de losparámetros de entrada. Si el método BLL espera un ProductsRow ejemplo, elObjectDataSource a tratar de crear uno, pero no debido a la falta de un constructor sinparámetros por defecto. Para más información sobre este problema, consulte los siguient

Page 47: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 47/38

cargos dos ASP.NET Foros: ObjectDataSources Actualización con conjuntos de datos contipos y problema con ObjectDataSource y DataSet con tipos declarados .

A continuación, en tanto AddProduct y UpdateProduct , el código creauna ProductsRow ejemplo, que se llena con los valores acaba de pasar pulg Al asignarvalores a DataColumn de una DataRow diferentes sobre el terreno las comprobaciones dvalidación puede ocurrir. Por lo tanto, de forma manual poniendo el pasado en los valorede nuevo en una fila de datos ayuda a garantizar la validez de los datos que se pasa al

método de plomo en sangre. Desgraciadamente las clases DataRow inflexible de tiposgenerado por Visual Studio no utilice tipos anulables. Por el contrario, para indicar que undeterminada DataColumn de una DataRow debe corresponder a un NULL el valor base dedatos que debe utilizar el Set ColumnName Null () método.

En UpdateProduct en primer lugar de carga en el producto de actualizaciónmediante GetProductByProductID ( productID ) . Si bien esto puede parecer un viajeinnecesario a la base de datos, este viaje extra que vale la pena probar en futurostutoriales que exploran la concurrencia optimista. Concurrencia optimista es una técnicapara asegurarse de que dos usuarios que están trabajando simultáneamente en los mismdatos no sobrescribir accidentalmente los cambios respectivos. Acaparamiento de la

totalidad del expediente también hace más fácil para crear métodos de actualización en BLL que sólo modificar un subconjunto de las columnas de DataRow. Cuando exploramosla SuppliersBLL clase vamos a ver un ejemplo.

Por último, señalar que el ProductsBLL clase tiene el atributo DataObject que se le aplica(el [System.ComponentModel.DataObject]derecho de sintaxis antes de la declaración de claseen la parte superior del archivo) y los métodos tienen atributosDataObjectMethodAttribute . El DataObject atributo marca la clase como un objetoadecuado para la unión a un control ObjectDataSource , mientras queel DataObjectMethodAttribute indica el propósito del método. Como veremos en futurostutoriales, ASP.NET 2.0 's ObjectDataSource facilita la declaración de datos de acceso deuna clase. Para ayudar a filtrar la lista de posibles clases para unirse a la ObjectDataSourasistente, por defecto, sólo las clases marcadas como DataObjects se muestran en la listadesplegable del asistente lista. El ProductsBLL clase funcionará igual de bien sin estosatributos, pero añadiendo que hace que sea más fácil trabajar con el asistente en elObjectDataSource.

Agregando las otras Clases

Con la ProductsBLL clase completa, todavía tenemos que añadir las clases para trabajar clas categorías, proveedores y empleados.Tome un momento para crear las siguientes

clases y métodos que utilizan los conceptos en el ejemplo anterior:• CategoriesBLL.cs

• GetCategories ()

• GetCategoryByCategoryID ( IdCategoría )

• SuppliersBLL.cs• GetSuppliers ()

• GetSupplierBySupplierID ( supplierID )

• GetSuppliersByCountry ( país )

• UpdateSupplierAddress ( supplierID , dirección , ciudad , país )

• EmployeesBLL.cs

Page 48: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 48/380

• GetEmployees ()

• GetEmployeeByEmployeeID ( employeeID )

• GetEmployeesByManager ( ManagerID )

El método que vale la pena destacar esla SuppliersBLL clase UpdateSupplierAddress método. Este método proporciona una interfazpara actualizar sólo información de la dirección del proveedor. Internamente, este métodse lee en el SupplierDataRow objeto con el objetivo

específico supplierID (con GetSupplierBySupplierID ), se establece la relación dirección-propiedades, y luego llama a abajo en el SupplierDataTable 's actualización

de método. El UpdateSupplierAddress método siguiente:

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, true)]UpdateSupplierAddress público bool (int supplierID, dirección de la cadena, la cadena dela ciudad, el país de cuerda){

Northwind.SuppliersDataTable proveedores = Adapter.GetSupplierBySupplierID(supplierID);

if (suppliers.Count == 0)/ / Ningún registro coincidente, devuelva falsoreturn false;

más{

Proveedor Northwind.SuppliersRow = proveedores [0];

if (dirección == null) supplier.SetAddressNull (); más supplier.Address address if (ciudad == null) supplier.SetCityNull (); más supplier.City = ciudad;if (país == null) supplier.SetCountryNull (); más supplier.Country país =;

/ / Actualiza la Dirección relacionados con un proveedor de informaciónint = rowsAffected Adapter.Update (proveedor);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsa

volver rowsAffected == 1;}

}

Refiérase a la descarga de este artículo para mi aplicación completa de las clases BLL.

Paso 2: Acceso a los conjuntos de datos con tipo através de las clases de BLL

En el primer tutorial hemos visto ejemplos de cómo trabajar directamente con el DataSet

mediante programación, pero con la adición de nuestras clases BLL, la capa depresentación deben trabajar contra la BLL en su lugar. En el AllProducts.aspx ejemplo deprimer tutorial, el ProductsTableAdapter fue utilizado para obligar a la lista de productos a GridView, como se muestra en el siguiente código:

ProductsTableAdapter productsAdapter = new ProductsTableAdapter ();GridView1.DataSource productsAdapter.GetProducts = ();GridView1.DataBind ();

Para utilizar las nuevas clases BLL, todo lo que hay que cambiar es la primera línea decódigo - simplemente reemplace elProductsTableAdapter objeto con un ProductBLL objeto:

Page 49: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 49/380

ProductsBLL productLogic = new ProductsBLL ();GridView1.DataSource productLogic.GetProducts = ();GridView1.DataBind ();

Las clases BLL también se puede acceder de forma declarativa (al igual que el DataSet)con el ObjectDataSource. Vamos a discutir el ObjectDataSource con mayor detalle en lossiguientes tutoriales.

Figura 3. La lista de los productos se muestra en un GridView

Paso 3: Agregar validación a nivel de campo a lasclases DataRow

A nivel de campo de validación se comprueba que se refiere a los valores de propiedad dlos objetos de negocio al insertar o actualizar. Algunas reglas de validación a nivel decampo de los productos incluyen:

• El ProductName campo debe ser de 40 caracteres o menos de longitud• El CantidadPorUnidad campo debe ser de 20 caracteres o menos de longitud• El ProductID , ProductName y descatalogados los campos son obligatorios, pero todos l

demás campos son opcionales• El Precio por unidad , UnitsInStock , UnitsOnOrder y ReorderLevel campos debe ser

mayor que o igual a cero

Estas reglas pueden y deben ser expresados a nivel de base de datos. El límite decaracteres en el ProductName y CantidadPorUnidadcampos son capturados por los tipos dedatos de las columnas del Productos de mesa ( nvarchar (40) y nvarchar (20) ,respectivamente). Si los campos son obligatorios y opcionales se expresan por si lacolumna de la tabla de base de datos permite NULLs. Cuatro restricciones de

Page 50: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 50/38

comprobación de que existe garantizar que sólo los valores mayores o iguales a cero sepuede hacer en elPrecioUnidad , UnitsInStock , UnitsOnOrder o ReorderLevel columnas.

Además de aplicar estas reglas en la base de datos también debería aplicarse a nivel deconjunto de datos. De hecho, la longitud del campo y si un valor es necesario u opcional yestán capturados para establecer cada DataTable de DataColumn. Para ver la existente anivel de campo de validación proporciona automáticamente, vaya al Diseñador de DataSseleccione un campo de una de las tablas de datos y luego ir a la ventana

Propiedades. Como muestra la Figura 4 se muestra la CantidadPorUnidad DataColumn enelProductsDataTable tiene una longitud máxima de 20 caracteres y permite NULL valores. Sintentamos establecer el ProductsDataRow 'sCantidadPorUnidad propiedad a un valor decadena de más de 20 caracteres una ArgumentException será lanzada.

Figura 4. El DataColumn Proporciona básica de campo de nivel de validación

Desafortunadamente, no podemos especificar los controles límites, comoel PrecioUnidad valor debe ser mayor o igual a cero, a través de la ventana Propiedades. Afin de proporcionar este tipo de validación a nivel de campo que necesitamos para crear controlador de eventos para el evento ColumnChanging DataTable . Como se mencionó eel tutorial anterior, el conjunto de datos, tablas de datos y objetos DataRow creado por eDataSet se puede ampliar mediante el uso de clases parciales. Utilizando esta técnicapodemos crear un ColumnChanging controlador de eventos para

Page 51: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 51/38

el ProductsDataTable clase. Comience por crear una clase en el App_Code carpeta con elnombre ProductsDataTable.ColumnChanging.cs .

Figura 5. Agregue una nueva clase a la App_Code Carpeta

A continuación, cree un controlador de eventos para el ColumnChanging caso de que aseguque el PrecioUnidad , UnitsInStock ,UnitsOnOrder y ReorderLevel valores de la columna (si noes NULL ) es mayor o igual a cero. Si cualquiera de las columnas como está fuera de rangolanzar una ArgumentException .

ProductsDataTable.ColumnChanging.cs

pública parcial de la clase Neptuno{

pública parcial de la clase ProductsDataTable{

público superior BeginInit vacío (){

this.ColumnChanging + = ValidateColumn;}

vacío ValidateColumn (object sender, DataColumnChangeEventArgs e){

if (e.Column.Equals (this.UnitPriceColumn)){

if (! Convert.IsDBNull (e.ProposedValue) & & (decimal) e.ProposedValue <0{

lanzar nuevos ArgumentException ("Precio por unidad no puede ser menorque cero", "Precio por unidad");

}}else if (e.Column.Equals (this.UnitsInStockColumn) | |

e.Column.Equals (this.UnitsOnOrderColumn) | |e.Column.Equals (this.ReorderLevelColumn))

{

Page 52: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 52/38

if (! Convert.IsDBNull (e.ProposedValue) & & (corto) e.ProposedValue <0){

throw new ArgumentException (String.Format ("{0} no puede ser menorque cero", e.Column.ColumnName), e.Column.ColumnName);

}}

}}

}

Paso 4: Agregar Reglas del Negocio personalizada alas clases de la BLL

Además de la validación a nivel de campo, no puede ser de alto nivel de reglas de negocpersonalizadas que involucran diferentes entidades o conceptos que no puede expresar eel ámbito de una sola columna, tales como:

• Si un producto está descatalogado, su PrecioUnidad no se pueden actualizar• País de un empleado de la residencia debe ser el mismo país de su administrador d

la residencia• Un producto no puede ser interrumpido si es el único producto proporcionado por eproveedor

Las clases BLL debe contener controles para garantizar el cumplimiento de las reglas denegocio de la aplicación. Estos controles se pueden añadir directamente a los métodos qse aplican.

Imagínese que nuestras reglas de negocio dictan que un producto no puede serinterrumpido si marcó fue el único producto de un proveedor determinado. Es decir, si elproducto X es el único producto que compramos desde el proveedor Y , no podría

marcar X como interrumpidas, si, sin embargo, el proveedor Y nos suministra con tresproductos, A , B y C , entonces se podría marcar todos y cada uno de estos, comosuspendido. Una regla de negocio extraño, pero las reglas de negocio y el sentido comúnno siempre están alineados!

Para hacer cumplir esta regla de negocio en el UpdateProducts método que empezaría porcomprobar si interrumpidas se establece en verdadero , y si es así, que nosotrosllamamos GetProductsBySupplierID para determinar la cantidad de productos quecompramos desde el proveedor de este producto. Si un solo producto se compra a esteproveedor, lanzamos unaApplicationException .

pública UpdateProduct bool (productName cadena, int? supplierID, int? IdCategoría,CantidadPorUnidad cadena,decimal? precioUnitario, corto? UnitsInStock, corto?

UnidadesEnPedido, corto? reorderLevel,bool interrumpido, int ProductID)

{Productos Northwind.ProductsDataTable = Adapter.GetProductByProductID (ProductIDif (products.Count == 0)

/ / Ningún registro coincidente, devuelva falsoreturn false;

Northwind.ProductsRow producto = productos [0];

Page 53: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 53/38

/ / Comprobación de reglas de negocio - no puede dejar de un producto que essuministrado por sólo

/ / Un solo proveedorif (suspendido){

/ / Obtener los productos que compramos de este proveedorNorthwind.ProductsDataTable productsBySupplier =

Adapter.GetProductsBySupplierID (product.SupplierID);

if (productsBySupplier.Count == 1)

/ / Este es el único producto que compramos de este proveedorthrow new ApplicationException ("No se puede marcar un producto como

discontinuado si es el único producto comprado a un proveedor");}

product.ProductName = productName;if (supplierID == null) product.SetSupplierIDNull (); más product.SupplierID =

supplierID.Value;if (IdCategoría == null) product.SetCategoryIDNull (); más product.CategoryID =

categoryID.Value;if (CantidadPorUnidad == null) product.SetQuantityPerUnitNull (); más

product.QuantityPerUnit CantidadPorUnidad =;if (precioUnitario == null) product.SetUnitPriceNull (); más product.UnitPrice =

unitPrice.Value;if (UnitsInStock == null) product.SetUnitsInStockNull (); más product.UnitsInSto= unitsInStock.Value;

if (UnidadesEnPedido == null) product.SetUnitsOnOrderNull (); másproduct.UnitsOnOrder = unitsOnOrder.Value;

if (reorderLevel == null) product.SetReorderLevelNull (); más product.ReorderLev= reorderLevel.Value;

product.Discontinued = interrumpidas;

/ / Actualizar el registro del productoint = rowsAffected Adapter.Update (producto);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsavolver rowsAffected == 1;

}

Responder a errores de validación en la capa de presentación

Al llamar a la BLL de la capa de presentación que puede decidir si se debe intentar manelas excepciones que puedan subir o dejar que ellos suben a ASP.NET (lo que elevaráel HttpApplication 's error del evento). Para controlar una excepción cuando se trabaja coel plomo en sangre mediante programación, podemos utilizar un Try ... Catch bloque, commuestra el siguiente ejemplo:

ProductsBLL productLogic = new ProductsBLL ();

Información / / Actualizar ProductID 1 detratar de{

/ / Esto no ya que estamos tratando de utilizar un/ / Precio por unidad menor que el valor 0.productLogic.UpdateProduct ("Scott té", 1, 1, null,-14m, 10, null, null, false, 1);

}catch (ArgumentException ae){

Response.Write ("Hubo un problema:" + ae.Message);}

Page 54: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 54/38

Como veremos en futuros tutoriales, control de excepciones que brotan de la BLL al utilizun control Web de datos para insertar, actualizar o eliminar datos pueden ser manipuladdirectamente en un controlador de eventos en lugar de tener que envolver el códigode prueba .. . capturar bloques.

Resumen

Una aplicación bien diseñada se hace a mano en distintas capas, cada una de ellas encieun papel particular. En el primer tutorial de esta serie de artículos que hemos creado unacapa de acceso de datos utilizando conjuntos de datos con tipo, en este tutorial hemosconstruido una capa de lógica de negocios como una serie de clases de nuestraaplicación App_Code carpeta que hacer descender a nuestro DAL. El BLL implementa elterreno y de negocios a nivel de la lógica de nuestra aplicación. Además de la creación deun BLL separado, como lo hicimos en este tutorial, otra opción es extender los métodos dlos TableAdapters "mediante el uso de clases parciales. Sin embargo, esta técnica no nospermite reemplazar los métodos existentes ni separar nuestra DAL y BLL nuestra tanlimpiamente como el enfoque que hemos tomado en este artículo.

Con la completa DAL y BLL, estamos listos para empezar en nuestra capa depresentación. En el siguiente tutorial vamos a tomar un pequeño desvío a partir de temade acceso a los datos y definir un diseño de página coherente para su uso a través de lostutoriales.

Programación feliz!

Tutorial 3: Páginas principales y navegación

de sitios Junio de 2006

Publicado: 25 de Septiembre de 2006

Scott Mitchell

Descargar el código de ejemplo ASPNET_Data_Tutorial_3_CS.exe.

En esta página

 Introducción Paso 1: Creación de la página principal Paso 2: Adición de una página de inicio al sitio web Paso 2: Creación de un mapa del sitio Paso 3: Visualización de un menú según el mapa del sitio Paso 4: Adición de elementos de navegación tipo breadcrumb Paso 5: Adición de la página predeterminada de cada sección Resumen Acerca del autor

Page 55: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 55/38

Introducción

Una característica común de los sitios web orientados al usuario es la presencia de undiseño de página lógico para todo el sitio y de un esquema de navegación. ASP.NET 2.0presenta dos características nuevas que facilitan notablemente la creación de un diseño página de todo el sitio y de un esquema de navegación: páginas principales y navegaciónde sitios. Las páginas principales permiten a los desarrolladores crear una plantilla paratodo el sitio con regiones configuradas para la edición. Esta plantilla se puede aplicar

posteriormente a las páginas ASP.NET del sitio. En dichas páginas sólo es necesarioproporcionar el contenido de las regiones que se pueden editar de las páginas principalelas demás marcas de la página principal son idénticas para el resto de páginas ASP.NETque usan dicha página. Este modelo permite a los desarrolladores definir y unificar undiseño de página de todo el sitio, de modo que facilita la creación de un aspecto cohereny garantiza que todas las páginas se pueden actualizar de una forma sencilla.

El sistema de navegación de sitios ofrece a los desarrolladores de páginas un mecanismopara definir un mapa del sitio y una API para dicho mapa que se debe consultar medianteprogramación. Los nuevos controles web de navegación (Menu, TreeView y SiteMapPath)facilitan la transformación total o parcial del mapa del sitio en un elemento de navegacióde la interfaz de usuario común. Vamos a usar el proveedor de navegación de sitiospredeterminado, lo que significa que nuestro mapa del sitio estará definido en un archivocon formato XML.

Para ilustrar estos conceptos y conseguir que nuestros sitios web de tutoriales se utilicenmás, durante esta lección vamos a definir un diseño de página para todo el sitio,implementar un mapa del sitio y agregar la interfaz de usuario de navegación. Cuandoterminemos este tutorial habremos aprendido un diseño de sitio web perfeccionado paraconstruir las páginas web del tutorial.

Page 56: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 56/38

Figura 1. Resultado final del tutorial

 Principio de la página

Paso 1: Creación de la página principal

El primer paso consiste en la creación de la página principal del sitio. En estos momentoseste sitio web está formado únicamente por DataSet con tipo (Northwind.xsd en la carpetApp_Code), clases BLL (ProductsBLL.cs, CategoriesBLL.cs, etc. en la carpeta App_Code), lbase de datos (NORTHWND.MDF en la carpeta App_Data), el archivo de configuración(Web.config) y el archivo de la hoja de estilo CSS (Styles.css). Vacié las páginas y archivoque mostraban el uso de DAL y BLL en los dos primeros tutoriales porque analizaremos

esos ejemplos con más detalle en próximos tutoriales.

Page 57: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 57/38

Figura 2. Archivos del proyecto

Para crear una página principal, haga clic con el botón secundario en el nombre delproyecto en el Explorador de soluciones y seleccione Agregar nuevo elemento. Acontinuación, seleccione el tipo de página principal de la lista de plantillas y denomínelaSite.master.

Figura 3. Adición de una página principal nueva al sitio web

Aquí se define el diseño de página para todo el sitio, en la página principal. Puede usar lavista Diseño y agregar todos los controles web o de diseño que necesite, o bien puedeagregar las marcas manualmente en la vista Código fuente. En mi página principal

Page 58: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 58/380

usohojas de estilo en cascada para definir las posiciones y estilos con configuración CSSdefinidos en el archivo externo Style.css. Mientras que no es posible deducirlo del marcamostrado a continuación, las reglas CSS se definen de tal forma que el contenido denavegación de <div> se presente en posicionamiento absoluto para que aparezca a laizquierda y tenga una profundidad fija de 200 píxeles.

Site.master

<%@ Master Language="C#" AutoEventWireup="true"CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">

<title>Working with Data Tutorials</title><link href="Styles.css" rel="stylesheet" type="text/css" />

</head><body>

<div id="wrapper">

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

<div id="header"><span class="title">Working with Data Tutorials</span>

<span class="breadcrumb">TODO: Breadcrumb will go here...</span></div>

 <div id="content">

<asp:contentplaceholder id="MainContent" runat="server"><!-- Page-specific content will go here... -->

</asp:contentplaceholder></div>

 <div id="navigation">

TODO: Menu will go here...</div>

</form></div>

</body></html>

Una página principal define el diseño de página estática y las regiones que se puedeneditar mediante las páginas ASP.NET que usan la página principal. El controlContentPlaceHolder, que se puede ver dentro del contenido de <div>, marca estas

regiones con contenido que se puede editar. Esta página principal tiene sólo unContentPlaceHolder (MainContent), pero las páginas principales pueden tener variosContentPlaceHolders.

Al cambiar a la vista Diseño con el marcado anterior, se visualiza el diseño de la páginaprincipal. Todas las páginas ASP.NET que usan esta página principal tendrán este diseñouniforme y la posibilidad de especificar el marcado para la región MainContent

Page 59: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 59/380

Figura 4. Página principal en la vista Diseño

 Principio de la página

Paso 2: Adición de una página de inicio al sitio web

Una vez que hemos definido la página principal, estamos listos para agregar páginasASP.NET al sitio web. Empecemos por agregar Default.aspx a la página de inicio del sitioweb. Haga clic con el botón secundario en el nombre del proyecto en el Explorador desoluciones y seleccione Agregar nuevo elemento. Elija la opción Formulario web de la listde plantillas y denomine el archivo Default.aspx. También debe activar la casilla deverificación "Seleccionar la página principal".

Page 60: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 60/38

Figura 5. Adición de formulario web nuevo, activación de la casilla de verificación"Seleccionar la página principal"

Después de hacer clic en el botón Aceptar, se nos pide que seleccionemos la páginaprincipal que debe usar esta página ASP.NET nueva. Es posible tener varias páginasprincipales en un proyecto, aunque ahora tengamos sólo una.

Figura 6. Selección de la página principal que debe usar la página ASP.NET 

Después de elegir la página principal, las páginas ASP.NET nuevas presentarán el marcadsiguiente:

Page 61: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 61/38

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"Title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="MainContent"Runat="Server"></asp:Content>

En la directiva @Page se hace referencia al archivo de la página principal usado(MasterPageFile="~/Site.master") y el marcado de las páginas ASP.NET contiene un contContent para todos los controles ContentPlaceHolder definidos en la página principal, conlos ContentPlaceHolderID del control asignados al control Content para unContentPlaceHolder específico. El control Content es donde se coloca la marca que quiereque aparezca en el ContentPlaceHolder correspondiente. Establezca el atributo Title de ladirectiva @Page en Inicio y escriba algún contenido de bienvenida en el control Content:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master"

AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"Title="Home" %><asp:Content ID="Content1" ContentPlaceHolderID="MainContent"Runat="Server">

<h1>Welcome to the Working with Data Tutorial Site</h1>

<p>This site is being built as part of a set of tutorials that illustrate some of thnew data access and databinding features in ASP.NET 2.0 and Visual WebDeveloper.</p>

<p>Over time, it will include a host of samples that demonstrate:</p> 

<ul>

<li>Building a DAL (data access layer),</li><li>Using strongly typed TableAdapters and DataTables</li><li>Master-Detail reports</li><li>Filtering</li><li>Paging,</li><li>Two-way databinding,</li><li>Editing,</li><li>Deleting,</li><li>Inserting,</li><li>Hierarchical data browsing,</li><li>Hierarchical drill-down,</li><li>Optimistic concurrency,</li><li>And more!</li>

</ul></asp:Content>

El atributo Title de la directiva @Page nos permite indicar el título de la página desde lapágina ASP.NET, aunque el elemento <title> no esté definido en la página principal. También podemos definir el título mediante programación utilizando Page.Title. Observetambién que las referencias de páginas principales a hojas de estilo (como Style.css) seactualizan automáticamente para que funcionen en todas las páginas ASP.NET,independientemente del directorio de la página principal donde se ubica la páginaASP.NET.

Page 62: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 62/38

Si cambiamos a la vista Diseño, podemos visualizar cómo se vería nuestra página en unexplorador. Tenga en cuenta que en la vista Diseño de la página ASP.NET sólo se puedeeditar el contenido de las regiones configuradas para ello; la marca non-ContentPlaceHolder definida en la página principal aparece en gris.

Figura 7. La vista Diseño de la página ASP.NET muestra las regiones que se pueden y no

 pueden editar 

Cuando un explorador visita una página Default.aspx, el motor ASP.NET combinaautomáticamente el contenido de página de la página principal y el contenido de ASP.NETrepresenta el contenido combinado en el formato HTML final que se envía al exploradorsolicitante. Cuando se actualiza el contenido de la página principal, todas las páginasASP.NET que usan esta página principal vuelven a combinar su contenido con el contenidnuevo de la página principal la próxima vez que se produzca una solicitud. En resumen, emodelo de página principal permite definir una única plantilla de diseño de página (páginprincipal) cuyos cambios se reflejarán de forma inmediata en todo el sitio.

Adición de páginas ASP.NET adicionales al sitio web

Vamos a dedicar unos segundos a agregar códigos auxiliares de páginas ASP.NET al sitioque contendrá finalmente las diferentes demostraciones de informes. Existirán más de 3demostraciones en total, de modo que es preferible crear sólo las primeras páginas concódigos auxiliares y no todas. Puesto que también habrá muchas categorías dedemostraciones, agregue una carpeta para las categorías con el fin de administrarlasmejor. De momento, agregue las tres carpetas siguientes:

• BasicReporting• Filtering

Page 63: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 63/38

• CustomFormatting

Por último, agregue archivos nuevos como se muestra en el Explorador de soluciones de figura 8. Acuérdese de activar la casilla de verificación "Seleccionar la página principal"después de agregar cada archivo.

Figura 8. Adición de los archivos siguientes

 Principio de la página

Paso 2: Creación de un mapa del sitio

Una de las mayores dificultades de administrar un sitio web formado por más de unascuantas páginas es poder ofrecer a los visitantes una forma directa de navegar por el sitDebemos empezar por comprobar que la estructura de navegación del sitio está definidacontinuación, dicha estructura debe estar traducida a elementos de navegación de lainterfaz de usuario, como menús o elementos tipo breadcrumb. Por último, todo esteproceso se debe mantener y actualizar mediante la adición de página nuevas al sitio y laeliminación de otras existentes. Antes de la creación de ASP.NET 2.0, los desarrolladoresencontraban solos ante la creación de la estructura de navegación de un sitio, sumantenimiento y la traducción de la misma a elementos de navegación de la interfaz deusuario. Sin embargo, gracias a ASP.NET 2.0 los desarrolladores pueden utilizar el sistemde navegación de sitios integrado, que ofrece una gran flexibilidad.

Page 64: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 64/38

El sistema de navegación de sitios de ASP.NET 2.0 ofrece a los desarrolladores un mediopara definir un mapa del sitio y posteriormente tener acceso a esta información a través una API de programación. ASP.NET incluye un proveedor de mapas del sitio que asume qlos datos del mapa se almacenarán en un archivo XML formateado de una forma concretaSin embargo, puesto que el sistema de navegación de sitios viene integrado en el modelde proveedor, se puede ampliar para que sea compatible con otras formas de serializacióde la información del mapa del sitio. El artículo de Jeff Prosise, The SQL Site Map Provider You've Been Waiting For (puede estar en inglés) explica como crear un proveedor del ma

del sitio que almacene el mapa en una base de datos de SQL Server; otra opción escrear un proveedor del mapa del sitio a partir de la estructura del sistema de archivos.

No obstante, en este tutorial vamos a usar el proveedor de mapas del sitio predeterminaque se incluye con ASP.NET 2.0. Para crear el mapa del sitio, haga clic con el botónsecundario en el nombre del proyecto en el Explorador de soluciones y seleccione Agreganuevo elemento. Mantenga el nombre Web.sitemap y haga clic en el botón Agregar

Figura 9. Adición de un mapa del sitio al proyecto

El archivo del mapa del sitio está en formato XML. Tenga en cuenta que Visual Studioincluye IntelliSense para la estructura del mapa del sitio. El archivo del mapa del sitio detener el nodo <siteMap> como nodo raíz, que debe contener exactamente un elementosecundario <siteMapNode>. Ese primer elemento <siteMapNode> puede, a su vez,contener un número indeterminado de elementos <siteMapNode> descendientes.

Defina el mapa del sitio en función de la estructura del sistema de archivos. Es decir,agregue un elemento <siteMapNode> para cada una de las tres carpetas y elementossecundarios <siteMapNode> para cada una de las páginas ASP.NET contenidas en dichascarpetas, como se muestra a continuación:

Web.sitemap:

Page 65: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 65/38

<?xml version="1.0" encoding="utf-8" ?><siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="~/Default.aspx" title="Home" description="Home"><siteMapNode title="Basic Reporting" url="~/BasicReporting/Default.aspx"

description="Basic Reporting Samples"><siteMapNode url="~/BasicReporting/SimpleDisplay.aspx" title="Simple

Display" description="Displays the complete contents of a database table." /><siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"

title="Declarative Parameters" description="Displays a subset of the contents of a

database table using parameters." /><siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"

title="Setting Parameter Values" description="Shows how to set parameter valuesprogrammatically." />

</siteMapNode> 

<siteMapNode title="Filtering Reports" url="~/Filtering/Default.aspx"description="Samples of Reports that Support Filtering">

<siteMapNode url="~/Filtering/FilterByDropDownList.aspx" title="Filter byDrop-Down List" description="Filter results using a drop-down list." />

<siteMapNode url="~/Filtering/MasterDetailsDetails.aspx" title="Master-Details-Details" description="Filter results two levels down." />

<siteMapNode url="~/Filtering/DetailsBySelecting.aspx" title="Details of

Selected Row" description="Show detail results for a selected item in a GridView." /></siteMapNode>

<siteMapNode title="Customized Formatting"url="~/CustomFormatting/Default.aspx" description="Samples of Reports WhoseFormats are Customized">

<siteMapNode url="~/CustomFormatting/CustomColors.aspx" title="FormatColors" description="Format the grid&apos;s colors based on the underlying data."/>

<siteMapNode url="~/CustomFormatting/GridViewTemplateField.aspx"title="Custom Content in a GridView" description="Shows using the TemplateFieldto customize the contents of a field in a GridView." />

<siteMapNode url="~/CustomFormatting/DetailsViewTemplateField.aspx"title="Custom Content in a DetailsView" description="Shows using the

TemplateField to customize the contents of a field in a DetailsView." /><siteMapNode url="~/CustomFormatting/FormView.aspx" title="Custom

Content in a FormView" description="Illustrates using a FormView for a highlycustomized view." />

<siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"title="Summary Data in Footer" description="Display summary data in the grid'sfooter." />

</siteMapNode>

</siteMapNode>

</siteMap>

El mapa del sitio define la estructura de navegación del sitio web; se trata de una jerarquque describe las secciones que forman el sitio. Cada elemento <siteMapNode> deWeb.sitemap representa una sección de la estructura de navegación del sitio.

Page 66: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 66/38

Figura 10. El mapa del sitio representa una estructura de navegación jerárquica (hagaclic aquí   para ampliarla)

ASP.NET expone la estructura del mapa del sitio a través de la clase SiteMap class!href(http://msdn2.microsoft.com/en-us/library/system.web.sitemap.aspx) de .NETFramework. Esta clase presenta una propiedad CurrentNode, que devuelve información dla sección que el usuario está visitando; la propiedad RootNode devuelve la raíz del mapadel sitio (Inicio en nuestro mapa del sitio). Ambas propiedades, CurrentNode y RootNode,devuelven instancias SiteMapNode!href(http://msdn2.microsoft.com/en-us/library/system.web.sitemapnode.aspx), que tienen propiedades como ParentNode,ChildNodes, NextSibling, PreviousSibling, etc., que permiten desplazarse por la jerarquíadel mapa del sitio.

 Principio de la página

Paso 3: Visualización de un menú según el mapa del sitio

Se puede tener acceso a los datos en ASP.NET 2.0 mediante lenguaje de programación,

como en ASP.NET 1.x, o bien mediante declaración a través de los controles de origen dedatos nuevos. Existen varios controles de origen de datos integrados, como el controlSqlDataSource para tener acceso a los datos de la base de datos relacional o el controlObjectDataSource para tener acceso a los datos de clases, entre otros. Incluso puedecrear controles de origen de datos personalizados.

Los controles de origen de datos desempeñan la función de proxy entre su página ASP.Ny los datos subyacentes. Por lo general, para visualizar un conjunto de datos recuperadosdel control de origen de datos, se agrega otro control web a la página y se enlaza al contde origen de datos. Para enlazar un control web a un control de origen de datos, configurla propiedad DataSourceID del control web con el mismo valor de la propiedad ID del

control de origen de datos.

ASP.NET incluye el control SiteMapDataSource, que nos permite enlazar un control web amapa de nuestro sitio web, para facilitar la administración de los datos del mapa del sitioSe usan normalmente dos controles web (TreeView y Menu) para presentar una interfaz usuario de navegación. Para enlazar los datos del mapa del sitio a uno de estos controlesagregue un SiteMapDataSource a la página y un control TreeView o Menu que tenga lapropiedad DataSourceID configurada correspondientemente. Por ejemplo, podríamosagregar un control Menu a la página principal mediante las marcas siguientes:

<div id="navigation">

Page 67: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 67/38

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>

 <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

</div>

Para tener un mayor control sobre la página con formato HTML emitida, podemos enlazacontrol SiteMapDataSource al control Repeater como sigue:

<div id="navigation"><ul>

<li><asp:HyperLink runat="server" ID="lnkHome"NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li> 

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"><ItemTemplate>

<li><asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%#

Eval("Title") %></asp:HyperLink></li>

</ItemTemplate></asp:Repeater>

</ul> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"

ShowStartingNode="false" /></div>

El control SiteMapDataSource devuelve un nivel a la jerarquía del mapa del sitio cada vezen primer lugar del nodo raíz del mapa (Inicio en nuestro mapa del sitio), a continuación los niveles siguientes (Basic Reporting, Filtering Reports y Customized Formatting) y así sucesivamente. Cuando se enlaza SiteMapDataSource a un Repeater (repetidor), ésteenumera el primer nivel devuelto y crea una instancia de ItemTemplate para cada instanSiteMapNode del primer nivel. Para tener acceso a una propiedad concreta del

SiteMapNode, podemos usar Eval( propertyName), que es la forma que tenemos de obtenlas propiedades Url y Title de SiteMapNode para el control HyperLink.

El ejemplo de Repeater anterior representa el marcado siguiente:

<li><a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>

</li>

<li><a href="/Code/Filtering/Default.aspx">Filtering Reports</a>

</li>

<li><a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>

</li>

Estos nodos del mapa del sitio (Basic Reporting, Filtering Reports y Customized Formattinforman el segundo nivel representado del mapa del sitio, no el primero. La razón es que propiedad ShowStartingNode de SiteMapDataSource está establecida en False, lo queprovoca que el SiteMapDataSource omita el nodo raíz del mapa y, en vez del primer nivedevuelve el segundo nivel de la jerarquía del mapa.

Page 68: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 68/380

Para visualizar los elementos secundarios de Basic Reporting, Filtering Reports yCustomized Formatting SiteMapNodes, podemos agregar otro Repeater al ItemTemplatedel Repeater inicial. Este segundo Repeater se enlaza a la propiedad ChildNodes de lainstancia SiteMapNode como sigue:

<asp:Repeater runat="server" ID="menu"DataSourceID="SiteMapDataSource1">

<ItemTemplate><li>

<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%#Eval("Title") %></asp:HyperLink>

<asp:Repeater runat="server" DataSource='<%# ((SiteMapNode)Container.DataItem).ChildNodes %>'>

<HeaderTemplate><ul>

</HeaderTemplate> 

<ItemTemplate><li>

<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url")%>'><%# Eval("Title") %></asp:HyperLink>

</li></ItemTemplate> 

<FooterTemplate></ul>

</FooterTemplate></asp:Repeater>

</li></ItemTemplate>

</asp:Repeater>

Estos dos Repeater generan el siguiente marcado (algunas marcas se han omitido porrazones de brevedad):

<li> <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a> <ul> <li> <ahref="/Code/BasicReporting/SimpleDisplay.aspx">Simple Display</a> </li> <li> <ahref="/Code/BasicReporting/DeclarativeParams.aspx">Declarative Parameters</a> </li><li> <a href="/Code/BasicReporting/ProgrammaticParams.aspx">Setting ParameterValues</a> </li> </ul></li><li> <a href="/Code/Filtering/Default.aspx">FilteringReports</a> ...</li><li> <a href="/Code/CustomFormatting/Default.aspx">CustomizedFormatting</a> ...</li>

Mediante los estilos CSS elegidos del libro de Rachel Andrew  The CSS Anthology: 101Essential Tips, Tricks, and Hacks (puede estar en inglés), se ha dado un estilo a loselementos <ul> y <li> cuyo marcado genera el aspecto siguiente:

Page 69: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 69/380

Figura 11. Menú formado por dos Repeater y varios estilos CSS

Este menú se encuentra en la página principal y está enlazado al mapa del sitio definido Web.sitemap, lo que significa que cualquier cambio realizado en el mapa del sitio sereflejará inmediatamente en todas las páginas que usen la página principal Site.master.

Deshabilitación de ViewState

 Todos los controles ASP.NET pueden mantener opcionalmente su estado en el estado devista, que se serializa como un campo de formulario oculto de la página HTMLrepresentada. Los controles se valen del estado de vista para tener presente su estadocambiado mediante programación en las devoluciones, como los datos enlazados a uncontrol web de datos. El estado de vista permite recordar la información durante lasdevoluciones; sin embargo, aumenta el tamaño del marcado que se debe enviar al clientpuede producir una recarga importante de la página si no se controla bien. Los controlesweb de datos, en especial el control GridView, son particularmente adecuados para agregcantidades adicionales de kilobytes al marcado de una página. Mientras que dichoincremento puede ser insignificante con respecto al ancho de banda o a los usuarios de la

Page 70: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 70/38

intranet, el estado de vista puede sumar varios segundos al viaje de ida y vuelta de losusuarios que llaman.

Para ver el efecto del estado de vista, visite una página en un explorador y vea después código fuente emitido por la página (en Internet Explorer, vaya al menú Ver y seleccione opción Código fuente). También puede activar el seguimiento de página para ver laasignación del estado de vista utilizado por los controles de la página. La información deestado de vista se serializa en un campo de formulario oculto denominado __VIEWSTATE,

que se ubica en un elemento <div> justo después de la etiqueta de apertura <form>. Elestado de vista sólo se mantiene cuando se utiliza un formulario web; si la página ASP.NEno incluye un <form runat="server"> en la sintaxis de declaración, no existirá un campode formulario oculto __VIEWSTATE en las marcas representadas.

El campo de formulario VIEWSTATE generado por la página principal suma alrededor de1.800 bytes al marcado de la página. Esta recarga adicional se debe, en primer lugar, alcontrol Repeater, porque el contenido del control SiteMapDataSource se mantiene en elestado de vista. Mientras que puede parecer que 1.800 bytes no es tanto, al usar unGridView con muchos campos y registros, el estado de vista se puede multiplicarfácilmente por 10 o más.

El estado de vista se puede deshabilitar en la misma página o mediante los controlesestableciendo la propiedad EnableViewState en false, lo que reduce el tamaño del marcarepresentado. Puesto que el estado de vista para un control web de datos mantiene losdatos enlazados a dicho control durante las devoluciones, al deshabilitar este estado parel control, se deben enlazar los datos para cada una de las devoluciones. Mientras que deesto se encarga el desarrollador de la página en la versión 1.x de ASP.NET; en ASP.NET 2los controles web de datos se deben volver a enlazar al control de origen de datos paracada devolución, si es necesario.

Si desea reducir el estado de vista de la página, establezca la propiedad EnableViewStatedel control Repeater en false. Esto se puede realizar mediante la ventana Propiedades deDiseñador o mediante declaración en la vista Código fuente. Una vez que se ha realizadocambio de Repeater mediante declaración, el marcado debe tener el siguiente aspecto:

<asp:Repeater runat="server" ID="menu"DataSourceID="SiteMapDataSource1" EnableViewState="False">

<ItemTemplate>... ItemTemplate contents omitted for brevity ...

</ItemTemplate></asp:Repeater>

Después de este cambio, el tamaño del estado de vista de la página representada se habreducido a tan sólo 52 bytes, lo que supone un ahorro del 97% en el tamaño del estado dvista. En los tutoriales de esta serie, deshabilitaremos de forma predeterminada el estadde vista de los controles web de datos para reducir el tamaño del marcado representadoEn la mayoría de los ejemplos, estableceremos la propiedad EnableViewState en false sinnecesidad de explicitarlo. Sólo hablaremos del estado de vista cuando se deba habilitarpara que el control web de datos cumpla su función.

 Principio de la página

Paso 4: Adición de elementos de navegación tipo breadcrumb

Page 71: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 71/38

Para completar la página principal vamos a agregar un elemento de navegación de lainterfaz de usuario tipo breadcrumb a cada página. El elemento breadcrumb muestrarápidamente a los usuarios su ubicación actual en la jerarquía del sitio. Agregar elementobreadcrumb en ASP.NET 2.0 es sencillo; sólo hay que añadir un control SiteMapPath a lapágina, sin necesidad de códigos.

En nuestro sitio vamos a agregar este control al <div> de encabezado:

<span class="breadcrumb"><asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>

</span>

El elemento breadcrumb muestra la página actual de la jerarquía del mapa del sitio en laque está el visitante y las páginas anteriores del nodo del mapa hasta llegar a la raíz (Inien nuestro mapa del sitio).

Figura 12. El elemento breadcrumb muestra la página actual y las anteriores de la jerarquía del mapa del sitio

 Principio de la página

Paso 5: Adición de la página predeterminada de cada sección

Los tutoriales de nuestro sitio están divididos en varias categorías, a saber, BasicReporting, Filtering, Custom Formatting, etc., con una carpeta en cada una y los tutoriale

correspondientes en forma de páginas ASP.NET dentro de dicha carpeta. Asimismo, cadacarpeta contiene una página Default.aspx. Vamos a visualizar todos los tutoriales de estasección correspondientes a esta página predeterminada. Es decir, tendríamos vínculos aSimpleDisplay.aspx, DeclarativeParams.aspx y ProgrammaticParams.aspx para la páginaDefault.aspx predeterminada de la carpeta BasicReporting. Ahora podemos volver a usarclase SiteMap y un control web de datos para ver esta información, que se corresponde cel mapa del sitio definido en Web.sitemap.

Vamos a ver una lista desordenada volviendo a usar un Repeater, pero esta vez veremostítulo y la descripción de los tutoriales. Puesto que las marcas y los códigos necesarios paello se deben repetir para cada página Default.aspx, podemos concretar esta lógica de la

interfaz de usuario en un control de usuario. Cree una carpeta denominada UserControls el sitio web y agréguele un elemento nuevo del tipo Control de usuario web denominadoSectionLevelTutorialListing.ascx; agregue también el marcado que se incluye acontinuación:

Page 72: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 72/38

Figura 13. Adición de un control de usuario web a la carpeta UserControls

SectionLevelTutorialListing.ascx

<%@ Control Language="C#" AutoEventWireup="true"CodeFile="SectionLevelTutorialListing.ascx.cs"Inherits="UserControls_SectionLevelTutorialListing" %><asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">

<HeaderTemplate><ul></HeaderTemplate><ItemTemplate>

<li><asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'Text='<%# Eval("Title") %>'></asp:HyperLink>

- <%# Eval("Description") %></li></ItemTemplate><FooterTemplate></ul></FooterTemplate>

</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;using System.Data;using System.Configuration;using System.Collections;

using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing :System.Web.UI.UserControl{

protected void Page_Load(object sender, EventArgs e){

// If SiteMap.CurrentNode is not null,

Page 73: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 73/38

// bind CurrentNode's ChildNodes to the GridViewif (SiteMap.CurrentNode != null){

TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;TutorialList.DataBind();

}}

}

En el ejemplo de Repeater anterior, enlazamos los datos de SiteMap a Repeater mediantdeclaración; sin embargo, el control de usuario SectionLevelTutorialListing lo hacemediante programación. En el controlador de eventos Page_Load, se hace unacomprobación para asegurarse de que esta es la primera visita a la página (no unadevolución) y de que la URL de esta página está asignada a un nodo del mapa del sitio. Sdicho control de usuario se usa en una página que no se corresponde a una entrada<siteMapNode>, SiteMap.CurrentNode devolverá null y no se enlazarán datos al RepeateSi damos por hecho que tenemos un CurrentNode, debemos enlazar la colecciónChildNodes a Repeater. Puesto que nuestro mapa del sitio está configurado de tal formaque la página Default.aspx de cada sección es el nodo primario de todos los tutoriales dedicha sección, este código mostrará vínculos a todos los tutoriales de la sección junto con

las descripciones correspondientes, como se muestra en la captura de pantalla siguienteUna vez que se ha creado este Repeater, abra las páginas Default.aspx de cada carpeta,vaya a la vista Diseño y arrastre el control de usuario en la superficie de diseño desde elExplorador de soluciones hasta el lugar donde desea que aparezca la lista de tutoriales.

Figura 14. Control de usuario agregado a Default.aspx 

Page 74: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 74/38

Figura 15. Enumeración de los tutoriales contenidos en Basic Reporting

 Principio de la página

Resumen

Con el mapa del sitio definido y la página principal completa, hemos conseguido unapágina con un diseño y un esquema de navegación lógicos para los tutoriales relacionado

con datos. Independientemente del número de páginas que agreguemos al sitio, el procede actualización del diseño de página de todo el sitio o de la información de navegación erápido y sencillo gracias a la centralización de la información. En concreto, la informaciónde diseño de página se define en la página principal Site.master y el mapa del sitio enWeb.sitemap. No necesitamos escribir ningún código para obtener este diseño de páginapara todo el sitio y este mecanismo de navegación y, además, hemos conseguido en VisuStudio un diseño intuitivo donde vemos lo que hay.

Después de haber terminado las capas de acceso a datos y de lógica de negocios y dehaber definido un diseño de página coherente y un mecanismo de navegación del sitio,estamos preparados para empezar con los modelos de informe más comunes. En los tres

tutoriales siguientes analizaremos las tareas de elaboración de informes básicas, es decila visualización de datos recuperados de BLL en los controles GridView, DetailsView yFormView.

Suerte con la programación.

Page 75: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 75/38

Tutorial 4: Visualización de datos con elObjectDataSource 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_4_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_4_CS.exe.

Contenido del Tutorial 4 (Visual C #)

IntroducciónPaso 1: Agregar y configurar el control ObjectDataSourcePaso 2: Agregar un control web de datos y enlace a la ObjectDataSourcecon Themes para una apariencia consistenteque muestra una grabación a una hora en el DetailsViewResumen

Introducción

Con nuestra arquitectura de aplicaciones y diseño web página completa, estamos listos

para empezar a explorar cómo llevar a cabo una serie de datos comunes y las tareas depresentación de informes relacionados. En los tutoriales anteriores hemos visto cómoenlazar mediante programación los datos de la DAL y BLL a un control de datos de la Ween una página ASP.NET. Esta sintaxis - la asignación del control web dedatos DataSource propiedad de los datos para mostrar y llamar al control DataBind() método - fue el modelo utilizado en las aplicaciones ASP.NET 1.x, y puede seguirutilizándose en el 2.0. Sin embargo, ASP.NET 2.0 's nuevos controles de origen de datosofrecen una forma declarativa para trabajar con datos. Mediante estos controles se puedenlazar los datos recuperados de la BLL creado en el tutorial anterior, sin tener que escriuna línea de código!

ASP.NET 2.0 con cinco barcos construidos en los controles de origen de datos- SqlDataSource , AccessDataSource ,ObjectDataSource , XmlDataSource y SiteMapDataSurce - aunque usted puede construir su propia controles de orígenes de datos , si esnecesario. Puesto que hemos desarrollado una arquitectura de nuestra aplicación tutoriavamos a estar utilizando el ObjectDataSource contra nuestras clases BLL.

Page 76: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 76/38

Figura 1. ASP.NET 2.0 incluye cinco controles de origen de datos

El ObjectDataSource funciona como un proxy para trabajar con algún otro objeto. Para

configurar el ObjectDataSource se especifica este objeto subyacente y cómo sus métodode mapa para los añosObjectDataSource Seleccionar ,Insertar , Actualizar y Eliminar métodos. Una vez que esteobjeto subyacente se ha especificado y sus métodos asignados a la de ObjectDataSourcepodemos enlazar el ObjectDataSource a un control de datos de la Web. ASP.NET viene comuchos controles web de datos, incluyendo los controles GridView, DetailsView,RadioButtonList y DropDownList, entre otros. Durante el ciclo de vida de página, el contrde datos de Web pueden necesitar acceder a los datos, está destinado a, que se llevará acabo mediante la invocación de su ObjectDataSource Seleccione el método, si el controlweb de datos compatible con la inserción, actualización o eliminación de las llamadaspueden hacerse a su ObjectDataSource Insertar , Actualizar o Eliminar métodos. Estasllamadas se enrutan por el ObjectDataSource a los métodos del objeto apropiadosubyacente como el siguiente diagrama se muestra.

Page 77: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 77/38

Figura 2. El ObjectDataSource sirve como un proxy

Mientras que el ObjectDataSource se puede utilizar para llamar a los métodos parainsertar, actualizar o eliminar datos, vamos a centrarse en los datos contables; tutorialesfuturo explorar el uso de los controles ObjectDataSource y datos de la web que modificanlos datos.

Paso 1: Agregar y configurar el controlObjectDataSource

Comience abriendo el SimpleDisplay.aspx página en el BasicReporting carpeta, a la vistaDiseño y, a continuación, arrastre un control ObjectDataSource del cuadro de herramienta la superficie de diseño de la página. El ObjectDataSource aparece como un cuadro gris la superficie de diseño, ya que no produce ningún código, sino que simplemente accede alos datos mediante la invocación de un método de un objeto especificado. Los datosdevueltos por un ObjectDataSource puede mostrar un control web de datos, comoGridView, DetailsView, FormView, y así sucesivamente.

Nota Como alternativa, puede que agregar el control de datos de la Web a la página yluego, de sus etiquetas inteligentes, elija la opción <Nueva entrada> datos de la listadesplegable.

Para especificar el ObjectDataSource objeto subyacente y cómo los métodos de ese objetse asignan a las de ObjectDataSource, haga clic en el enlace Configurar origen de datos dla ObjectDataSource de etiquetas inteligentes.

Page 78: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 78/380

Figura 3. Haga clic en el enlace Configuración de datos de origen de la etiquetainteligente

Esto nos lleva a la asistente Configurar origen de datos. En primer lugar, debe especificaobjeto ObjectDataSource es trabajar con ellos. Si la opción "Mostrar sólo los datos de los

componentes de" casilla está marcada, la lista desplegable que aparece en esta pantallasólo muestra los objetos que han sido decoradas con el DataObject atributo.Actualmente,nuestra lista incluye los TableAdapters del conjunto de datos con tipo y las clases BLL quehemos creado en el tutorial anterior. Si usted se olvidó de agregar el DataObject atribuyenlas clases de la capa de lógica de negocios que no los vea en esta lista. En ese caso,desactive la casilla "Mostrar sólo los componentes de datos" casilla de verificación para vtodos los objetos, que debe incluir las clases BLL (junto con las otras clases en el DataSetcon tipo - la DataTables DataRows, y así sucesivamente).

A partir de esta primera pantalla seleccione la ProductsBLL clase de la lista desplegable yhaga clic en Siguiente.

Page 79: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 79/380

Figura 4. Especificar el objeto para utilizar con el control ObjectDataSource

La siguiente pantalla del asistente le pedirá que seleccione qué método debería invocar eObjectDataSource. La lista desplegable muestra los métodos que devuelven los datos enobjeto seleccionado de la pantalla anterior. Aquí vemos GetProductsByProductID , GetProducts , GetProductsByCategoryID y GetProductsBySuppli

ID . Seleccione la GetProducts método de la lista desplegable y haga clic en Finalizar (si seha añadido laDataObjectMethodAttribute a la ProductBLL métodos 's, como se muestra en etutorial anterior, esta opción será seleccionada por defecto).

Page 80: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 80/380

Figura 5. Elegir el método para devolver los datos de la ficha Seleccionar

Configurar manualmente el ObjectDataSource

El ObjectDataSource Asistente para la configuración de orígenes de datos ofrece una formrápida de especificar el objeto que utiliza y de asociar lo que los métodos del objeto son

invocados. Puede, sin embargo, configurar el ObjectDataSource a través de suspropiedades, ya sea a través de la ventana Propiedades o directamente en el marcadodeclarativo. Basta con establecer la TypeName propiedad con el tipo de objeto subyacente utilizar, y elSelectMethod con el método que se invoca cuando se recuperan datos.

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"SelectMethod = "GetProducts"TypeName = "ProductsBLL">

</ Asp: ObjectDataSource>

Incluso si usted prefiere el asistente Configurar origen de datos puede haber ocasiones e

las que tenga que configurar manualmente el ObjectDataSource, como el asistente sólo llistas creadas por el desarrollador clases. Si desea enlazar el ObjectDataSource a una claen el NET Framework -. Tales como la clase Membership , para acceder a información decuentas de usuario, o la clase Directory para trabajar con la información del sistema dearchivos - que tendrá que configurar manualmente el ObjectDataSource propiedades.

Paso 2: Agregar un control web de datos y enlace ala ObjectDataSource

Page 81: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 81/380

Una vez que el ObjectDataSource se ha añadido a la página y configurado, estamos listospara agregar controles de datos Web a la página para mostrar los datos devueltos por el ObjectDataSource Seleccionar método. Ningún tipo de control de datos de Web se puedeenlazar a un ObjectDataSource, vamos a ver que muestra el ObjectDataSource de datos un GridView, DetailsView y FormView.

La vinculación de un GridView a la ObjectDataSource

Agregar un control GridView desde el cuadro de herramientaspara SimpleDisplay.aspx superficie de diseño 's. De la etiqueta inteligente del controlGridView, elija el control ObjectDataSource que agregó en el paso 1. Esto crearáautomáticamente una BoundField en el GridView para cada propiedad que devuelve losdatos de la de ObjectDataSource Seleccione el método (es decir, las propiedades definidapor el DataTable Productos).

Figura 6. Un GridView ha sido añadido a la página y vinculado aObjectDataSource

A continuación, puede personalizar, cambiar, o eliminar BoundFields el GridView, haga cl

en la opción Editar columnas de la etiqueta inteligente.

Page 82: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 82/380

Figura 7. Gestionar la BoundFields GridView través del cuadro de diálogo Editacolumnas

 Tómese un momento para modificar BoundFields el GridView, la eliminación dela ProductID , IdProveedor ,CategoryID , CantidadPorUnidad , UnitsInStock , UnitsOnOrder y Reo

rLevel BoundFields. Basta con seleccionar el BoundField de la lista en la parte inferior

izquierda y haga clic en el botón de eliminar (en la X roja) para eliminarlos. A continuaciócambiar el BoundFields para que el CategoryName y SupplierName BoundFields preceder alaPrecioUnidad BoundField mediante la selección de estos BoundFields y haciendo clic en flecha hacia arriba.Establecer el HeaderText propiedades de la BoundFields restode productos , categoría , proveedores y precios , respectivamente. A continuación,los precios BoundField formato de moneda mediante la creación de laBoundFieldHtmlEncode propiedad en False y su DataFormatString propiedad {0: c} . Porúltimo, en sentido horizontal alinear elprecio a la derecha y el interrumpidas casilla deverificación en el centro a través de la ItemStyle / HorizontalAlignpropiedad.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" EnableViewState="False">

<columnas><asp:BoundField DataField="ProductName" HeaderText="Product"

SortExpression="ProductName" /><asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True"

SortExpression="CategoryName" /><asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True"

SortExpression="SupplierName" /><Asp: BoundField DataField = "UnitPrice" DataFormatString = "{0: c}" HeaderText

"Precio"HtmlEncode = "false" SortExpression = "UnitPrice"><ItemStyle HorizontalAlign="Right" />

</ Asp: BoundField>

Page 83: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 83/380

<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"SortExpression="Discontinued">

<ItemStyle HorizontalAlign="Center" /></ Asp: CheckBoxField>

</ Columns></ Asp: GridView>

Figura 8. BoundFields el GridView se han personalizado

El uso de temas para un aspecto uniforme

Estos tutoriales se esfuerzan por eliminar cualquier configuración de estilo de control denivel, en lugar de utilizar hojas de estilo definidas en un archivo externo siempre que seaposible. El styles.css archivocontieneDataWebControlStyle , HeaderStyle , RowStyle y AlternatingRowStyle clases CSS que debe utilizar para dictar la aparición de la Web los datos utilizados en los controles de es

tutoriales. Para lograr esto, se podría establecer elGridView CssClass propiedad DataWebControlStyle , ysu HeaderStyle , RowStyle y AlternatingRowStylepropiedades ' CssClass propiedades enconsecuencia.

Si nos fijamos estos CssClass propiedades en el control Web tendríamos que recordarexplícitamente estos valores de propiedades para el control de todas y cada una Web dedatos en nuestro tutoriales. Un enfoque más manejable es definir el valor por defecto CSrelacionadas con las propiedades de los controles GridView, DetailsView, FormView y loscontroles de uso de un tema. Un tema es una colección de valores de propiedades de

Page 84: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 84/380

control de nivel-, las imágenes, y las clases CSS que se pueden aplicar a las páginas através de un sitio para hacer cumplir una apariencia común.

Nuestro tema no se incluyen las imágenes o archivos de CSS (vamos a dejar la hoja deestilo styles.css tal y como está definido en la carpeta raíz de la aplicación web), pero seincluyen dos Skins. A la piel es un archivo que define las propiedades por defecto de uncontrol web. En concreto, vamos a tener un archivo de la piel de los controles GridView yDetailsView, lo que indica el valor por defecto CssClass las propiedades relacionadas.

Comience por agregar un archivo de la piel a su proyecto llamado GridView.skin haciendoclic derecho sobre el nombre del proyecto en el Explorador de soluciones y elija Agregarnuevo elemento.

Figura 9. Agregar un archivo de máscara con nombre GridView.skin

Los archivos de la piel deben ser colocados en un tema, que se encuentran enel App_Themes carpeta. Ya que aún no tienen una carpeta, Visual Studio ofreceráamablemente a crear uno para nosotros cuando la adición de nuestra piel en primerlugar. Haga clic en Sí para crear el App_Theme carpeta y colocar lanueva GridView.skin archivo allí.

Figura 10. Vamos a Visual Studio Crear la App_Theme carpeta

Page 85: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 85/380

Esto creará un nuevo tema en el App_Themes GridView carpeta con el nombre con el archivde la piel GridView.skin .

Figura 11. El tema de GridView ha sido añadido a la App_Theme carpeta

Cambie el nombre del tema GridView a DataWebControls (botón derecho del ratón sobrecarpeta GridView en elApp_Theme carpeta y seleccione Cambiar nombre). A continuación,

introduzca el siguiente marcado en el GridView.skinarchivo: <asp:GridView runat="server" CssClass="DataWebControlStyle"> 

<AlternatingRowStyle CssClass="AlternatingRowStyle" /> <RowStyle CssClass="RowStyle" /> <HeaderStyle CssClass="HeaderStyle" /> 

 </ Asp: GridView> 

Esto define las propiedades por defecto para el CssClass propiedades relacionadas paracualquier GridView en cualquier página que utiliza el tema DataWebControls. Vamos aañadir otra piel para el DetailsView, un control web de datos que vamos a utilizar enbreve. Añadir un nuevo skin en el tema DataWebControls llamado DetailsView.skin y

agregue el siguiente marcado:<asp:DetailsView runat="server" CssClass="DataWebControlStyle">

<AlternatingRowStyle CssClass="AlternatingRowStyle" /><RowStyle CssClass="RowStyle" /><FieldHeaderStyle CssClass="HeaderStyle" />

</ Asp: DetailsView>

Con nuestro tema definido, el último paso es aplicar el tema a nuestra página deASP.NET. Un tema puede ser aplicado sobre una base de página por página, o para todaslas páginas de un sitio web. Vamos a usar este tema para todas las páginas del sitioweb. Para lograr esto, agregue el marcado siguiente a Web.config 's <system.web> sección:

Page 86: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 86/380

<pages styleSheetTheme="DataWebControls" />

Eso es todo lo que hay que hacer! El StyleSheetTheme valor indica que las propiedadesespecificadas en el tema debeno anular las propiedades especificadas en el nivel decontrol. Para especificar que la configuración del tema debería estar por encima ajustes dcontrol, utilice el tema de atributos en lugar de StyleSheetTheme , por desgracia, laconfiguración de tema especificado por el tema atributo no aparecen en la vista de diseñode Visual Studio. Se refieren a temas y máscaras de ASP.NET Información general y estilo

del lado del servidor mediante temas para obtener más información sobre temas ymáscaras, vea Cómo: Aplicar temas de ASP.NET para más información sobre laconfiguración de una página para uso de un tema.

Figura 12. El GridView Muestra el nombre del producto, categoría, Proveedor,Precio, información y descatalogados

Viendo un registro a la vez en el DetailsView

El GridView muestra una fila para cada registro devuelto por el control de origen de datoal que está destinado. Hay veces, sin embargo, cuando queremos mostrar un único regiso simplemente grabar uno a la vez. El control DetailsView ofrece esta funcionalidad, lo quhace como un archivo HTML <table> con dos columnas y una fila para cada columna opropiedad compartida con el control. Usted puede pensar en el DetailsView como unGridView con un registro único giro de 90 grados.

Comience por agregar un control DetailsView sobre el GridView en SimpleDisplay.aspx . Acontinuación, se unen a la misma como el control ObjectDataSource GridView. Al igual qucon los controles GridView, un BoundField se añadirá a la DetailsView para cada propieda

Page 87: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 87/380

del objeto devuelto por la de ObjectDataSource Seleccionar método. La única diferencia eque el DetailsView BoundFields están dispuestos horizontal y no vertical.

Figura 13. Añadir un DetailsView a la página y enlazarla a la ObjectDataSource

Al igual que los controles GridView, DetailsView BoundFields puede ser ajustado paraproporcionar una visualización más personalizada de los datos devueltos por elObjectDataSource. La figura 14 muestra el DetailsView después de su BoundFieldsy CssClass propiedades se han configurado para hacer su aparición similar al del ejemploGridView.

Page 88: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 88/380

Figura 14. El DetailsView muestra un solo registro

 Tenga en cuenta que el DetailsView sólo muestra el primer registro devuelto por su origede datos. Para permitir al usuario paso a través de todos los registros, uno a la vez, hayque habilitar la paginación para el DetailsView. Para ello, volver a Visual Studio y marquecasilla Habilitar paginación en la etiqueta inteligente del DetailsView es.

Page 89: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 89/380

Figura 15. Habilitar la paginación en el control DetailsView

Page 90: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 90/380

Figura 16. Con la paginación activada, el DetailsView permite al usuario vercualquier de los productos

Hablaremos más acerca de la paginación en futuros tutoriales.

Un diseño más flexible para mostrar un registro a la vez

El DetailsView es bastante rígida en la forma en que muestra cada registro devuelto por

ObjectDataSource. Podemos querer una visión más flexible de los datos. Por ejemplo, enlugar de mostrar el nombre del producto, categoría, proveedor, precio, y la información dsuspender cada uno en una fila separada, es posible que desea mostrar el nombre delproducto y el precio en un <h4> partida, con la categoría y la información de losproveedores que aparecen a continuación el nombre y el precio en un tamaño de fuentemás pequeños. Y no puede cuidar para mostrar los nombres de propiedades (producto,categoría, etc) junto a los valores.

El control FormView proporciona este nivel de personalización. En lugar de utilizar campo(como GridView y DetailsView lo hacen), el FormView utiliza plantillas, que permiten unamezcla de controles Web, HTML estático, y la sintaxis de enlace de datos . Si estáfamiliarizado con el control Repeater de ASP.NET 1.x, se puede pensar en el FormViewcomo Repeater para mostrar un único registro.

Agregue un control FormView a la SimpleDisplay.aspx superficie de diseño depágina. Inicialmente, el FormView muestra como un bloque gris, nos informa que tenemoque ofrecer, como mínimo, el control de ItemTemplate .

Figura 17. El FormView debe incluir un ItemTemplate

Page 91: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 91/380

Puede enlazar el FormView directamente a un control de origen de datos a través de laetiqueta inteligente del FormView, que creará un defecto ItemTemplate de forma automát(junto con un EditItemTemplate yInsertItemTemplate , si el control deObjectDatatSource InsertMethod y UpdateMethod se establecen las propiedades). Sinembargo, para este ejemplo vamos a enlazar los datos a los controles FormView yespecificar suItemTemplate manualmente. Comience por establecer elFormView DataSourceID propiedad de la ID del controlObjectDataSource, ObjectDataSource1 . A continuación, cree el ItemTemplate para que

muestre el nombre del producto y el precio en un <h4> elemento y los nombres decategoría y el cargador por debajo que en un tamaño de fuente más pequeños.

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"EnableViewState="False">

<ItemTemplate><h4> <% # Eval ("ProductName")%> (<% # Eval ("Precio por unidad", "{0: c}") %>)<

h4>Categoría: <% # Eval ("NombreCategoría")%>; Proveedor: <% # Eval ("SupplierName"

%></ ItemTemplate>

</ Asp: FormView>

Figura 18. El primer producto (Chai) se muestra en un formato personalizado

El <% # Eval (propertyName)%> es la sintaxis de enlace de datos. El Eval método devuelve evalor de la propiedad especificada para el objeto actual que está siendo enlazado al contFormView. Lee el artículo de Alex de Homero ha simplificado y ampliado la sintaxis deenlace de datos en ASP.NET 2.0 para obtener más información sobre las entradas y salidde enlace de datos.

Al igual que el DetailsView, FormView sólo muestra el primer registro devuelto por elObjectDataSource. Usted puede habilitar la paginación en el FormView para permitir quelos visitantes de paso a través de los productos uno a la vez.

Page 92: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 92/380

Resumen

Acceso a los datos y mostrar de una capa de lógica empresarial se puede lograr sin escriuna sola línea de código gracias a ASP.NET 2.0 's control ObjectDataSource. El controlObjectDataSource llama a un método específico de una clase y devuelve losresultados. Estos resultados se pueden mostrar en un control web de datos que estádestinado a la ObjectDataSource. En este tutorial nos fijamos en la unión GridView,

DetailsView y FormView a la ObjectDataSource.Hasta ahora sólo hemos visto cómo usar el ObjectDataSource para invocar un método sinparámetros, pero lo que si queremos llamar a un método que espera que los parámetrosde entrada, tales como el ProductBLL claseGetProductsByCategoryID ( IdCategoría ) ? Con efin de llamar a un método que espera que uno o más parámetros que debe configurar elObjectDataSource para especificar los valores de estos parámetros. Vamos a ver cómolograr esto en nuestro próximo tutorial.

Programación feliz!

Leer másPara más información sobre los temas tratados en este tutorial, consulte los siguientesrecursos:

• Crear sus propios controles de orígenes de datos• Ejemplos GridView de ASP.NET 2.0• Ha simplificado y ampliado el enlace de datos de sintaxis en ASP.NET 2.0•  Temas en ASP.NET 2.0• Del lado del servidor estilos con temas• Cómo: Aplicar temas de ASP.NET mediante programación

Tutorial 5: Parámetros declarativa 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_5_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_5_CS.exe.

Contenido del Tutorial 5 (Visual C #)

Page 93: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 93/380

IntroducciónEl uso de un valor de parámetro en el códigoEstablecer el valor del parámetro al valor de la propiedad de un control de WebResumen

Introducción

En el tutorial anterior vimos mostrar los datos con los controles GridView, DetailsView,FormView y los controles enlazados a un control ObjectDataSource que invocóel GetProducts () el método de la ProductsBLL clase. ElGetProducts () método devuelve unestablecimiento inflexible de tipos DataTable rellena con todos los registros de la base dedatos Northwind de los productos de mesa. El ProductsBLL clase contiene métodosadicionales para devolver sólo los subconjuntos de los productos - GetProductByProductID( productID ) ,GetProductsByCategoryID ( IdCategoría ) , y GetProductsBySupplierID

( supplierID ) . Estos tres métodos de esperar un parámetro de entrada que indica lamanera de filtrar la información del producto devuelto.

El ObjectDataSource se pueden utilizar para invocar métodos que esperar los parámetros

de entrada, pero para ello debemos especificar el lugar donde los valores de estosparámetros vienen. Los valores de los parámetros puede ser rígida o puede provenir deuna variedad de fuentes dinámicas, entre ellas: los valores de cadena de consulta, lasvariables de sesión, el valor de la propiedad de un control de Web en la página, o paraotros.

Para este tutorial vamos a empezar por que muestran cómo utilizar un parámetro a unvalor en el código. En concreto, veremos la adición de un DetailsView a la página quemuestra información sobre un producto específico, es decir, la mezcla Gumbo del chef Anton, que tiene un ProductID de 5. A continuación, veremos cómo configurar el valor delparámetro sobre la base de un control web. En particular, vamos a utilizar un cuadro de

texto para que el usuario escriba en un país, después de lo cual puede hacer clic en unbotón para ver la lista de proveedores que residen en ese país.

El uso de un valor de parámetro en el código

Para el primer ejemplo, empezar por la adición de un control DetailsView ala DeclarativeParams.aspx página en elBasicReporting carpeta. De la etiqueta inteligente dDetailsView, seleccione <Nuevo origen de datos> en la lista desplegable y elegir agregaun ObjectDataSource.

Page 94: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 94/380

Figura 1. Añadir un ObjectDataSource a la página

Se iniciará automáticamente el control ObjectDataSource es asistente Elegir origen dedatos. Seleccione la ProductsBLLclase a partir de la primera pantalla del asistente.

Page 95: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 95/380

Figura 2. Seleccione la ProductsBLL clase

Como queremos mostrar información sobre un producto en particular que desea utilizarel GetProductByProductID ( productID ) método.

Figura 3. Elija el GetProductByProductID (  productID  ) método

Dado que el método que hemos seleccionado incluye un parámetro, hay una pantalla mápara que el asistente, donde se nos pide que defina el valor que se utilizará para elparámetro. La lista de la izquierda muestra todos los parámetros para el métodoseleccionado. Para GetProductByProductID ( productID ) sólo hay una - productID . A laderecha se puede especificar el valor del parámetro seleccionado. El origen de parámetren la lista desplegable enumera las distintas fuentes posibles para el valor delparámetro. Dado que queremos especificar un valor en el código de 5 parael productID parámetro, deje la fuente de parámetros, como ninguno e introduzca 5 en elcuadro de texto DefaultValue.

Page 96: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 96/380

Figura 4. Un valor de parámetro en el código de 5 será utilizado parala productID parámetros

Después de completar el asistente Configurar origen de datos, marcado declarativo delcontrol ObjectDataSource incluye un parámetro de objeto en el SelectParameters colecciónpara cada uno de los parámetros de entrada esperada por el método definido en

la SelectMethod propiedad. Dado que el método que estamos usando en este ejemplo sóloespera un parámetro de entrada, parameterID , sólo hay una entradaaquí. El SelectParameterscolección puede contener cualquier clase que se deriva de la de

parámetros de clase en laSystem.Web.UI.WebControls espacio de nombres. Para valores de loparámetros en el código de la base de parámetros de clase se utiliza, pero para las opcionde fuente de otros parámetros derivados de un parámetroutilizado es la clase, tambiénpuede crear sus propios tipos de parámetros a medida , si es necesario.

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"SelectMethod = "GetProductByProductID" TypeName = "ProductsBLL"><SelectParameters>

<asp:Parameter DefaultValue="5" Name="productID" Type="Int32" /></ SelectParameters></ Asp: ObjectDataSource>

Nota Si va a seguir adelante en su propio ordenador el marcado declarativo que usteden este punto pueden incluir los valores de la InsertMethod , UpdateMethod ,y DeleteMethod propiedades, así comoDeleteParameters . El ObjectDataSource elija Asistentde origen de datos automáticamente especifica los métodos de la ProductBLL utilizar parainsertar, actualizar y eliminar, por lo menos que se elimina explícitamente esta prestacióque serán incluidos en el formato anterior.

Page 97: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 97/380

Al visitar esta página, el control web de datos llamará al de ObjectDataSource Seleccione

método que se llame a laProductsBLL clase GetProductByProductID ( productID ) utilizando método de valor en el código de 5 para elproductID parámetro de entrada. El métododevolverá un establecimiento inflexible de tipos ProductDataTable objeto que contiene unasola fila con información acerca de Mix Gumbo del chef Anton (el producto con ProductID

Figura 5. Información sobre la mezcla Gumbo del chef Anton es mostrado

Establecer el valor del parámetro al valor de lapropiedad de un control de WebEl ObjectDataSource valores de los parámetros también se puede configurar en función dvalor de un control de Web en la página. Para ilustrar esto, vamos a tener un GridView qumuestra todos los proveedores que se encuentran en un país determinado por elusuario. Para lograr esto comience a agregar un control TextBox a la página en la que elusuario puede introducir un nombre de país. Establecer este control TextBox ID propiedad CountryName . Además de agregar un control Web Button.

Page 98: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 98/380

Figura 6. Agregar un control TextBox a la página con ID CountryName

A continuación, agregue un GridView a la página y, a partir de la etiqueta inteligente, optpor añadir un nuevo ObjectDataSource. Como queremos mostrar la información deseleccionar el proveedor SuppliersBLL clase a partir de la primera pantalla delasistente. Desde la segunda pantalla, escoger el GetSuppliersByCountry ( país ) método.

Figura 7. Elija el GetSuppliersByCountry (  país ) Método

Page 99: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 99/380

Desde el GetSuppliersByCountry ( país ) método tiene un parámetro de entrada, elasistente una vez más, incluye una pantalla final para elegir el valor del parámetro. Estavez, establecer la fuente de los parámetros de control. Esto llenará la lista ControlIDdesplegable con los nombres de los controles de la página, seleccionar el CountryName elcontrol de la lista. Cuando la página se visitó por primera vez el CountryName TextBoxaparecerá en blanco, por lo que no se devuelven resultados y no se muestra. Si desea vealgunos de los resultados por defecto, cambie el cuadro de texto DefaultValue enconsecuencia.

Figura 8. Establecer el valor del parámetro a la CountryName de control de valores

Marcado declarativo del ObjectDataSource difiere un poco de nuestro primer ejemplo,utilizando un ControlParameteren lugar de los parámetros objeto. A ControlParameter tienepropiedades adicionales para especificar el ID del control Web y el valor de la propiedadque se utilizará para el parámetro ( PropertyName ). El asistente Configurar origen de datofue lo suficientemente inteligente como para determinar que, por un cuadro de texto,probablemente querrá usar el texto de propiedad para el valor del parámetro. Sin embarsi desea utilizar un valor de propiedad distinta de la de control Web se puede cambiarel PropertyName valor aquí o pulsando el botón "Mostrar propiedades avanzadas" queaparece en el asistente.

<Asp: ObjectDataSource ID = "ObjectDataSource2" runat = "server"SelectMethod = "GetSuppliersByCountry" TypeName = "SuppliersBLL"><SelectParameters>

<Asp: ControlID ControlParameter = "CountryName" name = "país" PropertyName ="Texto"

Type = "String" /></ SelectParameters>

</ Asp: ObjectDataSource>

Page 100: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 100/3

Al visitar la página por primera vez el CountryName TextBox está vacío. ElObjectDataSource Seleccione el método sigue siendo invocada por el GridView, pero unvalor de null se pasa a la GetSuppliersByCountry ( país ) método.El TableAdapter convierel nulo en una base de datos NULL valor ( DBNull.Value ), pero la consulta utilizada porelGetSuppliersByCountry ( país ) método está escrito de tal manera que no devuelvenningún valor cuando un NULLse especifica un valor para el @ CategoryID parámetro. Enresumen, no se devuelven los proveedores.

Una vez que el visitante entra en un país, sin embargo, y hace clic en el botón MostrarProveedores para causar una devolución de datos, el deObjectDataSource Seleccionar método es nueva consulta, pasando el control TextBox Textovalor como el país de los parámetros.

Figura 9. Los proveedores de Canadá para aparecer

Mostrando todos los proveedores de forma predeterminada

En lugar de mostrar ninguno de los proveedores de la primera vez que ve la página quequeramos mostrar todos losproveedores en un primer momento, lo que permite al usuarcomparar la lista introduciendo un nombre de país en el cuadro de texto. Cuando el cuadde texto está vacío, el SuppliersBLL clase GetSuppliersByCountry ( país )método se pasa eun nulo valor para su país, parámetro de entrada. Este nulo valor se transmite en el

DALGetSupplierByCountry ( país ) método, que es traducido a una base de datos NULL valpara el país @ parámetro en la siguiente consulta:

SELECCIONAR IdProveedor, CompanyName, Dirección, Ciudad, País, TeléfonoA partir de proveedoresDONDE País = @ País

La expresión País = NULL devuelve siempre False, incluso para los registros cuyo país tienuna columna NULL valor, por lo tanto, no se devuelven registros.

Page 101: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 101/3

Para volver todos los proveedores, cuando el país TextBox está vacío, podemos aumentala GetSuppliersByCountry ( país ) en el método de plomo en sangre para invocarla GetSuppliers () método cuando su parámetro país es nulay llamar a laDAL GetSuppliersByCountry ( país ) el método de lo contrario. Esto tendrá el efecto dedevolver a todos los proveedores que ningún país se ha especificado, y el subconjuntoapropiado de los proveedores cuando el parámetro país está incluido.

Cambiar el GetSuppliersByCountry ( país ) en el método SuppliersBLL clase a lo siguiente:

pública Northwind.SuppliersDataTable GetSuppliersByCountry (país de cuerda){

if (String.IsNullOrEmpty (países))GetSuppliers retorno ();

másvolver Adapter.GetSuppliersByCountry (país);

}

Con este cambio la DeclarativeParams.aspx página muestra todos los proveedores, cuandovisitó por primera vez (o cada vez que el CountryName TextBox está vacío).

Figura 10. Todos los proveedores ahora se muestran por defecto

Resumen

Con el fin de utilizar los métodos con parámetros de entrada, tenemos que especificar lovalores de los parámetros en el ObjectDataSource SelectParameters colección. Diferentestipos de parámetros de permitir el valor del parámetro que se obtiene de diferentesfuentes. El tipo de parámetro por defecto usa un valor en el código, pero con la mismafacilidad (y sin una línea de código) valores de los parámetros se pueden obtener de la

Page 102: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 102/3

cadena de consulta, las variables de sesión, cookies, e incluso los valores introducidos poel usuario de los controles Web en la página.

Los ejemplos que hemos visto en este tutorial se muestra cómo utilizar los valores delparámetro declarativo. Sin embargo, puede haber ocasiones en que tenemos que utilizaruna fuente de parámetro que no está disponible, como la fecha y hora actuales, o bien, snuestro sitio es mediante la suscripción, el ID de usuario del visitante. Para estosescenarios se pueden establecer los valores de parámetros mediante programación ante

de que el método ObjectDataSource invocar su objeto subyacente. Vamos a ver cómolograr esto en el siguiente tutorial.

Programación feliz!

Tutorial 6: Configuración de la programaciónObjectDataSource valores de los parámetros

 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_6_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_6_CS.exe.

Contenido del Tutorial 6 (Visual C #)

IntroducciónPaso 1: Agregar un método a EmployeesTableAdapterPaso 2: Agregar la GetEmployeesByHiredDateMonth (mes) Método de la Capa de lógica dnegociosPaso 3: Los empleados Viendo WhoseHiring aniversario es este mesResumen

IntroducciónComo vimos en el tutorial anterior, un número de opciones están disponibles para pasar forma declarativa los valores de parámetros a los métodos del ObjectDataSource. Si elvalor del parámetro no es modificable, viene de un control de Web en la página, o encualquier otra fuente que sea legible por una fuente de datos de parámetros de objeto, poejemplo, que el valor puede estar sujeto a los parámetros de entrada, sin escribir una solínea de código.

Page 103: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 103/3

Puede haber ocasiones, sin embargo, cuando el valor del parámetro proviene de algunafuente no representaba ya a uno de los incorporados en la fuente de datos de parámetros

objetos. Si nuestro sitio apoyado las cuentas de usuario que puede ser que deseeestablecer el parámetro sobre la base de la sesión iniciada en el ID de usuario visitante. Oes posible que necesitemos personalizar el valor del parámetro antes de enviarlo junto coel método de objeto subyacente del ObjectDataSource es.

Cada vez que el ObjectDataSource Seleccione el método que se invoca la primera

ObjectDataSource plantea su evento Selecting . Se basa el método de objetoObjectDataSource es invocada. Una vez que complete la ObjectDataSourceseleccionadaevento incendios (Figura 1 ilustra esta secuencia de eventos). Los valores de parámetroque se pasa en el método del objeto subyacente ObjectDataSource se puede configurar opersonalizar en un controlador de eventos para la selección de eventos.

Figura 1. El ObjectDataSource es seleccionada y Selección de fuego eventosanteriores y posteriores a su método objeto subyacente se invoca

En este tutorial veremos la adición de un método a nuestra DAL y BLL que acepta un soloparámetro de entrada - Mesde tipo int - y devuelve un EmployeesDataTable objeto poblado aquellos empleados que tienen su aniversario de contratación especificados enel mes . Nuestro ejemplo se establece este parámetro mediante programación basado en mes en curso, que muestra una lista de los "aniversarios de los empleados del mes".

Vamos a empezar!

Paso 1: Agregar un método a EmployeesTableAdapter

Para nuestro primer ejemplo, tenemos que añadir un medio para recuperar aquellosempleados cuyo HireDate se produjo en un mes determinado. Para proporcionar estafuncionalidad, de acuerdo con nuestra arquitectura que tenemos que crear primero unmétodo en el EmployeesTableAdapter que se asigna a la correcta declaración SQL. Para log

Page 104: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 104/3

esto, empezar por abrir el conjunto de datos con tipo Neptuno. Haga clic derecho enel EmployeesTableAdapteretiqueta y elija Agregar consulta.

Figura 2. Añadir una nueva consulta a la EmployeesTableAdapter

Optar por añadir una instrucción SQL que devuelve filas. Al llegar a la Especifique un SELE

de la pantalla por defecto de la Declaración SELECCIONAR declaración dela EmployeesTableAdapter ya estará cargado. Sólo tienes que añadir enel DONDE cláusula: DONDE DATEPART (m, HireDate) = @ mes . DATEPART es una función de T-Sque devuelve una parte de una fecha determinada fecha y hora de tipo, en este casoestamos utilizando DATEPART para devolver el mes de la Fecha de contratación de la colum

Page 105: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 105/3

Figura 3. Devuelva sólo los registros en que los HireDate columna es menor que igual a la HiredBeforeDate @parámetro

Por último, cambiar el FillBy y GetDataBy nombres de los métodosde FillByHiredDateMonth yGetEmployeesByHiredDateMonth , respectivamente.

Page 106: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 106/3

Figura 4. Elegir nombres de los métodos más apropiados que FillBy y GetDataBy

Haga clic en Finalizar para completar el asistente y volver a la superficie de diseño delDataSet. ElEmployeesTableAdapter ahora debe incluir un nuevo conjunto de métodos paraacceder a los empleados contratados en un mes determinado.

Page 107: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 107/3

Figura 5. Los nuevos métodos aparecen en la superficie de diseño del DataSet

Paso 2: Agregar la GetEmployeesByHiredDateMonth (  mes ) Método de

la capa de lógica de negociosDesde nuestra arquitectura de la aplicación utiliza una capa separada de la lógica denegocio y la lógica de acceso a datos, tenemos que añadir un método a nuestra BLL, quellama a la DAL para recuperar los empleados contratados antes de una fechadeterminada. Abra el EmployeesBLL.cs y agregue el siguiente método:

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Select, false)]pública Northwind.EmployeesDataTable GetEmployeesByHiredDateMonth (int mes){

volver Adapter.GetEmployeesByHiredDateMonth (mes);}

Al igual que con nuestros métodos de esta clase, GetEmployeesByHiredDateMonth( meses ) simplemente llama a abajo en el DAL y devuelve los resultados.

Paso 3: Visualización de los empleados WhoseHirinaniversario es este mes

Page 108: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 108/3

El paso final de este ejemplo es para mostrar aquellos empleados cuya contrataciónaniversario este mes. Comience por la adición de un GridView ala ProgrammaticParams.aspx página en el BasicReporting carpeta y añadir un nuevoObjectDataSource como origen de datos. Configurar el ObjectDataSource para utilizarel EmployeesBLL clase con elSelectMethod establecido en GetEmployeesByHiredDateMonth

( meses ) .

Figura 6. Utilice el EmployeesBLL clase

Page 109: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 109/3

Figura 7. Seleccione Desde el GetEmployeesByHiredDateMonth (  meses ) método

La última pantalla nos pide que nos proporcionan los meses el valor del parámetro de lafuente. Puesto que vamos a establecer este valor mediante programación, dejan la fuentde los parámetros establecidos para la opción Ninguno predeterminado y haga clic enFinalizar.

Page 110: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 110/3

Figura 8. Deje el Origen de los parámetros establecido en Ninguno

Esto creará un parámetro de objeto en el ObjectDataSource SelectParameters colección queno tiene un valor especificado.

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"

OldValuesParameterFormatString = "original_ {0}"SelectMethod = "GetEmployeesByHiredDateMonth" TypeName = "EmployeesBLL"><SelectParameters>

<asp:Parameter Name="month" Type="Int32" /></ SelectParameters>

</ Asp: ObjectDataSource>

Para establecer este valor mediante programación, es necesario crear un controlador deeventos para el ObjectDataSource Selección de eventos. Para lograr esto, vaya a la vistaDiseño y haga doble clic en el ObjectDataSource. También puede seleccionar elObjectDataSource, vaya a la ventana Propiedades, y haga clic en el icono de rayo. Acontinuación, haga doble clic en el cuadro de texto junto a la Selección de evento o escrib

el nombre del controlador de eventos que desee utilizar.

Page 111: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 111/3

Figura 9. Haga clic en el icono de rayo en la ventana Propiedades de la lista deeventos de un control web

Ambos enfoques agregar un nuevo controlador de eventos para elObjectDataSource Selección de eventos para el código subyacente de la página de laclase. En este controlador de eventos que pueden leer y escribir a los valores de losparámetros utilizando e.InputParameters [ parameterName ] , donde parameterName es el valdel nombre de atributo en la <asp:Parameter> archivo ( InputParameters colección tambiénpuede ser indexado de forma ordinal, como en e.InputParameters [ índice ] ). Paraestablecer el mes de parámetros para el mes en curso, añada lo siguiente a la Selección

de controlador de eventos:

protected void ObjectDataSource1_Selecting (object sender,ObjectDataSourceSelectingEventArgs e)

{e.InputParameters ["mes"] = DateTime.Now.Month;

}

Al visitar esta página a través de un navegador, podemos ver que un solo empleado fuecontratado este mes (marzo) - Laura Callahan, que ha estado con la compañía desde 199

Page 112: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 112/3

Figura 10. Aquellos empleados cuyos aniversarios de este mes aparecen

Resumen

Mientras que valores de los parámetros del ObjectDataSource 'típicamente puedenestablecerse mediante declaración, sin necesidad de una línea de código, es fácil deconfigurar los valores de parámetros mediante programación. Todo lo que necesitamoshacer es crear un controlador de eventos para el ObjectDataSource Selección de eventosque se dispara antes de que el método del objeto subyacente se invoca, y establecermanualmente los valores de uno o más parámetros a través de

la InputParameters colección.En este tutorial se concluye la sección de Información Básica. El siguiente tutorial se inicila sección de filtrado y Maestro-Detalles de los escenarios, en el que veremos las técnicapara que el visitante pueda filtrar los datos y ver los detalles de un informe de maestro eun informe de los detalles.

Programación feliz!

 

Tutorial 7: Maestro / Detalle de filtrado con uDropDownList 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_7_CS.exe código de ejemplo.

Page 113: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 113/3

Descargar el código de ejemplo ASPNET_Data_Tutorial_7_CS.exe.

Contenido del Tutorial 7 (Visual C #)

Introducción

Paso 1: Visualización de las categorías en un DropDownListPaso 2: Agregar el GridView ProductosResumen

Introducción

Un tipo común de informe es el informe maestro / detalle , en la que el informe comienzapor mostrar un conjunto de "maestro" registros. El usuario puede profundizar en uno de registros maestros, con lo que ver que registro maestro de "detalles". Maestro / detalle loinformes son una opción ideal para la visualización de las relaciones uno-a-muchos, comoun informe que muestra todas las categorías y que permite al usuario seleccionar unacategoría en particular y mostrar sus productos asociados. Además, el maestro / detalle informes son útiles para mostrar información detallada de todo "ancho" tablas (los quetienen una gran cantidad de columnas). Por ejemplo, el "maestro" a nivel de un informemaestro / detalle puede mostrar sólo el nombre del producto y el precio unitario de losproductos en la base de datos, y la perforación hacia abajo en un producto en particular muestran los campos de productos adicionales (categoría, proveedor, la cantidad porunidad, y así sucesivamente).

Hay muchas maneras con las que puede ser un informe maestro / detalleimplementado. Durante este y los tutoriales siguientes tres vamos a ver una variedad deinformes de maestro / detalle. En este tutorial vamos a ver cómo se muestran los registromaestros en un control DropDownList y los detalles del elemento de la lista seleccionadaen un GridView. En particular, este tutorial de maestro / detalle informe lista de categoríay productos.

Paso 1: Visualización de las categorías en unDropDownList

Nuestro maestro / detalle el informe mostrará una lista de las categorías en unDropDownList, con los productos del elemento de la lista seleccionada se muestra más

abajo en la página en un GridView. La primera tarea por delante de nosotros, entonces, eque las categorías mostradas en una lista desplegable. Abrael FilterByDropDownList.aspxpágina en el filtrado de carpeta, arrastre en un DropDownLisdesde el Cuadro de herramientas al diseñador de la página, y establecer su identificació

de la propiedad de las categorías . A continuación, haga clic en el enlace Elegir origen dedatos de la etiqueta inteligente del DropDownList. Esto mostrará el origen de datos delasistente de configuración.

Page 114: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 114/3

Figura 1. Especificar origen de datos de la DropDownList

Optar por añadir un nuevo ObjectDataSource llamado CategoriesDataSource que invocael CategoriesBLL claseGetCategories () método.

Page 115: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 115/3

Figura 2. Agregar un nuevo ObjectDataSource nombre CategoriesDataSource

Figura 3. Optar por utilizar el CategoriesBLL clase

Page 116: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 116/3

Figura 4. Configurar el ObjectDataSource Utilizar el GetCategories () Método

Después de configurar el ObjectDataSource todavía tenemos que especificar qué campo datos de origen se debe mostrar en DropDownList y que se debe asociar el valor delelemento de lista. Tienen la CategoryName campo como la pantalla y CategoryID como el vade cada elemento de la lista.

Figura 5. Tienen el DropDownList Mostrar el CategoryName campo y eluso CategoryID como el valor

En este momento tenemos un control DropDownList que se rellena con los registros dela Categorías de mesa (todo se logró en unos seis segundos). La figura 6 muestra nuestroprogreso hasta ahora cuando se ve a través de un navegador.

Page 117: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 117/3

Figura 6. Un listas desplegables las categorías actuales

Paso 2: Agregar el GridView Productos

Este último paso en nuestro maestro / detalle del informe es hacer una lista de losproductos asociados con la categoría seleccionada. Para lograr esto, agregar un GridViewla página y crear un nuevo llamado ObjectDataSourceproductsDataSource . Tienenla productsDataSource sacrificio controlar sus datos dela ProductsBLL claseGetProductsByCategoryID ( IdCategoría ) método.

Page 118: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 118/3

Figura 7. Seleccione la GetProductsByCategoryID ( IdCategoría ) Método

Después de elegir este método, el asistente ObjectDataSource nos pide el valor para elmétodo de categoryID parámetro. Para utilizar el valor de los seleccionados categorías punDropDownList establecer el origen de los parámetros para el Control y la ControlIDde Categorías .

Page 119: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 119/3

Figura 8. Establecer el IdCategoría parámetro en el valor delas Categorías DropDownList

 Tómese un momento para ver nuestro progreso en un navegador. La primera vez que visla página, los productos pertenecen a la categoría seleccionada (Bebidas) se muestran(como se muestra en la Figura 9), pero cambiando el DropDownList no actualiza los

datos. Esto se debe a una devolución de datos debe ocurrir para que el control GridViewpara actualizar. Para lograr esto tenemos dos opciones (ninguno de los cuales es necesaescribir ningún código):

• Establecer el DropDownList categorías de propiedad AutoPostBack enTrue. (Esto se puede hacer seleccionando la opción Habilitar AutoPostBack en laetiqueta inteligente del DropDownList.) Esto dará lugar a una devolución de datoscuando el elemento seleccionado del control DropDownList es cambiado por elusuario.Por lo tanto, cuando el usuario selecciona una nueva categoría de laDropDownList una devolución de datos se producirá y el GridView se actualiza conlos productos de la categoría que acaba de seleccionar. (Este es el método que heutilizado en este tutorial.)

• Agregue un control Web Button al lado de la lista desplegable. Establezcasu texto para actualizar la propiedad o algo similar. Con este enfoque, el usuariotendrá que seleccionar una nueva categoría y haga clic en el botón. Al hacer clic enel botón hará una devolución de datos y actualizar el GridView a la lista de losproductos de la categoría seleccionada.

Las figuras 9 y 10 ilustran el informe maestro / detalle en la acción.

Page 120: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 120/3

Figura 9. La primera vez que visita la página, los productos de bebida esmostrado

Page 121: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 121/3

Figura 10. Selección de un nuevo producto (Produce) automáticamente causa uPostBack, Actualización del GridView

Adición de una "- Seleccione una categoría -" elemento de lista

La primera vez que visita la FilterByDropDownList.aspx página del artículo de laDropDownList categorías de la primera lista (de consumo) está seleccionada por defecto,que muestra los productos de bebidas en el GridView. En lugar de mostrar los productos

la primera categoría, nos puede querer tener lugar un elemento seleccionado deDropDownList que dice algo como, "- Seleccione una categoría -".

Para agregar un nuevo elemento de lista a la DropDownList, vaya a la ventana Propiedady haga clic en los puntos suspensivos en los elementos de la propiedad. Añadir un nuevoelemento de lista con el texto "- Seleccione una categoría -" y el valor -1 .

Figura 11. Añadir a "- Elegir una categoría -" elemento de lista

Alternativamente, usted puede agregar el elemento de la lista, añadiendo el siguientemarcado de la DropDownList:

<Asp: DropDownList ID = "categorías" runat = "server" AutoPostBack = "True" DataSourceID"categoriesDataSource"

DataTextField = "CategoryName" DataValueField = "CategoryID" EnableViewState ="false">

<asp:ListItem Value="-1"> - Elija una Categoría - </ asp: ListItem></ Asp: DropDownList>

Además, necesitamos establecer el control DropDownList AppendDataBoundItems en True,porque cuando las categorías están obligados a la DropDownList desde elObjectDataSource que van a sobrescribir los elementos de la lista manualmente añadidosi AppendDataBoundItems no es cierto.

Page 122: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 122/3

Figura 12. Establecer el AppendDataBoundItems propiedad en True

Después de estos cambios, la primera vez que visita la página del "- Seleccione unacategoría -" está seleccionada y no son productos que se muestran.

Figura 13. En la página inicial de carga de productos se muestran No

La razón no se muestran cuando los productos debido a que el "- Seleccione una categor-" elemento de la lista se selecciona se debe a que su valor es -1 y no hay productos en lbase de datos con un CategoryID de -1 . Si este es el comportamiento que usted desea,luego que haya terminado en este momento! Sin embargo, si desea mostrar todos losdelas categorías cuando el "- Seleccione una categoría -" elemento de la lista está

Page 123: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 123/3

seleccionado, vuelva a laProductsBLL clase y personalizar el GetProductsByCategoryID( IdCategoría ) el método para que se invoca elGetProducts () método si el pasadoen categoryID parámetro es menor que cero:

pública Northwind.ProductsDataTable GetProductsByCategoryID (int categoryID){

if (IdCategoría <0)GetProducts retorno ();

más

volver Adapter.GetProductsByCategoryID (IdCategoría);}

La técnica utilizada es similar al enfoque que se utiliza para mostrar a todos losproveedores de vuelta en el tutorial de parámetros declarativa , aunque en este ejemploestamos usando un valor de -1 para indicar que todos los registros deben ser recuperadoen lugar de nulo . Esto se debe a la categoryID parámetro de la GetProductsByCategoryID

(IdCategoría ) método espera como valor entero que se pasa en, mientras que en eltutorial de parámetros declarativa que pasaban en un parámetro de la cadena de entrad

La figura 14 muestra una captura de pantalla de FilterByDropDownList.aspx cuando el "-

Seleccione una categoría -" está seleccionada. Aquí, todos los productos se muestran pordefecto y el usuario puede reducir la pantalla eligiendo una categoría específica.

Figura 14. Todos los productos están ahora aparece de forma predeterminada

Resumen

Cuando se muestran los datos jerárquicamente relacionados, a menudo ayuda a presentlos datos con maestro / detalle los informes, de los cuales el usuario puede comenzar de

Page 124: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 124/3

leer los datos desde la parte superior de la jerarquía y profundizar en los detalles. En estetutorial vamos a examinar la construcción de una simple relación maestro / detalles delinforme que muestra los productos de una categoría seleccionada. Esto se logró mediantel uso de un DropDownList para la lista de categorías y un GridView para los productos qupertenecen a la categoría seleccionada.

En el siguiente tutorial vamos a tomar la interfaz DropDownList un paso más allá, utilizandos DropDownLists.

Programación feliz!

 

Tutorial 8: Maestro / Detalle de filtrado condos DropDownLists 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_8_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_8_CS.exe.

Contenido del Tutorial 8 (Visual C #)

IntroducciónPaso 1: Crear y llenar el control DropDownList CategoríasPaso 2: Visualización de los productos de la categoría seleccionada en un DropDownListSegundoPaso 3: El uso de un DetailsView para mostrar los detalles para el producto seleccionadoResumen

Introducción

En el tutorial anterior se analizó cómo mostrar un maestro sencillo / detalles del informecon un DropDownList único poblado de las categorías y un GridView que muestra losproductos que pertenecen a la categoría seleccionada. Este modelo funciona bien cuandse informe mostrando los registros que tienen una relación uno a muchos y puedeampliarse fácilmente para trabajar en escenarios que incluyen múltiples relaciones uno-amuchos. Por ejemplo, un sistema de entrada de pedidos que tiene tablas que corresponda clientes, pedidos y líneas de pedido. Un cliente determinado puede tener varios pedidocon cada pedido que consta de varios elementos. Estos datos pueden ser presentados alusuario con dos DropDownLists y un GridView. El DropDownList primero tendría unelemento de la lista para cada cliente en la base de datos con el contenido de la segunda

Page 125: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 125/3

es que los pedidos de los clientes seleccionados.Un GridView que la lista de artículos delínea de la orden seleccionada.

Aunque la base de datos Northwind incluye el cliente canónica / pedido / información dedetalles en su clientes ,pedidos y detalles del pedido tablas, estas tablas no se refleja ennuestra arquitectura. Sin embargo, todavía puede ilustrar con dos DropDownListsdependientes. El DropDownList primera lista de las categorías y el segundo de losproductos que pertenecen a la categoría seleccionada. A continuación, aparecerá una lis

DetailsView los detalles del producto seleccionado.

Paso 1: Crear y llenar el control DropDownListCategorías

Nuestro primer objetivo es agregar el control DropDownList que se enumeran lascategorías. Estas medidas se examinarán en detalle en el tutorial anterior, pero seresumen aquí para completar.

Abra el MasterDetailsDetails.aspx página en el filtrado de carpeta, agregue unDropDownList a la página, configurar su ID de propiedad de las categorías , a continuacióhaga clic en el enlace Configurar datos de origen en su etiqueta inteligente. Desde elAsistente para configuración de orígenes de datos optar por añadir una nueva fuente dedatos.

Figura 1. Añadir un nuevo origen de datos para el DropDownList

Page 126: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 126/3

La nueva fuente de datos debe, naturalmente, ser un ObjectDataSource. El nombre de esnuevo ObjectDataSourceCategoriesDataSource y tienen que invocarel CategoriesBLL objeto GetCategories () método.

Figura 2. Optar por utilizar el CategoriesBLL clase

Page 127: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 127/3

Figura 3. Configurar el ObjectDataSource Utilizar el GetCategories () Método

Después de configurar el ObjectDataSource todavía tenemos que especificar qué campo datos de origen se debe mostrar en la Categorías DropDownList y que uno debe estarconfigurado como el valor del elemento de la lista.Establecer el CategoryName campo comola pantalla y CategoryID como el valor de cada elemento de la lista.

Page 128: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 128/3

Figura 4. Tienen el DropDownList Mostrar el CategoryName campo y eluso CategoryID como el valor

En este momento tenemos un control DropDownList ( categorías ) que se rellena con losregistros de la Categoríasde mesa. Cuando el usuario elige una nueva categoría de laDropDownList vamos a querer una devolución de datos que se produzcan con el fin de

actualizar la DropDownList producto que vamos a crear en el paso 2. Por lo tanto, marcaopción Habilitar AutoPostBack de la categoría de etiquetas inteligentes DropDownList.

Page 129: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 129/3

Figura 5. Habilitar AutoPostBack para la Categorías DropDownList

Paso 2: Visualización de los productos de lacategoría seleccionada en un DropDownList segund

Con la Categorías DropDownList completado, el siguiente paso es mostrar un DropDownLde los productos que pertenecen a la categoría seleccionada. Para lograr esto, añadir otr

DropDownList a la página denominadaProductsByCategory . Al igual que conlas Categorías DropDownList, crear un nuevo ObjectDataSource paraelProductsByCategory DropDownList llamado ProductsByCategoryDataSource .

Page 130: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 130/3

Figura 6. Añadir un nuevo origen de datos para el ProductsByCategory DropDownL

Figura 7. Crear un nuevo ObjectDataSource nombre ProductsByCategoryDataSource

Page 131: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 131/3

Desde el ProductsByCategory DropDownList necesita mostrar sólo los productos quepertenecen a la categoría seleccionada, tiene la ObjectDataSource invocarla GetProductsByCategoryID ( IdCategoría ) método de laProductsBLL objeto.

Figura 8. Optar por utilizar el ProductsBLL clase

Page 132: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 132/3

Figura 9. Configurar el ObjectDataSource Utilizar el GetProductsByCategoryID( IdCategoría ) Método

En el último paso del asistente es necesario especificar el valor dela categoryID parámetro. Asigne a este parámetro para el elemento seleccionado dela Categorías DropDownList.

Page 133: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 133/3

Figura 10. Tire de la categoryID  valor del parámetro de las Categorías DropDownLi

Con el ObjectDataSource configurado, lo único que queda es para especificar qué campode datos de origen se utilizan para la visualización y el valor de los elementos delDropDownList. Mostrar el ProductName campo y utilizar elProductID campo como valor.

Page 134: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 134/3

Figura 11. Especificar los campos de fuente de datos utilizada para elDropDownList ListItem s ' Texto y Valor delas propiedades

Con el ObjectDataSource y ProductsByCategory DropDownList configurado nuestra páginamostrará dos DropDownLists: la primera lista de todas las categorías, mientras que lasegunda mostrará una lista de los productos que pertenecen a la categoría

seleccionada. Cuando el usuario selecciona una nueva categoría de la DropDownList enprimer lugar, una devolución de datos se producirá y el DropDownList segundo será derebote, que muestra los productos que pertenecen a la categoría que acaba deseleccionar. Figuras 12 y 13 muestranMasterDetailsDetails.aspx en acción cuando se ve através de un navegador.

Page 135: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 135/3

Figura 12. La primera vez que visita la página, la categoría de bebidas seselecciona

Page 136: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 136/3

Figura 13. Elegir una categoría diferente Muestra de Productos de la nuevacategoría de

Actualmente, el productsByCategory DropDownList, si se cambian, no , no causa unadevolución de datos. Sin embargo, queremos que se produzca una devolución de datos uvez que añadimos un DetailsView para mostrar los detalles del producto seleccionado(paso 3). Por lo tanto, marca la casilla Habilitar AutoPostBackdel productsByCategory etiqueta inteligente DropDownList.

Figura 14. Activar la función de AutoPostBack parael productsByCategory DropDownList

Paso 3: El uso de un DetailsView para mostrar losdetalles del producto seleccionado

El último paso consiste en mostrar los detalles para el producto seleccionado en unDetailsView. Para lograr esto, agregue un DetailsView a la página, configurar su ID de lapropiedad Detalles del producto , y crear un nuevo ObjectDataSource para ello. Configuraeste ObjectDataSource a retirar sus datos de la ProductsBLL claseGetProductByProductID( productID ) método que utiliza el valor seleccionado dela ProductsByCategoryDropDownList para el valor de la productID parámetro.

Page 137: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 137/3

Figura 15. Optar por utilizar el ProductsBLL clase

Page 138: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 138/3

Figura 16. Configurar el ObjectDataSource Utilizar el GetProductByProductID(  productID  ) Método

Figura 17. Tire de la  productID  valor del parámetro dela ProductsByCategory DropDownList

Usted puede optar por presentar cualquiera de los campos disponibles en elDetailsView. He optado por quitar elProductID , IdProveedor y CategoryID campos y reordeny dar formato a los campos restantes. Además, me limpió el DetailsView de altura y anch

de las propiedades, permitiendo que el DetailsView para ampliar el ancho necesario paramostrar sus mejores datos en lugar de tener que limita a un tamaño especificado. Elmarcado completo aparece a continuación:

<Asp: DetailsView ID = "Detalles del producto" runat = "server" AutoGenerateRows = "falsDataKeyNames = "ProductID"

DataSourceID = "ObjectDataSource1" EnableViewState = "false"><Fields>

<asp:BoundField DataField="ProductName" HeaderText="Product"SortExpression="ProductName" />

<asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True"SortExpression="CategoryName" />

<asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True"SortExpression="SupplierName" />

<asp:BoundField DataField="QuantityPerUnit" HeaderText="Qty/Unit"SortExpression="QuantityPerUnit" />

<Asp: BoundField DataField = "UnitPrice" DataFormatString = "{0: c}" HeaderText "Precio"

HtmlEncode = "false" SortExpression = "UnitPrice" /><asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"

SortExpression="Units En Stock" />

Page 139: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 139/3

<asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder"SortExpression="Units En Order" />

<asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel"SortExpression="Reorder Level" />

<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"SortExpression="Discontinued" />

</ Campos></ Asp: DetailsView>

 Tómese un momento para probar el MasterDetailsDetails.aspx página en un navegador. Aprimera vista puede parecer que todo está funcionando como se desee, pero hay unproblema sutil. Cuando se elige una nueva categoría de la ProductsByCategory DropDownLse actualiza para incluir los productos de la categoría seleccionada, pero losDetalles delproducto DetailsView siguió mostrando la información del producto anterior. El DetailsViewse actualiza la hora de elegir un producto diferente para la categoríaseleccionada. Además, si se prueba suficientemente a fondo, usted encontrará que si ustelige continuamente nuevas categorías (como la elección de las bebidas delascategorías DropDownList, a continuación, condimentos, luego Confecciones) cadaselección de categoría de otras causas de la Detalles del producto DetailsView se actuali

Para ayudar a concretar este problema, veamos un ejemplo concreto. La primera vez quevisita la página de la categoría de bebidas se ha seleccionado y los productos relacionadse cargan en el ProductsByCategory DropDownList. Chai es el producto seleccionado y susdetalles se muestran en los Detalles del producto DetailsView, como se muestra en laFigura 18.

Figura 18. Detalles del producto seleccionado se muestran en un DetailsView

Page 140: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 140/3

Si cambia la selección de categorías de bebidas de condimentos, se produce unadevolución de datos y laProductsByCategory DropDownList se actualiza en consecuencia,pero todavía DetailsView muestra los detalles de Chai.

Figura 19. Detalles del producto previamente seleccionado se sigue mostrando

Elegir un nuevo producto de que se actualice la lista de los DetailsView como seesperaba. Si tienes que elegir una nueva categoría después de cambiar el producto, elDetailsView de nuevo, no se actualizará. Sin embargo, si en lugar de elegir un nuevoproducto que ha seleccionado una nueva categoría, la actualización se DetailsView. Lo qen el mundo que está pasando aquí?

El problema es un problema de sincronización del ciclo de vida de la página. Cada vez quse solicita una página que procede a través de una serie de medidas como surepresentación. En uno de estos pasos los controles ObjectDataSource comprobar para vsi alguno de sus SelectParameters valores han cambiado. Si es así, el control de elemento

Web enlazado a datos a los ObjectDataSource sabe que necesita para actualizar supantalla. Por ejemplo, cuando una nueva categoría se selecciona,el ProductsByCategoryDataSource ObjectDataSource detecta que sus valores de losparámetros han cambiado y la ProductsByCategory DropDownList se vuelve a enlazar,conseguir los productos de la categoría seleccionada.

El problema que surge en esta situación es que el punto en el ciclo de vida de la páginaque la ObjectDataSources comprobar los parámetros modificados se produce antes de lareconsolidación de los controles web de datos asociado.Por lo tanto, al seleccionar unanueva categoría de la ProductsByCategoryDataSource ObjectDataSource detecta un cambioel valor de su parámetro. El ObjectDataSource utiliza el Detalles del producto DetailsView

Page 141: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 141/3

sin embargo, no se nota cualquiera de estos cambios ya queel ProductsByCategory DropDownList aún no ha sido de rebote. Más tarde en el ciclo de vidde la ProductsByCategory DropDownList vuelve a enlazar con su ObjectDataSource, tomanlos productos de la categoría que acaba de seleccionar. Mientras queel ProductsByCategory valor DropDownList ha cambiado, el Detalles del producto DetailsVide ObjectDataSource ya ha hecho su cheque el valor del parámetro, por lo tanto, elDetailsView muestra sus resultados anteriores. Esta interacción se ilustra en la Figura 20

Figura 20. El ProductsByCategory cambios DropDownList valor después de la Detall

del producto DetailsView de ObjectDataSource busca cambios

Para solucionar este problema tenemos que volver a vincular explícitamente el Detalles producto DetailsView después de la ProductsByCategory DropDownList se haobligado. Podemos lograr esto mediante una llamada alDetalles del producto DetailsViewde DataBind () cuando el método ProductsByCategory DropDownListDataBound activa elevento. Agregue el código de controlador de eventos siguiente ala MasterDetailsDetails.aspxclase de código subyacente página (consulte Ajuste de laprogramación ObjectDataSource valores de los parámetrospara una discusión acerca decómo agregar un controlador de eventos):

protected void ProductsByCategory_DataBound (object sender, EventArgs e){

ProductDetails.DataBind ();}

Después de esta llamada explícita a los Detalles del producto DetailsView de DataBind

() método se ha añadido, el tutorial funciona como se espera. Figura 21 pone de relievecómo esta situación cambió remediar nuestro problema antes.

Page 142: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 142/3

Figura 21. Los Detalles del producto DetailsView está explícitamente se renuevacuando la ProductsByCategoryDropDownList DataBound evento se activa

Resumen

El DropDownList sirve como un elemento de interfaz de usuario ideal para los informes dmaestro / detalle, donde hay una relación uno-a-muchos entre el maestro y los registros detalle. En el tutorial anterior vimos cómo utilizar un solo DropDownList para filtrar losproductos exhibidos por la categoría seleccionada. En este tutorial hemos reemplazado eGridView de productos con un DropDownList, y utilizó un DetailsView para mostrar los

detalles del producto seleccionado. Los conceptos discutidos en este tutorial se puedeextender fácilmente a los modelos de datos que implican múltiples relaciones uno-a-muchos, tales como clientes, pedidos y artículos de la orden. En general, siempre se pueañadir un DropDownList para cada uno de los "uno" entidades en las relaciones uno-a-muchos.

Programación feliz!

 

Page 143: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 143/3

Tutorial 9: Maestro / Detalle de filtrado en dopáginas 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_9_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_9_CS.exe.

Contenido del Tutorial 9 (Visual C #)

IntroducciónPaso 1: Agregar páginas SupplierListMaster.aspx y ProductsForSupplierDetails.aspx a lacarpeta de FiltrosPaso 2: Visualización de la lista de proveedores SupplierListMaster.aspxPaso 3: Listado de los productos del proveedor en ProductsForSupplierDetails.aspxResumen

Introducción

En los últimos dos tutoriales vimos cómo mostrar maestro / detalle los informes en una

única página web con DropDownLists para mostrar el "maestro" de registros y un controlGridView o DetailsView para mostrar los "detalles".Otro patrón común utilizado para losinformes de maestro / detalle es que los registros maestros en una página Web y los datoque aparecen en otro. Una página web del foro, como el Foro ASP.NET , es un gran ejempde este patrón en la práctica. En los foros de ASP.NET se compone de una variedad deforos - Primeros pasos, formularios web, controles de datos de presentación, y así sucesivamente. Cada foro está compuesto de muchos hilos y cada hilo se compone de unnúmero de puestos. En la página principal ASP.NET Forums, los foros están en la lista. Alhacer clic en un foro te lleva a un ShowForum.aspx página, que muestra los hilos de eseforo. Del mismo modo, al hacer clic en un hilo te lleva a ShowPost.aspx , que muestra losmensajes en el hilo que se hizo clic.

En este tutorial vamos a poner en práctica este modelo mediante el uso de un GridView ala lista de los proveedores en la base de datos. Cada fila de proveedores en el GridViewcontiene un enlace Ver los productos que, al hacer clic, llevará al usuario a otra página qenumera los productos que el proveedor seleccionado.

Paso 1:Agregar SupplierListMaster.aspx yProductsForSupplierDetails.aspx Páginaspara el filtrado de la carpeta

Page 144: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 144/3

Al definir el diseño de página en el tercer tutorial hemos añadido una serie de "arranque"las páginas de laBasicReporting , filtrado , y CustomFormatting carpetas. Sin embargo, noañadimos una página de inicio para este tutorial en ese momento, así que tome unmomento para agregar dos nuevas páginas la lista de "maestro" registros (losproveedores), mientras que ProductsForSupplierDetails.aspx mostrará los productos para proveedor seleccionado.

Al crear estas dos nuevas páginas para tener la certeza de los asocian con

el Site.master página principal.

Figura 1. Agregue el SupplierListMaster.aspx y ProductsForSupplierDetails.aspx páginaal filtrado de la carpeta

Además, al añadir nuevas páginas al proyecto, asegúrese de actualizar el archivo de mapdel sitio, Web.sitemap , en consecuencia. Para este tutorial sólo tiene queañadir SupplierListMaster.aspx página para el mapa del sitio con el contenido XML siguiencomo un niño de los informes de filtrado <siteMapNode> elemento:

<SiteMapNode url = "~ / Filtros / SupplierListMaster.aspx" title = "Maestro / Detalle endos páginas" description = "Los registros maestros en una página, los registros dedetalles en otra." />

Nota Usted puede ayudar a automatizar el proceso de actualización del archivo de madel sitio al agregar nuevas páginas ASP.NET con K. Scott Allen 's gratis Visual Studio Mapdel Sitio Macro .

Paso 2: Visualización de la lista deproveedores SupplierListMaster.aspx

Page 145: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 145/3

Con la SupplierListMaster.aspx y ProductsForSupplierDetails.aspx páginas creadas, elsiguiente paso es crear el GridView de los proveedores en SupplierListMaster.aspx . Añadun GridView a la página y se unen a un nuevo ObjectDataSource. Este ObjectDataSourcedebe utilizar el SuppliersBLL clase GetSuppliers () para devolver a todos los proveedores.

Figura 2. Seleccione la SuppliersBLL clase

Page 146: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 146/3

Figura 3. Configurar el ObjectDataSource Utilizar el GetSuppliers () Método

 Tenemos que incluir un enlace titulado Productos Ver en cada fila GridView que, al hacerclic, lleva al usuario aProductsForSupplierDetails.aspx pasar en la filaseleccionada IdProveedor valor a través de la cadena de consulta.Por ejemplo, si el usuarhace clic en el enlace Ver Productos para el proveedor de Tokio comerciantes (que tiene

unIdProveedor valor de 4), deben ser enviados a ProductsForSupplierDetails.aspx?IdProveedor = 4 .

Para lograr esto, agregue una HyperLinkField al GridView, lo que añade un hipervínculo acada fila de GridView. Empiece haciendo clic en el enlace Editar columnas de la etiquetainteligente del GridView. A continuación, seleccione la HyperLinkField de la lista en la parsuperior izquierda y haga clic en Añadir para incluir la lista de campos HyperLinkField en GridView.

Page 147: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 147/3

Figura 4. Añadir un HyperLinkField al GridView

El HyperLinkField puede ser configurado para utilizar el mismo texto o valores de la URL enlace en cada fila GridView, o puede basar estos valores en los datos de los valores límipara cada fila en particular. Para especificar un valor estático en todas las filas de utilizarHyperLinkField de texto o NavigateUrl propiedades. Como queremos que el texto del enla

sea el mismo para todas las filas, defina el HyperLinkField de texto propiedad para ver loproductos.

Page 148: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 148/3

Figura 5. Establecer el HyperLinkField de texto Propiedad para ver los producto

Para establecer los valores de texto o URL que se basan en los datos subyacentesvinculados a la fila de GridView, especificar los campos de datos, los valores de texto odirección URL debe ser retirado dela DataTextField oDataNavigateUrlFields propiedades. DataTextField sólo se puede establec

a un único campo de datos ;DataNavigateUrlFields , sin embargo, se puede establecer enuna lista separada por comas de los campos de datos.Con frecuencia necesidad de basartexto o la URL de una combinación del valor de la fila actual de datos de campo y algunamarcas estáticas. En este tutorial, por ejemplo, queremos que las URL de los vínculos deHyperLinkField a serProductsForSupplierDetails.aspx? IdProveedor = supplierID ,donde supplierID cada fila GridView es elIdProveedor valor. Tenga en cuenta quenecesitamos valores estáticos y manejo de datos-en este caso:laProductsForSupplierDetails.aspx IdProveedor =? parte de la URL del enlace es estático,mientras que elsupplierID parte es basada en datos como su valor es cada fila de lapropia IdProveedor valor.

Para indicar una combinación de valores estáticos y controladas por datos, utiliceel DataTextFormatString yDataNavigateUrlFormatString propiedades. En estas propiedadesentrar en el marcado estático como sea necesario y luego usar el marcador {0} , dondedesea que el valor del campo especificado enla DataTextField oDataNavigateUrlFields propiedades aparezcan. Siel DataNavigateUrlFields propiedad tiene áreas de uso múltiple especificado {0} dondedesea que el valor del campo introduce por primera vez, {1} para el valor del campo ensegundo lugar, y así sucesivamente.

Aplicando esto a nuestro tutorial, es necesario establecerel DataNavigateUrlFields propiedad IdProveedor , ya que es el campo de datos cuyo valor

Page 149: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 149/3

tenemos que personalizar en una fila por fila, yel DataNavigateUrlFormatStringpropiedad ProductsForSupplierDetails.aspx? IdProveedor =

{0} .

Figura 6. Configurar el HyperLinkField para incluir el URL del enlace adecuada,basándose en el IdProveedor

Después de añadir el HyperLinkField, no dude en modificar y reordenar los campos delGridView. El marcado siguiente se muestra el control GridView después de que he hechoalgunas pequeñas adaptaciones a nivel de campo.

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"DataKeyNames = "IdProveedor"

DataSourceID = "ObjectDataSource1" EnableViewState = "false"><columnas>

<Asp: DataNavigateUrlFields HyperLinkField = "IdProveedor"DataNavigateUrlFormatString = "? ProductsForSupplierDetails.aspx IdProveedor = {0}"

Text = "Ver los productos" /><asp:BoundField DataField="CompanyName" HeaderText="Company"

SortExpression="CompanyName" /><asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /><asp:BoundField DataField="Country" HeaderText="Country"

SortExpression="Country" /></ Columns>

</ Asp: GridView>

 Tome un momento para ver el SupplierListMaster.aspx página a través de unnavegador. Como muestra la Figura 7 se muestra, la página cuenta actualmente con todolos proveedores, incluyendo un enlace Ver productos. Al hacer clic en el enlace Ver los

Page 150: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 150/3

productos le llevará a ProductsForSupplierDetails.aspx , pasando por elproveedorIdProveedor en la cadena de consulta.

Figura 7. Cada fila de proveedores contiene un enlace Ver Productos

Paso 3: Listado de los productos del proveedorenProductsForSupplierDetails.aspx

En este punto el SupplierListMaster.aspx página está enviando a los

usuarios ProductsForSupplierDetails.aspx , pasando por el proveedorseleccionado IdProveedor en la cadena de consulta. Último paso del tutorial es mostrar losproductos en un GridView en ProductsForSupplierDetails.aspx cuya IdProveedor es igual ala IdProveedor pasa a través de la cadena de consulta. Para lograr esto empezar por laadición de un GridView a laProductsForSupplierDetails.aspx página, con un nuevo controlObjectDataSource llamadoProductsBySupplierDataSource que invocael GetProductsBySupplierID ( supplierID ) método de laProductsBLL clase.

Page 151: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 151/3

Figura 8. Agregar un nuevo ObjectDataSource nombre ProductsBySupplierDataSourc

Figura 9. Seleccione la ProductsBLL clase

Page 152: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 152/3

Figura 10. Tienen el ObjectDataSource Invocar el GetProductsBySupplierID

( supplierID  ) Método

El último paso del asistente Configurar origen de datos nos pide que proporcione el origede laGetProductsBySupplierID ( supplierID ) método supplierID parámetro. Para utilizar evalor de cadena de consulta, establecer el origen de los parámetros de cadena de consu

y escriba el nombre del valor de cadena de consulta para su uso en el cuadro de textoQueryStringField ( IdProveedor ).

Page 153: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 153/3

Figura 11. Llenar el supplierID  valor del parámetro de la IdProveedor valor decadenas de consulta

Eso es todo lo que hay que hacer! La figura 12 muestrael ProductsForSupplierDetails.aspx página cuando es visitado por clic en el enlace de Tokicomerciantes de SupplierListMaster.aspx .

Page 154: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 154/3

Figura 12. Los productos suministrados por operadores de Tokio para aparecer

Visualización de información de proveedores en ProductsForSupplierDetails.as

Como muestra la Figura 12, el ProductsForSupplierDetails.aspx página se limita a enumerlos productos que son suministrados por el IdProveedor especificado en la cadena deconsulta. Se ha enviado directamente a esta página, sin embargo, no saben que la figura12 se muestran los productos de los comerciantes de Tokio. Para remediar esta situación

nos puede mostrar la información del proveedor en esta página también.

Comience por la adición de un FormView por encima de la GridView productos. Crear unnuevo control ObjectDataSource llamado SuppliersDataSource que invocael SuppliersBLL clase GetSupplierBySupplierID (supplierID ) método.

Figura 13. Seleccione la SuppliersBLL clase

Page 155: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 155/3

Figura 14. Tienen el ObjectDataSource Invocar el GetSupplierBySupplierID

( supplierID  ) Método

Al igual que con el ProductsBySupplierDataSource , tienen la supplierID parámetro asignadoel valor de laIdProveedor valor de cadena de consulta.

Page 156: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 156/3

Figura 15. Llenar el supplierID  valor del parámetro de la IdProveedor valor decadenas de consulta

Cuando se une el FormView al ObjectDataSource en la vista Diseño, Visual Studio creaautomáticamente la FormViewItemTemplate , InsertItemTemplate y EditItemTemplate concontroles Label y TextBox Web para cada uno de los campos de datos que devuelve el

ObjectDataSource. Ya que sólo desea mostrar la información del proveedor no dude eneliminar la InsertItemTemplate y EditItemTemplate . A continuación, editar el ItemTemplatepara que muestre el nombre del proveedor de la compañía en un <h3> elemento y ladirección, ciudad, país y número de teléfono bajo el nombre de la empresa. Si lo prefierepuede configurar manualmente el FormView DataSourceID y crear elItemTemplate marcadocomo lo hicimos en la Visualización de datos con el ObjectDataSource tutorial.

Después de estas ediciones marcado declarativo del FormView debe ser similar a losiguiente:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"

DataSourceID="suppliersDataSource" EnableViewState="False"><ItemTemplate>

<h3> <% # Eval ("CompanyName")%> </ h3><p>

<Asp: Label = ID "DirecciónEtiqueta" runat = "server" Text ='<%# Bind("Dirección") %>'></ asp: Label> <br />

<Asp: Label = ID "CityLabel" runat = "server" Text ='<%# Bind ("Ciudad")%>'></ asp: Label>,

<Asp: Label = ID "CountryLabel" runat = "server" Text ='<%# Bind ("País")%>'></ asp: Label> <br />

Teléfono:<Asp: Label = ID "PhoneLabel" runat = "server" Text ='<%# Bind ("Teléfono")

%>'></ asp: Label>

Page 157: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 157/3

</ P></ ItemTemplate>

</ Asp: FormView>

La figura 16 muestra una captura de pantalla de la ProductsForSupplierDetails.aspx págindespués de que el proveedor de información detallada anteriormente se ha incluido.

Figura 16. La lista de productos incluye un resumen sobre los proveedores

Aplicar los toques finales para la ProductsForSupplierDetails.aspx interfaz deusuario

Para mejorar la experiencia del usuario de este informe, hay un par de adiciones quedebemos hacer a laProductsForSupplierDetails.aspx página. Actualmente, la única maneraque un usuario puede pasar de laProductsForSupplierDetails.aspx página volver a la lista proveedores es hacer clic en el botón de su navegador de vuelta. Vamos a agregar un

control HyperLink a la ProductsForSupplierDetails.aspx página que enlazaconSupplierListMaster.aspx , en otra manera para que el usuario vuelva a la lista maestra

Page 158: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 158/3

Figura 17. Agregar un control HyperLink para permitir al usuario volvera SupplierListMaster.aspx

Si el usuario hace clic en el enlace Ver los productos a un proveedor que no tiene ningúntipo de productos, laProductsBySupplierDataSource ObjectDataSourceen ProductsForSupplierDetails.aspx no devolverá ningún resultado. El GridView vinculado ObjectDataSource no hacer cualquier tipo de código que resulta en una región en blanco la página en el navegador del usuario. Para comunicarse con mayor claridad para elusuario que no hay productos asociados con el proveedor seleccionado, podemosestablecer el GridView EmptyDataText propiedad al mensaje que desee que aparezca cuansurge una situación así. He creado esta propiedad a "No hay productos que ofrece esteproveedor ..."

Por defecto, todos los proveedores en la base de datos Neptuno proporcionar al menos uproducto. Sin embargo, para este tutorial he modificado manualmente los productos de latabla para que el proveedor Caracoles Nouveaux ya no está asociado con ningúnproducto. La figura 18 muestra la página de detalles de caracoles Nouveaux después deeste cambio se ha hecho.

Page 159: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 159/3

Figura 18. El usuario queda informado de que el proveedor no proporciona losproductos

Resumen

Mientras maestro / detalle los informes pueden mostrar tanto el maestro y los registros ddetalles en una sola página, en muchos sitios web que se separan en dos páginas web. Eeste tutorial nos fijamos en cómo implementar un informe maestro / detalle con losproveedores que figuran en un GridView en la página de "maestro" web y los productosasociados que figuran en los "detalles" de la página. Cada fila de proveedores en la págin

web master contenía un enlace a la página de detalles que pasan a lo largo de lafila IdProveedor valor. Específico de este tipo de fila enlaces se pueden agregar fácilmenteusando HyperLinkField el GridView.

En la página de detalles la obtención de dichos productos para el proveedor especificadollevó a cabo mediante la invocación de la ProductsBLL clase GetProductsBySupplierID

( supplierID ) método. El supplierID valor del parámetro se especifica mediantedeclaración utilizando la cadena de consulta como el origen de parámetro. También nosfijamos en cómo se muestran los detalles del proveedor en la página de detalles con unFormView.

Nuestro siguiente tutorial es el último de los informes de maestro / detalle. Vamos a vercómo mostrar una lista de productos en un GridView donde cada fila tiene un botón deselección. Al hacer clic en el botón de selección se mostrarán los detalles de ese productoen un control DetailsView en la misma página.

Programación feliz!

Page 160: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 160/3

Tutorial 10: Maestro / detalle utilizando unGridView maestro seleccionable con unDetailView Detalles 

Scott Mitchell

06 2006

Descargue el ASPNET_Data_Tutorial_10_CS.exe código de ejemplo.

Descargar el código de ejemplo ASPNET_Data_Tutorial_10_CS.exe.

Contenido del Tutorial 10 (Visual C #)IntroducciónPaso 1: Creación de un GridView seleccionablePaso 2: Mostrar la información del producto seleccionado en un DetailsViewResumen

Introducción

En el tutorial anterior vimos cómo crear un informe maestro / detalle utilizando dos páginweb: un "maestro" de la página web, de la que nos muestra la lista de proveedores, y un"detalles" de la página web que lista los productos ofrecidos por los seleccionadosproveedor. Este formato de dos páginas el informe se pueden resumir en una solapágina. Este tutorial tiene un GridView cuyas filas incluyen el nombre y el precio de cadaproducto, junto con un botón de selección. Al hacer clic en el botón de selección de undeterminado producto hará que sus detalles se muestran en un control DetailsView en lamisma página.

Page 161: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 161/3

Figura 1. Al hacer clic en el botón de selección muestra los detalles del Product

Paso 1: Creación de un GridView seleccionableRecordemos que en las dos páginas maestro / detalle el informe que cada registro maestincluye un hipervínculo que, cuando se hace clic, envía al usuario a la página de detalles pasar la fila pulsada la IdProveedor valor en la cadena de consulta. Un enlace de hipertextse añadió a cada fila de GridView utilizando un HyperLinkField. Para la página de un solomaestro / detalles del informe, que tendrá un botón para cada fila de GridView que, cuanse hace clic, muestra los detalles. El control GridView se puede configurar para incluir unbotón Seleccionar para cada fila que provoca una devolución de datos y marca la fila comel GridView SelectedRow .

Comience por agregar un control GridView a la DetailsBySelecting.aspx página enel filtrado de carpeta, estableciendo su ID de propiedad de ProductsGrid . A continuaciónagregue un nuevo ObjectDataSource llamadoAllProductsDataSource que invocael ProductsBLL clase GetProducts () método.

Page 162: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 162/3

Figura 2. Crear un ObjectDataSource nombre AllProductsDataSource

Figura 3. Utilice el ProductsBLL clase

Page 163: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 163/3

Figura 4. Configurar el ObjectDataSource para invocar la GetProducts () Método

Modificar los campos del GridView la eliminación de todos, peroel ProductName y PrecioUnidad BoundFields. Además, no dude en modificar estos BoundFielsegún sea necesario, como el formato de la PrecioUnidad BoundField como moneda decambio y la HeaderText propiedades de la BoundFields. Estos pasos pueden llevarse a cab

gráficamente, haciendo clic en el enlace Editar columnas de la etiqueta inteligente delcontrol GridView, o por la configuración manual de la sintaxis declarativa.

Page 164: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 164/3

Figura 5. Quitar todas las Pero el ProductName y PrecioUnidad BoundFields

El margen de beneficio final para el GridView es el siguiente:

<Asp: GridView ID = "ProductsGrid" runat = "server" AutoGenerateColumns = "False"DataKeyNames = "ProductID"

DataSourceID = "AllProductsDataSource" EnableViewState = "false">

<columnas><asp:BoundField DataField="ProductName" HeaderText="Product"

SortExpression="ProductName" /><Asp: BoundField DataField = "UnitPrice" DataFormatString = "{0: c}" HeaderText

"Precio unitario"HtmlEncode = "false" SortExpression = "UnitPrice" />

</ Columns></ Asp: GridView>

A continuación, tenemos que marcar el GridView como seleccionable, lo que añadirá unbotón Seleccionar para cada fila. Para lograr esto, simplemente marque la casilla deverificación Habilitar la selección en la etiqueta inteligente del GridView.

Page 165: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 165/3

Figura 6. Hacer filas del GridView seleccionable

Marcar la opción Habilitar Selección añade un CommandField a la ProductsGrid GridView

con su ShowSelectButtonestablecer la propiedad en True. Esto se traduce en un botónSeleccionar para cada fila de la GridView, como ilustra la Figura 6. De manerapredeterminada, los botones de selección se representan como LinkButtons, pero puedeutilizar los botones o ImageButtons lugar a través de la CommandFieldde ButtonType propiedad.

<Asp: GridView ID = "ProductsGrid" runat = "server" AutoGenerateColumns = "False"DataKeyNames = "ProductID"

DataSourceID = "AllProductsDataSource" EnableViewState = "false"><columnas>

<asp:CommandField ShowSelectButton="True" /><asp:BoundField DataField="ProductName" HeaderText="Product"

SortExpression="ProductName" /><Asp: BoundField DataField = "UnitPrice" DataFormatString = "{0: c}" HeaderText

"Precio unitario"HtmlEncode = "false" SortExpression = "UnitPrice" />

</ Columns></ Asp: GridView>

Cuando botón Seleccionar de una fila GridView se hace clic en una devolución de datos ysobreviene el GridViewSelectedRow propiedad se actualiza. Además delos SelectedRow propiedad, el control GridView proporcionalaSelectedIndex , SelectedValue y SelectedDataKey propiedades. El SelectedIndex propiedd devuelve el índice de la fila seleccionada, mientras que

Page 166: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 166/3

el SelectedValue y SelectedDataKey propiedades valores de retorno basada en elGridView propiedad DataKeyNames .

El DataKeyNames propiedad se utiliza para asociar uno o más valores de los campos de datocon cada fila y se utiliza comúnmente para la identificación exclusiva de la información datributos de los datos subyacentes en cada fila GridView. El SelectedValue propiedaddevuelve el valor de la primera DataKeyNames campo de datos para la fila seleccionada enel SelectedDataKey propiedad devuelve la fila seleccionada de DataKey objeto, que contiene

todos los valores de los campos de datos de clave especificados para esa fila.

El DataKeyNames propiedad se establece automáticamente en el campo de identificaciónúnica de datos (s) al enlazar un origen de datos a un GridView, DetailsView, FormView omediante el Diseñador. Mientras que esta propiedad se ha establecido para nosotros deforma automática en los tutoriales anteriores, los ejemplos que han funcionado sinelDataKeyNames propiedad especificada. Sin embargo, para el GridView seleccionable en estutorial, así como tutoriales para el futuro en el que vamos a examinar la inserción,actualización y eliminación, el DataKeyNames propiedad se debe establecercorrectamente. Tómese un momento para asegurarse de que suGridView DataKeyNames propiedad se establece en ProductID .

Vamos a ver nuestro progreso hasta el momento a través de un navegador. Tenga encuenta que el control GridView muestra el nombre y el precio de todos los productos juntcon un LinkButton Select. Al hacer clic en el botón Seleccionar provoca una devolución dedatos. En el paso 2 veremos cómo tener un DetailsView responder a esta devolución,mostrando los detalles del producto seleccionado.

Figura 7. Cada producto contiene una fila Seleccione LinkButton

Destacando la fila seleccionada

Page 167: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 167/3

El ProductsGrid GridView tiene una SelectedRowStyle propiedad que se puede utilizar paradictar el estilo visual de la fila seleccionada. Se utiliza correctamente, esto puede mejorala experiencia del usuario de forma más clara que muestra la fila de GridView estáseleccionado actualmente. Para este tutorial, vamos a tener la fila seleccionada seresaltará con un fondo amarillo.

Al igual que con nuestros tutoriales anteriores, vamos a tratar de mantener los valoresestéticos relacionados define como las clases CSS. Por lo tanto, crear una nueva clase CS

en styles.css llamado SelectedRowStyle .

. SelectedRowStyle{

background-color: Amarillo;}

Para aplicar esta clase CSS a la SelectedRowStyle propiedad de todos los GridViews ennuestra serie de tutoriales, editar el GridView.skin la piel en el DataWebControls Temáticopara incluir a la SelectedRowStyle configuración como se muestra a continuación:

<asp:GridView runat="server" CssClass="DataWebControlStyle">

<AlternatingRowStyle CssClass="AlternatingRowStyle" /><RowStyle CssClass="RowStyle" /><HeaderStyle CssClass="HeaderStyle" /><SelectedRowStyle CssClass="SelectedRowStyle" />

</ Asp: GridView>

Con esta adición, la fila de GridView seleccionado se resalta con un color de fondo amaril

Figura 8. Personalizar la apariencia de la fila seleccionada de GridView Conel SelectedRowStyle Propiedad

Page 168: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 168/3

Paso 2: Mostrar la información del productoseleccionado en un DetailsView

Con la ProductsGrid GridView completo, todo lo que queda es añadir un DetailsView quemuestra información sobre el producto que se seleccione. Agregue un control DetailsViewpor encima de la GridView y ObjectDataSource crea una nuevallamada ProductDetailsDataSource . Como queremos que esta DetailsView para mostrar la

información en particular sobre el producto seleccionado, configurarel ProductDetailsDataSource utilizar el ProductsBLL claseGetProductByProductID( productID ) método.

Figura 9. Invocar la ProductsBLL Clase GetProductByProductID (  productID  ) Método

 Tienen la productID valor del parámetro, obtenidos a partir del controlGridView SelectedValue propiedad. Como hemos comentado anteriormente, elGridView SelectedValue propiedad devuelve el primer valor de datos clave para la filaseleccionada. Por lo tanto, es imperativo que el GridView DataKeyNames propiedad seestablece en ProductID , de modo que la fila seleccionada de ProductID valor es devueltopor SelectedValue .

Page 169: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 169/3

Figura 10. Establecer el  productID  parámetros a la GridView SelectedValue Propied

Una vez que el productDetailsDataSource ObjectDataSource se ha configuradocorrectamente y con destino a la DetailsView, este tutorial es completo! Cuando la páginse visitó por primera vez se ha seleccionado ninguna fila, por lo que elGridView SelectedValue propiedad devuelve null . Dado que no existen productos con

un NULL ProductIDvalor, no hay registros devueltos por la GetProductByProductID( productID ) método, lo que significa que el DetailsView no se muestra (ver Figura 11). Ahacer clic en el botón Seleccionar de una fila GridView, sobreviene una devolución de daty el DetailsView actualice. Esta vez, el GridView SelectedValue propiedad devuelveel ProductIDde la fila seleccionada, el GetProductByProductID ( productID ) método devuelvun ProductsDataTable con información acerca de ese producto en particular, y el DetailsVimuestra los detalles (ver figura 12).

Page 170: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 170/3

Figura 11. Cuando visitó por primera vez, sólo el GridView se muestra

Page 171: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 171/3

Figura 12. Al seleccionar una fila, Detalles del Producto es mostrado

ResumenEn este y en los tutoriales anteriores tres que hemos visto una serie de técnicas para lavisualización de maestro / detalle los informes. En este tutorial vamos a examinar con unGridView seleccionable a la casa de los registros maestros y un DetailsView para verdetalles sobre el registro maestro de seleccionados en la misma página. En los tutorialesanteriores vimos cómo mostrar maestro / detalles reportes usando DropDownLists y lavisualización de los registros maestros en una página Web y los registros de detalles enotra.

En este tutorial se concluye el examen de los informes de maestro / detalle. Comenzandocon el siguiente tutorial vamos a comenzar nuestra exploración del formato personalizadcon el GridView, DetailsView y FormView. Vamos a ver cómo personalizar el aspecto deestos controles basados en los datos enlazados a ellos, cómo resumir los datos de pie depágina del control GridView, y cómo utilizar las plantillas para obtener un mayor grado dcontrol sobre el diseño.

Programación feliz!

 

Page 172: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 172/3

Tutorial 11: Formato personalizado basado enlos datos 

Scott Mitchell

02 2007

Descargar el código de la muestra .

Contenido del Tutorial 11 (Visual C #)

IntroducciónPaso 1: Visualización de la información del producto en un DetailsViewPaso 2: programación Determinación del valor de los datos en el controlador de eventosDataBoundPaso 3: Dar formato al valor UnitPrice en la DetailsViewPaso 4: Visualización de la información del producto en un FormViewPaso 5: programación La determinación del valor de los datos en el controlador de eventDataBoundPaso 6: Dar formato al control de etiquetas UnitsInStockLabel en el FormViewItemTemplatePaso 7: Visualización de información del producto en un GridViewPaso 8: determinar mediante programación el valor de los datos en el controlador deeventos RowDataBoundPaso 9: destacando el amarillo Fila Cuando el valor UnitPrice es menos de $ 10ConclusiónSobre el autorAgradecimientos

Introducción

La aparición de la GridView , DetailsView y FormView controles se pueden personaliza través de miles de propiedades relacionadas con el estilo. Propiedadescomo CssClass , fuente , BorderWidth , BorderStyle ,BorderColor , ancho y alturaentre otros, determinan la apariencia general del control prestados. Propiedades,incluyendo HeaderStyle , RowStyle , AlternatingRowStyle , y otros permiten laconfiguración mismo estilo que se aplicarán a las secciones en particular. Del mismo mod

estos ajustes de estilo se pueden aplicar sobre el terreno.

En muchos escenarios, sin embargo, los requisitos de formato dependerá del valor de losdatos mostrados. Por ejemplo, para llamar la atención sobre agotadas, un informe acercade los productos de información podría poner el color de fondo amarillo para aquellosproductos cuyo UnitsInStock y UnitsOnOrder campos son iguales a 0. Para resaltar losproductos más caros, es posible que desee mostrar los precios de los productos quecuestan más de $ 75 en negrita.

Ajuste el formato del GridView , DetailsView o FormView basado en los datos enlazada que se puede lograr de varias maneras. En este tutorial, vamos a ver cómo llevar a cab

Page 173: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 173/3

el formato de los datos enlazados a través del uso dela DataBound y RowDataBound controladores de eventos. En el siguiente tutorial vama explorar un enfoque alternativo.

Utilizando controlador de eventos DataBound el control DetailsView de

Cuando los datos se enlaza a un DetailsView , ya sea de un control de origen de datosmediante programación oa través de la asignación de datos para el control de origen de

datos de propiedad y llamando a su DataBind () , la secuencia de pasos ocurren:

1. El control de datos Web DataBinding activa el evento.2. Los datos se enlaza al control de datos de Web.3. El control de datos Web DataBound activa el evento.

Lógica personalizada puede ser inyectada inmediatamente después de los pasos 1 y 3 através de un controlador de eventos. Mediante la creación de un controlador de eventospara el DataBound caso de que se puede determinar mediante programación los datosque se ha enlazado al control web de datos y ajustar el formato, según sea necesario.Parilustrar esto vamos a crear un DetailsView que mostrará información general acerca deun producto, sino que mostrará el Precio por unidad de valor en un tipo de letranegrita, cursiva si es superior a $ 75.

Paso 1: Visualización de la información del productoen un DetailsView

Abra la página CustomColors.aspx en la carpeta CustomFormatting, arrastreun DetailsView de control desde el Cuadro de herramientas hasta el Diseñador,establezca su identificación valor de lapropiedadExpensiveProductsPriceInBoldItalic , y asociarla a unnuevo ObjectDataSource control que invoca el ProductsBLLclase GetProducts() método. Los pasos detallados para lograr esto se omiten aquí por brevedad ya que losexaminó en detalle en tutoriales anteriores.

Después de haber atado el ObjectDataSource al DetailsView , tome un momento paramodificar la lista de campos. He optado por quitar el BoundField llamas ProductID , IdProveedor , CategoryID , UnitsInStock , UnitsOnOrder ,ReorderLel y descatalogados , y cambió el nombre y formatear el resto BoundField s. Tambiénlimpió el ancho y la altura de configuración. Debido a que el DetailsView muestra unsolo registro, hay que habilitar la paginación con el fin de permitir al usuario final para ve

todos los productos. Hacerlo mediante la comprobación de la paginación Activarcasillade verificación en el DetailsView tag 's inteligente.

Page 174: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 174/3

Figura 1. Marque la casilla de verificación Habilitar paginación en la etiquetainteligente del DetailsView es. (Clic en la foto para una imagen más grande.)

Después de estos cambios, el DetailsView marcado será el siguiente:

<Asp: DetailsView ID = "DetailsView1" runat = "server" AllowPaging = "True"AutoGenerateRows = "false" DataKeyNames = "ProductID"DataSourceID = "ObjectDataSource1" EnableViewState = "false">

<Fields>

<Asp: BoundField DataField = "ProductName" HeaderText = "Producto"

SortExpression = "ProductName" />

<Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"

ReadOnly = "True" SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName" HeaderText = "Proveedor"

ReadOnly = "True" SortExpression = "SupplierName" />

<Asp: BoundField DataField = "CantidadPorUnidad"

HeaderText = "Cantidad / Unidad" SortExpression = "CantidadPorUnidad" />

<Asp: BoundField DataField = "UnitPrice" DataFormatString = "{0: c}"

HeaderText = "Precio"

HtmlEncode = "false" SortExpression = "UnitPrice" />

</ Campos>

 </ Asp: DetailsView> 

Page 175: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 175/3

 Tome un momento para poner a prueba esta página en su navegador.

Figura 2. El control DetailsView muestra un producto a la vez. (Clic en la fotopara una imagen más grande.)

Paso 2: programación Determinación del valor de lodatos en el controlador de eventos DataBound

Con el fin de mostrar el precio en negrita, cursiva para aquellos productoscuyo PrecioUnidad valor supera los $ 75, primero tenemos que ser capaces de determimediante programación el PrecioUnidad valor. Para el DetailsView , esto se puedelograr en el DataBound controlador de eventos. Para crear el controlador de eventos,haga clic en elDetailsView en el diseñador vaya a la ventana Propiedades. Presione F4para que aparezca, si no es visible, o vaya a laVista y seleccione la ventanaPropiedades del menú. En la ventana Propiedades, haga clic en el icono de rayo a la listde los DetailsView eventos 's. A continuación, haga doble clic en el DataBound eventoescriba el nombre del controlador de eventos que desea crear.

Figura 3. Crear un controlador de eventos para el evento de enlace de datos.

Si lo hace, creará automáticamente el controlador de eventos y le llevará a la parte decódigo en el que se ha añadido.En este punto, verá lo siguiente:

protected void ExpensiveProductsPriceInBoldItalic_DataBound (object sender,E EventArgs)

{

}

Page 176: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 176/3

Los datos enlazados a la DetailsView se puede acceder a través dela DataItem propiedad. Recordemos que son vinculantes para los controles a unestablecimiento inflexible de tipos DataTable , que se compone de una colección conestablecimiento inflexible de DataRow casos. Cuando el DataTable se une ala DetailsView , el primer DataRow en elDataTable está asignada ala DetailsView 's DataItem propiedad. En concreto, el DataItem propiedad se le asignunDataRowView objeto. Podemos utilizar la fila de propiedad de DataRowView paraacceder a la base DataRow objeto, que es en realidad un ProductsRow ejemplo. Cuand

tenemos esta ProductsRow ejemplo, podemos tomar una decisión con sólo inspeccionalos valores de la propiedad del objeto.

El siguiente código muestra cómo determinar si el Precio por unidad de valor vinculadola DetailsView control es mayor de $ 75:

protected void ExpensiveProductsPriceInBoldItalic_DataBound (object sender,E EventArgs)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView). ExpensiveProductsPriceInBoldItalic.DataItem) la fila;

if (! product.IsUnitPriceNull () & & product.UnitPrice> 75m)

{

/ / TODO: Hacer que el texto PrecioUnidad en negrita y cursiva

}

}

Tenga en cuenta Debido a PrecioUnidad puede tener un nulo valor en la base dedatos, primero asegúrese de que no estamos tratando con un NULL el valor antes deacceder al ProductsRow 'sPrecioUnidad propiedad. Esta verificación es importante,porque si intentamos acceder a la PrecioUnidadpropiedad cuando tiene un NULL el valla ProductsRow objeto lanzar una excepción StrongTypingException .

Paso 3: Dar formato al valor UnitPrice en laDetailsView

En este punto, podemos determinar si el Precio por unidad de valor vinculado ala DetailsView tiene un valor que supera los $ 75, pero todavía tenemos que ver cómoajustar la programación DetailsView formato 's en consecuencia.Para modificar el formade una fila completa en el DetailsView , acceso mediante programación a la filaconDetailsViewID.Rows [i] , para modificar una celda en particular, el accesouso DetailsViewID.Rows [i] Las células [indice]. . Después tenemos una referencia afila o celda, podemos ajustar su apariencia mediante el establecimiento de un estilorelacionado con las propiedades.

Acceso a una fila de programación requiere que se conozca el índice de fila, que comienzen 0. El Precio por unidadde fila es la quinta fila en el DetailsView , dándole un índice

Page 177: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 177/3

de 4, y por lo que es accesible a través deprogramaciónExpensiveProductsPriceInBoldItalic.Rows [4] . En este punto, podríamtener el contenido de la fila entera se muestra en negrita, cursiva utilizando el siguientecódigo:

ExpensiveProductsPriceInBoldItalic.Rows [4] Font.Bold = true.;

ExpensiveProductsPriceInBoldItalic.Rows [4] Font.Italic = true.;

Sin embargo, esto hará que tanto la etiqueta (precio) y el valor en negrita y cursiva. Siqueremos hacer sólo el valor en negrita y cursiva se debe aplicar este formato a lasegunda celda de la fila, que se puede lograr mediante:

ExpensiveProductsPriceInBoldItalic.Rows [4] Las células [1] = true Font.Bold..;

ExpensiveProductsPriceInBoldItalic.Rows [4] Las células [1] = true Font.Italic..;

Debido a que nuestros tutoriales hasta ahora han utilizado las hojas de estilo paramantener una clara separación entre el marcado que se representa e informaciónrelacionadas con el estilo, en lugar de establecer las propiedades de estilo tal como se

indica anteriormente, vamos a utilizar en su lugar una clase CSS. Abra la hoja de estilostyles.css y añadir una nueva clase de CSS llamado ExpensivePriceEmphasis con lasiguiente definición:

. ExpensivePriceEmphasis

{

font-weight: bold;

font-style: italic;

}

Luego, en la DataBound controlador de eventos, establezca lacélula CssClass propiedad ExpensivePriceEmphasis . El siguiente código muestrala DataBound controlador de eventos en su totalidad:

protected void ExpensiveProductsPriceInBoldItalic_DataBound (object sender,E EventArgs)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView). ExpensiveProductsPriceInBoldItalic.DataItem) la fila;

if (! product.IsUnitPriceNull () & & product.UnitPrice> 75m)

{

ExpensiveProductsPriceInBoldItalic.Rows [4]. Células [1]. CssClass ="ExpensivePriceEmphasis";

}

Page 178: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 178/3

}

Al visualizar Chai, que cuesta menos de $ 75, el precio se muestra en una fuente normal(ver Figura 4). Sin embargo, al ver Mishi Kobe Niku, que tiene un precio de 97 dólares, elprecio se muestra en negrita, cursiva (ver Figura 5).

Figura 4. Precios por debajo de $ 75 se muestran en una fuente normal. (Clic enla foto para una imagen más grande.)

Figura 5. Los precios de los productos caros "se muestran en negrita, encursiva. (Clic en la foto para una imagen más grande.)

Page 179: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 179/3

Utilizando controlador de eventos DataBound el control FormView

Los pasos para determinar los datos de base unido a un FormView son idénticas a las dun DetailsView : Crear unDataBound controlador de eventos, elelenco DataItem propiedad para el tipo de objeto apropiado enlazado al control, ydeterminar cómo proceder. El FormView y DetailsView difieren, sin embargo, en la foren la apariencia de su interfaz de usuario se actualiza.

El FormView no contiene ningún BoundField s y por lo tanto carece de la filas decolección. En cambio, un FormViewse compone de las plantillas, que puede contener unmezcla de HTML estático, controles Web, y la sintaxis de enlace de datos. Ajuste del estilde un FormView normalmente implica el ajuste al estilo de uno o varios de los controlesWeb en el FormView plantillas 's.

Para ilustrar esto, vamos a usar un FormView a la lista de productos como en el ejemploanterior, pero esta vez vamos a mostrar sólo el nombre del producto y las unidades enstock con las unidades en stock muestran en una fuente de color rojo si es menor o igual 10.

Paso 4: Visualización de la información del productoen un FormView

Añadir un FormView a la página de CustomColors.aspx debajo de la DetailsView , yestablecer su identificación de propiedad de LowStockedProductsInRed . Obligar ala FormView al ObjectDataSource de control creado en el paso anterior. Esto crearáun ItemTemplate , EditItemTemplate y InsertItemTemplate parael FormView . Retire elEditItemTemplate y InsertItemTemplate , y simplificarel ItemTemplate para incluir sólo los ProductName yUnitsInStock valores, cada uno su propio nombre apropiado de etiquetas de control. Al igual que el DetailsViewen elejemplo anterior, también la paginación Activar casilla de verificación enel FormView tag 's inteligente.

Después de estas ediciones de su FormView marcado 's debe ser similar a lo siguiente:

<Asp: FormView ID = "LowStockedProductsInRed" runat = "server"DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"AllowPaging = "True" EnableViewState = "false">

<ItemTemplate>

<b> del producto: </ b>

<Asp: Label = ID "ProductNameLabel" runat = "server"

Texto ='<%# Bind ("ProductName")%> '>

</ Asp: Label> <br />

Unidades <b> En Stock: </ b>

<Asp: Label = ID "UnitsInStockLabel" runat = "server"

Texto ='<%# Bind ("UnitsInStock")%> '>

Page 180: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 180/3

</ Asp: Label>

</ ItemTemplate>

</ Asp: FormView>

 Tenga en cuenta que el ItemTemplate contiene:

• HTML estático -El texto "Producto" y "Unidades en Stock:" junto con

el <br /> y <b> elementos• Los controles Web -Las

dos etiquetas controles, ProductNameLabel y UnitsInStockLabel• De enlace de datos de sintaxis -El <% # Bind ("ProductName")%> y <% # Bind

("UnitsInStock")%> sintaxis, que asigna los valores de estos campos para el texto lpropiedades de la Etiqueta de los controles

Paso 5: Determinación de la programación valor delos datos en el controlador de eventos DataBound

Con el FormView 's marcado completa, el siguiente paso es determinar medianteprogramación si el UnitsInStock valor es menor o igual a 10. Esto se logra de la maneraexactamente el mismo con el FormView como lo fue con elDetailsView . Comience porcrear un controlador de eventos para el FormView 's DataBound evento.

Figura 6. Crear el controlador de eventos DataBound.

En el evento, el elenco DataItem propiedad del FormView a un ProductsRow ejemplodeterminar si el UnitsInPricevalor es tal que tenemos que mostrar en una fuente roja.

protected void LowStockedProductsInRed_DataBound (object sender, EventArgs e)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView). LowStockedProductsInRed.DataItem) la fila;

if (! product.IsUnitsInStockNull () & & product.UnitsInStock <= 10)

{

/ / TODO: Hacer que el texto UnitsInStockLabel rojo

}

}

Paso 6: Dar formato al control de etiquetasUnitsInStockLabel en ItemTemplate del FormView

El último paso es dar formato a la muestra UnitsInStock valor en una fuente de color rosi el valor es de 10 o menos.Para lograr esto, se debe acceder a la

Page 181: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 181/3

programación UnitsInStockLabel de control en el ItemTemplate y establezca suspropiedades de estilo para que su texto se muestra en rojo. Para acceder a un control deWeb en una plantilla, utilice el FindControl ("controlID") método, como se muestra aq

WebControlType someName =(WebControlType) FormViewID.FindControl ("controlID");

Para nuestro ejemplo, queremos acceder a una etiqueta de control, cuyo ID es el

valor UnitsInStockLabel , por lo que tendría que utilizar los siguientes:Etiqueta UnitsInStock =(Label) LowStockedProductsInRed.FindControl ("UnitsInStockLabel");

Después tenemos una referencia programática en el control Web, podemos modificar suestilo de propiedades relacionadas, según sea necesario. Al igual que con el ejemploanterior, he creado una clase CSS en styles.css llamadoLowUnitsInStockEmphasis . Paaplicar este estilo a la etiqueta de control Web, establezca su CssClass propiedad enconsecuencia.

protected void LowStockedProductsInRed_DataBound (object sender, EventArgs e)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView). LowStockedProductsInRed.DataItem) la fila;

if (! product.IsUnitsInStockNull () & & product.UnitsInStock <= 10)

{

Etiqueta UnitsInStock =(Label) LowStockedProductsInRed.FindControl ("UnitsInStockLabel");

if (UnitsInStock! = null)

{

unitsInStock.CssClass = "LowUnitsInStockEmphasis";

}

}

}

Nota La sintaxis de formato de una plantilla de programación, acceder a la Web usandel controlFindControl ("controlID") , y luego poner su estilo de propiedades relacionadtambién puede utilizarse cuando se utiliza TemplateFields enel DetailsView o GridView controles. Vamos a examinarTemplateField s en nuestropróximo tutorial.

La figura 7 muestra el FormView cuando se ve un producto cuya UnitsInStock valor essuperior a 10, mientras que el producto en la figura 8 tiene un valor inferior a 10.

Page 182: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 182/3

Figura 7. Para los productos con un UnitsInStock suficientemente grande, no seaplica un formato personalizado.(Clic en la foto para una imagen más grande.)

Figura 8. El número UnitsInStock se muestra en rojo para aquellos productos covalores de 10 o menos. (Clic en la foto para una imagen más grande.)

Con formato de evento RowDataBound el GridView

Anteriormente, se analizó la secuencia de pasos que el DetailsView y FormView elprogreso a través de los controles durante el enlace de datos. Vamos a ver más de estospasos una vez más, como un recordatorio.

1. El control de datos Web DataBinding activa el evento.2. Los datos se enlaza al control de datos de Web.3. El control de datos Web DataBound activa el evento.

Estos tres pasos son suficientes para el DetailsView y FormView , ya que muestran sólun único registro. Para elGridView , que muestra todos los registros vinculados a ella (nosólo el primero), el paso 2 es un poco más complicado.

Page 183: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 183/3

En el paso 2, el GridView enumera la fuente de datos y, para cada registro, creaun GridViewRow instancia y se une el registro actual a la misma. Paracada GridViewRow añadido a la GridView , dos eventos se producen:

• RowCreated -incendios después de la GridViewRow se ha creado• RowDataBound el fuego después de que el registro actual se ha unido a

la GridViewRow

Para el GridView y, a continuación, enlace de datos se describe con mayor precisión porsiguiente secuencia de pasos:

1. El DataBinding caso de que el GridView incendios.2. Los datos se enlaza a la GridView .

Para cada registro del origen de datos:

a. Crear un GridViewRow objeto.b. El fuego RowCreated evento.c. Vincular el registro a la GridViewRow .

d. El fuego RowDataBound evento.e. Agregue el GridViewRow a la filas de colección.

3. El GridView 's DataBound activa el evento.

Para personalizar el formato de la GridView registros 's individuales, entonces, tenemosque crear un controlador de eventos para el RowDataBound evento. Para ilustrar esto,vamos a agregar un GridView a la página de CustomColors.aspx que muestra el nombrecategoría y precio de cada producto, destacando aquellos productos cuyo precio es infera $ 10, con un color de fondo amarillo.

Paso 7: Visualización de información del producto eun GridView

Añadir un GridView por debajo de la FormView del ejemplo anterior y establecersu identificación de propiedad deHighlightCheapProducts . Porque ya tenemosun ObjectDataSource que devuelve todos los productos en la página, enlazarel GridView a eso. Finalmente, edite el BoundField s del GridView para incluir sólo losnombres de los productos, categorías y precios. Después de estas modificaciones,el GridView marcado 's deben tener el siguiente aspecto:

<Asp: GridView ID = "HighlightCheapProducts" runat = "server"

AutoGenerateColumns = "False" DataKeyNames = "ProductID"DataSourceID = "ObjectDataSource1" EnableViewState = "false">

<columnas>

<Asp: BoundField DataField = "ProductName" HeaderText = "Producto"

SortExpression = "ProductName" />

<Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"

ReadOnly = "True" SortExpression = "CategoryName" />

Page 184: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 184/3

<Asp: BoundField DataField = "UnitPrice" DataFormatString = "{0: c}"

HeaderText = "Precio"

HtmlEncode = "false" SortExpression = "UnitPrice" />

</ Columns>

</ Asp: GridView>

La Figura 9 muestra nuestro progreso a este punto, cuando se ve a través de unnavegador.

Figura 9. El GridView muestra el nombre, categoría, y el precio de cadaproducto. (Clic en la foto para una imagen más grande.)

Paso 8: programación Determinación del valor de lodatos en el controlador de eventos RowDataBound

Cuando el ProductsDataTable se une a la GridView , su ProductsRow casos seenumeran y, para cada ProductsRow , un GridViewRow se crea. El DataItem propiedde la GridViewRow se le asigna a lo particular ProductRow , después de queel RowDataBound controlador de eventos del GridView se eleva. Para determinarel Precio por unidad de valor para cada producto vinculado a la GridView y, acontinuación, debemos crear un controlador de eventos para elRowDataBound caso deque el GridView . En este controlador de eventos, podemos inspeccionarel PrecioUnidadvalor de la corriente GridViewRow y tomar una decisión el formato de fila.

Page 185: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 185/3

Este controlador de eventos se pueden crear mediante el uso de la misma serie de pasoscon el FormView yDetailsView .

Figura 10. Cree un controlador de eventos para el evento RowDataBound elGridView.

Crear el controlador de eventos de esta forma hará que el siguiente código que se añadeautomáticamente a la parte de código de la página ASP.NET:

protected void HighlightCheapProducts_RowDataBound (object sender,GridViewRowEventArgs e)

{

}

Cuando el RowDataBound activa el evento, el controlador de eventos se pasa comosegundo parámetro, un objeto de tipo GridViewRowEventArgs , que tiene una propied

denominada fila . Esta propiedad devuelve una referencia a laGridViewRow que estabaenlazado a datos. Para acceder a la ProductsRow instancia enlazada a la GridViewRowse utiliza el DataItem propiedad, como se muestra aquí:

protected void HighlightCheapProducts_RowDataBound (object sender,GridViewRowEventArgs e)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem) Fila.;

if (! product.IsUnitPriceNull () & & product.UnitPrice <10m)

{

/ / TODO: Resalte la fila amarilla ...

}

}

Cuando trabajamos con la RowDataBound controlador de eventos, es importante tenercuenta que el GridView se compone de diferentes tipos de filas y que este evento sedispara para todos los tipos de fila. El tipo de unaGridViewRow se puede determinar posu rowType propiedad, y puede tener uno de los posibles valores:

• DataRow -Una fila que está enlazado a un registro del origen dedatos del GridView

• EmptyDataRow -La fila se muestra si el GridView 's DataSource está vacía• Pie de página , la fila de pie, muestra si el ShowFooter propiedad del GridView

ajusta a la verdad• Cabecera -El título de la fila, se muestra si la ShowHeader propiedad

del GridView está establecido enverdadero (por defecto)

Page 186: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 186/3

• Localizador -Para un GridView que implementa la paginación, la fila que muestrainterfaz de paginación

• Separador no utilizados para el GridView , pero utilizado porel rowType propiedades para el DataList y elrepetidor de los controles (doscontroles web de datos que vamos a discutir en futuros tutoriales)

Debido a que el EmptyDataRow , encabezado , pie de página , y Pager filas no estáasociados con un origen de datos de registro, que siempre tendrá un nulo valor para

sus DataItem propiedad. Por esta razón, antes de intentar trabajar conel DataItem propiedad de la actual GridViewRow , primero tenemos que asegurarnos dque estamos tratando con un DataRow . Esto se puede lograr mediante el control dela rowType propiedad de la GridViewRow , de la siguiente manera:

protected void HighlightCheapProducts_RowDataBound (object sender,GridViewRowEventArgs e)

{

/ / Asegúrese de que estamos trabajando con una fila de datos

si (== e.Row.RowType DataControlRowType.DataRow)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem) Fila.;

if (! product.IsUnitPriceNull () & & product.UnitPrice <10m)

{

/ / TODO: fila resaltado en amarillo ...

}

}

}

Paso 9: Al destacar la amarilla fila cuando el valorUnitPrice es menos de $ 10

El último paso es poner de relieve toda la programación GridViewRow si el Precio porunidad de valor para ese registro es menos de $ 10. La sintaxis para acceder aun GridView filas 's o de las células es el mismo que conelDetailsView : GridViewID.Rows [i] para acceder a toda la fila, y GridViewID.Rows [i] Lacélulas [indice]. para acceder a una celda en particular. Sin embargo, cuandoel RowDataBound incendios de controlador de eventos, el enlace dedatosGridViewRow aún no se ha añadido a la filas de la colección de GridView . Por lotanto, no se puede acceder a la actual GridViewRow ejemplo dela RowDataBound controlador de eventos utilizando el Filas colección.

Page 187: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 187/3

En lugar de GridViewID.Rows [i] , se puede hacer referencia a laactual GridViewRow ejemplo, en el RowDataBoundcontrolador de eventosutilizando e.Row . Es decir, con el fin de poner de relieve la actual GridViewRow ejempde laRowDataBound controlador de eventos, podemos utilizar los siguientes:

e.Row.BackColor = System.Drawing.Color.Yellow;

En lugar de establecer la propiedad BackColor de la

propiedad GridViewRow directamente, vamos a seguir con el uso de clases CSS. Hecreado una clase CSS llamada AffordablePriceEmphasis que establece el color de fondamarillo. El completado RowDataBound controlador de eventos siguiente:

protected void HighlightCheapProducts_RowDataBound (object sender,GridViewRowEventArgs e)

{

/ / Asegúrese de que estamos trabajando con una fila de datos

si (== e.Row.RowType DataControlRowType.DataRow)

{

/ / Obtener el objeto ProductsRow de la propiedad DataItem ...

Northwind.ProductsRow producto =(Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem) Fila.;

if (! product.IsUnitPriceNull () & & product.UnitPrice <10m)

{

e.Row.CssClass = "AffordablePriceEmphasis";

}

}

}

Page 188: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 188/380

Figura 11. Los productos más asequibles están resaltadas en amarillo. (Clic en foto para una imagen más grande.)

Conclusión

En este tutorial, hemos visto cómo dar formatoal GridView , DetailsView y FormView basado en los datos enlazados al control. Parallevar a cabo, esto que hemos creado un controlador de eventos parael DataBound o RowDataBoundevento, donde los datos subyacentes se examinó juntocon un cambio de formato, si es necesario. Para acceder a los datos enlazados aun DetailsView o FormView , se utiliza el DataItem propiedad en

el DataBound controlador de eventos, para un GridView , el DataItem propiedad decada GridViewRow instancia contiene los datos enlazados a la fila, que está disponible el RowDataBound controlador de eventos.

La sintaxis de programación ajustar el formato en el control Web de datos depende delcontrol de Internet y cómo los datos para ser formateado semuestra. Para DetailsView y GridView controles, las filas y las células se puede accedemediante un índice ordinal. Para el FormView , que utiliza las plantillas, el FindControl("controlID") se utiliza normalmente para localizar a un control de Web desde dentro deplantilla.

Page 189: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 189/38

En el siguiente tutorial, veremos cómo utilizar las plantillas conel GridView y DetailsView . Además, vamos a ver otra técnica para personalizar elformato basado en los datos subyacentes.

Tutorial 12: Uso de TemplateFields en elcontrol GridView 

Scott Mitchell

02 2007

Descargar el código de la muestra .

Contenido del Tutorial 12 (Visual C #)

IntroducciónPaso 1: unión de los datos para el GridViewPaso 2: Visualización de los nombres y apellidos en una sola columnaPaso 3: Con el control Calendar para mostrar el campo HireDatePaso 4: Muestra el número de días que el empleado haya trabajado para la empresaConclusión

Sobre el autorAgradecimientos

Introducción

El GridView se compone de un conjunto de campos que indican lo que las propiedadesdel origen de datos se incluirán en el resultado representado junto con la forma de losdatos en la pantalla. El tipo más simple es el campoBoundField , que muestra un valor ddatos como texto. Otros tipos de campo de visualización de los datos usando elementosHTML alternativo. El CheckBoxField , por ejemplo, se muestra como una casilla deverificación que comprueba el estado depende del valor de un campo de datosespecificado, el ImageField trasmite una imagen cuya imagen de origen se basa en uncampo de datos especificado. Los hipervínculos y los botones de cuyo estado depende deuna base de datos de campo valor puede representarse mediantela HyperLinkField y ButtonField tipos de campo, respectivamente.

Mientras que el CheckBoxField , ImageField , HyperLinkField y ButtonField tipos decampo para permitir una vista alternativa de los datos, todavía son bastante limitados corespecto al formato. A CheckBoxField sólo puede mostrar una casilla de verificación,mientras que un ImageField sólo puede mostrar una sola imagen. ¿Qué pasa si un campen particular debe mostrar un texto, una casilla de verificación, y una imagen, todo se ba

Page 190: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 190/3

en diferentes campos de datos los valores? O ¿qué pasa si queremos mostrar los datosutilizando un control Web que no sea el CheckBox , de imagen, HyperLink , o elbotón ? Además, el BoundField limita su pantalla a un único campo de datos. ¿Qué passi hemos querido mostrar dos o más campos de datos los valores en unsolo GridView columna?

Para adaptarse a este nivel de flexibilidad, el GridView ofrece la TemplateField , quehace uso de una plantilla . Una plantilla puede incluir una combinación de HTML estático,

controles Web, y la sintaxis de enlace de datos. Además, elTemplateField tiene unavariedad de plantillas que se pueden utilizar para personalizar la representación de lasdiferentes situaciones. Por ejemplo, el ItemTemplate se utiliza por defecto para hacer qel celular para cada fila, pero el EditItemTemplate plantilla se puede utilizar parapersonalizar la interfaz para editar los datos.

En este tutorial, vamos a examinar cómo utilizar el TemplateField para lograr un mayorgrado de personalización con el GridView control. En el tutorial anterior , vimos cómopersonalizar el formato basado en los datos subyacentes utilizandoel DataBound y RowDataBound controladores de eventos. Otra manera de personalizael formato basado en los datos subyacentes llamando a los métodos de formato dentro d

una plantilla. Pronto nos ocuparemos de esta técnica en este tutorial, también.

Para este tutorial, vamos a utilizar TemplateField s para personalizar el aspecto de unalista de empleados. En concreto, vamos a una lista de todos los empleados, pero semostrarán los nombres y apellidos de los empleados en una columna, sus fechas decontratación en un calendario de control, y una columna de estado que indica cuántosdías han sido empleados en la empresa.

Figura 1. Tres TemplateFields se utilizan para personalizar la pantalla. (Clic en foto para una imagen más grande.)

Paso 1: unión de los datos para el GridView

En escenarios de informes en los que se debe utilizar TemplateField s para personalizaaspecto, me resulta más fácil empezar por la creación de un GridView control quecontiene sólo BoundField s primero, y luego añadir nuevasTemplateField s o convertiractual BoundField s para TemplateField s, como sea necesario. Por lo tanto, vamos a

Page 191: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 191/3

empezar este tutorial mediante la adición de un GridView a la página a través del diseñenlazarlo a unObjectDataSource que devuelve la lista de empleados. Estas medidascontribuirán a crear un GridView con unBoundField para cada uno de los campos de loempleados.

Abra la página GridViewTemplateField.aspx y arrastre un GridView del cuadro deherramientas hasta el diseñador.Desde el GridView tag 's inteligente, optar por añadir unuevo ObjectDataSource control que invoca el GetEmployees () el método de

la EmployeesBLL clase.

Figura 2. Añadir un nuevo control ObjectDataSource que invoca el métodoGetEmployees (). (Clic en la foto para una imagen más grande.)

Enlazar el GridView de esta manera se añade automáticamente una BoundField paracada una de las propiedades de los empleados: deempleado , Apellido , Nombre , Título , Fecha de contratación , ReportsTo ,y País . Para este informe, no hay que preocuparse por mostrar

el EmployeeID , ReportsTo , o País de propiedad. Para eliminar estosBoundField s,usted puede:

• Utilice el Campos cuadro de diálogo. Haga clic en el Editar columnas enlace desel GridView tag 's inteligente para abrir este cuadro de diálogo. A continuación,seleccione la BoundFields de la lista inferior izquierda, y haga clic en el rojo X botpara eliminar el BoundField .

• Edite el GridView sintaxis 's declarativa con la mano. Desde el punto de vista deorigen, eliminar la<asp:BoundField> elemento para la BoundField que desea elimin

Después de haber quitado la BoundFields nombre de empleado , ReportsTo y País ,

el GridView 's marcado debe tener el siguiente aspecto:<Asp: GridView ID = "GridView1" runat = "server"

AutoGenerateColumns = "False" DataKeyNames = "EmployeeID"DataSourceID = "ObjectDataSource1">

<columnas>

<Asp: BoundField DataField = "Apellido" HeaderText = "Apellido"SortExpression = "Apellido" />

<Asp: BoundField DataField = "Nombre" HeaderText = "Nombre"

Page 192: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 192/3

SortExpression = "Nombre" />

<Asp: BoundField DataField = "Título" HeaderText = "Título"SortExpression = "Título" />

<Asp: BoundField DataField = "HireDate" HeaderText = "Fecha de contratación"SortExpression = "Fecha de contratación" />

</ Columns>

</ Asp: GridView>

 Tome un momento para ver nuestro progreso en un navegador. En este punto, usted debver una tabla con un registro de cada empleado y cuatro columnas: una por el apellido deempleado, nombre, título y fecha de contratación.

Figura 3. El Apellido, Nombre, Título, Fecha de contratación y los campos semuestran para cada empleado. (Clic en la foto para una imagen más grande.)

Paso 2: Visualización de los nombres y apellidos enuna sola columna

En la actualidad, el nombre y apellido de cada empleado se muestran en una columnaseparada. Sería bueno para combinarlos en una sola columna, en su lugar. Para lograr esdebemos utilizar un TemplateField . Podemos añadir una nueva TemplateField ,añadirle el margen necesario y la sintaxis de enlace de datos, y luego eliminarelBoundFields llamado Nombre y Apellido , o bien podemos convertirla BoundFields nombre Nombre en unTemplateField , editar el TemplateField paraincluir el LastName valor , y luego retire la BoundField llamadoLastName .

Ambas aproximaciones a la red el mismo resultado, pero personalmente me gusta

convertir BoundFields aTemplateFields , cuando sea posible, porque la conversiónagrega automáticamente un ItemTemplate yEditItemTemplate con controles web y lasintaxis de enlace de datos para imitar la apariencia y funcionalidad de laBoundField . Lventaja es que tendremos que hacer menos trabajo con el TemplateField , como elproceso de conversión se han realizado algunos trabajos para nosotros.

Para convertir un BoundField en un TemplateField , haga clic en el Editarcolumnas enlace desde el GridView tag 's inteligente, que nos lleva a la Campos cuadde diálogo. Seleccione la BoundField para convertir la lista en la esquina inferiorizquierda, a continuación, haga clic en el Convertir este campo en unTemplateField en la esquina inferior derecha.

Page 193: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 193/3

Figura 4. Convertir un BoundField en un TemplateField en el cuadro de diálogoCampos. (Clic en la foto para una imagen más grande.)

Seguir adelante y convertir el BoundField nombre Nombre enun TemplateField . Después de este cambio, no hay diferencia perceptiva en elDiseñador. Esto se debe a la conversión de la BoundField en un TemplateField creaunTemplateField que mantiene la apariencia de la BoundField . A pesar de que haya

ninguna diferencia visual en este momento en el diseñador, este proceso de conversión hsustituido a la BoundField 's Sintaxis declarativa-<asp:BoundField DataField="FirstName"HeaderText="FirstName" SortExpression="FirstName" /> con lassiguientes TemplateField sintaxis:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">

<EditItemTemplate>

<Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: TextBox>

</ EditItemTemplate>

<ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: Label>

</ ItemTemplate>

</ Asp: TemplateField>

Como puede ver, el TemplateField se compone de dos modelos: un ItemTemplate quetiene una etiqueta cuyo textopropiedad se establece en el valor del Nombre de campode datos, y una EditItemTemplate que tiene un TextBoxcontrol cuyo texto la propiedatambién se establece en el Nombre de datos sobre el terreno. El enlace de datos de lasintaxis <% # Bind ("nombre de campo")%> , indica que el fieldName campo de datos seenlaza a la propiedad de control Web especificado.

Para agregar el Apellido de datos de campo valor a esta TemplateField , hay que añadotra etiqueta de control Web en el ItemTemplate y unirse a su texto a lapropiedad LastName . Esto se puede lograr ya sea a mano o mediante el Diseñador. Parhacerlo a mano, sólo tiene que añadir la sintaxis declarativa adecuada ala ItemTemplate :

Page 194: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 194/3

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">

<EditItemTemplate>

<Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: TextBox>

</ EditItemTemplate>

<ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: Label>

<Asp: ID Label = "Label2" runat = "server"Texto ='<%# Bind ("LastName") %>'></ asp: Label>

</ ItemTemplate>

</ Asp: TemplateField>

Para agregar a través del diseño, haga clic en el Editar plantillas de enlace desdeel GridView tag 's inteligente. Esto mostrará el GridView 's de edición de plantillas deinterfaz. En la etiqueta inteligente de esta interfaz es una lista de las plantillas enel GridView . Debido a que sólo tenemos un TemplateField en este punto, las plantillassólo aparece en la lista desplegable son las plantillas para el Nombre TemplateField , junto con el EmptyDataTemplate y PagerTemplate. El EmptyDataTemplate plantillsi se especifica, se utiliza para representar el control GridView de salida 's si no hayresultados en los datos enlazados a la GridView , el PagerTemplate , si se especifica, sutiliza para representar la interfaz de paginación para un GridView que admite lapaginación.

Figura 5. Plantillas de la GridView se puede editar a través del diseño. (Clic en foto para una imagen más grande.)

Para ver también la LastName en el Nombre TemplateField , arrastre la etiqueta decontrol de la caja de herramientas en el ItemTemplate del Nombre TemplateField enel GridView 's de edición de plantillas de interfaz.

Page 195: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 195/3

Figura 6. Agregue un control Web Label a la ItemTemplate TemplateFieldNombre es. (Clic en la foto para una imagen más grande.)

En este punto, la etiqueta de control de Web agrega a la TemplateField tienesu texto conjunto de propiedades deetiquetas . Tenemos que cambiar esto, así que estpropiedad está ligada al valor de la LastName campo de datos, en su lugar. Para lograresto, haga clic en la etiqueta de etiquetas inteligentes de control y elegirel DataBindings Editaropción.

Figura 7. Elija la opción Editar DataBindings de etiquetas inteligentes de laetiqueta. (Clic en la foto para una imagen más grande.)

Con ello se abre la DataBindings cuadro de diálogo. Desde aquí, usted puede seleccionla propiedad a participar en el enlace de datos de la lista de la izquierda, y, en la listadesplegable a la derecha, seleccione el campo al que enlazar los datos. Elijael texto propiedad de la izquierda y el Apellido de campo de la derecha, y haga clicen Aceptar .

Page 196: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 196/3

Figura 8. Obligar a la propiedad Text en el campo de datos LastName. (Clic en lfoto para una imagen más grande.)

Nota El DataBindings cuadro de diálogo le permite indicar si se debe realizar de dosvías de enlace de datos. Si deja sin marcar, la sintaxis de enlace de datos <% # Eval

("LastName")%> se utilizará, en lugar de <% # Bind ("LastName")%> . Cualquiera de estosenfoques está muy bien para este tutorial. Enlace bidireccional de datos es importantecuando la inserción y edición de datos. Para mostrar sólo los datos, sin embargo, ambos

enfoques funcionan igual de bien. Hablaremos de dos vías de enlace de datos en detalle,en futuros tutoriales.

 Tome un momento para ver esta página en un navegador. Como puede ver,el GridView todavía incluye cuatro columnas, sin embargo, el Nombre de columna ya lalistas de ambos el Nombre y Apellido valores de los datos de campo.

Figura 9. Tanto el Nombre y Apellido valores se muestran en una solacolumna. (Clic en la foto para una imagen más grande.)

Para completar este primer paso, quitar el LastName BoundField , y cambiar el nombrdel HeaderText propiedad delNombre TemplateField a "Nombre". Después de estoscambios, el GridView marcado 's declarativo debe tener el siguiente aspecto:

<Asp: GridView ID = "GridView1" runat = "server"AutoGenerateColumns = "False" DataKeyNames = "EmployeeID"DataSourceID = "ObjectDataSource1">

<columnas>

<Asp: TemplateField HeaderText = "Nombre"SortExpression = "Nombre">

<EditItemTemplate>

<Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: TextBox>

</ EditItemTemplate>

<ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"

Page 197: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 197/3

Texto ='<%# Bind ("Nombre") %>'></ asp: Label>

<Asp: ID Label = "Label2" runat = "server"Texto ='<%# Eval ("LastName") %>'></ asp: Label>

</ ItemTemplate>

</ Asp: TemplateField>

<Asp: BoundField DataField = "Título" HeaderText = "Título"

SortExpression = "Título" />

<Asp: BoundField DataField = "HireDate" HeaderText = "Fecha de contratación"SortExpression = "Fecha de contratación" />

</ Columns>

</ Asp: GridView>

Figura 10. Nombre y apellido de cada empleado se muestran en unacolumna. (Clic en la foto para una imagen más grande.)

Paso 3: Con el control Calendar para mostrar el

campo HireDateViendo un valor de datos de campo como texto en un GridView es tan fácil como usarun BoundField . En ciertos casos, sin embargo, los datos se expresa mejor mediante uncontrol de Web en particular en lugar de sólo texto. Esta adaptación de la visualización ddatos es posible con un TemplateField . Por ejemplo, en lugar de mostrar la fecha delempleado de alquiler en forma de texto, que podría mostrar un calendario (con el controde calendario ), con fecha del empleado de alquiler resaltado.

Para lograr esto, comenzar por la conversión de la BoundField llamado HireDate enun TemplateField . Sólo tienes que ir a la GridView tag 's inteligente y haga clic en

el Editar columnas enlace, que nos lleva a la Campos cuadro de diálogo. Seleccionela BoundField llamado HireDate , y haga clic en Convertir este campo en unTemplateField .

Page 198: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 198/38

Figura 11. Convertir el HireDate BoundField en un TemplateField. (Clic en la fotpara una imagen más grande.)

Como vimos en el paso 2, este reemplazará al BoundField con un TemplateField quecontiene un ItemTemplate yEditItemTemplate con una etiqueta y cuadro detexto cuyo texto propiedades están obligados a la HireDate valor utilizando la sintaxis enlace de datos <% # Bind ("Fecha de contratación") %> .

Para reemplazar el texto con un calendario de control, modificar la plantilla mediante laeliminación de la etiqueta y la adición de un calendario de control. Desde el diseño,seleccione Editar plantillas de la GridView tag 's inteligente y, a partir de la listadesplegable, elija el ItemTemplate del HireDate TemplateField . A continuación,elimine la etiqueta de control y arrastre un calendario de control de la caja deherramientas en la interfaz de edición de plantillas.

Figura 12. Agregue un control de calendario para el ItemTemplate TemplateFieHireDate es. (Clic en la foto para una imagen más grande.)

En este punto, cada fila de la GridView contendrá un calendario de control ensu HireDate TemplateField . Sin embargo, el empleado actual HireDate valor no estáestablecido en cualquier parte del calendario de control, lo que hace quecada calendario de control por defecto para mostrar el mes en curso y la fecha. Pararemediar esto, tenemos que asignar a cadaempleado HireDate al Calendario control SelectedDate y VisibleDate propiedades.

Desde el Calendario de etiquetas inteligentes de control, seleccione EditarDataBinding . Se unen al lado, tanto elSelectedDate y VisibleDate propiedades ala HireDate campo de datos.

Page 199: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 199/3

Figura 13. Enlazar las propiedades SelectedDate y VisibleDate al campo de datHireDate. (Clic en la foto para una imagen más grande.)

Nota El calendario de fechas seleccionado control no necesariamente tiene que servisible. Por ejemplo, un calendario podría tener 01 de agosto 1999, como la fecha

seleccionada, pero se muestra el mes y año actuales. La fecha seleccionada y la fechavisible son especificados por el calendario de controldeSelectedDate y VisibleDate propiedades. Porque queremos tanto a seleccionar elempleado HireDate y asegúrese de que está demostrado, hay que unir ambaspropiedades a la HireDate campo de datos.

Al consultar la página en un navegador, el calendario muestra ahora el mes de la fecha dcontratación del trabajador y elige esa fecha en particular.

Figura 14. Fecha de contratación del empleado se muestra en el controlCalendar. (Clic en la foto para una imagen más grande.)

Nota A diferencia de todos los ejemplos que hemos visto hasta ahora, para este tutoriaque hicimos noestablecer el EnableViewState propiedad a falso para este GridView . razón de esta decisión es que haciendo clic en las fechas del calendario de controlprovoca una post-back, ajuste de la fecha seleccionada del calendario a la fecha acaba dhacer clic. Si el GridView 'estado s de vista esté deshabilitado, no obstante, en cada posback, el GridView de datos de s es de rebote a su origen de datos subyacente, lo que haque la fecha seleccionada del calendario para establecer de nuevo a losempleados HireDate , sobrescribiendo la fecha elegida por el usuario.

Page 200: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 200/3

Para este tutorial, esta es una discusión irrelevante, porque el usuario no es capaz deactualizar el empleado Fecha de contratación . Probablemente sería mejor paraconfigurar el calendario de control, por lo que sus fechas no son seleccionables. Decualquier manera, este tutorial muestra que en algunas circunstancias, el estado de vistadeben estar habilitadas en el fin de proporcionar una cierta funcionalidad.

Paso 4: Muestra el número de días que el empleado

haya trabajado para la empresaHasta ahora, hemos visto dos aplicaciones de TemplateField s:

• La combinación de dos o más campos de datos los valores en una columna• Expresar un valor de datos de campo mediante un control de Web en lugar de text

Un tercer uso de TemplateField s está en la visualización de los metadatos sobreel GridView de datos 's subyacente.Además de mostrar las fechas de los empleados dealquiler, por ejemplo, también puede ser que desee tener una columna que muestra elnúmero total de días que han estado en el trabajo.

Sin embargo, otro uso de TemplateField s se presenta en escenarios en los que los datosubyacentes deben mostrarse de forma diferente en el informe de la página Web de laforma en que se almacena en la base de datos.Imagina que en la tabla empleados tiene campo de Género, que almacena el carácter M o F, para indicar el sexo delempleado. Cuando se muestra esta información en una página Web, que puede ser quedesee para mostrar el sexo como "masculino" o "Mujeres", en lugar de sólo "M" o "F".

En estos dos casos pueden ser manejados por la creación de un método de formato en laclase de código subyacente de la página ASP.NET (o en una biblioteca de clases separadaimplementado como una estática método) que se invoca desde la plantilla. Como unmétodo de formato se invoca desde la plantilla utilizando la misma sintaxis de enlace dedatos visto antes. El método de formato puede tomar en cualquier número de parámetrosino que debe devolver una cadena. Esta cadena se devuelve el código HTML que seinyecta en la plantilla.

Para ilustrar este concepto, vamos a aumentar nuestro tutorial para mostrar una columnque muestra el número total de días que un empleado ha estado en el trabajo. Estemétodo de formato se llevará en un Northwind.EmployeesRowobjeto y devolverlo comuna cadena el número de días que el empleado ha trabajado. Este método se puedeagregar al código subyacente de la página ASP.NET de clase, pero deben ser marcadoscomo protegidos o públicos con el fin de ser accesible desde la plantilla.

protegidos cadena DisplayDaysOnJob (empleado Northwind.EmployeesRow)

{

/ / Hacer HireDate que no es nulo ... si es así, volver "Desconocido"

if (employee.IsHireDateNull ())

return "Desconocido";

más

Page 201: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 201/3

{

/ / Devuelve el número de días entre la corriente

/ / Fecha / hora y HireDate

TimeSpan = ts DateTime.Now.Subtract (employee.HireDate);

volver ts.Days.ToString ("#,## 0 ");

}

}

Debido a que el HireDate campo puede contener NULL los valores de base de datos,primero debe asegurarse de que el valor no es NULL antes de proceder con el cálculo. Sel HireDate valor es NULL , sólo devuelve la cadena "desconocido", y si no es NULL , secalcula la diferencia entre la hora y la Fecha de contratación de valores, y devolver elnúmero de días.

Para utilizar este método, debemos invocarlo desde un TemplateField enel GridView utilizando la sintaxis de enlace de datos. Empezar por agregar unanueva TemplateField a la GridView haciendo clic en el Editar columnas enlace enelGridView tag 's inteligente y añadiendo una nueva TemplateField .

Figura 15. Añadir un TemplateField Nuevo en el GridView. (Clic en la foto parauna imagen más grande.)

Establecer el HeaderText propiedad de este nuevo TemplateField de días en eltrabajo y la HorizontalAlignpropiedad de sus ItemStyle al Centro . Para llamar ala DisplayDaysOnJob método de la plantilla, agregar unItemTemplate y utilizar elsiguiente enlace de datos de la sintaxis:

<% # DisplayDaysOnJob ((Northwind.EmployeesRow)(System.Data.DataRowView) Container.DataItem). Row)%>

Container.DataItem devuelve un DataRowView objeto que se corresponde conel DataSource registro enlazado a laGridViewRow . Su fila propiedad devuelve el

Page 202: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 202/3

establecimiento inflexible de tipos Northwind.EmployeesRow , que se pasa ala DisplayDaysOnJob método. Esta sintaxis de enlace de datos puede aparecerdirectamente en elItemTemplate (como se muestra en la sintaxis declarativa que siguepuede ser asignado al texto de propiedad de una etiqueta de control Web.

Nota Como alternativa, en lugar de pasar de un EmployeesRow ejemplo, que sólopodría pasar en elHireDate valor mediante <% # DisplayDaysOnJob (Eval ("Fecha de

contratación"))%> . Sin embargo, la Eval método devuelve un objeto , por lo que

tendríamos que cambiar nuestraDisplayDaysOnJob firma del método para aceptar unparámetro de entrada del tipo de objeto , en su lugar. No a ciegas puede lanzar la Eval("Fecha de contratación") llamada a una fecha y hora , porque elHireDate columnala tabla Empleados puede contener NULL valores. Por lo tanto, tendría que aceptarun objeto como el parámetro de entrada para el DisplayDaysOnJob método, comprobapara ver si había una base de datos NULL valor (que se puede lograr mediante el usode Convert.IsDBNull (objectToCheck ) ), y luego actuar en consecuencia.

Debido a estas sutilezas, he optado por pasar toda la EmployeesRow ejemplo. En elsiguiente tutorial vamos a ver un ejemplo más apropiado para el uso de la Eval

(" columnName ") sintaxis para pasar un parámetro de entrada en un método de format

A continuación se muestra la sintaxis declarativa para nuestro GridView después de queel TemplateField se ha agregado y la DisplayDaysOnJob método llamado dela ItemTemplate :

<Asp: GridView ID = "GridView1" runat = "server"AutoGenerateColumns = "False" DataKeyNames = "EmployeeID"

DataSourceID = "ObjectDataSource1">

<columnas>

<Asp: TemplateField HeaderText = "Nombre"SortExpression = "Nombre">

<EditItemTemplate>

<Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: TextBox>

</ EditItemTemplate>

<ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("Nombre") %>'></ asp: Label>

<Asp: ID Label = "Label2" runat = "server"Texto ='<%# Eval ("LastName") %>'></ asp: Label>

</ ItemTemplate>

</ Asp: TemplateField>

<Asp: BoundField DataField = "Título" HeaderText = "Título"SortExpression = "Título" />

<Asp: TemplateField HeaderText = "Fecha de contratación"SortExpression = "HireDate">

Page 203: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 203/3

<EditItemTemplate>

<Asp: TextBox ID = "TextBox2" runat = "server"Texto ='<%# Bind ("Fecha de contratación") %>'></ asp: TextBox>

</ EditItemTemplate>

<ItemTemplate>

<Asp: Calendar ID = "Calendar1" runat = "server"SelectedDate ='<%# Bind ("Fecha de contratación")%> '

VisibleDate ='<%# Eval ("Fecha de contratación")%> '>

</ Asp: Calendar>

</ ItemTemplate>

</ Asp: TemplateField>

<asp:TemplateField HeaderText="Days En El Job">

<ItemTemplate>

<% #DisplayDaysOnJob ((Northwind.EmployeesRow) ((System.Data.DataRowView)Container.DataItem). Row)%>

</ ItemTemplate>

<ItemStyle HorizontalAlign="Center" />

</ Asp: TemplateField>

</ Columns>

</ Asp: GridView>

La figura 16 muestra el tutorial completo, cuando se ve a través de un navegador.

Figura 16. Número de días ha sido empleado en el trabajo (Clic en la foto parauna imagen más grande)

Conclusión

Page 204: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 204/3

El TemplateField en el GridView de control permite un mayor grado de flexibilidad en visualización de los datos que está disponible con los controles de otrotipo. Un TemplateField es ideal para situaciones en las que:

• Campos de datos deben ser exhibidos en un GridView columna.• Los datos se expresan mejor mediante un control de Web, en lugar de texto plano.• La salida depende de los datos subyacentes, como la visualización de los metadato

o en formato a los datos.

Además de personalizar la visualización de datos, un TemplateField se utiliza tambiénpara la personalización de las interfaces de usuario utilizado para la edición y la inserciónde datos, como veremos en futuros tutoriales.

Los siguientes dos tutoriales continuar explorando las plantillas, a partir de una mirada eel uso de TemplateField s en un DetailsView . A continuación, pasaremos ala FormView , que utiliza las plantillas en lugar de campos para proporcionar una mayorflexibilidad en el diseño y la estructura de los datos.

Tutorial 13: Uso de TemplateFields enDetailsView 

Scott Mitchell

02 2007

Resumen: El TemplateField en el DetailsView de control permite un mayor grado deflexibilidad en la visualización de datos que está disponible con los controles de campo, yes ideal para múltiples situaciones, muchas de las cuales se discuten en este tutorial. (14páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 13 (Visual C #)

IntroducciónPaso 1: unión de los datos para el DetailsViewPaso 2: La combinación de los precios, las unidades en stock, y las Unidades de Orden enuna filade formato el precio de una monedaagregar los campos de datos que permanecen a la TemplateFieldPaso 3: Personalización de la información de campo interrumpidasconclusión

Introducción

Page 205: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 205/3

El TemplateField ofrece un mayor grado de flexibilidad en la representación de datos dla BoundField ,CheckBoxField , HyperLinkField , y otros controles de datos decampo. En el tutorial anterior vimos con elTemplateField en un GridView a:

• Varias pantallas de datos de campo, los valores en una columna. En concreto, tantoel Nombre y Apellidocampos se combinaron en un GridView columna.

• Utilizar un control Web alternativo para expresar un valor de datos de campo. Hemvisto cómo para mostrar elHiredDate valor con un calendario de control.

• Mostrar la información de estado sobre la base de los datos subyacentes. Mientrasque la tabla Empleados no contiene una columna que devuelve el número de díasque un empleado ha estado en el trabajo, hemos sido capaces de mostrar esainformación en el GridView ejemplo en el tutorial anterior, con el uso deunTemplateField método y el formato.

Lo mismo TemplateFields capacidades disponibles con el GridView también estándisponibles con el DetailsViewcontrol. En este tutorial vamos a mostrar un producto a lavez usando un DetailsView que contiene dos TemplateFields. Laprimera TemplateField combinarála PrecioUnidad , UnitsInStock y UnitsOnOrder campos de datos en

unDetailsView fila. El segundo TemplateField mostrará el valor delas interrumpidas campo, sino que utilizan un método de formato paramostrar SÍ si interrumpidas es cierto , y NO lo contrario.

Figura 1. Dos TemplateFields se utilizan para personalizar la pantalla. (Clic en foto para una imagen más grande.)

Vamos a empezar!

Paso 1: unión de los datos para el DetailsView

Como se discutió en el tutorial anterior, cuando se trabaja con TemplateField s es amenudo más fácil empezar por crear el DetailsView control que contiene

Page 206: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 206/3

sólo BoundField s y luego añadir nuevas TemplateField s o convertir laactual BoundField s para TemplateField s, según sea necesario. Por lo tanto, comenzaeste tutorial, añadiendo unDetailsView a la página a través del diseño y enlazarlo aun ObjectDataSource que devuelve la lista de productos.Estas medidas contribuirán acrear un DetailsView con BoundField s para cada uno de los campos de los productos valor no-booleano y un CheckBoxField para el campo de valor de un booleano(descatalogados).

Abra la página DetailsViewTemplateField.aspx y arrastre un DetailsView del cuadro deherramientas hasta el diseñador.Desde el DetailsView tag 's inteligente optar por añadiun nuevo ObjectDataSource control que invoca el ProductsBLLclase GetProducts() método.

Figura 2. Añadir un nuevo control ObjectDataSource que llama a la GetProducts() método. (Clic en la foto para una imagen más grande.)

Para este informe, retirar el ProductID , IdProveedor , CategoryID ,y ReorderLevel BoundField s. A continuación, cambiar el orden de BoundField s paraque el CategoryName y SupplierName BoundField s aparecen inmediatamente

después de la ProductName BoundField . Siéntase libre para ajustarel HeaderText propiedades y las propiedades de formato para la BoundField s comomejor le parezca. Al igual que con el GridView , estos BoundFieldnivel ediciones sepueden realizar a través de los campos de cuadro de diálogo (se accede haciendo clic eel Editar campos enlace en el DetailsView tag 's inteligente) o por medio de la sintaxisdeclarativa. Por último, limpiar elDetailsView 's Altura y Ancho los valores de lapropiedad con el fin de permitir que el DetailsView para ampliar el control sobre la basede los datos mostrados y comprobar la paginación Activar casilla de verificación de laetiqueta inteligente.

Page 207: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 207/3

Después de realizar estos cambios, el DetailsView marcado declarativo del control debeser similar a lo siguiente:

<Asp: DetailsView ID = "DetailsView1" runat = "server"AutoGenerateRows = "false"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"AllowPaging = "True"

EnableViewState = "false">

<Fields>

<Asp: BoundField DataField = "ProductName" HeaderText = "Producto"

SortExpression = "ProductName" />

<Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"

ReadOnly = "True" SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName" HeaderText = "Proveedor"

ReadOnly = "True" SortExpression = "SupplierName" />

<Asp: BoundField DataField = "CantidadPorUnidad"

HeaderText = "Cantidad / Unidad" SortExpression = "CantidadPorUnidad" />

<Asp: BoundField DataField = "UnitPrice" HeaderText = "Precio"

SortExpression = "UnitPrice" />

<Asp: BoundField DataField = "UnitsInStock"

HeaderText = "Unidades en Stock" SortExpression = "UnitsInStock" />

<Asp: BoundField DataField = "UnitsOnOrder"

HeaderText = "unidades en pedido" SortExpression = "UnitsOnOrder" />

<Asp: CheckBoxField DataField = "interrumpidas"

HeaderText = "interrumpidas" SortExpression = "interrumpidas" />

</ Campos>

</ Asp: DetailsView>

 Tome un momento para ver la página a través de un navegador. En este punto usted debver a un solo producto la lista (Chai), con filas que muestra el nombre del producto,categoría, proveedores, precios, unidades en stock, unidades pedidas, y su estadosuspendido.

Page 208: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 208/3

Figura 3. Detalles del producto se muestran usando una serie deBoundFields. (Clic en la foto para una imagen más grande.)

Paso 2: La combinación de los precios, las unidadesen stock, y las Unidades de Orden en una fila

El DetailsView tiene una fila parael PrecioUnidad , UnitsInStock y UnitsOnOrder campos. Podemos combinar estoscampos de datos en una sola fila con un TemplateField ya sea mediante la adición de unuevo TemplateField o mediante la conversión de uno de losexistentes PrecioUnidad , UnitsInStock y UnitsOnOrder BoundField s enunTemplateField . Aunque yo personalmente prefiero convertir existentes BoundFieldvamos a la práctica mediante la adición de un nuevo TemplateField .

Comience por hacer clic en el Editar campos enlace en el DetailsView tag 's inteligentpara abrir el Campos cuadro de diálogo. A continuación, agregue unnuevo TemplateField y establecer su HeaderText propiedad a precios e inventario ymover el nuevo TemplateField para que se sitúe por encima dela PrecioUnidad BoundField .

Page 209: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 209/3

Figura 4. Añadir un nuevo TemplateField al control DetailsView. (Clic en la fotopara una imagen más grande.)

Debido a que este nuevo TemplateField contendrá los valores que se muestraactualmente en el PrecioUnidad ,UnitsInStock y UnitsOnOrder BoundField s, vamoeliminarlos.

La última tarea para este paso es definir el ItemTemplate marcado por el precio y elInventario de TemplateField , que se puede lograr a través del DetailsView interfaz edición de plantillas en el Diseñador, o con la mano a través de una sintaxis declarativa dcontrol. Al igual que con el GridView , el DetailsView plantilla 's interfaz de edición sepuede acceder haciendo clic en el Editar plantillas de enlace en la etiquetainteligente. Desde aquí se puede seleccionar la plantilla que desea editar en la listadesplegable y luego añadir los controles Web de la caja de herramientas.

Para este tutorial, empezar por agregar una etiqueta de control para el precio y elInventario de TemplateField 'sItemTemplate . A continuación, haga clic en el EditarDataBinding enlace de la Web Label de etiquetas inteligentes de control y obligar a

la del texto de la propiedad Precio por unidad de campo.

Page 210: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 210/3

Figura 5. Enlazar la propiedad Text de la etiqueta para el campo de datos Precipor unidad. (Clic en la foto para una imagen más grande.)

Formato el precio de una moneda

Con esta incorporación, la web de etiquetas de control de precios einventario TemplateField mostrará ahora sólo el precio para el productoseleccionado. La figura 6 muestra una captura de pantalla de nuestro progreso hasta ahocuando se ve a través de un navegador.

Page 211: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 211/3

Figura 6. El precio y el Inventario de TemplateField muestra el precio. (Clic en lfoto para una imagen más grande.)

 Tenga en cuenta que el precio del producto no está formateado como moneda. Conun BoundField , el formato es posible mediante el establecimiento dela HtmlEncode propiedad falsos y la DataFormatString propiedad { 0 :formatSpecifier} . Para un TemplateField , sin embargo, todas las instrucciones deformato debe ser especificado en la sintaxis de enlace de datos, o mediante el uso de un

método de formato definido en alguna parte del código de la aplicación (como en el códigsubyacente de la página ASP.NET de clase).

Para especificar el formato de la sintaxis de enlace de datos utilizados en la Web deetiquetas de control, vuelva a laDataBindings cuadro de diálogo haciendo clic enel Editar DataBinding enlace de la etiqueta tag 's inteligente. Puede escribir lasinstrucciones de formato directamente en el formato de la lista desplegable, o seleccionuna de las cadenas de formato definidas. Al igual que conla BoundField 's DataFormatString propiedad, el formato se especifica mediante { 0formatSpecifier} .

Para el PrecioUnidad campo, utilice el formato de moneda especificado seleccionando edesplegable correspondiente valor de la lista o escribiendo {0: C} con la mano.

Figura 7. Formato del precio de una moneda. (Clic en la foto para una imagenmás grande.)

Declaración, la especificación de formato se indica como un segundo parámetro ala vinculación o Eval método. Los ajustes que acaba de hacer a través de los resultadosde diseño en el siguiente enlace de datos de expresión en el marcado declarativo:

<Asp: ID Label = "Label1" runat = "server" Text ='<%# Eval ("Precio por unidad","{0: C}") %>'/>

Page 212: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 212/3

Adición de los campos de datos restante a laTemplateField

En este punto hemos mostrado y el formato de la PrecioUnidad campo de datos enel precio y el Inventario deTemplateField , pero aún debe mostrarla UnitsInStock y UnitsOnOrder campos. Vamos a mostrar estos en una línea por debadel precio y entre paréntesis. Desde la interfaz de edición de plantillas en el Diseñador,

marcado como se puede agregar colocando el cursor dentro de la plantilla y simplementeescribiendo el texto que se mostrará. Por otra parte, este marcado se pueden introducirdirectamente en la sintaxis declarativa.

Agregue el marcado estático, etiquetas Web controles, y la sintaxis de enlace de datospor lo que el precio e inventario TemplateField muestra el precio y la información deinventario de la siguiente manera:

Precio por unidad

(En archivo / Pedido: UnitsInStock / UnitsOnOrder )

Después de realizar esta tarea, el DetailsView marcado 's declarativo debe ser similar asiguiente:

<Asp: DetailsView ID = "DetailsView1" runat = "server"AutoGenerateRows = "false"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"AllowPaging = "True"

EnableViewState = "false">

<Fields>

<Asp: BoundField DataField = "ProductName"

HeaderText = "Producto" SortExpression = "ProductName" />

<Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"

ReadOnly = "True" SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName"

HeaderText = "Proveedor" ReadOnly = "True"

SortExpression = "SupplierName" />

<Asp: BoundField DataField = "CantidadPorUnidad"

HeaderText = "Cantidad / Unidad" SortExpression = "CantidadPorUnidad" />

<asp:TemplateField HeaderText="Price y Inventory">

<ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"

Texto ='<%# Eval ("Precio por unidad", "{0: C}") %>'></ asp: Label>

Page 213: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 213/3

<br />

<strong>

(En archivo / Pedido: </ strong>

<Asp: ID Label = "Label2" runat = "server"

Texto ='<%# Eval ("UnitsInStock") %>'></ asp: Label>

<strong> / </ strong>

<Asp: Label = ID "Label3" runat = "server"

Texto ='<%# Eval ("UnitsOnOrder")%> '>

</ Asp: Label> <strong>) </ strong>

</ ItemTemplate>

</ Asp: TemplateField>

<Asp: CheckBoxField DataField = "interrumpidas"

HeaderText = "interrumpidas" SortExpression = "interrumpidas" />

</ Campos>

</ Asp: DetailsView>

Con estos cambios, hemos consolidado la información de precios y el inventario en unsolo DetailsView fila.

Figura 8. La información sobre los precios y el inventario se muestra en una sofila. (Clic en la foto para una imagen más grande.)

Page 214: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 214/3

Paso 3: Personalización de la información de campointerrumpidas

Los productos de mesa interrumpidas columna es un valor bit que indica si el productha sido descontinuado. Al enlazar un DetailsView (o GridView ) para un control de origde datos, el valor booleano campos-comointerrumpidas , se implementancomo CheckBoxField s, mientras que los no-booleano campos-como el valor

deProductID , ProductName , y así sucesivamente, se implementancomo BoundField s. El CheckBoxField se muestra como una casilla de verificación condiscapacidad que se comprueba si el valor del campo de datos es cierto , y sin control dotra manera.

En lugar de mostrar la CheckBoxField , que puede ser que desee mostrar en lugar detexto que indica si el producto está descatalogado. Para lograr esto, se podría eliminarel CheckBoxField de la DetailsView y luego añadirunBoundField cuya DataField propiedad se estableció en descatalogados . Tómese umomento para hacer esto.Después de este cambio, el DetailsView muestra eltexto verdadero de productos discontinuados y falsas de los productos que todavía estactivos.

Figura 9. Las cadenas de verdadero y falso se utilizan para mostrar el estado

suspendido. (Clic en la foto para una imagen más grande.)Imagina que no queríamos las cuerdas verdadero o falso para ser utilizado,pero SÍ y NO en su lugar. Esta adaptación se puede realizar con la ayuda deun TemplateField y un método de formato. Un método de formato puede tomar encualquier número de parámetros de entrada, pero debe devolver el HTML (como unacadena) para inyectar en la plantilla.

Agregar un método de formato para clase de código subyacente de la páginaDetailsViewTemplateField.aspx llamadoDisplayDiscontinuedAsYESorNO que aceptaun Northwind.ProductsRow objeto como un parámetro de entrada y devuelve una

Page 215: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 215/3

cadena. Como se discutió en el tutorial anterior, este método debe ser marcadocomo protegido opúblico con el fin de ser accesible desde la plantilla.

Protegidos función DisplayDiscontinuedAsYESorNO (suspendido comoBoolean) As String

Si descontinuado

Retorno "SI"

Más

Retorno "NO"

End If

End Function

Este método comprueba el parámetro de entrada ( suspendido ) y devuelve Sí sies cierto , y NO lo contrario.

Nota En el método de formato examinar en el tutorial anterior, recuerdo que estábamopasando en un campo de datos que puede contener NULL s, y por lo tanto, es necesariocomprobar si el empleadoHiredDate valor de la propiedad había una base dedatos NULL valor antes de acceder alEmployeesRow 's HiredDate la propiedad. Estacomprobación no es necesaria aquí, ya que elinterrumpidas columna no puede tener labase de datos NULL los valores asignados. Por otra parte, es por eso que el método puedaceptar un parámetro de entrada booleana en lugar de tener que aceptarun ProductsRow instancia o un parámetro de tipo de objeto .

Con este método de formato completo, todo lo que queda es para llamar desdeel TemplateField 's ItemTemplate .Para crear el TemplateField , quite

el interrumpidas BoundField y añadir una nueva TemplateField , o convertirelinterrumpidas BoundField en un TemplateField . Luego, desde el punto de vistamarcado declarativo, editar elTemplateField para que contenga sóloun ItemTemplate que invoca el DisplayDiscontinuedAsYESorNO método, pasando evalor de la corriente ProductRow instancia interrumpidas propiedad. Esto se puedeacceder mediante el uso de la Eval método. En concreto, el TemplateField marcado 'sdeben tener el siguiente aspecto:

<Asp: TemplateField HeaderText = "interrumpidas"SortExpression = "interrumpidas">

<ItemTemplate>

<% # DisplayDiscontinuedAsYESorNO ((bool)

Eval ("interrumpidas"))%>

</ ItemTemplate>

</ Asp: TemplateField>

Esto hará que el DisplayDiscontinuedAsYESorNO método que se invoca cuando serepresenta la DetailsView , pasandoel ProductRow instancia interrumpidas valor. Dado que la Eval método devuelve un

Page 216: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 216/3

valor de tipo de objeto , pero el DisplayDiscontinuedAsYESorNO método espera unparámetro de entrada de tipo Boolean , que tire la Evalvalor método de devoluciónde Boole . El DisplayDiscontinuedAsYESorNO método volverá entonces SÍ o NO ,según el valor que recibe. El valor devuelto es lo que se muestra en este DetailsView fil(ver figura 10).

Figura 10. SI o NO los valores se muestran ahora en la fila interrumpidas. (Clic la foto para una imagen más grande.)

Conclusión

El TemplateField en el DetailsView de control permite un mayor grado de flexibilidad la visualización de los datos que está disponible con los controles de campo, y es ideal pasituaciones en las que:

• Campos de datos deben ser exhibidos en un GridView columna.• Los datos se expresan mejor mediante un control de Web, en lugar de texto plano.• La salida depende de los datos subyacentes, como la visualización de los metadato

o en formato a los datos.

Mientras TemplateField s permiten un mayor grado de flexibilidad en la prestación de

los DetailsView datos 's subyacente, el DetailsView de salida todavía se siente un poccuadrado, ya que cada campo se representa como una fila en un HTML <table> .

El FormView de control ofrece un mayor grado de flexibilidad en la configuración de lasalida representada. ElFormView no contiene campos, sino simplemente una serie deplantillas ( ItemTemplate , EditItemTemplate ,HeaderTemplate , y así sucesivamente). Vamos a ver cómo utilizar el FormView para lograr un mayor control dela disposición dictada por el tutorial que viene.

Page 217: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 217/3

Tutorial 14: Uso de las plantillas del FormView

 

Scott Mitchell

02 2007

Resumen: En este tutorial, Scott Mitchell muestra cómo utilizar el FormView de controlpara un diseño más flexible al mostrar un único registro. (8 páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 14 (Visual C #)

IntroducciónPaso 1: Enlace de los datos a los controles FormViewPaso 2: Definición de la ItemTemplate de marcadoConclusión

Introducción

En los últimos dos tutoriales, hemos visto cómo personalizar el control

GridView y DetailsView salidas de los controles"usando TemplateFields . TemplateFields permitir el contenido de un campo específicpara ser altamente personalizados, pero al final tanto el GridView y DetailsView tiene lugar cerrado, de la red -como aspecto. En muchas situaciones, como un diseño decuadrícula, como es lo ideal, pero a veces una forma más fluida, mostrar menos rígido quse necesita. Cuando se muestra un registro único, como un diseño fluido es posible utilizael FormViewcontrol.

A diferencia de los DetailsView , el FormView no se compone de los campos. No sepuede agregar un BoundField oTemplateField a un FormView . En cambio,el FormView se representa mediante plantillas. Piense en

el FormViewcomo DetailsView de control que contiene unúnico TemplateField . El FormView soporta las siguientes plantillas:

• ItemTemplate : se utiliza para hacer el registro en particular se muestra enel FormView .

• HeaderTemplate -Se utiliza para especificar una fila de encabezado opcional.• FooterTemplate -Se utiliza para especificar una fila de pie opcional.• EmptyDataTemplate -Cuando el FormView 's DataSource carece de registros,

el EmptyDataTemplate se utiliza en lugar de la ItemTemplate para la prestacióde marcado del control.

Page 218: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 218/3

• PagerTemplate -Se puede utilizar para personalizar la interfaz de paginaciónpara FormView s que han permitido a la paginación.

• EditItemTemplate / InsertItemTemplate -Se usa para personalizar la interfaz dedición o de la interfaz de inserción para FormView s que soportan estafuncionalidad.

En este tutorial, vamos a examinar con el FormView de control de presentar una pantalde menos rígida de los productos. En lugar de tener campos para el nombre, categoría,

proveedor, y así sucesivamente, el FormView 'sItemTemplate se muestran estos valormediante una combinación de un elemento de cabecera y un <table> (ver Figura 1).

Figura 1. El FormView sale de la cuadrícula de diseño similar al visto en elDetailsView. (Clic en la foto para una imagen más grande)

Paso 1: Enlace de los datos a los controles FormVie

Abra el FormView.aspx página y arrastrar un FormView del cuadro de herramientashasta el diseñador. La primera vez que la adición de la FormView aparece como un cuagris, enseñándonos que un ItemTemplate es necesario.

Page 219: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 219/3

Figura 2. El FormView no se puede representar en el Diseñador de hasta un

ItemTemplate se proporciona. (Clic en la foto para una imagen más grande)El ItemTemplate puede ser creada a mano (a través de la sintaxis declarativa) o puedeser auto-creado por la unión delFormView a un control de origen de datos mediante elDiseñador. Esta auto-creado ItemTemplate contiene HTML que muestra el nombre decada campo y una etiqueta de control, cuyo texto se une a la propiedad el valor delcampo. Este enfoque también auto-crea un InsertItemTemplate y EditItemTemplatelos cuales se rellenan con los controles de entrada para cada uno de los campos de datosdevueltos por el control del origen de datos.

Si desea crear automáticamente la plantilla, desde el FormView tag 's inteligente añadi

un nuevo ObjectDataSourcecontrol que invoca el ProductsBLL clase GetProducts() método. Esto crearáun FormView con ItemTemplate,InsertItemTemplate, y EditItemTemplate . Desdevista Código fuente, quitar el InsertItemTemplate yEditItemTemplate ya que no estáinteresado en la creación de un FormView que admita la edición o inserción todavía.Acontinuación, limpiar el margen dentro del ItemTemplate para que podamos tener unborrón y cuenta nueva para trabajar.

Si prefiere construir el ItemTemplate manualmente, puede agregar y configurarel ObjectDataSource arrastrándolo desde la caja de herramientas hasta el diseñador. Sembargo, no se establece la FormView 's origen de datos del Diseñador. En su lugar, va

a la vista Código fuente y configurar manualmenteel FormView 's DataSourceIDpropiedad a la identificación de valor dela ObjectDataSource . A continuación, agregue manualmente elItemTemplate .

Independientemente de qué enfoque que decidió tomar, en este puntosu FormView marcado 's declarativo debe tener el siguiente aspecto:

<Asp: FormView ID = "FormView1" runat = "server"DataSourceID = "ObjectDataSource1">

<ItemTemplate>

Page 220: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 220/3

 

</ ItemTemplate>

</ Asp: FormView>

 Tome un momento para comprobar la paginación Activar casilla de verificación enel FormView 's etiqueta inteligente, lo que se agrega el AllowPaging = "True" atribuir

la FormView 's sintaxis declarativa. Además, ponga laEnableViewState propiedada Falso .

Paso 2: Definición de marcado de la ItemTemplatede

Con el FormView enlazado a la ObjectDataSource control y configurado para admitir lpaginación, estamos listos para especificar el contenido de la ItemTemplate . Para estetutorial, vamos a tener el nombre del producto aparece en un <h3> título. Después de evamos a usar un HTML <table> para mostrar las propiedades del producto que queda e

una tabla de cuatro columnas en las columnas primera y la tercera lista de los nombres dpropiedades y la lista de segundo y cuarto de sus valores.

Este marcado se pueden introducir a través de la FormView interfaz 's edición deplantillas en el Diseñador o introducir manualmente a través de la sintaxisdeclarativa. Cuando se trabaja con plantillas que generalmente resulta más rápido trabajdirectamente con la sintaxis declarativa, pero no dude en utilizar cualquier técnica que ssientan más cómodos.

El marcado siguiente se muestra el FormView marcado declarativo después dela ItemTemplate estructura 's se ha completado:

<Asp: FormView ID = "FormView1" runat = "server"DataSourceID = "ObjectDataSource1"

AllowPaging = "True" EnableViewState = "false">

<ItemTemplate>

<hr />

<h3> <% # Eval ("ProductName")%> </ h3>

<table border="0">

<tr>

<td class="ProductPropertyLabel"> Categoría: </ td>

<td class="ProductPropertyValue">

<% # Eval ("NombreCategoría")%> </ td>

<td class="ProductPropertyLabel"> Proveedor: </ td>

<td class="ProductPropertyValue">

Page 221: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 221/3

<% # Eval ("SupplierName ")%></ td>

</ Tr>

<tr>

<td class="ProductPropertyLabel"> Precio: </ td>

<td class="ProductPropertyValue"> <% # Eval ("Precio por unidad",

"{0: C}")%> </ td>

<td unidades class="ProductPropertyLabel"> En Stock: </ td>

<td class="ProductPropertyValue">

<% # Eval ("UnitsInStock ")%></ td>

</ Tr>

<tr>

<td unidades class="ProductPropertyLabel"> Pedido: </ td>

<td class="ProductPropertyValue">

<% # Eval ("UnitsOnOrder")%> </ td>

<td class="ProductPropertyLabel"> nivel de pedido: </ td>

<td class="ProductPropertyValue">

<% # Eval ("ReorderLevel ")%></ td>

</ Tr>

<tr>

<td class="ProductPropertyLabel"> Cantidad / Unidad </ td>

<td class="ProductPropertyValue">

<% # Eval ("CantidadPorUnidad")%> </ td>

<td class="ProductPropertyLabel"> Discontinuado: </ td>

<td class="ProductPropertyValue">

<Asp: CheckBox runat = "server" Enabled = "false"

Comprobar ='<%# Eval ("interrumpidas")%> '/>

</ Td>

</ Tr>

</ Table>

<hr />

</ ItemTemplate>

</ Asp: FormView>

Page 222: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 222/3

 Tenga en cuenta que los datos de la sintaxis de enlace- <%% # Eval("ProductName")> , por ejemplo-puede ser inyectado directamente en la salida de laplantilla. Es decir, no tiene que ser asignado a una etiqueta de control detexto depropiedad. Por ejemplo, tenemos el ProductName valor que aparece enun <h3> elemento mediante <h3> <% # Eval ("ProductName")%> </ h3> , que pael producto Chai se representan como <h3> Chai </ h3 > .

El ProductPropertyLabel y ProductPropertyValue clases CSS se utilizan para

especificar el estilo de los nombres de productos y valores de propiedades enel <table> . Estas clases CSS se definen en styles.css y hacer que los nombres depropiedad a ser valientes y alineados a la derecha y añadir un relleno derecho a los valorde propiedad.

Porque no hay CheckBoxFields disponible con el FormView , con el fin de mostrarla interrumpidas valor como una casilla de verificación, hay que añadir nuestrapropia CheckBox control. El Habilitado propiedad está establecida enfalso , por lo quede sólo lectura, y el CheckBox 's Chequeado propiedad está vinculado al valor delasinterrumpidas campo de datos.

Con el ItemTemplate completa, la información del producto se muestra de una maneramucho más fluida. Comparar elDetailsView salida del tutorial anterior (Figura 3) con lasalida generada por el FormView en este tutorial (Figura 4).

Figura 3. La salida DetailsView rígida

Page 223: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 223/3

Figura 4. El líquido de salida FormView (Clic en la foto para una imagen másgrande)

Conclusión

Mientras que el GridView y DetailsView controles pueden tener su salida personalizadoutilizando TemplateFields , ambos todavía presentar sus datos en una cuadrícula, enformato cuadrado. Para esos momentos en un solo registro tiene que ser demostrado conun formato menos rígido, el FormView es una opción ideal. Al igual que el DetailsViewel FormView representa un único registro de su origen de datos , pero, a diferencia

del DetailsView , se compone sólo de las plantillas y no soporta campos.Como hemos visto en este tutorial, el FormView permite un diseño más flexible al mostun único registro. En futuros tutoriales, vamos a examinar el DataList y el repetidorde controles, que proporcionan el mismo nivel de flexibilidad como el FormsView , peroson capaces de mostrar varios registros (como el GridView ).

Edición, inserción y eliminación de datos

Tutorial 16: Una visión general de Actualizar,insertar y borrar datos 

Scott Mitchell

Page 224: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 224/3

03 2007

Resumen: En este tutorial, Scott Mitchell explica cómo asignar el Insert () , Update() y Delete () los métodos de laObjectDataSource a los métodos de las clases en el BLasí como la forma de configurar el GridView , DetailsView yFormView controles paraproporcionar capacidades de modificación de datos. (45 páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 16 (Visual C #)

IntroducciónPaso 1: Creación de la inserción, actualización y eliminación Tutoriales Páginas WebPaso 2: Agregar y configurar el control ObjectDataSourceexaminando el ObjectDataSource marcadoPaso 3: Agregar un control web de datos y configuración que para la modificación de datoEliminación de datos del GridViewedición de datos con GridViewInsertar, editar y eliminar datos con los DetailsView

Uso del FormView para un sistema más flexible de datos Modificación de la interfaz deusuarioConclusión

Introducción

A través de los tutoriales de varios años, hemos examinado cómo mostrar los datos en unpágina ASP.NET usando elGridView , DetailsView y FormView controles. Estos controlsólo trabajar con los datos que se suministra a los mismos. Por lo general, estos controlesde acceso de datos a través del uso de un control de origen de datos, tales como

el ObjectDataSource . Hemos visto cómo el ObjectDataSource actúa como un proxyentre la página de ASP.NET y los datos subyacentes. Cuando un GridView debe mostrarlos datos, se invoca el Select () el método de suObjectDataSource , que a su vez llamaun método de nuestra lógica de negocio Layer (BLL), que llama a un método en el que esapropiado la capa de acceso a datos (DAL) TableAdapter, que a su vez envía un SELECTde la consulta a la base de datos Northwind.

Recordemos que cuando creamos el TableAdapters en el DAL en nuestro primer tutorial ,Microsoft Visual Studio agrega automáticamente métodos para insertar, actualizar yeliminar datos de la tabla de base de datos subyacente.Por otra parte, en la creación deuna capa de lógica de negocios , hemos diseñado los métodos de la BLL que llamó a esto

métodos de modificación de datos DAL.

Además de su Selección () método, el ObjectDataSource también tiene Insert() , Update () y Delete () métodos. Al igual que el Select () método, estos tres métodose pueden asignar a los métodos de un objeto subyacente. Cuando se configura parainsertar, actualizar o eliminar datos, el GridView , DetailsView y FormView controlesproporcionan una interfaz de usuario para modificar los datos subyacentes. Esta interfaz usuario llama al Insert () , Update () yDelete () los métodos de la ObjectDataSourceque luego llamar a los métodos asociados del objeto subyacente (ver Figura 1).

Page 225: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 225/3

Figura 1. El insert (), Update () y Eliminar () de la ObjectDataSource servir comouna aproximación a la BLL. (Clic en la foto para una imagen más grande.)

En este tutorial, vamos a ver cómo asignar las Insert () , Update () y Delete () losmétodos de la ObjectDataSource a los métodos de las clases en el BLL, así como la formde configurar el GridView , DetailsView y FormView controles para proporcionarcapacidades de modificación de datos.

Paso 1: Creación de la inserción, actualización yeliminación de páginas Web Tutoriales

Antes de empezar a explorar la manera de insertar, actualizar y eliminar datos, primerotome un momento para crear las páginas ASP.NET en nuestro proyecto de sitio Web quevamos a necesitar para este tutorial y los siguientes.Empezar por agregar una nuevacarpeta llamada EditInsertDelete. A continuación, agregue las siguientes páginas ASP.NEa esa carpeta, asegurándose de asociar cada página con la página maestra Site.master:

• Default.aspx• Basics.aspx• DataModificationEvents.aspx• ErrorHandling.aspx• UIValidation.aspx• CustomizedUI.aspx• OptimisticConcurrency.aspx• ConfirmationOnDelete.aspx• UserLevelAccess.aspx

Page 226: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 226/3

Figura 2. Agregar las páginas ASP.NET para la modificación de datosrelacionados con tutoriales.

Al igual que en las otras carpetas, Default.aspx en la carpeta EditInsertDelete mostrará u

lista de los tutoriales en su sección. Hay que recordar que el control de usuarioSectionLevelTutorialListing.ascx proporciona esta funcionalidad. Por lo tanto, añadir estecontrol de usuario para Default.aspx arrastrándolo desde el Explorador de soluciones a lavista Diseño de la página.

Page 227: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 227/3

Figura 3. Agregar el control de usuario SectionLevelTutorialListing.ascx aDefault.aspx. (Clic en la foto para una imagen más grande.)

Por último, añadir las páginas como entradas al archivo Web.sitemap. En concreto, agregel marcado siguiente después de que el formato personalizado <siteMapNode> :

<Título siteMapNode = "Editar, insertar y eliminar"

url = "~ / EditInsertDelete / Default.aspx"

description = "Ejemplos de informes que proporcionan edición, inserción,

y eliminación de las capacidades ">

 

<SiteMapNode url = "~ / EditInsertDelete / Basics.aspx"

title = "Conceptos básicos"

description = "examina los fundamentos de la modificación de datos con la

Controles GridView, DetailsView y FormView. "/>

<SiteMapNode url = "~ / EditInsertDelete / DataModificationEvents.aspx"

title = "Datos de eventos de modificación"

description = "explora los eventos provocados por el ObjectDataSource

pertinentes a la modificación de datos. "/>

<SiteMapNode url = "~ / EditInsertDelete / ErrorHandling.aspx"

title = "Control de errores"

description = "Aprenda a manejar con gracia las excepciones planteadas

Page 228: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 228/3

durante el flujo de trabajo de modificación de datos. "/>

<SiteMapNode url = "~ / EditInsertDelete / UIValidation.aspx"

title = "Agregar validación de entrada de datos"

description = "Ayuda a prevenir la entrada de datos, errores, proporcionandovalidación. "/>

<SiteMapNode url = "~ / EditInsertDelete / CustomizedUI.aspx"

title = "Personalización de la interfaz de usuario"

description = "Personalizar el usuario de edición e inserción deinterfaces. "/>

<SiteMapNode url = "~ / EditInsertDelete / OptimisticConcurrency.aspx"

title = "concurrencia optimista"

description = "Aprenda cómo ayudar a evitar que los usuarios simultáneos de

overwritting los cambios respectivos. "/>

<SiteMapNode url = "~ / EditInsertDelete / ConfirmationOnDelete.aspx"

title = "Confirmar en Delete"

description = "Pedir al usuario la confirmación al eliminar unregistro. "/>

<SiteMapNode url = "~ / EditInsertDelete / UserLevelAccess.aspx"

title = "Capacidad de límite basado en el usuario"

description = "Aprenda a limitar la funcionalidad de modificación de datos

basado en el rol de usuario o los permisos. "> /

</ SiteMapNode>

Después de actualizar Web.sitemap, tome un momento para ver el sitio Web de tutorialetravés de un navegador. El menú de la izquierda ahora incluye artículos de la edición,inserción y eliminación de tutorías, como se muestra en la Figura 4.

Page 229: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 229/3

Figura 4. El mapa del sitio incluye ahora entradas para la edición, inserción yeliminación de tutoriales.

Paso 2: Agregar y configurar el controlObjectDataSource

Debido a que el GridView , DetailsView y FormView difieren en su capacidad demodificación de datos y el diseño, vamos a examinar uno por uno. En lugar de tener cadauno su propio control del uso de ObjectDataSource , sin embargo, vamos a crear unúnico ObjectDataSource que los tres ejemplos de control se puede compartir.

Abra la página Basics.aspx, arrastre un ObjectDataSource desde el Cuadro deherramientas hasta el Diseñador, y haga clic en el Configurar origen de datos de enlade la etiqueta inteligente. Debido a que el ProductsBLL es la única clase de plomo ensangre que proporciona la edición, inserción y eliminación de los métodos, configurarelObjectDataSource para utilizar esta clase.

Page 230: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 230/3

Figura 5. Configurar el ObjectDataSource se utiliza la clase ProductsBLL. (Clic ela foto para una imagen más grande.)

En la siguiente pantalla se puede especificar qué métodos de la ProductsBLL clase seasignan a la Selección () , Insert () , Update () y Delete () los métodos dela ObjectDataSource mediante la selección de la ficha correspondiente y elegir el métode la gota- la lista desplegable. Figura 6, que debe parecer familiar por ahora, losmapas Seleccione () el método de la ObjectDataSource a la GetProducts () el métod

de la ProductsBLL clase. El Insert () , Update () yDelete () métodos se puedenconfigurar mediante la selección de la ficha correspondiente de la lista en la parte superi

Page 231: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 231/3

Figura 6. Tienen el ObjectDataSource devolver todos los productos. (Clic en lafoto para una imagen más grande.)

Las figuras 7, 8 y 9 muestran la ACTUALIZACIÓN , INSERTAR y BORRAR las pestañas,respectivamente, de laObjectDataSource . Configurar estas fichas, por lo que el Insert() , Update () y Delete () métodos de invocación delaUpdateProduct , AddProduct y DeleteProduct métodos, respectivamente, dela ProductsBLL clase.

Page 232: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 232/3

Figura 7. Mapa del ObjectDataSource método update () con el método de la claUpdateProduct ProductsBLL es.(Clic en la foto para una imagen más grande.)

Figura 8. Mapa del ObjectDataSource Insert () para el método AddProduct laclase de ProductsBLL. (Clic en la foto para una imagen más grande.)

Figura 9. Mapa del ObjectDataSource Eliminar () para el método DeleteProductclase de ProductsBLL. (Clic en la foto para una imagen más grande.)

Page 233: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 233/3

Usted puede haber notado que las listas desplegables enla ACTUALIZACIÓN , INSERTAR y BORRAR las fichas ya tiene estos métodosseleccionados. Esto es gracias a nuestro uso de la DataObjectMethodAttribute , quedecora los métodos de ProductsBLL . Por ejemplo, el DeleteProduct método tiene lasiguiente firma:

[System.ComponentModel.DataObjectMethodAttribute

(System.ComponentModel.DataObjectMethodType.Delete, true)]

pública DeleteProduct bool (int ProductID)

{

...

}

El DataObjectMethodAttribute atributo indica el propósito de cada método, ya sea paseleccionar, insertar, actualizar o eliminar, y si es o no es el valor predeterminado. Si seomite estos atributos al crear clases BLL, tendrá que seleccionar manualmente los métod

de la ACTUALIZACIÓN , INSERTAR y BORRAR las fichas.

Después de asegurarse de que se tomen las ProductsBLL métodos se asignan ala inserción () , Update () y Delete ()los métodos de la ObjectDataSource , haga clicen Finalizar para completar el asistente.

Examinar el marcado ObjectDataSource

Después de configurar el ObjectDataSource a través de su asistente, vaya a la vista decódigo fuente para examinar el marcado generado

declarativa. El <asp:ObjectDataSource> etiqueta especifica el objeto subyacente y losmétodos de invocación para. Además,hay DeleteParameters , UpdateParameters y InsertParameters que se asignan a loparámetros de entrada para el AddProduct , UpdateProduct y DeleteProduct métodde la ProductsBLL clase:

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"

DeleteMethod = "DeleteProduct" InsertMethod = "AddProduct"

OldValuesParameterFormatString = "original_ {0}"SelectMethod = "GetProducts"

TypeName = "ProductsBLL" UpdateMethod = "UpdateProduct">

<DeleteParameters>

<asp:Parameter Name="productID" Type="Int32" />

</ DeleteParameters>

<UpdateParameters>

<asp:Parameter Name="productName" tipo="String" />

<asp:Parameter Name="supplierID" Type="Int32" />

Page 234: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 234/3

<asp:Parameter Name="categoryID" Type="Int32" />

<asp:Parameter Name="quantityPerUnit" tipo="String" />

<asp:Parameter Name="unitPrice" Type="Decimal" />

<asp:Parameter Name="unitsInStock" Type="Int16" />

<asp:Parameter Name="unitsOnOrder" Type="Int16" />

<asp:Parameter Name="reorderLevel" Type="Int16" />

<asp:Parameter Name="discontinued" Type="Boolean" />

<asp:Parameter Name="productID" Type="Int32" />

</ UpdateParameters>

<InsertParameters>

<asp:Parameter Name="productName" tipo="String" />

<asp:Parameter Name="supplierID" Type="Int32" />

<asp:Parameter Name="categoryID" Type="Int32" />

<asp:Parameter Name="quantityPerUnit" tipo="String" />

<asp:Parameter Name="unitPrice" Type="Decimal" />

<asp:Parameter Name="unitsInStock" Type="Int16" />

<asp:Parameter Name="unitsOnOrder" Type="Int16" />

<asp:Parameter Name="reorderLevel" Type="Int16" />

<asp:Parameter Name="discontinued" Type="Boolean" />

</ InsertParameters>

</ Asp: ObjectDataSource>

El ObjectDataSource incluye un parámetro para cada uno de los parámetros de entradpara sus métodos asociados, así como una lista de SelectParameters está presentecuando el ObjectDataSource se configura para llamar a un método de selección queespera un parámetro de entrada (como GetProductsByCategoryID( IdCategoría ) ). Como veremos en breve, los valores deestos DeleteParameters , UpdateParameters y InsertParameters se ajustanautomáticamente por el GridView , DetailsView y FormView , antes de invocar el Inse() , Update () o Eliminar () el método de la ObjectDataSource . Estos valores tambiénse pueden establecer mediante programación, según sea necesario, como veremos en ututorial en el futuro.

Un efecto secundario de utilizar el asistente para configurar a ObjectDataSource es quVisual Studio establece lapropiedad OldValuesParameterFormatString a original_{0} . Este valor de la propiedad se utiliza para incluir los valores originales de los datosque se está editando y es útil en dos situaciones:

Page 235: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 235/3

• Si, durante la edición de un registro, los usuarios pueden cambiar el valor de claveprincipal. En este caso, tanto el nuevo valor de clave principal y el valor original declave principal debe ser siempre, por lo que el registro con el valor de clave principoriginal se puede encontrar y tener su valor actualizado en consecuencia.

• Cuando se utiliza la concurrencia optimista. Concurrencia optimista es una técnicapara asegurarse de que dos usuarios simultáneos no sobrescribir los cambiosrespectivos, y es el tema para un tutorial en el futuro.

El OldValuesParameterFormatString propiedad indica el nombre de los parámetros dentrada en la actualización del objeto subyacente y eliminar los métodos para los valoresoriginales. Hablaremos de esta propiedad y su propósito con mayor detalle cuando seexplora la simultaneidad optimista. Lo menciono ahora, sin embargo, porque nuestrosmétodos de plomo en sangre no esperan que los valores originales, y por lo tanto esimportante que eliminemos esta propiedad. Saliendo dela OldValuesParameterFormatString propiedad establecida en otra cosa que el valorpor defecto ( {0} ) se producirá un error cuando un control de datos de la Web intentainvocar el Update () o Eliminar () el método de la ObjectDataSource , porqueel ObjectDataSource tratará de pasar en ambasla UpdateParameters oDeleteParameters especificados, así como los parámetros de

valor original.

Si esto no es muy clara en este momento, no se preocupe, vamos a examinar estapropiedad y su utilidad en un tutorial futuro. Por ahora, sólo asegúrese de eliminar ya seaesta declaración de propiedad por completo de la sintaxis declarativa o establecer el valoen el valor por defecto ( {0} ).

Nota Si usted acaba de limpiar el OldValuesParameterFormatString valor de lapropiedad desde la ventana Propiedades de la vista de diseño, la propiedad seguiráexistiendo en la sintaxis declarativa, sino que se define como una cadena vacía. Esto,lamentablemente, todavía se traducirá en el mismo problema que discutimosanteriormente. Por lo tanto, ya sea quitar la propiedad por completo de la sintaxisdeclarativa o, desde la ventana Propiedades, establezca el valor por defecto, {0} .

Paso 3: Agregar un control web de datos yconfiguración que para la modificación de datos

Después de que el ObjectDataSource se ha añadido a la página y configurado, estamoslistos para agregar controles de datos a la página Web, tanto para mostrar los datos yproporcionar un medio para el usuario final para modificarlo.Vamos a ver enel GridView , DetailsView y FormView por separado, ya que estos controles web dedatos difieren en su capacidad de modificación de datos y la configuración.

Como veremos en el resto de este artículo, la adición de una edición muy básica, insercióy eliminación de apoyo a través del GridView , DetailsView y FormView controles esrealmente tan fácil como comprobar un par de casillas de verificación. Hay muchos maticy casos extremos en el mundo real que hacen de proporcionar dicha funcionalidad máscomplicado que simplemente apuntar y hacer clic. En este tutorial, sin embargo, se centrexclusivamente en demostrar simple modificación de datos capacidades. Tutoriales futurestudie los problemas que sin duda surgirán en un ambiente del mundo real.

Page 236: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 236/3

Borrado de datos de la GridView

Inicio arrastrando un GridView del cuadro de herramientas hasta el diseñador. Acontinuación, enlazar elObjectDataSource al GridView mediante la selección de la listdesplegable en el GridView tag 's inteligente. En este punto, el GridView marcado 'sdeclarativo será el siguiente:

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1">

<columnas>

<Asp: BoundField DataField = "ProductID" HeaderText = "ProductID"

InsertVisible = "false"

ReadOnly = "True" SortExpression = "ProductID" />

<Asp: BoundField DataField = "ProductName"HeaderText = "ProductName"

SortExpression = "ProductName" />

<Asp: BoundField DataField = "IdProveedor" HeaderText = "IdProveedor"

SortExpression = "IdProveedor" />

<Asp: BoundField DataField = "CategoryID" HeaderText = "CategoryID"

SortExpression = "CategoryID" />

<Asp: BoundField DataField = "CantidadPorUnidad"

HeaderText = "CantidadPorUnidad"SortExpression = "CantidadPorUnidad" />

<Asp: BoundField DataField = "UnitPrice" HeaderText = "UnitPrice"

SortExpression = "UnitPrice" />

<Asp: BoundField DataField = "UnitsInStock"

HeaderText = "UnitsInStock" SortExpression = "UnitsInStock" />

<Asp: BoundField DataField = "UnitsOnOrder"

HeaderText = "UnitsOnOrder" SortExpression = "UnitsOnOrder" />

<Asp: BoundField DataField = "ReorderLevel"

HeaderText = "ReorderLevel" SortExpression = "ReorderLevel" />

<Asp: CheckBoxField DataField = "interrumpidas"

HeaderText = "interrumpidas" SortExpression = "interrumpidas" />

<Asp: BoundField DataField = "CategoryName"

HeaderText = "CategoryName" ReadOnly = "True"

Page 237: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 237/3

SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName"

HeaderText = "SupplierName" ReadOnly = "True"

SortExpression = "SupplierName" />

</ Columns>

</ Asp: GridView>

Enlazar el GridView a la ObjectDataSource a través de su etiqueta inteligente tiene doventajas:

• BoundField s y CheckBoxField s se crean automáticamente para cada uno de locampos que es devuelta por elObjectDataSource . Por otra parte,el BoundField y CheckBoxField propiedades 's se establecen basándose en losmetadatos del campo subyacente. Por ejemplo,el ProductID , CategoryName y SupplierName campos están marcados como d

sólo lectura en el ProductsDataTable y, por tanto, no debe ser actualizable duranla edición. Para solucionar esto, la propiedades ReadOnly de estos BoundField s sestablecen en verdad .

• La propiedad DataKeyNames se asigna al campo de clave principal (s) del objetosubyacente. Esto es esencial cuando se utiliza el GridView para editar o eliminardatos, ya que esta propiedad indica que el campo (o conjunto de campos) queidentifica de forma única cada registro. Para más información sobreel DataKeyNamespropiedad, se refieren de nuevo a la maestro / detalle utilizandoun GridView maestro seleccionable con un DetailView Detalles tutorial.

Mientras que el GridView se puede enlazar a los ObjectDataSource a través de la

ventana Propiedades o sintaxis declarativa, esto requiere que usted agregue laadecuada BoundField y DataKeyNames marcado de forma manual.

El GridView control proporciona soporte integrado para la edición a nivel de fila yeliminación. Configuración de unGridView para apoyar la eliminación agrega una columde eliminar los botones. Cuando el usuario hace clic en elEliminar botón para una filadeterminada, sobreviene una devolución de datos y el GridView realiza los siguientespasos:

1. El DeleteParameters valor (s) del ObjectDataSource se les asigna.2. La Eliminar () el método de la ObjectDataSource se invoca, borrar el registro

especificado.3. El GridView se vuelve a enlazar con el ObjectDataSource invocando su Select

() método.

Los valores que se asignan a la DeleteParameters son los valores dela DataKeyNames campo (s) de la fila cuyoEliminar botón se hizo clic. Por lo tanto, esvital que el DataKeyNames propiedad de un GridView está correctamenteconfigurada. Si se trata de falta, el DeleteParameters se le asignará un valor de null eel paso 1, que a su vez no resultará en ningún registro eliminado en el paso 2.

Page 238: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 238/3

Nota El DataKeys colección se almacena en el estado de control del GridView , lo qusignifica que elDataKeys valores serán recordados a través de devolución de datos inclusi el estado de vista de laGridView se ha desactivado. Sin embargo, es muy importanteque el estado de vista siguen siendo habilitado para GridView s que el apoyo de editar oborrar (el comportamiento por defecto). Si se establece la EnableViewState propiedaddel GridView al falso , el comportamiento de editar y eliminar no tendrán ningúnproblema para un solo usuario, pero, si hay usuarios al mismo tiempo la eliminación dedatos, existe la posibilidad de que estos usuarios al mismo tiempo por accidente podría

eliminar o modificar los registros que no tenían la intención de eliminar o editar. (Ver laentrada de mi blog,ADVERTENCIA: punto de concurrencia con ASP.NET 2.0 GridViews /DetailsView / FormViews que la edición de apoyo y / o eliminar y cuyo punto de vista delEstado es reducida ., para más información)

Esta misma advertencia se aplica también a DetailsView s y FormView s.

Para agregar las capacidades de borrar a un GridView , basta con ir a la etiquetainteligente y comprobar el Habilitar eliminación casilla de verificación.

Figura 10. Compruebe la Habilitar eliminación casilla de verificación.

Comprobación de la Habilitar eliminación casilla de verificación de la etiqueta inteligenañade un CommandField a la GridView . El CommandField hace una columna enel GridView con botones para realizar una o más de las siguientes tareas: la selección dun registro, edición de un registro, eliminar un registro. Anteriormente hemos visto

laCommandField en la acción con la selección de registros en el maestro / detalleutilizando un GridView maestro seleccionable con un DetailView Detalles tutorial.

El CommandField contiene una serie de ShowXButton propiedades que indican lo queuna serie de botones que aparecen en el CommandField . Al marcar la Habilitareliminación casilla de verificación,un CommandField cuyaShowDeleteButton propiedad se establece en cierto ha sidoañadido a la columnas de la colección de GridView .

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"

Page 239: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 239/3

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1">

<columnas>

<asp:CommandField ShowDeleteButton="True" />

... BoundFields eliminado debido a la brevedad ...

</ Columns>

</ Asp: GridView>

En este punto, lo creas o no, hemos terminado con la adición de soporte para la eliminacde GridView ! Como muestra la Figura 11 se muestra, al visitar esta página a través de navegador, una columna de eliminar los botones está presente.

Figura 11. El CommandField agrega una columna de botones Eliminar. (Clic en lfoto para una imagen más grande.)

Si usted ha sido la construcción de este tutorial desde el principio por su propia cuenta,

cuando se prueba esta página, haga clic en el Eliminar botón se producirá unaexcepción. Continúe leyendo para aprender acerca de por qué estas excepciones seplantearon y cómo solucionarlos.

Nota Si va a seguir utilizando a lo largo de la descarga que acompaña a este tutorial,estos problemas ya han sido contabilizados. Sin embargo, os animo a leer a través de losdetalles que siguen para ayudar a identificar problemas que puedan surgir, así comosoluciones adecuadas.

Si, al intentar eliminar un producto, se obtiene una excepción cuyo mensaje es similar a"ObjectDataSource 'ObjectDataSource1' no pudo encontrar un método no genérico"

Page 240: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 240/3

DeleteProduct "que tiene parámetros: ProductID, original_ProductID," es probable que seolvidó de quitar el OldValuesParameterFormatString propiedaddelObjectDataSource . Con la OldValuesParameterFormatString propiedadespecificada, el ObjectDataSource intenta pasartanto productID y original_ProductID parámetros de entrada ala DeleteProduct método. DeleteProduct , sin embargo, sólo acepta un solo parámetrde entrada, por lo tanto, la excepción. Extracción delaOldValuesParameterFormatString propiedad (o si se establece en {0} ) instruye a

los ObjectDataSource no intentar pasar en el parámetro de entrada original.

Figura 12. Asegúrese de que la propiedad OldValuesParameterFormatString seha eliminado. (Clic en la foto para una imagen más grande.)

Incluso si se había quitado la OldValuesParameterFormatString propiedad, ustedseguirá recibiendo una excepción al intentar eliminar un producto, con el mensaje "Lainstrucción DELETE en conflicto con 'FK_Order_Details_Products" la restricción dereferencia. " La base de datos Neptuno contiene una restricción de clave externa entrelos detalles del pedido y Productos tablas, lo que significa que un producto no puedeser eliminado del sistema si hay uno o más registros de que en la OrdenDetalles mesa. Debido a que cada producto en la base de datos Neptuno tiene al menosun registro de detalles del pedido , no se puede eliminar ningún producto hasta que seelimine primero la asociada detalles para los registros del producto.

Page 241: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 241/3

Figura 13. Una restricción de clave foránea se prohíbe la eliminación de losproductos. (Clic en la foto para una imagen más grande.)

Para nuestro tutorial, vamos a eliminar todos los registros de la Orden Detalles de latabla. En una aplicación real, tendríamos la opción de:

•  Tiene otra pantalla para administrar la información para los detalles.• Aumentar la DeleteProduct método para incluir lógica para eliminar los detalles d

pedido del producto especificado.• Modificar la consulta SQL que se utiliza por el TableAdapter que incluirá la

eliminación de los detalles del pedido del producto especificado.

Vamos a eliminar todos los registros de la Orden Detalles de mesa para eludir larestricción de clave foránea. Vaya al Explorador de servidores en Visual Studio, haga clicel northwnd.mdf nodo y seleccione Nueva consulta . Luego, en la ventana de consultejecute la siguiente instrucción: DELETE FROM [Order Details]

Page 242: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 242/3

Figura 14. Eliminar todos los registros de la tabla Detalles de pedidos. (Clic en foto para una imagen más grande.)

Después de la limpieza de los Detalles de pedidos de mesa, haciendo clic enel Eliminar botón elimina el producto sin error. Si al hacer clic en el Eliminar botón, no elimina el producto, asegúrese de que el DataKeyNames propiedad del GridView seestablece en el campo de clave principal ( ProductID ).

Nota Al hacer clic en el Eliminar botón, sobreviene una devolución de datos y el regisse elimina.Esto puede ser peligroso, porque es fácil de hacer clic en la fila equivocada

de eliminar el botón accidentalmente. En un futuro tutorial, vamos a ver cómo agregaruna confirmación del lado del cliente al eliminar un registro.

La edición de datos con el GridView

 Junto con la eliminación, el GridView control también proporciona soporte integrado deedición de nivel de fila.Configuración de un GridView para apoyar la edición agrega unacolumna de editar los botones. Desde la perspectiva del usuario final, haga clic en unafila Editar botón hace que la fila que se pueden editar, convertir las células en cuadros dtexto que contienen los valores existentes y la sustitución de la edición con el

botón Actualizar y Cancelar botones.Después de hacer los cambios deseados, losusuarios pueden hacer clic en el Actualizar botón para confirmar los cambioso Cancelar botón para deshacerse de ellos. En cualquier caso, después de hacerclic actualización o Cancelar, el GridView vuelve a su estado pre-edición.

Desde nuestra perspectiva como desarrollador de páginas, cuando el usuario hace clic enel Editar botón para una fila determinada, sobreviene una devolución de datos yel GridView realiza los siguientes pasos:

1. El EditItemIndex propiedad del GridView se asigna al índice de la filacuyos Editar botón se hizo clic.

Page 243: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 243/3

2. El GridView se vuelve a enlazar con el ObjectDataSource invocando su Select() método.

3. El índice de la fila que coincide con el EditItemIndex se representa en "modo deedición." En este modo, laedición se sustituye por elbotón Actualizar y Cancelar botones y BoundField s cuya ReadOnly propiedadse establecen en falso (por defecto) se representan como TextBox controles Webcuyo texto propiedades se asignan a los valores de los campos de datos.

En este punto, el marcado se devuelve al navegador, permitiendo al usuario final parahacer cualquier cambio a los datos de la fila. Cuando el usuario hace clic enla actualización de botón, se produce una devolución de datos y elGridView realiza lossiguientes pasos:

1. El UpdateParameters valor (s) del ObjectDataSource se asignan los valoresintroducidos por el usuario final en el GridView 's interfaz de edición.

2. El Update () el método de la ObjectDataSource se invoca, la actualización delregistro especificado.

3. El GridView se vuelve a enlazar con el ObjectDataSource invocando su Select() método.

Los valores de clave principal que fueron asignados a la UpdateParameters en el paso provienen de los valores que se especifican en el DataKeyNames propiedad, mientras qlos valores clave no primarios provienen del texto en elTextBox controles Web de la filaeditada. Al igual que con la eliminación, es vital que el DataKeyNames propiedad deun GridView está correctamente configurada. Si se trata de falta,el UpdateParameters valor de clave principal se le asignará un valor de null en el paso1, que a su vez no resultará en ningún registro actualizado en el paso 2.

Edición de la funcionalidad se puede activar con sólo el control de la ediciónActivar casilla de verificación en elGridView tag 's inteligente.

Figura 15. Compruebe la Habilitar edición casilla de verificación.

Page 244: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 244/3

Comprobación de la Habilitar edición casilla de verificación Agregaruna CommandField (si es necesario) y establecersu ShowEditButton propiedad verdadera . Como vimos anteriormente,el CommandField contiene una serie deShowXButton propiedades que indican lo queuna serie de botones que aparecen en el CommandField .Comprobación de la Habilitaedición casilla añade la ShowEditButton propiedad a los actuales CommandField .

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1">

<columnas>

<Asp: CommandField ShowDeleteButton = "True"

ShowEditButton = "true" />

... BoundFields eliminado debido a la brevedad ...

</ Columns>

</ Asp: GridView>

Eso es todo lo que hay que añadir soporte para la edición rudimentaria. Como Figure16muestra, la interfaz de edición es bastante crudo,cada BoundField cuya ReadOnly propiedad está establecida en falso (por defecto) serepresenta como un cuadro de texto . Esto incluye áreascomo CategoryID y IdProveedor , que son claves para las otras tablas.

Figura 16. Al hacer clic en el botón Editar Chai muestra la fila de "modo de

edición." (Clic en la foto para una imagen más grande.)

Además de pedir a los usuarios editar los valores de la clave externa directa, la interfaz dla interfaz de edición es que carecen de las siguientes maneras:

• Si el usuario introduce un CategoryID o IdProveedor que no existe en la base dedatos, la ACTUALIZACIÓN va a violar una restricción de clave externa, haciendo uexcepción a elevarse.

• La interfaz de edición no incluye ningún tipo de validación. Si usted no proporcionaun valor determinado (comoProductName ) o introducir un valor de cadena en laque se espera un valor numérico (por ejemplo, introduciendo "Demasiado" en

Page 245: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 245/3

el PrecioUnidad cuadro de texto), una excepción será lanzada. Un tutorial futuro examinará cómo agregar controles de validación para la interfaz de usuario deedición.

• En la actualidad, todos los campos de productos que no son de sólo lectura debe seincluido en el GridView . Si tuviéramos que quitar un campo de la GridView -porejemplo, PrecioUnidad , al actualizar los datos, elGridView no se estableceríala UpdateParameters valor de Precio por unidad , lo que cambiaría el registro la base de PrecioUnidad a un NULL el valor. Del mismo modo, si un campo

obligatorio, como ProductName , se elimina de la GridView , la actualización fallcon la misma "columna" ProductName "no permite nulos" excepción mencionadaanteriormente.

• El formato de edición de la interfaz deja mucho que desear. El Precio por unidadmuestra con cuatro decimales. Idealmente, el CategoryID y IdProveedor losvalores que contienen DropDownList s que la lista de categorías y proveedores eel sistema.

Estas son todas las deficiencias que vamos a tener que vivir con, por ahora, pero que seabordarán en futuros tutoriales.

Insertar, editar y eliminar datos con los DetailsViewComo hemos visto en los primeros tutoriales, el DetailsView muestra un registro decontrol a la vez y, al igual que elGridView , permite editar y borrar del registro que semuestra actualmente. Tanto la experiencia del usuario final con la edición y eliminación delementos de un DetailsView y el flujo de trabajo desde el lado de ASP.NET son idénticoa los de la GridView . Cuando el DetailsView difiere del GridView es que tambiénproporciona un sistema integrado de insertar apoyo.

Para demostrar las capacidades de modificación de datos del GridView , empezar por la

adición de un DetailsView a la página de Basics.aspx por encima de laexistente GridView y enlazarlo a la existente ObjectDataSource a travésdelDetailsView tag 's inteligente. A continuación, limpiar la altura y el ancho de laspropiedades de la DetailsView , y comprobar la paginación Habilitar la opción de laetiqueta inteligente. Para habilitar la edición, inserción y eliminación de apoyo,simplemente marque la edición Activar , Habilitar inserción y Habilitareliminación casillas de verificación de la etiqueta inteligente.

Page 246: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 246/3

Figura 17. Configurar el DetailsView para apoyar la edición, inserción yeliminación.

Al igual que con el GridView , la adición de la edición, inserción o eliminación de apoyoañade un CommandField a laDetailsView , como la sintaxis declarativa siguientemuestra:

<Asp: DetailsView ID = "DetailsView1" runat = "server"AutoGenerateRows = "false"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"AllowPaging = "True">

<Fields>

<Asp: BoundField DataField = "ProductID"

HeaderText = "ProductID" InsertVisible = "false"

ReadOnly = "True" SortExpression = "ProductID" />

<Asp: BoundField DataField = "ProductName"

HeaderText = "ProductName" SortExpression = "ProductName" />

<Asp: BoundField DataField = "IdProveedor" HeaderText = "IdProveedor"

SortExpression = "IdProveedor" />

<Asp: BoundField DataField = "CategoryID" HeaderText = "CategoryID"

SortExpression = "CategoryID" />

<Asp: BoundField DataField = "CantidadPorUnidad"

HeaderText = "CantidadPorUnidad"

SortExpression = "CantidadPorUnidad" />

<Asp: BoundField DataField = "UnitPrice"

HeaderText = "UnitPrice" SortExpression = "UnitPrice" />

Page 247: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 247/3

<Asp: BoundField DataField = "UnitsInStock"

HeaderText = "UnitsInStock" SortExpression = "UnitsInStock" />

<Asp: BoundField DataField = "UnitsOnOrder"

HeaderText = "UnitsOnOrder" SortExpression = "UnitsOnOrder" />

<Asp: BoundField DataField = "ReorderLevel"

HeaderText = "ReorderLevel" SortExpression = "ReorderLevel" />

<Asp: CheckBoxField DataField = "interrumpidas"

HeaderText = "interrumpidas" SortExpression = "interrumpidas" />

<Asp: BoundField DataField = "CategoryName"

HeaderText = "CategoryName" ReadOnly = "True"

SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName"

HeaderText = "SupplierName" ReadOnly = "True"

SortExpression = "SupplierName" />

<Asp: CommandField ShowDeleteButton = "True"

ShowEditButton = "True" ShowInsertButton = "true" />

</ Campos>

</ Asp: DetailsView>

 Tenga en cuenta que para el DetailsView , el CommandField aparece al final dela Columnas colección por defecto.Debido a que el DetailsView campos 's se representcomo filas, el CommandField aparece como una fila conInsertar , editar y eliminar lobotones en la parte inferior de la DetailsView .

Page 248: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 248/3

Figura 18. Configurar el DetailsView para apoyar la edición, inserción yeliminación. (Clic en la foto para una imagen más grande.)

Al hacer clic en el Eliminar botón se inicia la misma secuencia de eventos como conel GridView : una devolución de datos, seguido por el DetailsView que pueblanel DeleteParameters de su ObjectDataSource , basado en elDataKeyNames valores

concluyó con un llamado a la eliminación () el método de su ObjectDataSource , que realidad elimina el producto de la base de datos. Edición en el DetailsView tambiéntrabaja de una manera que es idéntica a la del GridView .

Para insertar, el usuario final se presenta con un nuevo botón que, cuando se hace clic,hace que el DetailsView en "modo de inserción". Con el "modo de inserción",el nuevo botón se sustituye por inserción y Cancelar botones, y sóloaquellos BoundField s cuya InsertVisible propiedad está establecida en verdadero (pdefecto) que se muestran son.Los campos de datos que se identifican como los campos dincremento automático, como por ejemplo ProductID , tienen su propiedadInsertVisible establecido en falso cuando se enlaza el DetailsView a la fuente de datos través de la etiqueta inteligente.

Al enlazar un origen de datos a un DetailsView a través de la etiqueta inteligente, VisuaStudio establece elInsertVisible propiedad falsos sólo para los campos de incrementoautomático. Campos de sólo lectura, comoCategoryName y SupplierName , se mostraen la interfaz de "modo de inserción" del usuario, a menos que suInsertVisible propiedase establece explícitamente en falso . Tome un momento para establecerel InsertVisiblepropiedades de estos dos campos de falsa , ya sea a través dela DetailsView sintaxis 's declarativa o mediante laedición Campos enlace en la etique

Page 249: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 249/3

inteligente. La figura 19 muestra la configuración dela InsertVisible propiedadesfalsas haciendo clic en el Editar campos enlace.

Figura 19. Neptuno ofrece ahora té Acme. (Clic en la foto para una imagen másgrande.)

Después de ajustar la InsertVisible propiedades, ver la página Basics.aspx en un

navegador y haga clic en el nuevobotón. La figura 20 muestra el DetailsView cuando sagrega una nueva bebida-Acme té a nuestra línea de productos.

Page 250: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 250/3

Figura 20. Neptuno ofrece ahora té Acme. (Clic en la foto para una imagen másgrande.)

Después de entrar en los detalles para el té Acme y haga clic en el Insertar botón,sobreviene una devolución de datos y el nuevo registro se añade a los productos de latabla de base de datos. Debido a que este DetailsView muestra los productos en el ordeen que aparecen en la tabla de base de datos, debemos página para el último producto c

el fin de ver el nuevo producto.

Page 251: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 251/3

Figura 21. Detalles para el té Acme (Clic en la foto para una imagen más grande

Nota La propiedad CurrentMode del DetailsView indica que la interfaz que se muestrapuede ser uno de los siguientes valores: Editar , Insertar , o ReadOnly . La propiedadDefaultMode indica el modo en que el DetailsView vuelve después de una edición oinserción se ha completado y es útil para mostrar unDetailsView que está

permanentemente en la edición o el modo de inserción.

El punto y haga clic en la inserción y edición de la DetailsView sufren las mismaslimitaciones que el GridView : El usuario debe introducirexistentes CategoryID y IdProveedor valores a través de un cuadro de texto, la interfano tiene ninguna lógica de validación, todos los campos de productos, que nopermiten NULL los valores o no tienen un valor por defecto especificado en el nivel debase de datos deben ser incluidos en la interfaz de la inserción, y así sucesivamente.

Las técnicas que vamos a examinar para la ampliación y mejora de la GridView interfaz edición en futuros artículos se pueden aplicar también a la DetailsView interfaces de

control de edición e inserción.

Utilizando el FormView para una interfaz de usuariomás flexible modificación de datos

El FormView ofrece soporte integrado para insertar, editar y eliminar los datos, pero,debido a que utiliza las plantillas en lugar de campos, no hay lugar para añadirla BoundField s o CommandField que es utilizado porel GridView yDetailsView controles para proporcionar los datos de modificación de lainterfaz. En cambio, esta interfaz, los controles Web para recopilar la entrada del usuario

Page 252: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 252/3

cuando se añade un nuevo artículo o editar uno ya existente, junto conelNuevo , Editar , Borrar , Insertar , Actualizar y Cancelar botones, se debe agregarmanualmente las plantillas adecuadas. Afortunadamente, Visual Studio creaautomáticamente la interfaz necesaria cuando se enlaza el FormView a una fuente dedatos a través de la lista desplegable en la etiqueta inteligente.

Para ilustrar estas técnicas, empezar por la adición de un FormView a la página deBasics.aspx y, desde el FormViewtag 's inteligente, que se unen a los ya

creados ObjectDataSource . Esto generaráun EditItemTemplate ,InsertItemTemplate y ItemTemplate para el FormView ,con TextBox controles Web para recopilar la entrada del usuario y el botón de controlweb para la Nueva , Editar , Borrar , Insertar , Actualizar y Cancelar botones. AdemelDataKeyNames propiedad del FormView se establece en el campo de clave principa( ProductID ) del objeto que es devuelto por el ObjectDataSource . Por último,compruebe la paginación Habilitar opción en el FormView tag 's inteligente.

La sintaxis siguiente muestra el marcado declarativo parael ItemTemplate del FormView , después de que elFormView se ha unido ala ObjectDataSource . Por defecto, cada campo de valor no-booleano producto se une a

ladel texto de propiedad de una etiqueta de control Web, mientras que cada campo vabooleano ( descatalogados ) se une a la Chequeado propiedad de una personadiscapacitada CheckBox control Web. Para que el Nuevo , Editar yEliminar botones paactivar ciertos FormView comportamiento cuando se hace clic, es imperativo quesuCommandName valores se establece en Nueva , Editar y Eliminar , respectivamen

<Asp: FormView ID = "FormView1" runat = "server" DataKeyNames = "ProductID"

DataSourceID = "ObjectDataSource1" AllowPaging = "True">

<EditItemTemplate>

...

</ EditItemTemplate>

<InsertItemTemplate>

...

</ InsertItemTemplate>

<ItemTemplate>

ProductID:

<Asp: Label = ID "ProductIDLabel" runat = "server"

Texto ='<%# Eval ("ProductID") %>'></ asp: Label> <br />

ProductName:

<Asp: Label = ID "ProductNameLabel" runat = "server"

Texto ='<%# Bind ("ProductName")%> '>

</ Asp: Label> <br />

Page 253: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 253/3

IdProveedor:

<Asp: Label = ID "SupplierIDLabel" runat = "server"

Texto ='<%# Bind ("IdProveedor")%> '>

</ Asp: Label> <br />

CategoryID:

<Asp: Label = ID "CategoryIDLabel" runat = "server"

Texto ='<%# Bind ("CategoryID")%> '>

</ Asp: Label> <br />

CantidadPorUnidad:

<Asp: Label = ID "QuantityPerUnitLabel" runat = "server"

Texto ='<%# Bind ("CantidadPorUnidad")%> '>

</ Asp: Label> <br />

Precio por unidad:

<Asp: Label = ID "UnitPriceLabel" runat = "server"

Texto ='<%# Bind ("Precio por unidad") %>'></ asp: Label> <br />

UnitsInStock:

<Asp: Label = ID "UnitsInStockLabel" runat = "server"

Texto ='<%# Bind ("UnitsInStock")%> '>

</ Asp: Label> <br />

UnitsOnOrder:

<Asp: Label = ID "UnitsOnOrderLabel" runat = "server"

Texto ='<%# Bind ("UnitsOnOrder")%> '>

</ Asp: Label> <br />

ReorderLevel:

<Asp: Label = ID "ReorderLevelLabel" runat = "server"

Texto ='<%# Bind ("ReorderLevel")%> '>

</ Asp: Label> <br />

Discontinuadas:

<Asp: CheckBox ID = "DiscontinuedCheckBox" runat = "server"

Comprobar ='<%# Bind ("interrumpidas")%> '

Enabled = "false" /> <br />

CategoryName:

Page 254: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 254/3

<Asp: Label = ID "CategoryNameLabel" runat = "server"

Texto ='<%# Bind ("NombreCategoría")%> '>

</ Asp: Label> <br />

SupplierName:

<Asp: Label = ID "SupplierNameLabel" runat = "server"

Texto ='<%# Bind ("SupplierName")%> '>

</ Asp: Label> <br />

<Asp: LinkButton ID = "editbutton" runat = "server"

CausesValidation = "False" CommandName = "Editar"

Text = "Editar">

</ Asp: LinkButton>

<Asp: LinkButton ID = "DeleteButton" runat = "server"

CausesValidation = "False" CommandName = "Delete"

Text = "Eliminar">

</ Asp: LinkButton>

<Asp: LinkButton ID = "NewButton" runat = "server"

CausesValidation = "False" CommandName = "Nuevo"

Text = "Nuevo">

</ Asp: LinkButton>

</ ItemTemplate>

</ Asp: FormView>

La figura 22 muestra el ItemTemplate del FormView cuando se ve a través de unnavegador. Cada campo está en la lista de productos conel Nuevo , Editar y Eliminar botones en la parte inferior.

Page 255: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 255/3

Figura 22. El valor predeterminado ItemTemplate FormView muestra cada camdel producto, junto con la creación, edición y Eliminar. (Clic en la foto para unaimagen más grande.)

Al igual que con el GridView y DetailsView , haga clic en el Eliminar botón, ocualquier botón , LinkButton oImageButton que CommandName propiedad estáestablecida en Eliminar , provoca una devolución de datos, llena

elDeleteParameters del ObjectDataSource , basado en el DataKeyNames valordel FormView , e invoca el Delete () el método de la ObjectDataSource .

Cuando la edición se pulsa el botón, sobreviene una devolución de datos y los datos derebote a la EditItemTemplate, que es el encargado de mostrar la interfaz de edición. Esinterfaz incluye los controles Web para la edición de datos, junto conla actualización y Cancelar botones. El valor predeterminado EditItemTemplate que generado por Visual Studio contiene una etiqueta para los campos de incrementoautomático ( ProductID ), un cuadro de texto para cada campo de valor no-booleano, un CheckBox para cada campo valor booleano. Este comportamiento es muy similar a lade la auto-generados BoundField s en el GridView y DetailsView controles.

Nota Un pequeño problema con el FormView 's de auto-generación dela EditItemTemplate es que hace TextBox controles Web para aquellos campos que sode sólo lectura, como CategoryName ySupplierName . Vamos a ver cómo dar cuenta esto en breve.

El TextBox controles en el EditItemTemplate tienen su texto la propiedad compartidacon el valor de su campo de datos correspondiente mediante el uso de dos vías de enlacde datos . De dos vías de enlace de datos, denotada por <% # Enlace ("dataField")%> -lleva cabo el enlace de datos tanto en el momento del enlace de datos a la plantilla y al

Page 256: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 256/3

rellenar el ObjectDataSource parámetros 's para insertar o modificar registros. Es decircuando el usuario hace clic en el Editar botón de la ItemTemplate , el Bind () métododevuelve el campo de datos especificado de valores. Después de que el usuario harealizado cambios y los clics de actualización , los valores expuestos de nuevo quecorresponden a los campos de datos se especifica mediante el uso de Bind () se aplicanla UpdateParameters deObjectDataSource . Por otra parte, una vía de enlace de datodenotada por <% # Eval ("dataField")%> de sólo recupera los valores de los campos dedatos en el enlace de datos a la plantilla y que no devuelven los valores introducidos por

usuario a los parámetros de la fuente de datos sobre devolución de datos.

El marcado declarativo siguiente muestra la EditItemTemplate del FormView . Tenga cuenta que el Bind () método se utiliza en la sintaxis de enlace de datos aquí, y quela actualización y Cancelar Botón de controles Web tienensuCommandName propiedades con la misma.

<Asp: FormView ID = "FormView1" runat = "server" DataKeyNames = "ProductID"

DataSourceID = "ObjectDataSource1" AllowPaging = "True">

<EditItemTemplate>

ProductID:

<Asp: Label = ID "ProductIDLabel1" runat = "server"

Texto ="<%# Eval ("ProductID") %>"></ asp: Label> <br />

ProductName:

<Asp: TextBox ID = "ProductNameTextBox" runat = "server"

Texto ="<%# Bind ("ProductName")%> ">

</ Asp: TextBox> <br />

IdProveedor:

<Asp: TextBox ID = "SupplierIDTextBox" runat = "server"

Texto ="<%# Bind ("IdProveedor")%> ">

</ Asp: TextBox> <br />

CategoryID:

<Asp: TextBox ID = "CategoryIDTextBox" runat = "server"

Texto ="<%# Bind ("CategoryID")%> ">

</ Asp: TextBox> <br />

CantidadPorUnidad:

<Asp: TextBox ID = "QuantityPerUnitTextBox" runat = "server"

Texto ="<%# Bind ("CantidadPorUnidad")%> ">

</ Asp: TextBox> <br />

Precio por unidad:

Page 257: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 257/3

<Asp: TextBox ID = "UnitPriceTextBox" runat = "server"

Texto ="<%# Bind ("Precio por unidad")%> ">

</ Asp: TextBox> <br />

UnitsInStock:

<Asp: TextBox ID = "UnitsInStockTextBox" runat = "server"

Texto ="<%# Bind ("UnitsInStock")%> ">

</ Asp: TextBox> <br />

UnitsOnOrder:

<Asp: TextBox ID = "UnitsOnOrderTextBox" runat = "server"

Texto ="<%# Bind ("UnitsOnOrder")%> ">

</ Asp: TextBox> <br />

ReorderLevel:

<Asp: TextBox ID = "ReorderLevelTextBox" runat = "server"

Texto ="<%# Bind ("ReorderLevel")%> ">

</ Asp: TextBox> <br />

Discontinuadas:

<Asp: CheckBox ID = "DiscontinuedCheckBox" runat = "server"

Comprobar ="<%# Bind ("interrumpidas")%> "/> <br />

CategoryName:

<Asp: TextBox ID = "CategoryNameTextBox" runat = "server"

Texto ="<%# Bind ("NombreCategoría")%> ">

</ Asp: TextBox> <br />

SupplierName:

<Asp: TextBox ID = "SupplierNameTextBox" runat = "server"

Texto ="<%# Bind ("SupplierName")%> ">

</ Asp: TextBox> <br />

<Asp: LinkButton ID = "UpdateButton" runat = "server"

CausesValidation = "True" CommandName = "Actualizar"

Text = "Update">

</ Asp: LinkButton>

<Asp: LinkButton ID = "UpdateCancelButton" runat = "server"

Page 258: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 258/3

CausesValidation = "False" CommandName = "Cancelar"

Text = "Cancelar">

</ Asp: LinkButton>

</ EditItemTemplate>

<InsertItemTemplate>

...

</ InsertItemTemplate>

<ItemTemplate>

...

</ ItemTemplate>

</ Asp: FormView>

En este punto, nuestra EditItemTemplate hará una excepción que se produce si se

intenta usarlo. El problema es que elCategoryName y SupplierName campos serepresentan como TextBox controles Web en el EditItemTemplate . O debemos cambiestos TextBox es de etiqueta s o eliminarlos por completo. Vamos a eliminarlos porcompleto de laEditItemTemplate .

La figura 23 muestra el FormView en el navegador después de la edición se ha hecho cen el botón de Chai. Tenga en cuenta que la SupplierName y CategoryName camposque se muestran en el ItemTemplate ya no están presentes, como acabamos de sacarlodel EditItemTemplate . Cuando la actualización se hace clic en el FormView procedetravés de la misma secuencia de pasos como el GridView y DetailsView controles.

Page 259: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 259/3

Figura 23. Por defecto, el EditItemTemplate muestra cada campo editable delproducto como un cuadro de texto o casilla de verificación. (Clic en la foto parauna imagen más grande.)

Cuando el Insertar botón que se encuentra dentro del ItemTemplate del FormView sehace clic en una devolución de datos se produce. Sin embargo, no hay datos se une ala FormView , porque un nuevo registro que se agrega. ElInsertItemTemplate interfazincluye los controles Web para agregar un nuevo registro, junto con

la inserción yCancelar botones. El valor predeterminado InsertItemTemplate que esgenerado por Visual Studio contiene un cuadro de texto para cada campo de valor no-booleano y un CheckBox para cada campo de valor booleano, similar a la generadaautomáticamente EditItemTemplate interfaz 's. Cada cuadro de texto de control tiensu texto la propiedad compartida con el valor de su campo de datos correspondiente através de dos vías de enlace de datos.

El marcado declarativo siguiente muestra la InsertItemTemplate del FormView . Tengen cuenta que el Bind ()método se utiliza en la sintaxis de enlace de datos aquí, y quela inserción y Cancelar Botón de controles Web tienen suCommandName propiedadcon la misma.

<Asp: FormView ID = "FormView1" runat = "server" DataKeyNames = "ProductID"

DataSourceID = "ObjectDataSource1" AllowPaging = "True">

<EditItemTemplate>

...

</ EditItemTemplate>

<InsertItemTemplate>

ProductName:

<Asp: TextBox ID = "ProductNameTextBox" runat = "server"

Texto ="<%# Bind ("ProductName")%> ">

</ Asp: TextBox> <br />

IdProveedor:

<Asp: TextBox ID = "SupplierIDTextBox" runat = "server"

Texto ="<%# Bind ("IdProveedor")%> ">

</ Asp: TextBox> <br />

CategoryID:

<Asp: TextBox ID = "CategoryIDTextBox" runat = "server"

Texto ="<%# Bind ("CategoryID")%> ">

</ Asp: TextBox> <br />

CantidadPorUnidad:

<Asp: TextBox ID = "QuantityPerUnitTextBox" runat = "server"

Page 260: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 260/3

Texto ="<%# Bind ("CantidadPorUnidad")%> ">

</ Asp: TextBox> <br />

Precio por unidad:

<Asp: TextBox ID = "UnitPriceTextBox" runat = "server"

Texto ="<%# Bind ("Precio por unidad")%> ">

</ Asp: TextBox> <br />

UnitsInStock:

<Asp: TextBox ID = "UnitsInStockTextBox" runat = "server"

Texto ="<%# Bind ("UnitsInStock")%> ">

</ Asp: TextBox> <br />

UnitsOnOrder:

<Asp: TextBox ID = "UnitsOnOrderTextBox" runat = "server"

Texto ="<%# Bind ("UnitsOnOrder")%> ">

</ Asp: TextBox> <br />

ReorderLevel:

<Asp: TextBox ID = "ReorderLevelTextBox" runat = "server"

Texto ="<%# Bind ("ReorderLevel")%> ">

</ Asp: TextBox> <br />

Discontinuadas:

<Asp: CheckBox ID = "DiscontinuedCheckBox" runat = "server"

Comprobar ="<%# Bind ("interrumpidas")%> "/> <br />

CategoryName:

<Asp: TextBox ID = "CategoryNameTextBox" runat = "server"

Texto ="<%# Bind ("NombreCategoría")%> ">

</ Asp: TextBox> <br />

SupplierName:

<Asp: TextBox ID = "SupplierNameTextBox" runat = "server"

Texto ="<%# Bind ("SupplierName")%> ">

</ Asp: TextBox> <br />

<Asp: LinkButton ID = "InsertButton" runat = "server"

CausesValidation = "True" CommandName = "Insertar"

Page 261: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 261/3

Text = "Insertar">

</ Asp: LinkButton>

<Asp: LinkButton ID = "InsertCancelButton" runat = "server"

CausesValidation = "False" CommandName = "Cancelar"

Text = "Cancelar">

</ Asp: LinkButton>

</ InsertItemTemplate>

<ItemTemplate>

...

</ ItemTemplate>

 </ Asp: FormView> 

Hay una sutileza con la FormView 's de auto-generación de la InsertItemTemplate . E

concreto, el TextBox controles Web se crean, incluso para aquellos campos que son desólo lectura, como CategoryName y SupplierName . Al igual que conel EditItemTemplate , que se deben eliminar estos TextBox es dela InsertItemTemplate .

La figura 24 muestra el FormView en un navegador cuando se añade un nuevo productocafé Acme. Tenga en cuenta que la SupplierName y CategoryName campos que semuestran en el ItemTemplate ya no están presentes, como acabamos de conseguir sueliminación. Cuando el Insertar botón es pulsado, el FormView procede a través de lamisma secuencia de pasos que el DetailsView control, agregar un nuevo registro ala Productos de mesa. La figura 25 muestra los detalles del producto Café de Acme enel FormView después de que se ha insertado.

Page 262: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 262/3

Figura 24. El InsertItemTemplate dicta la interfaz de insertar el FormView. (Clicen la foto para una imagen más grande.)

Figura 25. Los detalles del nuevo producto, café Acme, se muestran en elFormView. (Clic en la foto para una imagen más grande.)

Separando las de sólo lectura, la edición y la inserción de las interfaces en tres modelosdistintos, el FormView permite un grado de control sobre estas interfaces queel DetailsView y GridView .

Nota Al igual que el DetailsView , el CurrentMode propiedad del FormView indicaque la interfaz que se muestra, y su DefaultMode propiedad indica el modo en queel FormView vuelve después de una edición o inserción se ha completado.

Conclusión

En este tutorial, hemos examinado los fundamentos de la inserción, edición y eliminaciónde datos mediante el GridView, DetailsView y FormView . Los tres de estos controlesproporcionan un cierto nivel de capacidades integradas de modificación de datos quepueden ser utilizados sin necesidad de escribir una sola línea de código en la páginaASP.NET, gracias a los controles web de datos y el ObjectDataSource . Sin embargo, elsimple punto y haga clic en las técnicas de hacer un muy débil e ingenuo modificación dedatos de interfaz de usuario. Con el fin de proporcionar la validación, inyectar valores

Page 263: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 263/3

programáticos, manejar excepciones con gracia, personalizar la interfaz de usuario, y asísucesivamente, vamos a tener que depender de un grupo de técnicas que se discutirásobre los tutoriales siguientes.

Tutorial 17: Examen de los acontecimientosrelacionados con la inserción, actualización y

eliminación de 

Scott Mitchell

03 2007

Resumen: Ampliar el incorporado en la inserción, actualización y eliminación de lascapacidades de datos de ASP.NET Controles Web y personalizar la interfaz de edición paractualizar sólo un subconjunto de los campos de productos, con este tutorial de Scott

Mitchell. (29 páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 17 (Visual C #)

IntroducciónPaso 1: Actualización ProductName de un producto y los campos PrecioUnidadMejorar el formato PrecioUnidadPaso 2: Prohibir UnitPrices NULLPaso 3: proporcionan una interfaz para añadir nuevos productos

Paso 4: Asignación de valores a los parámetros de CategoryID y IdProveedorConclusión

Introducción

Cuando se utiliza el incorporado en la inserción, edición o eliminación de las característicdel GridView , DetailsViewo FormView controles, una serie de medidas transpirarcuando el usuario final se completa el proceso de agregar un nuevo registro o actualizaco eliminación de un registro existente. Como ya comentamos en el tutorial anterior ,cuando una fila se edita en el GridView la edición se sustituye por el botón

de actualización y Cancelar botones y laBoundField a su vez s en TextBox es. Despude que el usuario final se actualizan los datos y los clics de actualización , los siguientepasos se llevan a cabo la devolución de datos:

1. El GridView rellena el UpdateParameters de su ObjectDataSource con uncampo único que identifica el registro modificado (s) del (a través dela DataKeyNames propiedad), junto con los valores introducidos por el usuario.

2. El GridView invoca el Update () como su método de ObjectDataSource , que a vez invoca el método apropiado en el objeto subyacente( ProductsDAL.UpdateProduct , en nuestro tutorial anterior).

Page 264: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 264/3

3. Los datos subyacentes, que ahora incluye los cambios se actualizan, es de rebote ala GridView .

Durante esta secuencia de pasos, una serie de eventos de fuego, lo que nos permite creacontroladores de eventos para agregar lógica personalizada, cuando sea necesario. Porejemplo, antes del paso 1, el RowUpdating caso de que el GridView incendios. Podemoen este momento, cancelar la solicitud de actualización si hay algún error devalidación. Cuando el Update () es llamado, la actualización caso

de ObjectDataSource incendios, proporcionando una oportunidad para añadir o modificlos valores de cualquiera de los UpdateParameter s. Después de que el método delobjeto subyacente de la ObjectDataSource ha completado su ejecución,la actualización caso deObjectDataSource se eleva. Un controlador de eventos parala actualización evento puede inspeccionar los detalles sobre la operación deactualización, tales como número de filas que se vieron afectados y si existe o no unaexcepción.Finalmente, después del paso 2, el RowUpdated caso de queel GridView incendios, un controlador de eventos de este evento puede examinar lainformación adicional sobre la operación de actualización que se realizó justo.

La Figura 1 muestra esta serie de eventos y los pasos cuando se actualiza un GridView

patrón de eventos en la Figura 1 no es aplicable sólo a la actualización conun GridView . Insertar, actualizar o borrar datosdel GridView ,DetailsView o FormView precipita la misma secuencia de eventos pre ypost-grado de nivel tanto para el control de los datos y la Web ObjectDataSource .

Figura 1. Una serie de eventos de incendios pre-grado y post grado, al actualizlos datos en un GridView. (Clic en la foto para una imagen más grande.)

Page 265: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 265/3

En este tutorial, vamos a examinar con estos eventos para ampliar la incorporada en lainserción, actualización y eliminación de funciones de los controles Web ASP.NET dedatos. También veremos cómo personalizar la interfaz de edición para actualizar sólo unsubconjunto de los campos de productos.

Paso 1: Actualización ProductName de un producto los campos PrecioUnidad

En las interfaces de edición del tutorial anterior, todos los campos de producto que no erde sólo lectura tienen que ser incluidos. Si tuviéramos que quitar un campo dela GridView -por ejemplo, CantidadPorUnidad -al actualizar los datos, el control web ddatos no se estableceríala ObjectDataSource 's CantidadPorUnidad UpdateParameters valor.El ObjectDatource luego pasaría en un NULL el valor en el UpdateProduct método de la capa delógica de negocio (BLL), que iba a cambiar el registro de bases de datos editadosde CantidadPorUnidad columna a un NULL el valor. Del mismo modo, si un campo tannecesario como ProductName , se elimina de la interfaz de edición, la actualización fallcon un 'ProductName' columna no permite valores nulos excepción. La razón de escomportamiento es que el ObjectDataSource se configura para llamarla UpdateProduct método de la ProductsBLL clase, que espera un parámetro de entrapara cada uno de los campos de productos. Por lo tanto, la UpdateParameters coleccióde laObjectDataSource contiene un parámetro para cada uno de los parámetros deentrada del método.

Si queremos ofrecer un control web de datos que permite al usuario final para actualizarsólo un subconjunto de los campos, entonces debemos ya sea mediante programación lafalta UpdateParameters los valores de la actualización de controlador de eventos dela ObjectDataSource o crear y llamar a un método que sólo espera BLL un subconjuntode los campos. Vamos a explorar este último enfoque.

En concreto, vamos a crear una página que muestra sóloel ProductName y PrecioUnidad campos editables en unGridView . La interfaz deedición de este GridView permite al usuario actualizar sólo los dos campos que semuestran,ProductName y PrecioUnidad . Debido a que esta interfaz de edición sólo seproporciona un subconjunto de los campos de un producto, hay que crear ya seaun ObjectDataSource que utiliza el UpdateProduct método de la actual BLL y tiene elvalor de los productos que faltan campo establecerse mediante programación conla actualización decontrolador de eventos o un nuevo método de plomo en sangre quesólo espera el subconjunto de los campos definidos en el GridView . Para este tutorial,vamos a usar esta última opción y crear una sobrecarga de laUpdateProduct método-uque lleva en tan sólo tres parámetros deentrada: productName , precioUnitario yproductID .

[System.ComponentModel.DataObjectMethodAttribute

(System.ComponentModel.DataObjectMethodType.Update, false)]

pública UpdateProduct bool (cadena productName, decimal? precioUnitario, intproductID)

{

Page 266: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 266/3

Northwind.ProductsDataTable productos =Adapter.GetProductByProductID (ProductID);

if (products.Count == 0)

/ / Ningún registro coincidente, devuelva falso

return false;

Northwind.ProductsRow producto = productos [0];

product.ProductName = productName;

if (precioUnitario == null) product.SetUnitPriceNull ();

más product.UnitPrice = unitPrice.Value;

/ / Actualizar el registro del producto

int = rowsAffected Adapter.Update (producto);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsa

volver rowsAffected == 1;

}

Al igual que con el original UpdateProduct método, esta sobrecarga se inicia mediante

comprobación para ver si hay un producto en la base de datos que ha especificadoel ProductID . Si no, devuelve falso , lo que indica que la solicitud para actualizar lainformación del producto fallado. De lo contrario, se actualizael ProductName y PrecioUnidadcampos del registro de productos existentes de acuery se compromete la actualización llamando al Update ()método del TableAdapter,pasando los ProductsRow ejemplo.

Con esta adición a nuestra ProductsBLL clase, estamos listos para crear lasimplificación GridView interfaz. Abra el DataModificationEvents.aspx en la carpetaEditInsertDelete, y añadir un GridView a la página. Crear un nuevoObjectDataSourceconfigurarlo para usar el ProductsBLL clase, con su Selección () método de asignación

deGetProducts y su actualización () método de asignación ala UpdateProduct sobrecarga que toma sólo enlosproductName , precioUnitario y productID parámetros de entrada. La Figura 2muestra el Asistente para crear orígenes de datos para hacer el mapa de la actualizació() el método de la ObjectDataSource a la nuevaUpdateProduct sobrecarga del métodde la ProductsBLL clase.

Page 267: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 267/3

Figura 2. Mapa del ObjectDataSource Update () para la sobrecargaUpdateProduct nuevo. (Clic en la foto para una imagen más grande.)

Debido a que nuestro ejemplo inicialmente sólo tiene la capacidad de editar datos, pero para insertar o borrar registros, tome un momento para indicar explícitamente quela inserción () y Delete () los métodos de laObjectDataSource no debe ser asignada cualquiera de los métodos de la ProductsBLL clase, al ir a la INSERTAR yBORRAR laspestañas y elegir (Ninguno) en la lista desplegable.

Page 268: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 268/3

Figura 3. Seleccionar (Ninguno) en la lista desplegable para el INSERT y DELETpestañas. (Clic en la foto para una imagen más grande.)

Después de completar este asistente, consulte la Habilitar edición casilla de verificacióde la GridView tag 's inteligente.

Con el Asistente para crear orígenes de datos y completar la unión a la GridView ,Microsoft Visual Studio ha creado la sintaxis declarativa para ambos controles. Vaya a la

vista de código fuente para inspeccionar el marcado declarativo delObjectDataSourceque se muestra aquí:

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"

OldValuesParameterFormatString = "original_ {0}"SelectMethod = "GetProducts"

TypeName = "ProductsBLL" UpdateMethod = "UpdateProduct">

<UpdateParameters>

<asp:Parameter Name="productName" tipo="String" />

<asp:Parameter Name="unitPrice" Type="Decimal" />

<asp:Parameter Name="productID" Type="Int32" />

</ UpdateParameters>

</ Asp: ObjectDataSource>

Porque no hay asignaciones para la inserción () y Delete () los métodos dela ObjectDataSource , nohayInsertParameters o DeleteParameters secciones. Además, debido a

la actualización () método se asigna a laUpdateProduct sobrecarga del método que sacepta tres parámetros de entrada, el UpdateParameters sección tiene sólotres parámetros de los casos.

 Tenga en cuenta que la OldValuesParameterFormatString propiedaddel ObjectDataSource se establece en original_ {0} . Esta propiedad se estableceautomáticamente por Visual Studio cuando se utiliza el asistente Configurar origen dedatos. Sin embargo, debido a nuestros métodos de plomo en sangre no esperan que eloriginal ProductID valor que se pasa en, eliminar esta asignación de la propiedad porcompleto de la sintaxis declarativa de la ObjectDataSource .

Nota Si usted acaba de limpiar el OldValuesParameterFormatString valor de lapropiedad de laspropiedades de la ventana en la vista Diseño, la propiedad seguiráexistiendo en la sintaxis declarativa, sino que se define como una cadena vacía. Quite lapropiedad por completo de la sintaxis declarativa o, en el Propiedades ventana,establezca el valor de la opción predeterminada, que es {0} .

Mientras que el ObjectDataSource sólo ha UpdateParameters para el nombre delproducto, precio, y la identificación, Visual Studio ha añadidouna BoundField o CheckBoxField en el GridView para cada uno de los campos de losproductos.

Page 269: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 269/3

Figura 4. El GridView contiene un BoundField o CheckBoxField para cada uno delos campos de los productos.(Clic en la foto para una imagen más grande.)

Cuando el usuario final edita un producto y haga clic en su actualización de botón,el GridView enumera los campos que no eran de sólo lectura. A continuación, establece

valor del parámetro correspondiente en el UpdateParameterscolección dela ObjectDataSource con el valor introducido por el usuario. Si no hay ningún parámetrcorrespondiente, el GridView agrega una a la colección. Por lo tanto, sinuestro GridView contiene BoundField s y CheckBoxField s para todos los campos deproducto, el ObjectDataSource acabará invocando la UpdateProduct sobrecarga quetoma en todos estos parámetros, a pesar de que el marcado declarativodel ObjectDataSource sólo especifica tres parámetros de entrada (ver Figura 5). Delmismo modo, si existe alguna combinación de los campos de productos no-de sólo lecturen el GridView que no se corresponde con los parámetros de entrada paraun UpdateProduct sobrecarga, una excepción se produce cuando intenta actualizar.

Figura 5. El GridView añadir parámetros a la colección del ObjectDataSourceUpdateParameters.

Page 270: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 270/3

Para asegurarse de que el ObjectDataSource llama al UpdateProduct sobrecarga quetoma en tan sólo el nombre del producto, precio, y la identificación, debemos restringirel GridView para que los campos editables por sóloelProductName y PrecioUnidad . Esto puede lograrse mediante la eliminación de laotra BoundField s y CheckBoxFields, mediante el establecimiento de los otros campos" ReadOnly propiedad real , o por alguna combinación de los dos.Para este tutorial,vamos a eliminar todos los GridView los campos exceptoel ProductName y PrecioUnidadBoundField s, después de que el marcado declarativ

del GridView se verá como la siguiente:

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1">

<columnas>

<asp:CommandField ShowEditButton="True" />

<Asp: BoundField DataField = "ProductName"

HeaderText = "ProductName" SortExpression = "ProductName" />

<Asp: BoundField DataField = "UnitPrice" HeaderText = "UnitPrice"

SortExpression = "UnitPrice" />

</ Columns>

</ Asp: GridView>

Aunque el UpdateProduct sobrecarga espera tres parámetros de entrada, sólo tenemosdos BoundField s en nuestroGridView . Esto se debe a la productID parámetro deentrada es un valor de clave principal y pasa a través del valor de

la DataKeyNames propiedad de la fila editada.Nuestro GridView , junto con el UpdateProduct sobrecarga, permite al usuario editarsólo el nombre y el precio de un producto sin perder ninguno de los campos de otrosproductos.

Page 271: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 271/3

Figura 6. La interfaz permite la edición de tan sólo el nombre del producto y elprecio. (Clic en la foto para una imagen más grande.)

Nota Como se explica en el tutorial anterior , es de vital importancia que el Vista delestado delGridView estar habilitado (el comportamiento por defecto). Si se establecela EnableViewState propiedad del GridView al falso , se corre el riesgo de tenerusuarios concurrentes sin querer borrar o editar los registros. (Ver ADVERTENCIA: punto concurrencia con ASP.NET 2.0 GridViews / DetailsView / FormViews que la edición de apoy / o eliminar y cuyo punto de vista del Estado es reducida , para más información.)

La mejora de la PrecioUnidad formatoMientras que el GridView ejemplo que se muestra en la Figura 6 obras,el PrecioUnidad campo no tiene formato alguno, lo que resulta en un indicador deimporte que carece de símbolos de moneda y cuenta con cuatro decimales.Para aplicar uformato de moneda para las filas no editable, establezca la DataFormatString propiedade laPrecioUnidad BoundField a {0: c} y su HtmlEncode propiedad falsos .

Page 272: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 272/3

Figura 7. Establecer DataFormatString UnitPrice y HtmlEncode propiedades enconsecuencia. (Clic en la foto para una imagen más grande.)

Con este cambio, las filas no se puede editar el formato de precios como una moneda, lafila editada, sin embargo, sigue mostrando el valor sin el símbolo de moneda y con cuatrodecimales.

Figura 8. Las filas no modificables son ahora el formato de moneda. (Clic en lafoto para una imagen más grande.)

Page 273: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 273/3

Las instrucciones de formato especificado en el DataFormatString propiedad se puedeaplicar a la interfaz de edición mediante el establecimiento dela ApplyFormatInEditMode propiedad de la BoundField de verdad (el valorpredeterminado es falso ). Tómese un momento para establecer esta propiedaden verdad .

Figura 9. Establezca la propiedad ApplyFormatInEditMode la BoundField

PrecioUnidad en true. (Clic en la foto para una imagen más grande.)

Con este cambio, el valor de la PrecioUnidad que se muestra en la fila editada tambiéntiene el formato de una moneda.

Page 274: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 274/3

Figura 10. El valor de la fila editada de UnitPrice es ahora el formato de unamoneda. (Clic en la foto para una imagen más grande.)

Sin embargo, la actualización de un producto con el símbolo de moneda en la caja de textales como $ 19.00-lanza una FormatException . Cuando el GridView trata de asignar valores suministrados por el usuario a laUpdateParameters coleccióndel ObjectDataSource , no es capaz de convertir el PrecioUnidad cadena "$ 19.00" eneldecimal que es requerido por los parámetros (ver Figura 11). Para remediar esto,podemos crear un controlador de eventos para el RowUpdating caso de queel GridView y tienen que analice los suministrados por el usuarioPrecioUnidad comomoneda en formato decimal .

El RowUpdating caso de que el GridView acepta como segundo parámetro, un objeto dtipoGridViewUpdateEventArgs , que incluye un NewValues diccionario como una de suspropiedades que contiene los valores suministrados por el usuario que están listos para sasignado a la UpdateParameters colección delObjectDataSource . Podemossobrescribir el archivo PrecioUnidad valor en el NewValues colección con un valordecimal que se analiza usando el formato de moneda con las siguientes líneas de código el RowUpdatingcontrolador de eventos:

protected void GridView1_RowUpdating (object sender,GridViewUpdateEventArgs e)

{

if (e.NewValues ["UnitPrice"]! = null)

e.NewValues ["UnitPrice"] =

Decimal.Parse (e.NewValues ["UnitPrice"]. ToString (),

System.Globalization.NumberStyles.Currency);

}

Page 275: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 275/3

Si el usuario ha proporcionado una PrecioUnidad valor (como "$ 19.00"), este valor sesobrescribe con el valor decimal que se calcula Decimal.Parse , el análisis del valor comomoneda. Esto correctamente analizará el decimal en el caso de los símbolos de moneda,las comas, decimales, y así sucesivamente, y utiliza la enumeración NumberStyles enelSystem.Globalization espacio de nombres.

La figura 11 muestra tanto el problema que es causado por los símbolos de moneda en esuministrado por el usuarioPrecioUnidad y cómo el RowUpdating controlador de even

del GridView puede ser utilizado para analizar la entrada tal correctamente.

Figura 11. El valor de la fila editada de UnitPrice es ahora el formato de unamoneda. (Clic en la foto para una imagen más grande.)

Paso 2: Prohibir UnitPrices NULL

Aunque la base de datos está configurado para permitir NULL los valores dela PrecioUnidad columna de la Productosde mesa, que puede ser que desee evitar quelos usuarios que visitan esta página en particular de la especificación deun NULL PrecioUnidad valor. Es decir, si un usuario no puede entrar enun PrecioUnidad valor de la hora de editar una fila de productos, en lugar de guardar loresultados en la base de datos se desea mostrar un mensaje que informa al usuario que,través de esta página, todos los productos editados debe tener un precio especificada.

El GridViewUpdateEventArgs objeto que se pasa en el RowUpdating controlador deeventos del GridView contiene unCancelar propiedad que, si se estableceen verdadero , termina el proceso de actualización. Vamos a ampliar

Page 276: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 276/3

elRowUpdating controlador de eventos para establecer e.Cancel de verdad y mostrarmensaje que explica por qué, si el Precio por unidad de valor en el NewValues colecces nula .

Empezar por agregar una etiqueta de control Web a la páginadenominada MustProvideUnitPriceMessage . Estaetiqueta de control se mostrará si usuario no especifica un PrecioUnidad valor de la actualización de un producto.Establecel texto de propiedad de la etiqueta que debe ofrecer un precio para el

producto . También he creado una nueva clase de CSS en styles.css que es llamado dealerta y tiene la siguiente definición:

. Advertencia

{

Color: Rojo;

font-style: italic;

font-weight: bold;

font-size: x-large;

}

Por último, establezca el CssClass propiedad de la etiqueta de advertencia . En estepunto, el diseñador debe mostrar el mensaje de advertencia en rojo, negrita, cursivatamaño, tipo de letra extra grande por encima del GridView , como se muestra en laFigura 12.

Figura 12. Una etiqueta se ha añadido por encima del GridView. (Clic en la fotopara una imagen más grande.)

Page 277: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 277/3

Por defecto, esta etiqueta debe estar oculto, así que ponga su Visible propiedada falso en el Page_Load controlador de eventos:

protected void Page_Load (object sender, EventArgs e)

{

MustProvideUnitPriceMessage.Visible = false;

}

Si el usuario intenta actualizar un producto sin especificar el Precio por unidad ,queremos cancelar la actualización y mostrar la etiqueta de advertencia. Aumentarla RowUpdating controlador de eventos del GridView , de la siguiente manera:

protected void GridView1_RowUpdating (object sender,GridViewUpdateEventArgs e)

{

if (e.NewValues ["UnitPrice"]! = null)

{

e.NewValues ["UnitPrice"] =

Decimal.Parse (e.NewValues ["UnitPrice"]. ToString (),

System.Globalization.NumberStyles.Currency);

}

más

{

/ / Muestra la etiqueta

MustProvideUnitPriceMessage.Visible = true;

/ / Cancelar la actualización

e.Cancel = true;

}

}

Si un usuario intenta guardar un producto sin especificar el precio, la actualización secancela y aparece un mensaje útil es. Aunque la base de datos (y la lógica de negocio)para permitir NULL PrecioUnidad s, esta particular página ASP.NET no.

Page 278: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 278/3

Figura 13. Un usuario no puede dejar en blanco Precio por unidad. (Clic en la fopara una imagen más grande.)

Hasta ahora, hemos visto cómo utilizar el RowUpdating caso de que el GridView paramodificar mediante programación los valores del parámetro asignado ala UpdateParameters colección del ObjectDataSource , así como la forma de cancelael proceso de actualización completo. Estos conceptos llevan ala DetailsView y FormView y los controles se aplican también a insertar y borrar.

Estas tareas también se puede hacer en el ObjectDataSource nivel a través de

controladores de eventos para suinserción , actualización y eliminación de losacontecimientos. Estos eventos se desencadenan antes de que el método asociado delobjeto de fondo es invocado, y proporcionan una oportunidad de última oportunidad paramodificar la colección parámetros de entrada o cancelar la operación por completo. Loscontroladores de eventos para estos tres eventos se les pasa un objeto detipo ObjectDataSourceMethodEventArgs que tiene dos propiedades de interés:

• Cancelar , el cual, si se establece en verdadero , cancela la operación que se real• InputParameters , que es la colección de InsertParameters , UpdateParameter

o DeleteParameters , dependiendo de si el controlador de eventos es parala inserción , actualización o eliminación de eventos

Para ilustrar el trabajo con los valores de los parámetros en el ObjectDataSource nivel,vamos a incluir un DetailsViewen la página que permite a los usuarios añadir un nuevoproducto. Este DetailsView se utiliza para proporcionar una interfaz para añadir un nuevproducto a la base de datos rápidamente. Para mantener una interfaz de usuario cuandoañade un nuevo producto, vamos a permitir que el usuario introduzca los valores dela ProductName yPrecioUnidad únicos campos. De manera predeterminada, los valoreque no se suministran en la interfaz de la inserción de la DetailsView se establece enun NULL el valor base de datos. Sin embargo, podemos utilizar la inserción de caso dela ObjectDataSource para inyectar valores por defecto, como veremos en breve.

Page 279: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 279/3

Paso 3: proporcionan una interfaz para añadirnuevos productos

Arrastre un DetailsView del cuadro de herramientas hasta el Diseñador de encima dela GridView , retire su altura yancho de las propiedades, y se unen ala ObjectDataSource que ya está presente en la página. Esto agregaráunaBoundField o CheckBoxField para cada uno de los campos de los productos. Porqu

queremos utilizar esteDetailsView para agregar nuevos productos, se debe checarla Habilitar inserción opción de la etiqueta inteligente.Sin embargo, no hay tal opción, que la inserción () el método de la ObjectDataSource no está asignado a un método eel ProductsBLL clase, recuerdo que nos planteamos esta asignación a (Ninguno) alconfigurar la fuente de datos (ver Figura 3).

Para configurar el ObjectDataSource , seleccione el Data Configurar origen de enlacdesde su etiqueta inteligente, que pone en marcha el asistente. La primera pantalla lepermite cambiar el objeto subyacente a que laObjectDataSource está obligado, dejarloen ProductsBLL . La siguiente pantalla muestra las asignaciones de los métodos dela ObjectDataSource a los del objeto subyacente. A pesar de que expresamente se indque la inserción () y Delete () métodos no deben asignarse a cualquiera de los métodosi vas a la INSERTAR y BORRAR las pestañas, verás que una aplicación está ahí. Esto sedebe a la AddProduct y DeleteProduct métodos de la ProductsBLL utilizarelDataObjectMethodAttribute atributo para indicar que son los métodos por defectopara insertar () y Delete () , respectivamente. Por lo tanto,el ObjectDataSource asistente selecciona las mismas cada vez que se ejecuta elasistente, a menos que haya algún otro valor que se especifica explícitamente.

Salir de la inserción () método que apunta a la AddProduct método, pero una vez másestablecer la lista desplegable de la DELETE ficha para (Ninguna) .

Page 280: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 280/3

Figura 14. Establecer en la pestaña Insertar de la lista desplegable el métodoAddProduct. (Clic en la foto para una imagen más grande.)

Figura 15. Ajuste la lengüeta de DELETE de la lista desplegable en(Ninguno). (Clic en la foto para una imagen más grande.)

Después de haber realizado estos cambios, la sintaxis declarativa dela ObjectDataSource se ampliará para incluir unInsertParameters colección, como se

muestra aquí:

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"

SelectMethod = "GetProducts" TypeName = "ProductsBLL"

UpdateMethod = "UpdateProduct" OnUpdating = "ObjectDataSource1_Updating"

InsertMethod = "AddProduct"OldValuesParameterFormatString = "original_ {0}">

<UpdateParameters>

<asp:Parameter Name="productName" tipo="String" />

<asp:Parameter Name="unitPrice" Type="Decimal" />

<asp:Parameter Name="productID" Type="Int32" />

</ UpdateParameters>

<InsertParameters>

<asp:Parameter Name="productName" tipo="String" />

<asp:Parameter Name="supplierID" Type="Int32" />

Page 281: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 281/3

<asp:Parameter Name="categoryID" Type="Int32" />

<asp:Parameter Name="quantityPerUnit" tipo="String" />

<asp:Parameter Name="unitPrice" Type="Decimal" />

<asp:Parameter Name="unitsInStock" Type="Int16" />

<asp:Parameter Name="unitsOnOrder" Type="Int16" />

<asp:Parameter Name="reorderLevel" Type="Int16" />

<asp:Parameter Name="discontinued" Type="Boolean" />

</ InsertParameters>

</ Asp: ObjectDataSource>

Volver a ejecutar el asistente vuelve a añadirla OldValuesParameterFormatString propiedad. Tome un momento para aclarar estapropiedad o bien establecer el valor por defecto ( {0} ) o eliminarlo por completo de la

sintaxis declarativa.

Con el ObjectDataSource que proporciona capacidades de inserción, el DetailsView ta's inteligente ahora incluirá laHabilitar inserción casilla de verificación; volver alDiseñador y marque esta opción. A continuación, recortar elDetailsView , por lo que sóltiene dos BoundField s- ProductName y PrecioUnidad y la CommandField . En estepunto, la sintaxis declarativa de la DetailsView debe tener el siguiente aspecto:

<Asp: DetailsView ID = "DetailsView1" runat = "server" AutoGenerateRows = "false"

DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1">

<Fields>

<Asp: BoundField DataField = "ProductName"

HeaderText = "ProductName" SortExpression = "ProductName" />

<Asp: BoundField DataField = "UnitPrice" HeaderText = "UnitPrice"

SortExpression = "UnitPrice" />

<asp:CommandField ShowInsertButton="True" />

</ Campos>

</ Asp: DetailsView>

La figura 16 muestra esta página cuando se ve a través de un navegador en estemomento. Como puede ver, elDetailsView muestra el nombre y el precio del primerproducto (Chai). Lo que queremos, sin embargo, es una interfaz de inserción queproporciona un medio para que el usuario agregue un nuevo producto a la base de datosrápidamente.

Page 282: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 282/3

Figura 16. El DetailsView está representada, en modo de sólo lectura. (Clic en lfoto para una imagen más grande.)

Con el fin de mostrar el DetailsView en el modo de insertar, debemos establecerel DefaultMode propiedad deInserción . Esto hace que el DetailsView en modo deinserción, cuando visitó por primera vez, y lo mantiene allí después de insertar un nuevoregistro. Como muestra la Figura 17 se muestra, como un DetailsView proporciona unainterfaz rápida para agregar un nuevo registro.

Page 283: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 283/3

Figura 17. El DetailsView proporciona una interfaz para añadir un nuevoproducto rápidamente. (Clic en la foto para una imagen más grande.)

Cuando el usuario introduce el nombre del producto y el precio, como "El agua Acme" y"1,99", como en la figura 17 y haga clic en Insertar , sobreviene una devolución de datoy el flujo de trabajo comienza la inserción, que culmina en un registro de nuevos productose añaden a la base de datos. El DetailsView mantiene su interfaz de inserción yelGridView es automáticamente rebote a su origen de datos con el fin de incluir el nuevo

producto, como se muestra en la Figura 18.

Figura 18. El agua Acme producto ha sido añadido a la base de datos.

Mientras que el GridView en la Figura 18 no lo demuestra, los campos de los productosque carecen dela DetailsViewinterfaz CategoryID , IdProveedor , CantidadPorUnidad , y así sucesivamente-se les asigna NULL los valores de base de datos. Esto se puede vermediante la realización de los siguientes pasos:

1. Vaya al Explorador de servidores en Visual Studio.

2. Ampliar el northwnd.mdf nodo de base de datos.3. Haga clic derecho en los productos de nodo de la tabla de base de datos.4. Seleccione Mostrar datos de tabla .

Este procedimiento mostrará una lista de todos los registros en los productosde mesa. Como muestra la Figura 19 se muestra, todas las columnas de nuestro productotros nuevos que ProductID , ProductName y PrecioUnidad hanNULL valores.

Page 284: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 284/3

Figura 19. Los campos de los productos que no están previstas en el DetailsViese les asignan valores NULL.(Clic en la foto para una imagen más grande.)

Podemos quiere dar un valor por defecto que no sea NULL para uno o más de estos valode la columna, ya sea porque NULL no es la mejor opción por defecto o por la columna dla base de datos en sí no permite NULL s. Para lograr esto, se puede establecer mediantprogramación los valores de los parámetros de la InputParameterscolección dela DetailsView . Esta asignación se puede hacer ya sea en el controlador de eventos pael ItemInsertingcaso de que el DetailsView o la Inserción casode ObjectDataSource . Debido a que ya hemos visto en el uso de los eventos de pre-grado y post-grado en el nivel de control de datos de la web, vamos a explorar esta vezusando elObjectDataSource eventos 's.

Paso 4: Asignación de valores a los parámetros deCategoryID y IdProveedor

Para este tutorial, vamos a imaginar que para nuestra aplicación, al añadir un nuevoproducto a través de esta interfaz, se debe asignar un CategoryID y IdProveedor valorde 1 . Como se mencionó anteriormente, el ObjectDataSourcetiene un par de eventos pre-grado y post-grado que el fuego durante el proceso de modificación de datos. Cuandsu inserción () es llamado, el ObjectDataSource primero eleva su inserción evento,

llama al método en que suinserción () ha sido el método asignado, y, finalmente, plantela Insertado evento. La inserción de controlador de eventos nos da una últimaoportunidad para modificar los parámetros de entrada o cancelar la operación porcompleto.

Nota En una aplicación real, es probable que desee ya sea para permitir a los usuariosespecificar la categoría y el proveedor o para recoger este valor para ellos, sobre la basede ciertos criterios o la lógica de negocio (en vez de seguir ciegamente la selección de unID de uno ). En cualquier caso, el ejemplo muestra cómo establecer medianteprogramación el valor de un parámetro de entrada del evento de pre-grado dela ObjectDataSource .

Page 285: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 285/3

 Tome un momento para crear un controlador de eventos para la Inserción casode ObjectDataSource . Tenga en cuenta que los parámetros del controlador de eventosde la segunda entrada es un objeto de tipoObjectDataSourceMethodEventArgs , quetiene una propiedad para acceder a la colección de parámetros (InputParameters ) y upropiedad para cancelar la operación ( Cancelar ).

protected void ObjectDataSource1_Inserting

(Object sender, ObjectDataSourceMethodEventArgs e)

{

}

En este punto, el InputParameters propiedad contiene el InsertParameters colecciónde la ObjectDataSource con los valores asignados desde el DetailsView . Para cambiael valor de uno de estos parámetros, sólo tiene que utilizare.InputParameters[" paramName "] = valor . Por lo tanto, para establecer el CategoryID y IdProveedolos valores de 1 , ajustar la inserción de controlador de eventos para el siguiente aspec

protected void ObjectDataSource1_Inserting

(Object sender, ObjectDataSourceMethodEventArgs e)

{

e.InputParameters ["CategoryID"] = 1;

e.InputParameters ["IdProveedor"] = 1;

}

Esta vez, al agregar un producto, tales como nuevos Acme Soda-el CategoryID y IdProveedor columnas del nuevo producto se establecen en un (véasefigura 20).

Page 286: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 286/3

Figura 20. Nuevos productos ya tienen sus valores y CategoryID IdProveedorestablece en 1. (Clic en la foto para una imagen más grande.)

Conclusión

Durante la edición, inserción y eliminación de procesos, tanto en el control de los datos yWeb ObjectDataSourceproceder a través de una serie de eventos de pre-grado y post

grado. En este tutorial, se examinaron los eventos pre-nivel y vio cómo utilizar estas parapersonalizar los parámetros de entrada o cancelar la operación de modificación de datosen conjunto, tanto desde el control de datos y la Web ObjectDataSource eventos 's. Ensiguiente tutorial, veremos cómo crear y utilizar controladores de eventos para los eventde nivel post-.

Tutorial 18: Manejo de BLL-Level y

excepciones DAL-Level en una página ASP.NE 

Scott Mitchell

03 2007

Resumen: Este es el Visual C # tutorial. ( Cambie al tutorial de Visual Basic .) En estetutorial, vamos a ver cómo se muestra un mensaje amistoso, error informativo que unaexcepción se producen durante una inserción, actualización o eliminación de un control dWeb ASP.NET de datos.

Descargar el código de la muestra .

Contenido del Tutorial 18 (Visual C #)

IntroducciónPaso 1: Creación de un GridView editable de ProductosPaso 2: Manejo de Gracia DAL-Level excepcionesPaso 3: Manejo de Gracia BLL-Level excepciones

Conclusión

Introducción

 Trabajar con datos de una aplicación web ASP.NET usando una arquitectura de aplicacionpor niveles implica los siguientes tres pasos generales:

1. Determinar qué método de la capa de lógica de negocio debe ser invocado y lovalores de los parámetros a pasar. Los valores de los parámetros pueden ser

Page 287: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 287/3

codificadas de forma rígida, programación asignada, o de los insumos introducidospor el usuario.

2. Invocar el método.3. Procesar los resultados. Al llamar a un método de plomo en sangre que devuelve

datos, esto puede implicar la unión de datos para un control web de datos. Para losmétodos de plomo en sangre que modifican los datos, esto puede incluir larealización de alguna acción sobre la base de un valor de retorno o de gracia demanejar cualquier excepción que se levantó en el paso 2.

Como vimos en el Tutorial 17: Examen de los acontecimientos relacionados con lainserción, actualización y eliminación , tanto en el ObjectDataSource y los controles Wede datos proporcionan puntos de extensibilidad para los pasos 1 y 3. El GridView , porejemplo, dispara sus RowUpdating caso antes de asignar los valores de campo parasuObjectDataSource 's UpdateParameters colección; su RowUpdated evento seproduce después de que elObjectDataSource ha completado la operación.

 Ya hemos examinado los hechos que se desencadenan durante el paso 1 y he visto cómose pueden utilizar para personalizar los parámetros de entrada o cancelar la operación. Eeste tutorial, vamos a dirigir nuestra atención a los eventos que se desencadenan despué

de la operación se ha completado. Con estos controladores de eventos de nivel post-podemos, entre otras cosas, determinar si se produjo una excepción durante la operaciónmanejar con gracia, mostrando un mensaje amistoso, error informativo en la pantalla enlugar de por defecto la página de excepción estándar de ASP.NET.

Para ilustrar el trabajo con estos eventos a nivel de post-, vamos a crear una página quemuestra los productos en un editable GridView . Cuando se actualiza un producto, si selanza una excepción a nuestra página de ASP.NET mostrará un mensaje corto por encimade la GridView explicando que ha ocurrido un problema. Vamos a empezar!

Paso 1: Creación de un GridView editable deProductos

En el tutorial anterior, hemos creado un editable GridView con sólo doscampos: ProductName y PrecioUnidad . Esto requiere la creación de una sobrecargaadicional para el ProductsBLL clase UpdateProduct método, que sólo se aceptan tresparámetros de entrada (el nombre del producto, precio unitario, y la ID) en lugar de unparámetro para cada campo del producto. Para este tutorial, vamos a practicar estatécnica una vez más, la creación de un editableGridView que muestra el nombre delproducto, cantidad por unidad, precio unitario, y las unidades en stock, pero sólo permiteque el nombre, precio unitario, y las unidades en stock para ser editado.

Para adaptarse a este escenario, vamos a necesitar otra sobrecargadel UpdateProduct método, que acepta cuatro parámetros: el nombre del producto,precio unitario, unidades en stock, y ID. Agregue el método siguiente alaProductsBLL clase:

[System.ComponentModel.DataObjectMethodAttribute (System.ComponentModel.DataObjectMethodType.Update, false)]

pública UpdateProduct bool (cadena productName, decimal? precioUnitario, corto?UnitsInStock,

int ProductID)

Page 288: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 288/380

{Northwind.ProductsDataTable productos =

Adapter.GetProductByProductID (ProductID);if (products.Count == 0)

/ / Ningún registro coincidente, devuelva falsoreturn false;

Northwind.ProductsRow producto = productos [0];

product.ProductName = productName;

if (precioUnitario == null) product.SetUnitPriceNull ();más product.UnitPrice = unitPrice.Value;

if (UnitsInStock == null) product.SetUnitsInStockNull ();más product.UnitsInStock = unitsInStock.Value;

/ / Actualizar el registro del productoint = rowsAffected Adapter.Update (producto);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsavolver rowsAffected == 1;

}

Con este método completo, estamos listos para crear la página ASP.NET que permite edit

estos cuatro campos específicos del producto. Abra la página ErrorHandling.aspx en lacarpeta EditInsertDelete y añadir un GridView a la página a través del diseño. Obligar ala GridView a un nuevo ObjectDataSource , la cartografía de la Selección ()métodopara la ProductsBLL clase GetProducts () y el método Update () método parala UpdateProduct sobrecarga acaba de crear.

Figura 1. Utilice la sobrecarga del método UpdateProduct que acepta cuatroparámetros de entrada.

Page 289: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 289/38

Esto creará un ObjectDataSource con un UpdateParameters colección con cuatroparámetros y un GridView con un campo para cada uno de los campos deproductos. El ObjectDataSource marcado 's declarativa asignaelOldValuesParameterFormatString bienes cuyo valor original_ {0} , lo que provocuna excepción, ya que nuestras clases BLL no esperan un parámetro de entradadenominado original_productID para pasar pulg No se olvide de quitar esta opción deltodo de la sintaxis declarativa (o se establece en el valor predeterminado, {0} ).

A continuación, recortar el GridView para incluir sóloel ProductName , CantidadPorUnidad , PrecioUnidad yUnitsInStock BoundField sambién se sienten en libertad de aplicar cualquier formato a nivel de campo que considenecesarias (tales como el cambio del HeaderText propiedades).

En el tutorial anterior, vimos cómo dar formato a la PrecioUnidad BoundField como unmoneda, tanto en modo de sólo lectura y el modo de edición. Vamos a hacer lo mismoaquí. Hay que recordar que esta opción requierelaBoundField 's DataFormatString propiedad {0: c} ,su HtmlEncode propiedad falsa , y su ApplyFormatInEditModede verdad , como semuestra en la Figura 2.

Figura 2. Configurar el BoundField PrecioUnidad a mostrar como una moneda.

Formateo de la PrecioUnidad como moneda en la interfaz de edición es necesario crearun controlador de eventos para el GridView 's RowUpdating caso que se analiza lamoneda con formato de cadena en un decimal valor.Recordemos queel RowUpdating controlador de eventos del último tutorial también se controla paraasegurar que el usuario ha proporcionado un PrecioUnidad valor. Sin embargo, para estutorial, vamos a permitir que el usuario omite el precio.

Page 290: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 290/3

GridView1_RowUpdating protected void (object sender, GridViewUpdateEventArgs e){

if (e.NewValues ["UnitPrice"]! = null)e.NewValues ["UnitPrice"]

= Decimal.Parse (e.NewValues ["UnitPrice"]. ToString (),System.Globalization.NumberStyles.Currency);

}

Nuestro GridView incluye un CantidadPorUnidad BoundField , pero

esto BoundField debe ser para fines de presentación y no debe ser editable por elusuario. Para arreglar esto, basta con establecer la BoundField s' ReadOnlypropiedad real .

Figura 3. Hacer que el BoundField CantidadPorUnidad de sólo lectura.

Por último, compruebe el Habilitar edición casilla de verificación de la GridView tag 'sinteligente. Después de completar estos pasos de diseño de la página ErrorHandling.aspxdebe ser similar a la Figura 4.

Page 291: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 291/3

Figura 4. Quitar todos menos el BoundFields necesario y comprobar la casilla dverificación Habilitar edición.

En este punto, tenemos una lista de todos los productos" ProductName , CantidadPorUnidad , PrecioUnidad yUnitsInStock campos, sinembargo, sólo el ProductName , PrecioUnidad y UnitsInStock campos se puedeneditar.

Figura 5. Los usuarios pueden ahora fácilmente editar los nombres de productoprecios, y los campos de las unidades en stock.

Page 292: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 292/3

Paso 2: Manejo de Gracia DAL-Level excepciones

Si bien nuestro editable GridView funciona de maravilla cuando el usuario introduzca losvalores legales para editar el nombre del producto, el precio, y las unidades en stock,entrando en valores resulta ilegal en una excepción. Por ejemplo, omitiendoel ProductName valor hace un NoNullAllowedException ser lanzado desdeel ProductNamepropiedad en el ProdcutsRow clase tiene su AllowDBNull propiedad

establecida en falso , y si la base de datos está inactivo, un SqlException será lanzadapor el TableAdapter al intentar conectarse a la base de datos . Sin tomar ninguna medidaestas excepciones a la burbuja de la capa de acceso a datos a la capa de lógica de negocy luego a la página de ASP.NET y, finalmente, el tiempo de ejecución de ASP.NET.

Dependiendo de cómo la aplicación Web se configura y si usted está visitando la aplicacide localhost , una excepción no controlada puede resultar en un servidor genérico deerror de página, un informe de error detallados o una página web fácil deusar. Ver Aplicación Web Manejo de errores en ASP.NET y el elemento customErrors paraobtener más información acerca de cómo el tiempo de ejecución ASP.NET responde a unaexcepción no capturada.

La figura 6 muestra la pantalla encontramos al intentar actualizar un producto sinespecificar el ProductName valor. Este es el informe detallado de error por defectoaparece cuando viene a través de localhost .

Figura 6. Omitiendo el nombre del producto se mostrará detalles de laexcepción.

Aunque los detalles tales excepciones son útiles cuando se prueba una aplicación, lapresentación de un usuario final con una pantalla en la cara de una excepción no es laideal. Un usuario final probablemente no sabe lo que es unNoNullAllowedException espor qué causa fue. Un mejor enfoque es el de presentar al usuario con un mensaje másfácil de explicar que había problemas al intentar actualizar el producto.

Page 293: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 293/3

Si se produce una excepción cuando se realiza la operación, los eventos de nivel post-tanen el ObjectDataSource y el control web de datos proporcionan un medio para detectaanular la excepción de burbujas hasta el tiempo de ejecución de ASP.NET. Para nuestroejemplo, vamos a crear un controlador de eventos parael GridView 's RowUpdatedevento que determina si una excepción se ha disparado y, ser así, se muestran los detalles de excepción en unaetiqueta de control Web.

Empezar por agregar una etiqueta a la página de ASP.NET, el establecimiento de su ID

propiedad deExceptionDetails y limpiar su texto la propiedad. Con el fin de llamar laatención del usuario a este mensaje, establezca su CssClass propiedad de advertenciaque es una clase CSS que agregamos a la styles.css archivo en el tutorial anterior. Hayque recordar que esta clase CSS hace que la etiqueta de texto 's que se muestran en corojo, cursiva, negrita, tipo de letra extra grande.

Figura 7. Agregue un control Web Label a la página.

Como queremos que esta etiqueta de control Web sea visible sólo inmediatamentedespués de una excepción se ha producido, establezca su Visible propiedad a falso enel Page_Load controlador de eventos:

protected void Page_Load (object sender, EventArgs e){

ExceptionDetails.Visible = false;}

Con este código, sobre la visita de la primera y devoluciones de datos subsiguientes dela ExceptionDetails de control tendrá su Visible propiedad establecida en falso . En la

Page 294: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 294/3

cara de un DAL-nivel o BLL excepción de nivel, que podemos detectar enel GridView 's RowUpdated controlador de eventos, vamos a configurarel ExceptionDetails controlVisible propiedad en true. Desde Web controladores deeventos de control se producen después de que el Page_Loadcontrolador de eventos enciclo de vida de la página, la etiqueta se mostrará. Sin embargo, en la devolución de dasiguiente, el Page_Load controlador de eventos volverá el Visible propiedad a falso ,ocultándolo de la vista de nuevo.

Nota: Como alternativa, se podría eliminar la necesidad de establecerel ExceptionDetails control visiblede propiedad en Page_Load mediante la asignaciónde su visible de propiedad falsos en la sintaxis declarativa y el desmantelamiento de suestado de vista (ajuste de su EnableViewState propiedad a falso). Vamos a utilizar estenfoque alternativo en un tutorial futuro.

Con la etiqueta de control adicional, nuestro siguiente paso es crear el controlador deeventos del GridView 'sRowUpdated evento. Seleccione el GridView en el diseño, ir a ventana Propiedades, y haga clic en el icono de rayo, una lista de los GridView eventos's. Ya debería haber ya una entrada allí para el GridView 's RowUpdating caso, comohemos creado un controlador de eventos para este evento anteriormente en este

tutorial. Crear un controlador de eventos para el RowUpdated evento así.

Page 295: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 295/3

Figura 8. Cree un controlador de eventos para el evento RowUpdated delGridView.

Nota: También puede crear el controlador de eventos a través de la lista desplegable enparte superior del archivo de clase de código subyacente. Seleccione el GridView de lalista desplegable a la izquierda y la RowUpdated caso de la de la derecha.

La creación de este controlador de eventos se agregue el siguiente código en el código

subyacente de la página ASP.NET de clase:

protected void GridView1_RowUpdated (object sender, GridViewUpdatedEventArgs e){

}

Parámetro de este controlador de eventos de la segunda entrada es un objeto detipo GridViewUpdatedEventArgs , que tiene tres propiedades de interés para el manejo dexcepciones:

• Excepción -una referencia a la excepción que se produce, si no es la excepción hasido lanzado, esta propiedad tendrá un valor de null .

• ExceptionHandled -Un valor booleano que indica si la excepción se ha controladoen el RowUpdatedcontrolador de eventos, si falsa (por defecto), la excepción sevuelve a producir, se filtra hasta el tiempo de ejecución de ASP.NET.

• KeepInEditMode -Si se establece en verdadera la edición GridView filapermanece en modo de edición, si falsa(por defecto), el GridView fila vuelve a sumodo de sólo lectura.

Nuestro código, a continuación, debe comprobar para ver si la excepción no es nula , loque significa que una excepción fue planteada en el desempeño de la operación. Si este

el caso, queremos:• Muestra un mensaje fácil de usar en el ExceptionDetails etiqueta .• Indican que la excepción se ha controlado.• Mantenga el GridView fila en modo de edición.

Este código se lleva a cabo estos objetivos:

protected void GridView1_RowUpdated (object sender, GridViewUpdatedEventArgs e){

if (e.Exception! = null){

/ / Muestra un mensaje fácil de usarExceptionDetails.Visible = true;ExceptionDetails.Text = "Ha habido un problema al actualizar el producto.";

if (e.Exception.InnerException! = null){

Excepción interna = e.Exception.InnerException;

if (interior es System.Data.Common.DbException)ExceptionDetails.Text + =

"Nuestra base de datos está experimentando problemas." +"Por favor, inténtelo de nuevo más tarde.";

else if (interior es NoNullAllowedException)

Page 296: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 296/3

ExceptionDetails.Text + ="Hay uno o más campos obligatorios que faltan.";

else if (interior es ArgumentException){

paramName cadena = ((ArgumentException) interna) ParamName.;ExceptionDetails.Text + =

String.Concat ("El", paramName, "el valor es ilegal.");}else if (interior es ApplicationException)

ExceptionDetails.Text + = inner.Message;

}

/ / Indica que la excepción se ha manejadoe.ExceptionHandled = true;

/ / Mantener la fila en modo de edicióne.KeepInEditMode = true;

}}

Este controlador de eventos comienza con la comprobación para versi e.Exception es nula . Si no es así, laExceptionDetails etiqueta 's Visible propieda

se establece en verdadero , y su texto a la propiedad "Hubo un problema al actualizar producto." Los detalles de la excepción actual que fue lanzado residen enel e.Exceptionobjeto InnerException propiedad. Esta excepción interna se examina y, se trata de un tipo particular, un mensaje adicional, útil se añade ala ExceptionDetails etiqueta 's de texto de propiedad. Por último,el ExceptionHandled yKeepInEditMode propiedades se establecen en verdad .

La Figura 9 muestra una captura de pantalla de esta página cuando se omite el nombre dproducto; La figura 10 muestra los resultados al introducir una ilegal PrecioUnidad valo50).

Figura 9. El BoundField ProductName debe contener un valor.

Page 297: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 297/3

Figura 10. Los valores negativos PrecioUnidad no están permitidos.

Al establecer la e.ExceptionHandled propiedad real , la RowUpdated controlador deeventos ha indicado que se ha manejado la excepción. Por lo tanto, la excepción no sepropagará hasta el tiempo de ejecución de ASP.NET.

Nota: Las figuras 9 y 10 muestran una manera elegante de manejar las excepcionesplanteadas por la entrada del usuario no válida. Lo ideal, sin embargo, de entrada noválidos, no se llega a la capa de lógica de negocio en el primer lugar, como la página deASP.NET debe asegurarse de que las entradas del usuario son válidos antes de invocarel ProductsBLL clase UpdateProduct método. En nuestro próximo capítulo, veremoscómo agregar controles de validación para las interfaces de edición e inserción paraasegurarse de que los datos presentados a la capa de lógica de negocio se ajusta a lasreglas de negocio. Los controles de validación no sólo evitar la invocación dela UpdateProduct método hasta que el usuario los datos proporcionados son válidos, sique también proporcionan una experiencia de usuario más informativo para laidentificación de los problemas de entrada de datos.

Paso 3: Manejo de Gracia BLL-Level excepciones

Al insertar, actualizar o eliminar datos, la capa de acceso a datos puede producir unaexcepción en la cara de un error de datos relacionados. La base de datos puede estar fuede línea, una columna de base de datos requerida por la tabla no podría haber tenido unvalor específico, o una restricción a nivel de tabla puede haber sido violada. Además de lestrictamente relacionadas con los datos excepciones, la capa de lógica de negocio puedutilizar las excepciones para indicar que las reglas de negocio han sido violados. En Tuto2: Crear una capa de lógica de negocio , por ejemplo, hemos añadido un control de laempresa a la regla original de UpdateProduct sobrecarga. En concreto, si el usuario semarca como un producto descontinuado, se requiere que el producto no sea la únicaproporcionada por su proveedor. Si esta condición se ha violado,una ApplicationException fue lanzado.

Page 298: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 298/38

Para el UpdateProduct sobrecarga creado en este tutorial, vamos a añadir una regla denegocio, que prohíbe laPrecioUnidad campo se establece en un valor nuevo que es másdel doble de la original PrecioUnidad valor. Para lograr esto, ajustarel UpdateProduct sobrecarga de modo que se realice este control y se produceunaApplicationException si la regla es violada. El método de actualización siguiente:

pública UpdateProduct bool (cadena productName, decimal? precioUnitario, corto?UnitsInStock,

int ProductID){

Northwind.ProductsDataTable productos =Adapter.GetProductByProductID (ProductID);

if (products.Count == 0)/ / Ningún registro coincidente, devuelva falsoreturn false;

Northwind.ProductsRow producto = productos [0];

/ / Asegúrese de que el precio no ha más que duplicadoif (precioUnitario! = null & &! product.IsUnitPriceNull ())

if (precioUnitario> product.UnitPrice * 2)throw new ApplicationException (

"Cuando la actualización de un precio del producto," +"El nuevo precio no puede exceder el doble del precio original.");

product.ProductName = productName;if (precioUnitario == null) product.SetUnitPriceNull ();más product.UnitPrice = unitPrice.Value;

if (UnitsInStock == null) product.SetUnitsInStockNull ();más product.UnitsInStock = unitsInStock.Value;

/ / Actualizar el registro del productoint = rowsAffected Adapter.Update (producto);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsavolver rowsAffected == 1;}

Con este cambio, cualquier actualización de precios que es más del doble del precio actuprovocará unaApplicationException ser lanzada. Al igual que la excepción planteada apartir de la DAL, esta BLL-raiseApplicationException pueden ser detectados y manejaden el GridView 's RowUpdated controlador de eventos. De hecho,el RowUpdated código de controlador de eventos, como por escrito, correctamentedetectar esta excepción y mostrar el ApplicationException 's Mensaje valor de lapropiedad. La figura 11 muestra una captura de pantalla cuando el usuario intentaactualizar el precio de Chai a $ 50.00, que es más del doble de su precio actual de $ 19.9

Page 299: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 299/3

Figura 11. Las reglas de negocio aumenta el precio no permitir que más deldoble de precio de un producto.

Nota: Idealmente, nuestra lógica de reglas de negocio sería reprogramado para salir delaUpdateProduct sobrecargas del método y en un método común. Esto se deja comoejercicio para el lector.

Conclusión

Durante la inserción, actualización y eliminación de las operaciones, tanto en el control dlos datos y la WebObjectDataSource fuego involucradas pre-grado y nivel de post-eventos que sujetalibros la operación real. Como hemos visto en este tutorial y el anteriocuando se trabaja con un editable GridView el GridView 's RowUpdating se activa elevento, seguido por el ObjectDataSource 's Actualización de evento, momento en elque se hace el comando de actualización con el ObjectDataSource 's objetosubyacente. Después de la operación se ha completado,elObjectDataSource 's Actualizado activa el evento, seguido porel GridView 's RowUpdated evento.

Podemos crear controladores de eventos para los eventos de pre-grado con el fin depersonalizar los parámetros de entrada o de los eventos de nivel post-con el fin deinspeccionar y responder a los resultados de la operación. Nivel de post-controladores deeventos son los más comúnmente utilizados para detectar si se produjo una excepcióndurante la operación. En el rostro de una excepción, estos controladores de eventos denivel post-opcionalmente puede controlar la excepción por su propia cuenta. En estetutorial, hemos visto cómo manejar esa excepción, mostrando un mensaje de errordescriptivo.

Page 300: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 300/3

En el siguiente tutorial, vamos a ver cómo reducir la posibilidad de excepciones derivadade problemas de formato de datos (como la introducción de unnegativo PrecioUnidad ). En concreto, vamos a ver cómo agregar controles de validaciópara las interfaces de edición e inserción.

Tutorial 19: Adición de controles de validacióna las interfaces de edición e inserción de 

Scott Mitchell

03 2007

Resumen: Este es el Visual C # tutorial. ( Cambie al tutorial de Visual Basic .) En estetutorial, vamos a ver lo fácil que es añadir controles de validación parael EditItemTemplate y InsertItemTemplate de un control web de datos paraproporcionar una interfaz de usuario más infalible. (19 páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 19 (Visual C #)

IntroducciónPaso 1: Replicar el ejemplo de "Tutorial 17: Examen de los acontecimientos relacionados

con la inserción, actualización y eliminación de"Paso 2: Convertir el BoundFields en TemplateFieldsPaso 3: Agregar los controles de validación de EditItemTemplates el GridViewPaso 4: Resumen de entrada de datos problemasPaso 5: Agregar los controles de validación a la DetailsView de InsertItemTemplatePaso 6: Partición de los controles de validación en la validación de los gruposConclusión

Introducción

El GridView y DetailsView controles en los ejemplos que hemos explorado en los últimtres tutoriales han sido compuesta por BoundField s y CheckBoxField s (los tipos decampo añadidas automáticamente por Microsoft Visual Studio al enlazarun GridView o DetailsView a un control de origen de datos a través de la etiquetainteligente). Al editar una fila de un GridView o DetailsView , los BoundField s que noson de sólo lectura se convierten en cuadros de texto, a partir de la cual el usuario puedemodificar los datos existentes. Del mismo modo, al insertar un nuevo registro enun DetailsView de control, los BoundField s cuya InsertVisible propiedad estáestablecida en verdadero(por defecto) se representan como cuadros de texto vacíos, enlos que el usuario puede proporcionar valores del nuevo registro de campo. Del mismo

Page 301: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 301/3

modo, CheckBoxField s, que se desactivan en la norma, de sólo lectura de la interfaz, sconvierten en las casillas habilitadas en las interfaces de edición e inserción.

Mientras que el valor predeterminado de edición e inserción de interfaces parael BoundField y CheckBoxField puede ser útil, la interfaz no tiene ningún tipo devalidación. Si un usuario hace una entrada de datos error-como la omisión dela ProductName campo o entrar en un valor no válido para UnitsInStock (por ejemplo,-50), una excepción se levantó desde las profundidades de la arquitectura de la

aplicación. Aunque esta excepción puede ser manejado con gracia como se demuestra eel tutorial anterior , lo ideal es la interfaz de usuario de edición o inserción que incluyencontroles de validación para evitar que un usuario entre en tales datos no válidos en elprimer lugar.

A fin de proporcionar una interfaz personalizada de edición o inserción, tenemos quesustituir la BoundField oCheckBoxField con un TemplateField . TemplateField s, qufueron el tema de discusión en el Tutorial 12: Uso de TemplateFields en el controlGridView y Tutorial 13: Uso de TemplateFields en DetailsView , puede constar de variasplantillas de definición de interfaces separadas para los Estadosfila. El TemplateField 's ItemTemplate se utiliza para cuando la prestación campos de

sólo lectura o filas en el DetailsView o GridView controles, mientras queelEditItemTemplate y InsertItemTemplate indican las interfaces con el uso de losmodos de edición y la inserción, respectivamente.

En este tutorial, vamos a ver lo fácil que es añadir controles de validación parael TemplateField 's EditItemTemplate yInsertItemTemplate para proporcionar unainterfaz de usuario más infalible. En concreto, este tutorial toma el ejemplo creadoen Tutorial 17: Examen de los acontecimientos relacionados con la inserción, actualizacióy eliminación y aumenta la edición y la inserción de las interfaces para incluir la validaciócorrespondiente.

Paso 1: Replicar el ejemplo de "Tutorial 17: Examende los acontecimientos relacionados con lainserción, actualización y eliminación"

En Tutorial 17: Examen de los acontecimientos relacionados con la inserción, actualizacióy eliminación , hemos creado una página en la que figuran los nombres y los precios de loproductos en un editable GridView . Además, la página incluyeun DetailsView cuya DefaultMode propiedad se estableció en Insertar , por lo tantosiempre la representación en modo de inserción. A partir de este DetailsView , el usuar

puede introducir el nombre y el precio de un producto nuevo, haga clic en Insertar , y lohan añadido al sistema (ver Figura 1).

Page 302: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 302/3

Figura 1. El ejemplo anterior permite a los usuarios añadir nuevos productos yeditar las existentes.

Nuestro objetivo para este tutorial es para aumentar el DetailsView y GridView paraproporcionar controles de validación. En particular, la lógica de validación:

• Exigir que el nombre se proporcionará al insertar o editar un producto.• Exige que el precio se proporcionará al insertar un registro, cuando se edita un disc

que aún se requiere un precio, sino que utilizan la lógica de programación en

el GridView 's RowUpdating controlador de eventos ya están presentes en eltutorial anterior.• Asegúrese de que el valor introducido por el precio es un formato de moneda válid

Antes de que podamos mirar a aumentar el ejemplo anterior para incluir la validación,primero tenemos que replicar el ejemplo de la página DataModificationEvents.aspx a lapágina de este tutorial, UIValidation.aspx. Para lograr esto, tenemos que copiar en elmarcado declarativo de la página DataModificationEvents.aspx y su código fuente. Enprimer lugar, copie el marcado declarativo mediante la realización de los siguientes paso

1. Abra la página DataModificationEvents.aspx en Visual Studio.

2. Ir al marcado declarativo de la página (pulse en la Fuente en la parte inferior de lapágina).3. Copiar el texto en el <asp:Content> y </ asp: Content> etiquetas (líneas 3 y 44

como se muestra en la Figura 2.

Page 303: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 303/3

Figura 2. Copiar el texto dentro del control <asp:Content>.

1. Abra la página UIValidation.aspx.2. Ir al marcado declarativo de la página.3. Pegue el texto en el <asp:Content> control.

Para copiar el código fuente, abra la página DataModificationEvents.aspx.cs y copiar sólotexto dentro de laEditInsertDelete_DataModificationEvents clase. Copie los trescontroladores de eventos( Load ,GridView1_RowUpdating y ObjectDataSource1_Inserting ), pero no copia ladeclaración de clase o con los estados.Pegue el textocopiado en el EditInsertDelete_UIValidation clase en UIValidation.aspx.cs.

Después de mover sobre el contenido y el código de DataModificationEvents.aspx aUIValidation.aspx, tome un momento para poner a prueba su progreso en unnavegador. Usted debe ver la salida del mismo y la experiencia de la misma funcionalidaen cada una de estas dos páginas (de nuevo la figura 1 para una captura de pantalla de

DataModificationEvents.aspx en acción).

Paso 2: Convertir el BoundFields en TemplateFields

Para agregar controles de validación para las interfaces de edición e inserción,el BoundField s utilizados por elDetailsView y GridView controles tienen que serconvertidos en TemplateField s. Para lograr esto, haga clic en elEditarcolumnas y editar campos enlaces en el GridView y DetailsView etiquetas"inteligentes s, respectivamente. Allí, seleccione cada uno de los BoundField s y haga cen el Convertir este campo en un TemplateField enlace.

Page 304: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 304/3

Figura 3. Convertir cada uno de los de DetailsView y GridView BoundFields enTemplateFields.

Conversión de un BoundField en un TemplateField a través de la Campos cuadro dediálogo genera unTemplateField que exhibe la misma de sólo lectura, la edición y lainserción de las interfaces como el BoundField sí mismo. El marcado siguiente se muestla sintaxis declarativa para el ProductName de campo en el DetailsViewdespués de qu

se ha convertido en un TemplateField :

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName"><EditItemTemplate>

<Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("ProductName") %>'></ asp: TextBox>

</ EditItemTemplate><InsertItemTemplate>

<Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("ProductName") %>'></ asp: TextBox>

</ InsertItemTemplate><ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"

Texto ='<%# Bind ("ProductName") %>'></ asp: Label></ ItemTemplate>

</ Asp: TemplateField>

 Tenga en cuenta que este TemplateField tenía tres plantillas creadasautomáticamente: ItemTemplate ,EditItemTemplate y InsertItemTemplate . El Itememplate muestra un solo valor de datos de campo ( ProductName) con una etiqueta dcontrol de Internet, mientras que el EditItemTemplate y InsertItemTemplate presentel valor de los datos de campo en un cuadro de texto de control Web que asocie elcampo de datos con el cuadro de texto 'sde texto con la propiedad de dos vías deenlace de datos. Ya que sólo está usando el DetailsView en esta página para insertar,

Page 305: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 305/3

puede quitar el ItemTemplate y EditItemTemplate de los dos TemplateField s, aunqno hay nada de malo en salir de ellos.

Dado que el GridView no es compatible con la incorporada en la inserción de lascaracterísticas de la DetailsView , que convierte el GridView 's ProductName de camen un TemplateField resultados en tan sólo un ItemTemplate yEditItemTemplate :

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">

<EditItemTemplate><Asp: TextBox ID = "TextBox1" runat = "server"Texto ='<%# Bind ("ProductName") %>'></ asp: TextBox>

</ EditItemTemplate><ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("ProductName") %>'></ asp: Label>

</ ItemTemplate></ Asp: TemplateField>

Al hacer clic en el Convertir este campo en un TemplateField enlace, Visual Studio hcreado un TemplateField cuyo plantillas de imitar la interfaz de usuario de losconversos BoundField . Usted puede verificar esto visitando esta página a través de unnavegador. Usted encontrará que la apariencia y el comportamiento del TemplateFieldes idéntica a la experiencia cuando BoundField s se utilizaron en su lugar.

Nota: No dude en personalizar las interfaces de edición de las plantillas cuando seanecesario. Por ejemplo, puede querer tener el cuadro de texto enel PrecioUnidad TemplateField s representa como un cuadro de texto más pequeño qel ProductName cuadro de texto. Para lograr esto se puede establecer el cuadro detexto 's columnas de propiedad a un valor adecuado o proporcionar un ancho absoluto través del ancho de la propiedad. En el siguiente tutorial, veremos cómo personalizartotalmente la interfaz de edición mediante la sustitución del cuadro de texto con uncontrol de Web alternativo de entrada de datos.

Paso 3: Agregar los controles de validación deEditItemTemplates el GridView

Cuando la construcción de formas de entrada de datos, es importante que los usuariosintroducen todos los campos requeridos, y que todas las aportaciones son legales, con elformato adecuado los valores. Para ayudar a asegurar que las aportaciones de los usuarison válidas, ASP.NET proporciona cinco incorporado en los controles de validación queestán diseñados para ser utilizados para validar el valor de un control de entrada única:

• RequiredFieldValidator : Asegura que un valor ha sido siempre• CompareValidator -Valida un valor con otro valor de control Web o un valor

constante, o se asegura de que el formato del valor es legal para un tipo de datosespecificado

• RangeValidator -Asegura que un valor está dentro de un rango de valores• RegularExpressionValidator -Valida un valor en contra de una expresión regular• CustomValidator -Valida un valor con un método personalizado, definido por el

usuario

Page 306: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 306/3

Para más información sobre estos cinco controles, echa un vistazo a la sección de controde validación de lostutoriales de inicio rápido de ASP.NET .

Para nuestro tutorial, tendremos que usar un RequiredFieldValidator , tanto enel DetailsView y GridView 'sProductName TemplateField s yun RequiredFieldValidator enel DetailsView 's PrecioUnidad TemplateField .Además, tendremos que añadirun CompareValidator a ambos controles " PrecioUnidad TemplateField s que asegu

que el precio de entrada tiene un valor mayor o igual a 0 y se presenta en un formato demoneda válida.

Nota: Aunque ASP.NET 1.x tenido estos mismos cinco controles de validación, ASP.NET 2ha añadido una serie de mejoras, las dos principales que del lado del cliente admitesecuencias de comandos para los navegadores que no sean Microsoft Internet Explorer ycapacidad de los controles de validación de partición en una página en grupos devalidación. Para más información sobre el nuevo control de validación características en2.0, consulte la disección de los controles de validación en ASP.NET 2.0 .

Vamos a empezar por la adición de los controles de validación necesarios para

la EditItemTemplate s en el GridView's TemplateField s. Para lograr esto, haga clic eel Editar plantillas de enlace desde el GridView tag 's inteligente para que aparezca lainterfaz de edición de plantilla. A partir de aquí, puede seleccionar la plantilla que deseaeditar en la lista desplegable. Dado que queremos enriquecer la interfaz de edición,tenemos que añadir los controles de validación ala ProductName y PrecioUnidad 's EditItemTemplate s.

Figura 4. Tenemos que extender la ProductName y EditItemTemplatesPrecioUnidad es.

En el ProductName EditItemTemplate , agregueun RequiredFieldValidator arrastrándolo desde la caja de herramientas en la interfaz dedición de plantillas, después de la colocación de cuadro de texto .

Page 307: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 307/3

Figura 5. Añadir un RequiredFieldValidator a la EditItemTemplate ProductName

 Todos los controles de validación de trabajo mediante la validación de la entrada de uncontrol ASP.NET Web única. Por lo tanto, tenemos que indicar queel RequiredFieldValidator que acaba de agregar debe validar contra el cuadro detexto en el EditItemTemplate , esto se logra mediante el establecimiento del control dvalidación de la propiedad ControlToValidate a la ID del control Webcorrespondiente. El cuadro de texto en la actualidad tiene el másanodino IDde TextBox1 , pero vamos a cambiar a algo más apropiado. Haga clic enel cuadro de texto en la plantilla y, a continuación, desde la ventana Propiedades, cam

el ID de TextBox1 a EditProductName .

Figura 6. Cambiar el ID del cuadro de texto para EditProductName.

Page 308: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 308/3

A continuación, establezcael RequiredFieldValidator 's ControlToValidate propiedad EditProductName . Porúltimo, establezca la propiedad ErrorMessage a "Usted debe proporcionar el nombre delproducto" y la propiedad de texto a "*". El texto valor de la propiedad, si la hay, es el texque se muestra en el control de validación si el error en lavalidación. El ErrorMessage valor de la propiedad, que se requiere, es utilizado porel ValidationSummary de control, si el texto valor de la propiedad se omite,el ErrorMessage valor de la propiedad es también el texto mostrado por el control de

validación en la entrada no válida.

Después de establecer estas tres propiedades de la RequiredFieldValidator , la pantaldebe ser similar a la Figura 7.

Figura 7. Establecer el RequiredFieldValidator ControlToValidate es,ErrorMessage, y las propiedades de texto.

Con el RequiredFieldValidator añadido a la ProductName EditItemTemplate , todoque queda es añadir la validación necesaria parala PrecioUnidad EditItemTemplate . Desde que hemos decidido que, para esta páginaelPrecioUnidad es opcional la hora de editar un disco, no es necesario agregarun RequiredFieldValidator . Nosotros, sin embargo, que añadirun CompareValidator para asegurar que el Precio por unidad , si fue suministrado,

tiene el formato correcto como moneda y es mayor o igual a 0.

Antes de añadir el CompareValidator a la PrecioUnidad EditItemTemplate , primerovamos a cambiar el cuadro de texto web de controlde identificación de TextBox2 a EditUnitPrice . Después de hacer este cambio, agregelCompareValidator , estableciendo su ControlToValidate propiedad EditUnitPrice ,su ErrorMessage propiedad de "El precio debe ser mayor o igual a cero y no puede incluel símbolo de la moneda", y su texto a la propiedad "*".

Page 309: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 309/3

Para indicar que el PrecioUnidad valor debe ser mayor o igual a 0, elconjunto CompareValidator 's propiedad del operador de GreaterThanEqual ,su propiedad ValueToCompare a "0", y su propiedad de tipo de divisas . La sintaxisdeclarativa siguiente muestrala PrecioUnidad TemplateField 's EditItemTemplate después de estos cambios se hahecho:

<EditItemTemplate>

<Asp: TextBox ID = "EditUnitPrice" runat = "server"Texto ='<%# Bind ("Precio por unidad", "{0: c}")%> 'Columnas = "6"> </ asp: TextBox>

<Asp: CompareValidator ID = "CompareValidator1" runat = "server"ControlToValidate = "EditUnitPrice"ErrorMessage = "El precio debe ser mayor o igual a cero y

no puede incluir el símbolo de la moneda "Operador = "GreaterThanEqual" type = "Moneda"ValueToCompare = "0 ">*</ asp: CompareValidator>

</ EditItemTemplate>

Después de hacer estos cambios, abra la página en un navegador. Si intenta omitir elnombre o introduzca un valor de precio válido durante la edición de un producto, aparece

un asterisco junto al cuadro de texto. Como muestra la Figura 8 se muestra un valor deprecio que incluye el símbolo de la moneda, tales como $ 19.95-se consideraválido. ElCompareValidator 's de divisas tipo permite separadores de dígitos (porejemplo, comas o puntos, dependiendo de la configuración de la cultura) y un signo iniciamás o menos, pero no permitir que un símbolo de moneda. Este comportamiento puededejar perplejo como los usuarios de la interfaz de edición en la actualidad hace queel Precio por unidad con el formato de moneda.

Nota: Recuerde que en el Tutorial 17: Examen de los acontecimientos relacionados con inserción, actualización y eliminación , se estableceel BoundField 's DataFormatString propiedad {0: c} con el fin de darle formato como

moneda. Además, se establece el ApplyFormatInEditMode propiedad real , haciendoque el GridView interfaz 's de edición para dar formato al PrecioUnidad como monedaconvertir el BoundField en un TemplateField , Visual Studio tomó nota de estos ajusteel formato delcuadro de texto 's de texto de propiedad como una moneda con la sintade enlace de datos <% # Bind ("Precio por unidad", "{0: c}")%> .

Page 310: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 310/3

Figura 8. Aparece un asterisco junto a los cuadros de texto con la entrada no eválida.

Mientras que la validación de las obras tal cual, el usuario tiene que quitar manualmente símbolo de la moneda cuando se edita un registro, que no es aceptable. Para remediaresto, tenemos tres opciones:

1. Configurar el EditItemTemplate para que el PrecioUnidad valor no estáformateado como moneda.

2. Permitir que el usuario introduzca un símbolo de moneda mediante la eliminación dla CompareValidator y su sustitución por un RegularExpressionValidator quecomprueba correctamente por un valor de la moneda con el formato adecuado. Elproblema aquí es que la expresión regular para validar un valor de la moneda no ebastante y se requiere escribir código si queríamos incorporar ajustes de la cultura

3. Eliminar por completo el control de validación y se basan en la lógica de validaciónen el servidor en el GridView's RowUpdating controlador de eventos.

Vamos a ir con la opción # 1 para este ejercicio. En la actualidad, la PrecioUnidad tieneformato de una moneda debido a la expresión de enlace de datos para el cuadro de

texto en el EditItemTemplate : <% # Bind ("Precio por unidad", "{0: c}")%> Cambiar la vinculación declaración a Bind (" Precio por unidad "," {0: N2} ") ,que da formato al resultado como un número con dos dígitos de precisión. Esto se puedehacer directamente a través de la sintaxis declarativa o haciendo clic en el EditarDataBinding enlace de la EditUnitPrice TextBox enel PrecioUnidadTemplateField 's EditItemTemplate (ver Figuras 9 y 10).

Page 311: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 311/3

Figura 9. Haga clic en el enlace Editar del cuadro de texto DataBindings.

Figura 10. Especifique el especificador de formato en la declaración de enlace.

Con este cambio, el precio de formato en la interfaz de edición incluye la coma comoseparador de grupo y un punto como separador decimal, pero deja fuera el símbolo demoneda.

Nota: El Precio por unidad EditItemTemplate no incluye un RequiredFieldValidatolo que permite la devolución de datos a producirse y la lógica de actualización decomenzar. Sin embargo, el RowUpdatingcontrolador de eventos copiado de Tutorial 17

Page 312: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 312/3

Examen de los acontecimientos relacionados con la inserción, actualización yeliminación incluye un cheque de programación que asegura que elPrecioUnidad seproporciona. Siéntase libre para eliminar esta lógica, lo deje en como está, o añadirunRequiredFieldValidator a la PrecioUnidad EditItemTemplate .

Paso 4: Resumen de los problemas de entrada dedatos

Además de los cinco controles de validación, ASP.NET incluye el controlValidationSummary , que muestra elErrorMessage s de los controles de validación quedetectan datos no válidos. Este resumen de los datos se pueden mostrar como texto en lpágina web oa través de un modal, cuadro de mensaje en el cliente. Vamos a mejorar esttutorial para incluir un cuadro de mensaje en el cliente que resume los problemas devalidación.

Para lograr esto, arrastre un ValidationSummary el control del cuadro de herramientashasta el diseñador. La ubicación de la validación de control en realidad no importa, ya qvamos a configurar para mostrar sólo el resumen como un cuadro de mensaje. Después agregar el control, establezca su propiedad ShowSummary a falsos y supropiedadShowMessageBox de verdad . Con esta adición, los errores de validación se resumen enun cuadro de mensaje en el cliente.

Figura 11. Los errores de validación se resumen en un cuadro de mensaje en elcliente.

Paso 5: Agregar los controles de validación a laInsertItemTemplate DetailsView de

Page 313: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 313/3

 Todo lo que queda de este tutorial es añadir los controles de validación ala DetailsView interfaz 's la inserción. El proceso de añadir controles de validación parael DetailsView plantillas 's es idéntica a la que se examinaron en el paso 3, por lo tantovamos a pasar rápidamente por la tarea en este paso. Como lo hicimos conel GridView 'sEditItemTemplate s, os animo a cambiar el nombre del ID s dela TextBox es elindescriptible TextBox1 y TextBox2 aInsertProductName y InsertUnitPrice .

Añadir un RequiredFieldValidator a la ProductName InsertItemTemplate . Establecel ControlToValidate a laidentificación de los TextBox en la plantilla, el texto de lapropiedad "*" y su ErrorMessage propiedad "Debe proporcionar el nombre del producto

Desde el PrecioUnidad se requiere para esta página cuando se añade un nuevo registroagregar unRequiredFieldValidator a la PrecioUnidad InsertItemTemplate ,estableciendo su ControlToValidate , texto , yErrorMessage propiedadesadecuadamente. Finalmente, agregue una CompareValidator ala PrecioUnidadInsertItemTemplate así, la configuración desu ControlToValidate , texto , ErrorMessage , Tipo , operador ,yValueToCompare propiedades al igual que hicimos con

el PrecioUnidad 's CompareValidator en el GridView 'sEditItemTemplate .

Después de la adición de estos controles de validación, un nuevo producto no se puedeañadir al sistema si su nombre no se suministra o si su precio es un número negativo o coformato de manera ilegal.

Figura 12. La lógica de validación ha sido añadido a la interfaz de la inserción dla DetailsView es.

Page 314: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 314/3

Paso 6: Partición de los controles de validación engrupos de validación

Nuestra página se compone de dos conjuntos lógicamente dispares de los controles devalidación: las que corresponden a la GridView 's interfaz de edición y las quecorresponden a la DetailsView 's interfaz de inserción. Por defecto, cuando se produceuna devolución de datos todos los controles de validación de la página se comprueban. S

embargo, cuando se edita un registro, no queremos que el DetailsView validación de lainterfaz 's la inserción de los controles para validar. La figura 13 muestra nuestro dilemaactual: Cuando un usuario está editando un producto con valores perfectamente legal,haga clic en Actualización de las causas de un error de validación debido a que elnombre y los valores de precios en la interfaz de inserción están en blanco.

Figura 13. La actualización de un producto provoca una validación de la interfade la inserción de los controles a los incendios.

Los controles de validación en ASP.NET 2.0 pueden dividirse en grupos de validación através de sus ValidationGrouppropiedad. Para asociar un conjunto de controles de

validación en un grupo, basta con establecer su ValidationGrouppropiedad con el mismvalor. Para el tutorial, establezca la ValidationGroup propiedades de los controles devalidación en el GridView 's TemplateField s de EditValidationControls yel ValidationGroup propiedades de laDetailsView 's TemplateField sde InsertValidationControls . Estos cambios se pueden hacer directamente en elmarcado declarativo oa través de la ventana Propiedades cuando se utiliza el Diseñador edición de la plantilla de interfaz.

Además de los controles de validación, el botón y el botón relacionadas con los controleen ASP.NET 2.0 también incluye una ValidationGroup propiedad. Validadores de un grude validación se comprueba su validez sólo cuando una devolución de datos es inducida

Page 315: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 315/3

por un botón que tiene el mismo ValidationGroup valor de la propiedad. Por ejemplo,para que el DetailsView 's Insertar botón para activarel InsertValidationControls grupo de validación que necesitan para establecerla CommandField 's ValidationGroup propiedad InsertValidationControls (ver Figur14).Además, establecerel GridView 's CommandField 's ValidationGroup propiedad EditValidationControls

Figura 14. Establecer el DetailsView de CommandField de propiedadValidationGroup InsertValidationControls.

Después de estos cambios, el DetailsView y GridView 's TemplateField sy CommandField s debe ser similar a lo siguiente.

TemplateFields el DetailsView y CommandField:

<Asp: TemplateField HeaderText = "ProductName"SortExpression = "ProductName">

<InsertItemTemplate><Asp: TextBox ID = "InsertProductName" runat = "server"Texto ='<%# Bind ("ProductName") %>'></ asp: TextBox><Asp: RequiredFieldValidator ID = "RequiredFieldValidator2"runat = "server" ControlToValidate = "InsertProductName"ErrorMessage = "Usted debe proporcionar el nombre del producto"ValidationGroup = "InsertValidationControls"> *

</ Asp: RequiredFieldValidator></ InsertItemTemplate>

</ Asp: TemplateField><asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">

<InsertItemTemplate><Asp: TextBox ID = "InsertUnitPrice" runat = "server"Texto ='<%# Bind ("Precio por unidad")%> 'Columnas = "6">

</ Asp: TextBox>

Page 316: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 316/3

<Asp: RequiredFieldValidator ID = "RequiredFieldValidator3"runat = "server" ControlToValidate = "InsertUnitPrice"ErrorMessage = "Usted debe proporcionar el precio del producto"ValidationGroup = "InsertValidationControls"> *

</ Asp: RequiredFieldValidator><Asp: CompareValidator ID = "CompareValidator2" runat = "server"

ControlToValidate = "InsertUnitPrice"ErrorMessage = "El precio debe ser mayor o igual a cero y

no puede incluir el símbolo de la moneda "Operador = "GreaterThanEqual" type = "Moneda" ValueToCompare = "0"

ValidationGroup = "InsertValidationControls"> *</ Asp: CompareValidator>

</ InsertItemTemplate></ Asp: TemplateField><Asp: CommandField ShowInsertButton = "True"ValidationGroup = "InsertValidationControls" />

El GridView CommandField y TemplateFields:

<Asp: CommandField ShowEditButton = "True"ValidationGroup = "EditValidationControls" /><Asp: TemplateField HeaderText = "ProductName"SortExpression = "ProductName">

<EditItemTemplate><Asp: TextBox ID = "EditProductName" runat = "server"Texto ='<%# Bind ("ProductName")%> '>

</ Asp: TextBox><Asp: RequiredFieldValidator ID = "RequiredFieldValidator1"

runat = "server" ControlToValidate = "EditProductName"ErrorMessage = "Usted debe proporcionar el nombre del producto"ValidationGroup = "EditValidationControls"> *

</ Asp: RequiredFieldValidator></ EditItemTemplate><ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("ProductName") %>'></ asp: Label>

</ ItemTemplate></ Asp: TemplateField><asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">

<EditItemTemplate><Asp: TextBox ID = "EditUnitPrice" runat = "server"Texto ='<%# Bind ("Precio por unidad", "{0: N2}")%> 'Columnas = "6"> </ asp:

TextBox><Asp: CompareValidator ID = "CompareValidator1" runat = "server"

ControlToValidate = "EditUnitPrice"ErrorMessage = "El precio debe ser mayor o igual a cero y

no puede incluir el símbolo de la moneda "Operador = "GreaterThanEqual" type = "Moneda"ValueToCompare = "0"ValidationGroup = "EditValidationControls"> *

</ Asp: CompareValidator></ EditItemTemplate><ItemTemplate>

<Asp: ID Label = "Label2" runat = "server"Texto ='<%# Bind ("Precio por unidad", "{0: c}")%> '>

</ Asp: Label></ ItemTemplate>

</ Asp: TemplateField>

En este punto, la validación editar controles específicos de fuego solamente cuandoel GridView 's de actualización se hace clic en el botón y la validación de insertarcontroles específicos de fuego solamente cuando el DetailsView 'sInserte pulsa el botó

Page 317: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 317/3

la solución del problema que resalta la figura 13. Sin embargo, con este cambio denuestraValidationSummary de control ya no se muestra cuando se introducen datos noválidos. El ValidationSummarycontrol también contiene una ValidationGroup propiedy sólo muestra información de resumen de los controles de validación en su grupo devalidación. Por lo tanto, es necesario tener dos controles de validación en esta página: unpara el InsertValidationControls grupo de validación y uno de EditValidationContro

<Asp: ValidationSummary ID = "ValidationSummary1" runat = "server"

ShowMessageBox = "True" ShowSummary = "false"ValidationGroup = "EditValidationControls" /><Asp: ValidationSummary ID = "ValidationSummary2" runat = "server"

ShowMessageBox = "True" ShowSummary = "false"ValidationGroup = "InsertValidationControls" />

Con esta adición, el tutorial es completo!

Conclusión

Mientras BoundField s puede proporcionar una inserción y edición de interfaz, la interfa

no es personalizable. Por lo general, queremos añadir controles de validación para lainterfaz de edición e inserción para asegurarse de que el usuario introduce los insumosrequeridos en un formato legal. Para lograr esto, debe convertir el BoundField senTemplateField s y añadir los controles de validación de la plantilla correspondiente(s). En este tutorial, hemos ampliado el ejemplo de Tutorial 17: Examen de losacontecimientos relacionados con la inserción, actualización y eliminación , la adición delos controles de validación tanto a la DetailsView 's interfaz de inserción y el GridViewinterfaz de edición. Por otra parte, hemos visto cómo mostrar la información de resumenvalidación con elValidationSummary el control y la forma de partición de los controles validación en la página de validación en grupos distintos.

Como hemos visto en este tutorial, TemplateField s permite las interfaces de edición einserción para ser ampliado para incluir controles de validación. TemplateField s tambise puede ampliar para incluir otros controles Web de entrada, permitiendo que el cuadrode texto para ser reemplazado por un control de Web más adecuado. En nuestro próximcapítulo, veremos cómo reemplazar el cuadro de texto con un control de enlace dedatos DropDownListcontrol, lo cual es ideal cuando se edita una clave externa(como IdCategoría o IdProveedor en los productos de mesa).

Tutorial 20: Personalización de la interfaz demodificación de datos 

Scott Mitchell

03 2007

Page 318: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 318/3

Resumen: Este es el Visual C # tutorial. ( Cambie al tutorial de Visual Basic .) En estetutorial, vamos a ver cómo personalizar la interfaz de un editable GridView , mediante lsustitución de la norma TextBox y CheckBox con controles alternativos controles deentrada Web. (19 páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 20 (Visual C #)

IntroducciónPaso 1: Creación de la sobrecarga adecuada UpdateProductPaso 2: Elaboración de la GridView editablePaso 3: Usar un DropDownList para la categoría de Proveedor de edición e interfacesAñadiendo las categorías y DropDownLists ProveedoresEnlazar el DropDownLists a los campos de datos CategoryID y IdProveedor Tratamiento de valores NULLPaso 4 : El uso de componentes RadioButton para el estado interrumpidasConclusión

IntroducciónEl BoundField s y CheckBoxField s utilizados por el GridView y DetailsView controlesimplificar el proceso de modificación de los datos debido a su capacidad para hacer desólo lectura, editable, y las interfaces insertables. Estas interfaces pueden ser prestados necesidad de añadir ningún código adicional declarativa o código. Sin embargo,elBoundField y CheckBoxField interfaces 's carecen de la capacidad de personalizacióa menudo necesaria en escenarios del mundo real. Con el fin de personalizar la interfaz deditar o insertable en un GridView o DetailsView , tenemos que usar en su lugarun TemplateField .

En el tutorial anterior , vimos cómo personalizar las interfaces de modificación de datosmediante la adición de los controles de validación web. En este tutorial, vamos a ver cómpersonalizar la actual recogida de datos de controles Web, en sustitución dela BoundField y CheckBoxField 's estándar TextBox y CheckBox controles conalternativas de controles de entrada Web. En particular, vamos a construir uneditable GridView que permita el nombre del producto, categoría, proveedor, y el estadsuspendió a ser actualizado. Al editar una fila en particular, la categoría y campos deproveedor se representan como DropDownList s, que contiene el conjunto de lascategorías disponibles y los proveedores para elegir. Además, vamos a reemplazarel CheckBoxField 's por defecto CheckBox con unRadioButtonList de control que ofre

dos opciones: "Activo" y "interrumpidas".

Page 319: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 319/3

Figura 1. La interfaz del GridView edición incluye DropDownLists y RadioButton

Paso 1: Creación de la sobrecarga adecuadaUpdateProduct

En este tutorial, vamos a construir un editable GridView que permita la edición delnombre de un producto, categoría, proveedor, y el estado suspendido. Por lo tanto,necesitamos un UpdateProduct sobrecarga que acepta cinco parámetros de entrada:

estos cuatro valores del producto más el ProductID . Al igual que en nuestro sobrecargaanteriores, éste será:

1. Recuperar la información del producto a partir de la base de datos con el objetivoespecífico ProductID .

2. Actualizarel ProductName , IdCategoría , IdProveedor y descatalogados campos.

3. Enviar la solicitud de actualización a la DAL a través del TableAdapter Update() método.

Por razones de brevedad, por esta sobrecarga en particular que he omitido la

comprobación de los negocios la regla que asegura que un producto sea marcado comodiscontinuas no es el único producto que ofrece su proveedor.Siéntase libre de agregar esi lo prefiere, o, idealmente, refactorizar la lógica de un método distinto.

El siguiente código muestra el nuevo UpdateProduct sobrecarga enel ProductsBLL clase:

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, false)]

pública UpdateProduct bool (productName cadena, int? IdCategoría,int? supplierID, bool interrumpido, int ProductID)

{

Page 320: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 320/3

Northwind.ProductsDataTable productos =Adapter.GetProductByProductID (ProductID);

if (products.Count == 0)/ / Ningún registro coincidente, devuelva falsoreturn false;

Northwind.ProductsRow producto = productos [0];

product.ProductName = productName;if (supplierID == null) product.SetSupplierIDNull ();

más product.SupplierID = supplierID.Value;if (IdCategoría == null) product.SetCategoryIDNull ();más product.CategoryID = categoryID.Value;

product.Discontinued = interrumpidas;

/ / Actualizar el registro del productoint = rowsAffected Adapter.Update (producto);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsavolver rowsAffected == 1;

}

Paso 2: Elaboración de la GridView editableCon la UpdateProduct sobrecarga adicional, estamos listos para crear nuestroeditable GridView . Abra elCustomizedUI.aspx página en el EditInsertDelete carpetaagregar un GridView control al diseñador. A continuación, cree unnuevo ObjectDataSource desde el GridView tag 's inteligente. Configurarel ObjectDataSource para recuperar la información del producto a través dela ProductBLL clase GetProducts () método y para actualizar los datos del productoutilizando la UpdateProduct sobrecarga que acabamos de crear. Dela INSERTAR y BORRAR las pestañas, seleccione (Ninguno) de las listas desplegables.

Page 321: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 321/3

Figura 2. Configurar el ObjectDataSource para utilizar la sobrecargaUpdateProduct acaba de crear.

Como hemos visto a lo largo de los tutoriales de modificación de datos, la sintaxisdeclarativa para elObjectDataSource creado por Microsoft Visual Studio asignael OldValuesParameterFormatString propiedadoriginal_ {0} . Esto, por supuesto, nva a funcionar con nuestra capa de lógica de negocio ya que nuestros métodos no esperaque el original ProductID valor a pasar pulg Por lo tanto, como lo hemos hecho en los

tutoriales anteriores, tome un momento para eliminar esta asignación de la propiedad desintaxis declarativa o, en su lugar, establecer el valor de esta propiedad a {0} .

Después de este cambio, el ObjectDataSource marcado 's declarativo debe tener elsiguiente aspecto:

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"SelectMethod = "GetProducts" TypeName = "ProductsBLL"UpdateMethod = "UpdateProduct"><UpdateParameters>

<asp:Parameter Name="productName" tipo="String" /><asp:Parameter Name="categoryID" Type="Int32" />

<asp:Parameter Name="supplierID" Type="Int32" /><asp:Parameter Name="discontinued" Type="Boolean" /><asp:Parameter Name="productID" Type="Int32" />

</ UpdateParameters></ Asp: ObjectDataSource>

 Tenga en cuenta que la OldValuesParameterFormatString propiedad se ha eliminadoque no hay un parámetro en elUpdateParameters colección para cada uno de losparámetros de entrada que esperan nuestros UpdateProductsobrecarga.

Mientras que el ObjectDataSource está configurado para actualizar sólo un subconjuntde los valores del producto, elGridView actualmente muestra todos los productos de los

campos. Tome un momento para editar el GridView de modo que:

• Sólo incluye el ProductName , SupplierName , CategoryName BoundField s yel interrumpidas CheckBoxField.

• El CategoryName y SupplierName campos aparezcan antes (a la izquierda de)el interrumpidas CheckBoxField.

• El CategoryName y SupplierName BoundField s ' HeaderText propiedad seestablece en "Categoría" y "Proveedor", respectivamente.

• Soporte de edición está activado (consulte la edición Activar casilla de verificacióen el GridView tag 's inteligente).

Después de estos cambios, el diseño será similar a la Figura 3, con el GridView sintaxis declarativo se muestra a continuación.

Page 322: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 322/3

Figura 3. Quitar los campos que no sean necesarios desde el GridView.

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"><columnas>

<Asp: BoundField DataField = "ProductName"HeaderText = "ProductName" SortExpression = "ProductName" /><Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"

ReadOnly = "True"SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName" HeaderText = "Proveedor"ReadOnly = "True"SortExpression = "SupplierName" />

<Asp: CheckBoxField DataField = "interrumpidas"HeaderText = "interrumpidas" SortExpression = "interrumpidas" />

</ Columns></ Asp: GridView>

En este punto, el GridView 's de sólo lectura comportamiento se ha completado. Alvisualizar los datos, cada producto se representa como una fila en el GridView ,mostrando el nombre del producto, categoría, proveedor, y el estado suspendido.

Page 323: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 323/3

Figura 4. El GridView de sólo lectura de la interfaz se ha completado.

Nota: Como se explica en Tutorial 16: Una visión general de Inserción, actualización yeliminación de datos, es de vital importancia que el GridView 's el estado de vista estéactivado (por defecto). Si se establece el GridView 's EnableViewState propiedada falso , se corre el riesgo de tener usuarios concurrentes sin querer borrar o editarregistros. (Ver ADVERTENCIA: punto de concurrencia con ASP.NET 2.0 GridViews /DetailsView / FormViews que la edición de apoyo y / o eliminar y cuya visión del Estadoestá deshabilitadopara más información.)

Paso 3: Usar un DropDownList para la categoría deProveedor de edición e interfaces

Recordemos que el ProductsRow objetocontiene CategoryID , CategoryName , IdProveedor y SupplierNamepropiedades, qconstituyen la actual clave externa de los valores de ID en el los productos de las tablael correspondiente nombre de los valores dela categorías y proveedores tablas. El ProductRow 's CategoryID yIdProveedor pue ser tanto leer y escribir, mientras que el CategoryName y SupplierName propiedadeestán marcados de sólo lectura.

Debido a la condición de sólo lectura de la CategoryName y SupplierName propiedadeel correspondienteBoundField s han tenido su ReadOnly propiedad establecidaen verdad , la prevención de estos valores que se modifique cuando una fila estáeditado. A pesar de que puede establecer el ReadOnly propiedad falsos , haciendo queel CategoryName y SupplierName BoundField s como TextBox es durante la edicióneste enfoque dará lugar a una excepción cuando el usuario intenta actualizar el productoya que no hay UpdateProduct sobrecarga que tomaenCategoryName y SupplierName entradas. De hecho, no queremos crear como unasobrecarga, por dos razones:

Page 324: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 324/3

• Los productos de la tabla no tiene SupplierName o CategoryName campos,pero IdProveedor y CategoryID .Por lo tanto, queremos que nuestro método parpasar los valores de ID en particular no, sus valores de las tablas de búsqueda.

• Requiere que el usuario escriba el nombre del proveedor o de una categoría no es ideal, ya que requiere que el usuario conozca las categorías disponibles y losproveedores y su ortografía correcta.

El proveedor y los campos de categoría debe mostrar la categoría y los nombres de los

proveedores, cuando en modo de sólo lectura (como lo hace ahora) y una lista desplegabde opciones de aplicación cuando se está editando. Uso de una lista desplegable, el usuafinal puede ver rápidamente cuáles son las categorías y los proveedores están disponiblepara elegir entre más fácilmente y puede hacer su selección.

Para proporcionar este comportamiento, tenemos que convertirel SupplierName y CategoryName BoundField s enTemplateField scuya ItemTemplate emite la SupplierName y CategoryName valores ycuya EditItemTemplate utiliza un DropDownList de control a la lista de las categoríasdisponibles y proveedores.

Adición de las categorías y DropDownListsProveedores

Comience por la conversión de la SupplierName y CategoryName BoundField sen TemplateField s haciendo clic en elEditar columnas enlace desde el GridView taginteligente, seleccionando el BoundField de la lista en la parte inferior izquierda, y hagaclic en el Convertir este campo en un TemplateField enlace. El proceso de conversióse creará unTemplateField tanto con un ItemTemplate y un EditItemTemplate , comse muestra en la sintaxis declarativa a continuación:

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName"><EditItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Eval ("NombreCategoría") %>'></ asp: Label>

</ EditItemTemplate><ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("NombreCategoría") %>'></ asp: Label>

</ ItemTemplate></ Asp: TemplateField>

Desde el BoundField se ha marcado como de sólo lectura, tanto en

el ItemTemplate y EditItemTemplate contiene unaetiqueta de control Webcuyo texto la propiedad está vinculada al campo de datos aplicable ( CategoryName , la sintaxis más arriba). Tenemos que modificar el EditItemTemplate , en sustitución dela etiqueta de control Web con unDropDownList control.

Como hemos visto en tutoriales anteriores, la plantilla puede ser editado por el diseñadodirectamente de la sintaxis declarativa. Para editar a través del diseño, haga clic enel Editar plantillas de enlace desde el GridView tag 's inteligente y decide trabajar cola categoría de campo de EditItemTemplate . Quite la etiqueta de control Web yreemplazarlo con un DropDownList de control, el establecimiento dela DropDownList 's ID propiedad de las categorías .

Page 325: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 325/3

Figura 5. Quitar el cuadro de texto y agregar un DropDownList a laEditItemTemplate.

A continuación necesita llenar el DropDownList con las categorías disponibles. Haga clien el Elegir origen de datosenlace de la DropDownList tag 's inteligentes y la opcióncrear un nuevo ObjectDataSource llamadoCategoriesDataSource .

Page 326: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 326/3

Figura 6. Crear un nuevo control ObjectDataSource llamadoCategoriesDataSource.

Para tener esta ObjectDataSource retorno de todas las categorías, se unen ala CategoriesBLL clase GetCategories ()método.

Figura 7. Obligar a la ObjectDataSource para GetCategories la CategoriesBLL ()del método.

Page 327: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 327/3

Por último, configure el DropDownList ajustes 's de modo que el CategoryName campse muestra en cadaDropDownList ListItem con el CategoryID de campo se utiliza comvalor.

Figura 8. Que el campo CategoryName en pantalla y el CategoryID se utilizacomo valor.

Después de realizar estos cambios, el marcado declarativo para la EditItemTemplate e

el CategoryNameTemplateField incluirá tanto un DropDownList yun ObjectDataSource :

<asp:TemplateField HeaderText="Category" SortExpression="CategoryName"><EditItemTemplate>

<Asp: DropDownList ID = "Categorías" runat = "server"DataSourceID = "CategoriesDataSource"DataTextField = "CategoryName" DataValueField = "CategoryID">

</ Asp: DropDownList><Asp: ObjectDataSource ID = "CategoriesDataSource" runat = "server"

OldValuesParameterFormatString = "original_ {0}"SelectMethod = "GetCategories" TypeName = "CategoriesBLL">

</ Asp: ObjectDataSource>

</ EditItemTemplate><ItemTemplate>

<Asp: ID Label = "Label1" runat = "server"Texto ='<%# Bind ("NombreCategoría") %>'></ asp: Label>

</ ItemTemplate></ Asp: TemplateField>

Nota: El DropDownList en el EditItemTemplate debe tener habilitada su estado devista. Pronto se sumará de enlace de datos de sintaxis para el DropDownList sintaxis 'sdeclarativa y de enlace de datos comandos como Eval () y Bind () sólo puede aparecer los controles que el estado de vista está habilitado.

Page 328: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 328/3

Repita estos pasos para agregar un DropDownList llamado Proveedores dela SupplierName TemplateField 'sEditItemTemplate . Esto supondrá la adición deun DropDownList a la EditItemTemplate y la creación deotroObjectDataSource . Los proveedores DropDownList 's ObjectDataSource , sinembargo, se debe configurar para invocar la SuppliersBLL clase GetSuppliers() método. Además, configurar los proveedores DropDownList para mostrarel CompanyName campo y el uso de la IdProveedor campo como el valor desu ListItem s.

Después de añadir el DropDownList s de las dos EditItemTemplate s, la carga de lapágina en un navegador y haga clic en el Editar botón para el producto del chef Antoncondimento de Cajun. Como muestra la Figura 9 muestra, la categoría del producto y elproveedor de las columnas se representan como listas desplegables que contienen lascategorías disponibles y los proveedores para elegir. Sin embargo, tenga en cuenta queel primero los elementos de ambas listas desplegables se seleccionan por defecto (comocategoría de Bebidas y líquidos exóticos como el proveedor), a pesar de Cajun del chef Anton condimento es un condimento suministrada por New Orleans Cajun Delicias.

Figura 9. El primer elemento de la lista desplegable está seleccionada pordefecto.

Además, si hace clic en Actualizar , usted encontrará que el producto

es CategoryID y IdProveedor valores se establecen en NULL . Ambos de estoscomportamientos no deseados se deben a que el DropDownList s enelEditItemTemplate s no están vinculados a los campos de datos a partir de los datos dproducto subyacente.

Enlazar el DropDownLists a los campos de datosCategoryID y IdProveedor

Con el fin de tener la categoría de producto editado y proveedor listas desplegablesestablecen en los valores adecuados y que estos valores enviados de vuelta a la BLL

Page 329: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 329/3

es UpdateProduct método al hacer clic en Actualizar , tenemos que obligar ala DropDownList s ' SelectedValue propiedades ala CategoryID y IdProveedor campos de datos utilizando dos vías de enlace dedatos. Para lograr esto con la Categorías DropDownList , puede agregarSelectedValu='<%# Bind ("CategoryID")%> ' directamente a la sintaxis declarativa.

Alternativamente, se puede establecer el DropDownList 's enlaces de datos mediante ledición de la plantilla a través del diseño y haga clic en el Editar DataBindings enlace

desde el DropDownList 's etiqueta inteligente. A continuación, indican queel SelectedValue propiedad debe estar vinculado a la CategoryID campo utilizando dovías de enlace de datos (ver Figura 10). Repita el proceso sea declarativo o el Diseñador obligar a la IdProveedor campo de datos alProveedores DropDownList .

Figura 10. Obligar a la CategoryID a la propiedad del DropDownListSelectedValue utilizando dos vías de enlace de datos.

Una vez que los enlaces se han aplicado a la SelectedValue propiedades de losdos DropDownList s, la categoría del producto editado y columnas proveedor por defeca los valores del producto actual. Al hacer clic en Actualizar ,elCategoryID y IdProveedor valores del elemento de lista desplegable seleccionado sepasa a la UpdateProductmétodo. La figura 11 muestra el tutorial después de lasdeclaraciones de enlace de datos se han agregado, nota cómo el desplegable selecciona

elementos de la lista de Cajun del chef Anton condimento condimentos correctamente ydelicias de Nueva Orleans Cajun.

Page 330: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 330/3

Figura 11. Categoría actual del producto editado y los valores de los proveedorson seleccionados por defecto.

Tratamiento de valores NULL

El CategoryID y IdProveedor columnas de la Productos de mesa puede ser NULL , peel DropDownList s en elEditItemTemplate s no incluyen un elemento de la lista pararepresentar a un NULL el valor. Esto tiene dos consecuencias:

• Usuario no puede utilizar nuestra interfaz para cambiar de categoría de un producto proveedor de un no-NULL a un valor NULL uno.

• Si un producto tiene un NULL CategoryID o IdProveedor , haga clic enel Editar botón tendrá como resultado una excepción. Esto es porque el nulo valodevuelto por CategoryID (o IdProveedor ) en el Bind () declaración no se asignaun valor en el DropDownList (el DropDownList produce una excepción cuandosu SelectedValuepropiedad se establece en un valor no en su colección deelementos de la lista ).

A fin de apoyar NULL CategoryID y IdProveedor valores, tenemos que añadirotro ListItem a cada DropDownListpara representar el valor NULL valor. En Tutorial 7Maestro / Detalle de filtrado con un DropDownList , vimos cómo agregar un adicional

de ListItem a un enlace de datos DropDownList , que implicó la colocaciónde DropDownList 'sAppendDataBoundItems propiedad real y agregar manualmentelos adicionales ListItem . En ese tutorial anterior, sin embargo, hemos añadidoun ListItem con un valor de -1 . La lógica de enlace de datos en ASP.NET, sin embargo, convertirá automáticamente en una cadena en blanco a un NULL el valor y viceversa. Polo tanto, para este tutorial, queremos que el ListItem 's valor a una cadena vacía.

Comience por establecer dos DropDownList s' AppendDataBoundItems propiedad real . A continuación, agregueelNULL ListItem mediante la adición de las siguientes <asp:ListItem> elemento acada DropDownList para que el marcado declarativo se parece a lo siguiente:

Page 331: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 331/3

<Asp: DropDownList ID = "Categorías" runat = "server"DataSourceID = "CategoriesDataSource" DataTextField = "CategoryName"DataValueField = "CategoryID" SelectedValue ='<%# Bind ("CategoryID")%> 'AppendDataBoundItems = "True"><asp:ListItem value=""> (Ninguno) </ asp: ListItem>

</ Asp: DropDownList>

He optado por utilizar "(ninguno)" como el texto de este valor ListItem , pero se puedecambiar para ser también una cadena en blanco si lo desea.

Nota: Como vimos en el Tutorial 7: Maestro / Detalle de filtrado con unDropDownList , ListItem s se puede agregar a un DropDownList mediante el diseñadorhaga clic en el DropDownList 's elementos de la propiedad en la ventana dePropiedades (que muestra la ListItem Editor de la colección) . Sin embargo, asegúrese dagregar el NULL ListItem para este tutorial a través de la sintaxis declarativa. Si utilizael ListItem Editor de la colección, la sintaxis declarativa generado omitir el valor ajustepor completo cuando se asigna una cadena en blanco, la creación de marcado declarativcomo<asp:ListItem> (Ninguno) </ asp: ListItem> . Si bien esto puede parecerinofensiva, la falta de valorhace que el DropDownList para utilizar el texto valor de lapropiedad en su lugar. Eso significa que si esta NULL ListItem está seleccionado, el valo

"(ninguno)" se intentará que se asignará a la CategoryID , lo que resultará en unaexcepción. Estableciendo explícitamente value = "" , un NULL el valor será asignadoa CategoryID cuando el NULL ListItem está seleccionado.

Repita estos pasos para los Proveedores DropDownList .

Con este adicional ListItem , la interfaz de edición Ahora puede asignar NULL a los valode un Producto CategoryIDy IdProveedor campos, como se muestra en la Figura 12.

Figura 12. Seleccionar (Ninguno) para asignar un valor NULL para la categoría dun producto o proveedor.

Page 332: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 332/3

Paso 4: Uso de componentes RadioButton para elestado interrumpidas

En la actualidad, los productos discontinuados campo de datos se expresa conun CheckBoxField , que representa una casilla de verificación desactivada para las filasde sólo lectura y una casilla de verificación habilitado para la fila que está siendoeditada. Aunque esta interfaz de usuario es a menudo adecuada, podemos personalizar s

es necesario utilizar un TemplateField . Para este tutorial, vamos a cambiarla CheckBoxField en un TemplateField que utiliza unRadioButtonList de control condos opciones, "Activo" y "interrumpidas", de la cual el usuario puede especificar que elproducto está descatalogado valor.

Comience por la conversión de la interrumpidas CheckBoxField en un TemplateFieldlo que creará un TemplateFieldcon un ItemTemplate y EditItemTemplate . Ambosmodelos incluyen un CheckBox con su Chequeado propiedad ligada ala interrumpidas campo de datos, la única diferencia entre los dos es queel ItemTemplate 's CheckBox 'sActivado propiedad está establecida en falso .

Vuelva a colocar el CheckBox , tanto en el ItemTemplate y EditItemTemplate conun RadioButtonList de control, el establecimiento de los RadioButtonList s' ID propiedades DiscontinuedChoice . A continuación, indican que elRadioButtonListque contienen cada uno dos botones, uno llamado "activo" con un valor de "falsas" y unaetiqueta "interrumpidas" con un valor de "True". Para lograr esto, usted puede entrar enel <asp:ListItem> elementos directamente a través de la sintaxis declarativa o utilizarel ListItem Editor de la colección de la diseñadora. La figura 13 muestra el ListItem Edide la colección después de las dos opciones de botón de radio se han especificado.

Figura 13. Añadir "Activo" y opciones "interrumpidas" al RadioButtonList.

Page 333: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 333/3

Desde el RadioButtonList en el ItemTemplate no debe ser editable, establezcasu Activado propiedad a falso , dejando a los habilitados de propiedad de verdad (podefecto) para los RadioButtonList en el EditItemTemplate .Esto hará que los botonesde radio en la fila no editados como de sólo lectura, pero permitirá al usuario cambiarelRadioButton los valores de la fila editada.

 Todavía tenemos que asignar el RadioButtonList controles " SelectedValue propiedadde manera que el botón de radio se selecciona basándose en el

producto descatalogado campo de datos. Al igual que con el DropDownList s examinóanteriormente en este tutorial, esta sintaxis de enlace de datos se pueden añadirdirectamente en el marcado declarativo o por medio de la edición DataBindings enlaceen el RadioButtonList s 'etiquetas inteligentes.

Después de agregar los dos RadioButtonList s y su configuración,el interrumpidas TemplateField marcado 's declarativo debe tener el siguiente aspect

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued"><ItemTemplate>

<Asp: RadioButtonList ID = "DiscontinuedChoice" runat = "server"Enabled = "false" SelectedValue ='<%# Bind ("interrumpidas")%> '><asp:ListItem Value="False"> activo </ asp: ListItem><asp:ListItem value="true"> interrumpidas </ asp: ListItem>

</ Asp: RadioButtonList></ ItemTemplate><EditItemTemplate>

<Asp: RadioButtonList ID = "DiscontinuedChoice" runat = "server"SelectedValue ='<%# Bind ("interrumpidas")%> '><asp:ListItem Value="False"> activo </ asp: ListItem><asp:ListItem value="true"> interrumpidas </ asp: ListItem>

</ Asp: RadioButtonList></ EditItemTemplate>

</ Asp: TemplateField>

Con estos cambios, los descatalogados columna se ha transformado de una lista decasillas de verificación a una lista de pares de botones de opción (ver figura 14). Al editaun producto, el botón de radio está seleccionado y el estado suspendió el producto sepuede actualizar seleccionando el botón de radio y haciendo clic en Actualizar .

Page 334: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 334/3

Figura 14. Las casillas de verificación interrumpidas han sido sustituidos porpares botón de radio.

Nota: Dado que el interrumpidas en la columna de productos de base de datos nopuede tener NULLvalores, no tiene que preocuparse acerca de lacaptura NULL información en la interfaz. Sin embargo, siinterrumpidas columna puedecontener NULL los valores que nos gustaría añadir un botón de radio tercero en la lista csu valor establecido en una cadena vacía ( valor = "" ), al igual que con la categoría y eproveedor DropDownList s.

Conclusión

Mientras que el BoundField y CheckBoxField automáticamente que de sólo lectura, laedición y la inserción de las interfaces, que carecen de la capacidad de personalización. Amenudo, sin embargo, tendremos que personalizar la interfaz de edición o inserción, talvez añadiendo controles de validación (como vimos en el tutorial anterior) o mediante lapersonalización de la interfaz de usuario de recopilación de datos (como hemos visto eneste tutorial).Personalización de la interfaz con un TemplateField se puede resumir en lsiguientes pasos:

1. Añadir un TemplateField o convertir un BoundField o CheckBoxField enun TemplateField .

2. Enriquecer la interfaz, según sea necesario.3. Se unen los campos de datos apropiados a los controles Web que acaba de agrega

el uso de dos vías de enlace de datos.

Además de utilizar el incorporado en los controles ASP.NET Web, también puedepersonalizar las plantillas de unTemplateField con la costumbre, compilado controles dservidor y controles de usuario.

Page 335: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 335/3

EN ESTE CAPITULO SALIO: Error de servidor en '/'

Application.

SIN TUTORIAL NUMERO: 21 CS | Visual C#

Tutorial 22: Adición del lado del cliente laconfirmación al eliminar 

Scott Mitchell

04 2007

Resumen: Este es el Visual C # tutorial. ( Cambie al tutorial de Visual Basic .) En lasinterfaces que hemos creado hasta ahora, un usuario puede accidentalmente eliminar lodatos haciendo clic en el Eliminar botón cuando la intención de hacer clic enel Editar botón. En este tutorial, vamos a añadir un cuadro de confirmación del lado delcliente de diálogo que aparece cuando el Eliminar botón es pulsado. (7 páginas impresa

Descargar el código de la muestra .

Contenido del Tutorial 22 (Visual C #)

IntroducciónPaso 1: Creación de un FormView que admite la eliminaciónPaso 2: Llamar al confirmar (cadena) La función del evento onclick del lado del cliente deun botón EliminarPaso 3: Configuración de la Propiedad OnClientClick para el botón Eliminar en unCommandFieldCon TemplateFields

Conclusión

Introducción

A través de los tutoriales de varios años, hemos visto cómo utilizar la arquitectura deaplicaciones, ObjectDataSource , y los controles Web de datos en conjunto paraproporcionar la inserción, edición y eliminación de las capacidades. Las interfaces de borque hemos examinado hasta ahora han sido compuesta por un Eliminar botón que,cuando se hace clic, produce una devolución de datos e invocael ObjectDataSource 's Eliminar () método. La Eliminar () método se invoca el métod

Page 336: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 336/3

de configuración de la capa de lógica empresarial, que se propaga la llamada hasta la cade acceso a datos, la emisión de la actual DELETE declaración a la base de datos.

Aunque esta interfaz de usuario permite a los visitantes para eliminar los registros a travdel GridView , DetailsViewo FormView control, carece de cualquier tipo de confirmacicuando el usuario hace clic en el Eliminar botón. Si un usuario hace clic en elaccidente Eliminar el botón cuando se pretende hacer clic en Editar , el registro sereferían al día en vez serán borrados. Para evitar esto, en este tutorial, vamos a añadir u

cuadro de confirmación del lado del cliente de diálogo que aparece cuandoel Eliminar botón es pulsado.

El JavaScript confirmar ( cadena ) función muestra su parámetro de entrada como lacadena de texto dentro de un cuadro de diálogo modal que viene equipado con dosbotones: Aceptar y Cancelar (ver Figura 1). La confirmación (cadena ) devuelve unvalor booleano, dependiendo de lo que se hace clic en el botón ( cierto , si el usuario haclic enAceptar , y falsa , si el usuario hace clic en Cancelar ).

Figura 1. El JavaScript confirmar ( cadena ) muestra un método modal, del ladodel cliente cuadro de mensaje.

Durante una presentación forma, si un valor de falso se devuelve desde un controlador deventos del lado del cliente, el envío del formulario se ha cancelado. Con esta función,

podemos tener la Eliminación del botón del lado del clienteonclick controlador deeventos devuelve el valor de una llamada a confirmar ("¿Está seguro que deseaeliminar este producto?") . Si el usuario hace clic en Cancelar , confirmar( cadena ) devolverá false, lo que provoca el envío del formulario para cancelar. Sindevolución, el producto cuya Eliminar botón se hizo clic no se eliminarán. Sin embargo, el usuario hace clic en Aceptar en el cuadro de diálogo de confirmación, la devolución dedatos seguirá su curso y el producto serán eliminados. Consulte Uso de JavaScriptconfirmar () del método de control de envío de formularios para obtener más informaciónsobre esta técnica.

Añadir la necesaria script de cliente difiere ligeramente, si el uso de plantillas, de cuando

se utiliza un CommandField .Por lo tanto, en este tutorial, vamos a ver tantoun FormView y GridView ejemplo.

Nota: Con el lado del cliente técnicas de confirmación, como los que en este tutorial, sesupone que los usuarios lo visiten con navegadores que soportan JavaScript y que tienencódigo JavaScript habilitado.Si cualquiera de estos supuestos no se aplica a un usuario enparticular, haga clic en el Eliminar botón inmediatamente hará una devolución de datos(no se muestra un mensaje de confirmación).

Page 337: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 337/3

Paso 1: Creación de un FormView que admite laeliminación

Comience por la adición de un FormView a la página de ConfirmationOnDelete.aspx en carpeta EditInsertDelete, que vincule a un nuevo ObjectDataSource que tira de lainformación del producto a través de la ProductsBLL claseGetProducts() método. Además, configurar el ObjectDataSource , por lo que

el ProductsBLL clase DeleteProduct (ProductID) método se asigna ala ObjectDataSource 's Eliminar () método. Asegúrese de quela INSERTAR yACTUALIZAR desplegable pestañas 'listas se establecenen (Ninguno) . Por último, compruebe la paginación Activarcasilla de verificación enel FormView tag 's inteligente.

Después de estos pasos, el nuevo ObjectDataSource marcado 's declarativa se verácomo la siguiente:

<Asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server"DeleteMethod = "DeleteProduct" OldValuesParameterFormatString = "original_ {0}"

SelectMethod = "GetProducts" TypeName = "ProductsBLL"><DeleteParameters><asp:Parameter Name="productID" Type="Int32" />

</ DeleteParameters></ Asp: ObjectDataSource>

Como en los ejemplos del pasado que no utilizaron la concurrencia optimista, tome unmomento para limpiarelObjectDataSource 's OldValuesParameterFormatString propiedad.

 Ya que se ha unido a un ObjectDataSource de control que sólo es compatible con laeliminación, el FormView 'sItemTemplate ofrece sólo la Eliminación de la falta de

botones Nuevo y actualización de los botones. El FormViewmarcado 's declarativa, siembargo, incluye una superflua EditItemTemplate y InsertItemTemplate , que sepuede quitar. Tómese un momento para personalizar el ItemTemplate , para que muessólo un subconjunto de los datos del producto campos. He configurado la mina paramostrar el nombre del producto en un <h3> título por encima de su proveedor y losnombres de categoría (junto con el Eliminar botón).

<Asp: FormView ID = "FormView1" AllowPaging = "True" DataKeyNames = "ProductID"DataSourceID = "ObjectDataSource1" runat = "server"><ItemTemplate>

<h3> <i> <% # Eval ("ProductName")%> </ i> </ h3><b> Categoría: </ b>

<Asp: Label = ID "CategoryNameLabel" runat = "server"Texto ='<%# Eval ("NombreCategoría")%> '>

</ Asp: Label> <br /><b> Proveedor: </ b><Asp: Label = ID "SupplierNameLabel" runat = "server"

Texto ='<%# Eval ("SupplierName")%> '></ Asp: Label> <br /><Asp: LinkButton ID = "DeleteButton" runat = "server"

CausesValidation = "false"CommandName = "Delete" Text = "Eliminar">

</ Asp: LinkButton></ ItemTemplate>

</ Asp: FormView>

Page 338: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 338/3

Con estos cambios, tenemos una página web completamente funcional que permite alusuario alternar entre los productos uno a la vez, con la capacidad de eliminar un produccon sólo hacer clic en el Eliminar botón. La figura 2 muestra una captura de pantalla denuestro progreso hasta ahora cuando se ve a través de un navegador.

Figura 2. El FormView muestra información sobre un solo producto.

Paso 2: Llamar al confirmar ( cadena ) La función deevento onclick del lado del cliente de un botón deEliminar

Con el FormView creado, el último paso es configurar el Eliminar botón de tal maneraque cuando se hace clic en él por el visitante, el código JavaScript confirmar( cadena ) se invoca la función. Adición de script de cliente para el lado delcliente onclick caso de un botón , LinkButton o ImageButton se puede lograr a travédel uso de la propiedad OnClientClick , que es nuevo en ASP.NET 2.0. Porque queremostener el valor de la confirmación ( cadena ) devuelve la función, sólo establece estapropiedad en: volver confirm ('¿Está seguro que desea eliminar este producto?');

Después de este cambio, el Eliminar LinkButton sintaxis 's declarativa debería ser algo

como lo siguiente:<Asp: LinkButton ID = "DeleteButton" runat = "server" CausesValidation = "false"

CommandName = "Delete" Text = "Eliminar"OnClientClick = "return confirm ('¿Está seguro que desea eliminar este

producto ?');"></ Asp: LinkButton>

Eso es todo lo que hay que hacer! La Figura 3 muestra una captura de pantalla de estaconfirmación de la acción. Al hacer clic en el Eliminar botón abre el cuadro de diálogo dconfirmación. Si el usuario hace clic en Cancelar , se cancela la devolución de datos y elproducto no se elimina. Sin embargo, si el usuario hace clic en Aceptar , la devolución d

Page 339: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 339/3

datos continúa y el ObjectDataSource 's Eliminar () es llamado, el que culminó en elregistro de la base de ser eliminados.

Nota: La cadena pasó a confirmar ( cadena ) de JavaScript se delimita con apóstrofes(en lugar de las comillas). En JavaScript, las cadenas se pueden delimitar con cualquierpersonaje. Utilizamos apóstrofes aquí, para que los delimitadores de la cadena pasóa confirmar ( cadena ) no introducen una ambigüedad con los delimitadores utilizadospara la OnClientClick valor de la propiedad.

Figura 3. La confirmación se muestra ahora al hacer clic en el botón Eliminar.

Paso 3: Configuración de la Propiedad OnClientClickpara el botón Eliminar en un CommandField

Cuando se trabaja con un botón , LinkButton o ImageButton directamente en unaplantilla, un cuadro de diálogo de confirmación se puede asociar con ella sólo por laconfiguración de su OnClientClick propiedad para devolver los resultados de la JavaScript confirmar ( cadena ) la función. Sin embargo, el CommandField , que agreun campo deEliminar botones a un GridView o DetailsView , no tieneun OnClientClick propiedades que pueden establecerse mediante declaración. En sulugar, debe hacer referencia a la programación Eliminar botón enel GridView oDetailsView 's apropiado DataBound controlador de eventos, y luegodefinir su OnClientClick propiedad allí.

Nota: Al establecer el Eliminar botón OnClientClick propiedad en lacorrespondiente DataBoundcontrolador de eventos, tenemos acceso a los datos que tenque el registro actual. Esto significa que se puede extender el mensaje de confirmaciónpara incluir detalles sobre el registro en particular, como por ejemplo, "¿Está seguro quedesea eliminar el producto Chai?" Personalización, también es posible en las plantillas deenlace de datos utilizando la sintaxis.

Para practicar el ajuste OnClientClick propiedad para el Eliminar botón (s) enun CommandField , vamos a agregar unGridView a la página. Configurareste GridView para utilizar el mismo ObjectDataSource control queel FormViewutiliza. Por otra parte, limitar el GridView 's BoundField s para incluir sólo

Page 340: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 340/3

nombre del producto, categoría, y el proveedor. Por último, compruebe el Habilitareliminación de la casilla de verificación GridView tag 's inteligente. Esto agregaráuna CommandField a la GridView 's columnas de recogida, consu ShowDeleteButton propiedad establecida en verdad .

Después de realizar estos cambios, el GridView marcado declarativo 's deben tener elsiguiente aspecto:

<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"><columnas>

<asp:CommandField ShowDeleteButton="True" /><Asp: BoundField DataField = "ProductName" HeaderText = "Producto"

SortExpression = "ProductName" /><Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"

ReadOnly = "True"SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName" HeaderText = "Proveedor"ReadOnly = "True"

SortExpression = "SupplierName" /></ Columns>

</ Asp: GridView>

El CommandField contiene un único Eliminar LinkButton ejemplo que se puede accedmediante programación a partir de la GridView 's RowDataBound controlador deeventos. Tan pronto como se le hace referencia, se puede establecersu OnClientClick propiedad en consecuencia. Crear un controlador de eventos parael RowDataBoundevento mediante el siguiente código:

protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e){

si (== e.Row.RowType DataControlRowType.DataRow){

/ / Eliminar la referencia del LinkButtonLinkButton db = (LinkButton) e.Row.Cells [0] Controles [0].;

/ / Obtener información sobre el producto vinculado a la filaNorthwind.ProductsRow producto =

(Northwind.ProductsRow) ((System.Data.DataRowView). e.Row.DataItem) la fila;

db.OnClientClick = String.Format ("Return confirm ('¿Está seguro que desea eliminar el {0}

producto ?');",product.ProductName.Replace ("'", @ "\'"));

}}

Este controlador de eventos trabaja con las líneas de datos (los que tienenel Eliminar botón) y comienza con la referencia a la programación Eliminar botón. Engeneral, utilice el siguiente patrón:

ButtonType obj = (ButtonType)e.Row.Cells [commandFieldIndex] Controles [controlIndex].;

ButtonType es el tipo de botón que se utiliza porel CommandField : botón , LinkButton o ImageButton . Por defecto,el CommandField utiliza LinkButton s, pero esto puede ser personalizado a través de

Page 341: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 341/3

la CommandField 'spropiedad ButtonType . El commandFieldIndex es el índice ordinade la CommandField en el GridView 's columnasde recogida, mientras queel controlIndex es el índice de la Eliminación de botón dentro dela CommandField 'scontroles colección. El controlIndex valor depende de la posiciónrelación con otros botones en el el botón deCommandField . Por ejemplo, si el botón sóse muestra en la CommandField es el Eliminar botón, se utiliza un índice de 0. Sinembargo, si hay una edición que precede al botón Eliminar botón, se utiliza un índice d2. La razón se utiliza un índice de 2 es que los dos controles se agregan por

el CommandField antes de que el Eliminar botón: laEdición de botón, yun LiteralControl que se utiliza para añadir un poco de espacio entrela edición y Eliminarbotones.

Para nuestro ejemplo particular, la CommandField utiliza LinkButton s y, de ser elcampo más a la izquierda, tiene uncommandFieldIndex de 0. Porque no hay otrosbotones, pero el Eliminar botón de la CommandField , se utiliza uncontrolIndex de 0.

Después de hacer referencia a la Borrar botón en el CommandField , el próximo cogerinformación sobre el producto ligado a la actual GridView fila. Finalmente, se estableceel Eliminar botón OnClientClick propiedad a la adecuada JavaScript, el cual incluye el

nombre del producto. Debido a que la cadena de JavaScript pasó a confirmar( cadena )es la función delimitada utilizar los pronombres, hay que escapar a todaapóstrofes que aparecen en el nombre del producto. En particular, los apóstrofes en elnombre del producto se escapó con " \ ' ".

Con estos cambios completa, hacer clic en un Eliminar botón en el GridView muestra ucuadro de diálogo de confirmación personalizada (ver Figura 4). Al igual que con elmensaje de confirmación de la FormView , si el usuario hace clic en Cancelar , se cancla devolución de datos, lo que impide la eliminación de ocurrir.

Nota: Esta técnica también se puede utilizar para acceder a la Eliminar botón deprogramación en elCommandField en un DetailsView . Para el DetailsView , sinembargo, se crearía un controlador de eventos para el DataBound caso, debido a queel DetailsView no tiene RowDataBound evento.

Page 342: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 342/3

Figura 4. Al hacer clic en el botón Eliminar GridView muestra un cuadro dediálogo de confirmación personalizado.

Utilizando TemplateFields

Una de las desventajas de la CommandField es que los botones se accede mediante laindexación, y el objeto resultante se debe convertir en el tipo de botón adecuado( botones , LinkButton o ImageButton ). El uso de "números mágicos" y los tipos en ecódigo invita a los problemas que no pueden ser descubiertos hasta que el tiempo deejecución. Por ejemplo, si usted (u otro desarrollador) añadir nuevos botones a

la CommandField en algún momento en el futuro (como una edición el botón) o cambiel ButtonType propiedad, el código existente seguirá compilar sin errores, pero visitandla página de la causa puede una excepción o un comportamiento inesperado, dependiendde cómo el código fue escrito y lo que se han realizado cambios.

Un enfoque alternativo consiste en convertirel GridView y DetailsView 's CommandField s en TemplateField s. Esto generaráun TemplateField con un ItemTemplate que tieneun LinkButton (o botón o ImageButton ) a cada botón en el CommandField . Estosbotones ' OnClientClick propiedades pueden asignarse de forma declarativa, como hemvisto con el FormView , o puede ser visitada en la programaciónadecuada DataBound controlador de eventos utilizando el siguiente patrón:

ButtonType obj = (ButtonType) e.Row.FindControl ("controlID");

Aquí, controlID es el valor del botón de ID de propiedad. Aunque este patrón todavíarequiere un tipo de hard-coded para el elenco, que elimina la necesidad de indexación qupermite el diseño de cambiar, sin dar lugar a un error en tiempo de ejecución.

Conclusión

Page 343: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 343/3

El JavaScript confirmar ( cadena ) la función es una técnica usada comúnmente paracontrolar la forma de presentación de flujo de trabajo. Cuando se ejecuta, la funciónmuestra una modal, del lado del cliente el cuadro de diálogo que incluye dosbotones: Aceptar y Cancelar . Si el usuario hace clic en Aceptar , la confirmación( cadena ) devuelveverdadero , haciendo clic en Cancelar vuelve falsa . Estafuncionalidad, junto con el comportamiento de un navegador para cancelar el envío delformulario, si un controlador de eventos durante el proceso de presentación dedeclaracionesfalsas se pueden utilizar para mostrar un mensaje de confirmación al

eliminar un registro.

La confirmación ( cadena ) función puede ser asociada a un botón de control del ladodel cliente Web onclick controlador de eventos a través delcontrol OnClientClick propiedad. Cuando se trabaja con un Eliminar botón en unaplantilla, ya sea en uno de los FormView plantillas 's, o en un TemplateField enel DetailsView o GridView , esta propiedad se puede establecer mediante declaración mediante programación, como hemos visto en este tutorial.

Tutorial 23: Limitación de modificación dedatos funcionalidad basada en el usuario 

Scott Mitchell

04 2007

Resumen: Este es el Visual C # tutorial. ( Cambie al tutorial de Visual Basic .) En unaaplicación Web que permite a los usuarios editar los datos, diferentes cuentas de usuariopueden tener diferentes privilegios de edición de datos. En este tutorial, vamos a estudiala manera de ajustar de forma dinámica la capacidad de modificación de datos basado enel usuario que visita. (21 páginas impresas)

Descargar el código de la muestra .

Contenido del Tutorial 23 (Visual C #)

IntroducciónPaso 1: Permitir a los usuarios especificar su derechos de accesoPaso 2: Agregar un control DetailsViewPaso 3: muestra sólo la información del proveedor seleccionado enel Paso 4: Listado de los productos de los proveedores en un GridView editablePaso 5: Edición No permitir para productos descatalogados cuando "Mostrar / editar todolos proveedores "no está seleccionadoComprobación de los derechos de acceso en el negocio de la capa de lógicaConclusión

Page 344: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 344/3

Introducción

Una serie de aplicaciones web de soporte de cuentas de usuario y ofrecer opcionesdiferentes, informes, y la funcionalidad basada en el usuario conectado. Por ejemplo, connuestros tutoriales, que puede ser que desee para que los usuarios de las empresasproveedoras para iniciar sesión en el sitio y actualizar la información general sobre susproductos, su nombre y la cantidad por unidad, tal vez, junto con información de los

proveedores, como su nombre de la empresa , dirección, información de la persona decontacto, y así sucesivamente. Además, podríamos incluir algunas cuentas de usuario palas personas de nuestra empresa, para que puedan ingresar y actualizar la información dproducto como unidades en stock, nivel de pedido, y así sucesivamente. Nuestra aplicaciWeb también podría permitir a los usuarios anónimos para visitar (personas que no haniniciado la sesión), sino que los límites para que sólo vean los datos. Con un sistema decuenta de usuario en su lugar, nos gustaría que los controles web de datos en nuestraspáginas ASP.NET para ofrecer al insertar, editar y eliminar las capacidades adecuadas pael actual usuario registrado.

En este tutorial, vamos a estudiar la manera de ajustar de forma dinámica la capacidad d

modificación de datos basado en el usuario que visita. En particular, vamos a crear unapágina que muestra información de los proveedores en un editable DetailsView conun GridView que las listas de los productos suministrados por el proveedor. Si el usuariovisita la página de nuestra empresa, pueden ver la información del proveedor, modificar dirección, y editar la información de cualquier producto proporcionado por el proveedor. embargo, si el usuario es de una empresa particular, que pueden ver y editar suinformación de la dirección propia y sólo pueden editar sus productos que no han sidomarcados como interrumpidas.

Page 345: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 345/3

Figura 1. Un usuario de nuestra compañía puede editar la información delproveedor.

Page 346: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 346/3

Figura 2. Un usuario de un determinado proveedor puede ver y editar lainformación de que sólo proveedor.

Vamos a empezar!

Nota: El sistema de suscripciones de ASP.NET 2.0 proporciona una plataformaestandarizada y extensible para la creación, gestión y validación de cuentas deusuario. Debido a que un examen del sistema de afiliación está fuera del alcance de estotutoriales, este tutorial en lugar de "falsificaciones" la adhesión al permitir que losvisitantes anónimos de elegir si son de un determinado proveedor o de nuestra empresa(Para más información sobre membresía, se refieren a mi membresía examen de ASP.NE2.0 's, funciones y perfil serie de artículos.)

Paso 1: Permitir que los usuarios especifiquen susderechos de acceso

En una aplicación Web en el mundo real, la información de un usuario de la cuenta seincluyen si trabajaban para la empresa o de un proveedor en particular, y esta informaciósería accesible mediante programación de nuestras páginas ASP.NET después de que elusuario ha iniciado sesión en el sitio. Esta información puede ser capturada por el sistemde roles de ASP.NET 2.0, como información de la cuenta a nivel de usuario a través delsistema de perfiles, oa través de algunos medios personalizados.

Debido a que el objetivo de este tutorial es para demostrar el ajuste de las capacidades dmodificación de datos basado en el usuario conectado, y no está pensado para mostrar lacomposición, funciones y sistemas de perfiles de ASP.NET 2.0, vamos a utilizar un

Page 347: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 347/3

mecanismo simple para determinar las capacidades para el usuario visita la página:unDropDownList desde donde el usuario puede indicar si debe ser capaz de ver y editacualquier información del proveedor o, alternativamente, lo que la información delproveedor en particular se puede ver y editar. Si el usuario indica que se puede ver y editoda la información del proveedor (por defecto), se puede enviar un mensaje a través detodos los proveedores, editar la información del proveedor de direcciones y modificar elnombre y la cantidad por unidad de cualquier producto proporcionado por el proveedorseleccionado. Si el usuario indica que se puede ver y editar sólo un proveedor en particu

sin embargo, sólo pueden ver los detalles y los productos de dicho proveedor y uno puedactualizar sólo el nombre y la cantidad por unidad de información para aquellos productoque no seinterrumpió.

Nuestro primer paso en este tutorial, entonces, es la creación de este DropDownList yrellenarla con los proveedores en el sistema. Abra la página UserLevelAccess.aspx en lacarpeta EditInsertDelete, agregar un DropDownList cuya IDpropiedad se establece en lproveedores , y enlazar este DropDownList a unnuevo ObjectDataSource llamadoAllSuppliersDataSource .

Figura 3. Crear un nuevo llamado ObjectDataSource AllSuppliersDataSource.

Porque queremos que este DropDownList para incluir a todos los proveedores, configurel ObjectDataSource para invocar la SuppliersBLL clase GetSuppliers() método. Asegúrese también de que el ObjectDataSource 's Update ()método seasigna a la SuppliersBLL clase UpdateSupplierAddress método, yaque ObjectDataSource se utilizará también por el DetailsView se irán sumando en elpaso 2.

Después de completar el Asistente para ObjectDataSource, siga los pasos de laconfiguración de la ProveedoresDropDownList de tal forma que muestra

Page 348: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 348/3

el CompanyName campo de datos y utiliza el IdProveedor campo de datos como el vade cada ListItem .

Figura 4. Configurar el DropDownList proveedores a utilizar el CompanyName ycampos de datos SupplierID.

En este punto, el DropDownList se enumeran los nombres de empresas de losproveedores en la base de datos. Sin embargo, también debe incluir un "Show / Editar

todos los proveedores" a la opción DropDownList . Para lograr esto, el conjuntode proveedores DropDownList 's AppendDataBoundItems propiedad real y luegoañadir un ListItem cuyaTexto característica "Mostrar / Editar todos los proveedores" ycuyo valor es -1 . Esto se puede agregar directamente a través del marcado declarativo por el Diseñador de ir a la ventana Propiedades y haga clic en los puntos suspensivos enel DropDownList 's elementos de la propiedad.

Nota: Refiérase a las de filtrado principal / detalle con un DropDownList tutorial para unadiscusión más detallada sobre cómo agregar una "Seleccionar todo" a un elemento deenlace de datos DropDownList .

Después de la AppendDataBoundItems propiedad se ha establecido yel ListItem agregó, el DropDownList marcado 's declarativo debe tener el siguienteaspecto:

<Asp: DropDownList ID = "Proveedores" runat = "server" AppendDataBoundItems = "True"DataSourceID = "AllSuppliersDataSource" DataTextField = "CompanyName"DataValueField = "IdProveedor"><asp:ListItem Value="-1"> Mostrar / Editar todos los proveedores </ asp: ListItem>

</ Asp: DropDownList>

Page 349: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 349/3

La Figura 5 muestra una captura de pantalla de nuestro progreso actual, vista a través dun navegador.

Figura 5. El DropDownList Proveedores contiene una "Mostrar todo" ListItem,más uno por cada proveedor.

Porque queremos actualizar la interfaz de usuario inmediatamente después de que elusuario ha cambiado su selección, establezcala Proveedores DropDownList 's AutoPostBack propiedad verdadera . En el paso 2,vamos a crear unDetailsView de control que se mostrará la información del proveedor (basado en el DropDownList de selección.Luego, en el paso 3, vamos a crear uncontrolador de eventos para este DropDownList 's SelectedIndexChanged caso, en eque vamos a añadir el código que se une la información de los proveedores apropiadospara el DetailsViewbasado en el proveedor seleccionado.

Paso 2: Agregar un control DetailsView

Page 350: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 350/3

Vamos a usar un DetailsView para mostrar la información del proveedor. Para el usuarioque puede ver y editar todos los proveedores, el DetailsView se admite la paginación, qpermite al usuario paso a través del registro del proveedor una información a la vez. Si eusuario trabaja para un proveedor determinado, sin embargo, el DetailsViewmostrará sla información del proveedor en particular y no incluyen una interfaz de paginación. Encualquier caso, elDetailsView debe permitir al usuario editar la dirección del proveedor,de la ciudad, y los campos de país.

Añadir un DetailsView a la página debajo de la Proveedores DropDownList , establezsu identificación de la propiedad de SupplierDetails , y se unen ala AllSuppliersDataSource ObjectDataSource creado en el paso anterior. Acontinuación, compruebe la paginación Activar y Habilitar edición casillas deverificación de la DetailsView tag 's inteligente.

Nota: Si usted no ve una Habilitar edición opción en el DetailsView 's etiquetainteligente, es porque no mapa del ObjectDataSource 's Update () método parala SuppliersBLL clase UpdateSupplierAddressmétodo. Tómese un momento paravolver atrás y hacer este cambio de configuración, después de que laediciónHabilitar opción debería aparecer en el DetailsView tag 's inteligente.

Debido a que el SuppliersBLL clase UpdateSupplierAddress método sólo acepta cuatparámetros- supplierID ,dirección , ciudad y país de modificarel DetailsView 's BoundField s, por lo que el CompanyName y TeléfonoBoundFieldson de sólo lectura. Además, quitar el IdProveedor BoundField por completo. Por últimelAllSuppliersDataSource ObjectDataSource en la actualidad tienesu OldValuesParameterFormatString propiedad establecida en original_ {0} . Tómeun momento para eliminar este valor de la propiedad de la sintaxis declarativa del todo, se establece en el valor predeterminado, que es {0} .

Después de configurarel SupplierDetails DetailsView y AllSuppliersDataSource ObjectDataSource ,vamos a tener el marcado declarativo siguiente:

<Asp: ObjectDataSource ID = "AllSuppliersDataSource" runat = "server"SelectMethod = "GetSuppliers" TypeName = "SuppliersBLL"UpdateMethod = "UpdateSupplierAddress"><UpdateParameters>

<asp:Parameter Name="supplierID" Type="Int32" /><asp:Parameter Name="address" tipo="String" /><asp:Parameter Name="city" tipo="String" /><asp:Parameter Name="country" tipo="String" />

</ UpdateParameters></ Asp: ObjectDataSource>

<Asp: DetailsView ID = "SupplierDetails" runat = "server" AllowPaging = "True"AutoGenerateRows = "false" DataKeyNames = "IdProveedor"DataSourceID = "AllSuppliersDataSource"><Fields>

<Asp: BoundField DataField = "CompanyName" HeaderText = "Compañía"ReadOnly = "True" SortExpression = "CompanyName" />

<Asp: BoundField DataField = "Dirección" HeaderText = "Dirección"SortExpression = "Dirección" />

<Asp: BoundField DataField = "Ciudad" HeaderText = "Ciudad"SortExpression = "Ciudad" />

<Asp: BoundField DataField = "País" HeaderText = "País"SortExpression = "País" />

Page 351: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 351/3

<Asp: BoundField DataField = "Teléfono" HeaderText = "Teléfono" ReadOnly = "TrueSortExpression = "Teléfono" />

<asp:CommandField ShowEditButton="True" /></ Campos>

</ Asp: DetailsView>

En este punto, el DetailsView puede paginar a través de la información y el proveedorseleccionado de direcciones puede ser actualizada, independientemente de la selecciónhecha en el Proveedores DropDownList (ver Figura 6).

Figura 6. Información del proveedor puede ser visto, y actualizada su dirección

Paso 3: Visualización de la información sólo es elproveedor seleccionado

Nuestra página actualmente muestra la información para todos los proveedores,independientemente de si un determinado proveedor ha sido seleccionadode proveedores DropDownList . Para mostrar sólo la información de los proveedorespara el proveedor seleccionado, hay que añadir otro ObjectDataSource a nuestra páginque recupera información acerca de un proveedor en particular.

Page 352: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 352/3

Añadir un nuevo ObjectDataSource a la página, dándole elnombre SingleSupplierDataSource . Desde sus etiquetas inteligentes, haga clic enla configuración de orígenes de datos de enlace y tienen que utilizarel SuppliersBLL claseGetSupplierBySupplierID (supplierID) método. Al igual que coel AllSuppliersDataSource ObjectDataSource , tienenla SingleSupplierDataSource ObjectDataSource 's Update () método asigna ala SuppliersBLL claseUpdateSupplierAddress método.

Figura 7. Configurar el SingleSupplierDataSource ObjectDataSource para utilizael GetSupplierBySupplierID (supplierID) método.

A continuación, se le pedirá que especifique el origen de los parámetros dela GetSupplierBySupplierID (supplierID)método supplierID parámetro deentrada. Porque queremos mostrar la información para el proveedor seleccionadodel DropDownList , utilice el Proveedores DropDownList 's SelectedValue propiedacomo la fuente de los parámetros.

Page 353: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 353/3

Figura 8. Utilice el DropDownList proveedores como fuente de parámetrossupplierID.

Incluso con esta segunda ObjectDataSource añadido, el DetailsView de control estáconfigurado para utilizar siempre el AllSuppliersDataSource ObjectDataSource . Hayque agregar lógica para ajustar la fuente de datos utilizada por elDetailsView en funcióde los proveedores DropDownList elemento seleccionado. Para lograr esto, creeunSelectedIndexChanged controlador de eventos para los

proveedores DropDownList . Esto se puede crear fácilmente haciendo doble clic enel DropDownList en el diseñador. Este controlador de eventos debe determinar quéfuente de datos para utilizar y debe volver a enlazar los datos a la DetailsView . Esto selogra usando el siguiente código:

protected void Suppliers_SelectedIndexChanged (object sender, EventArgs e){

if (Suppliers.SelectedValue == "1"){

/ / La opción "Mostrar / Editar todos" ha seleccionado la opciónSupplierDetails.DataSourceID = "AllSuppliersDataSource";

/ / Restablecer el índice de la página para mostrar el primer registroSupplierDetails.PageIndex = 0;}más

/ / El usuario elegido un proveedor en particularSupplierDetails.DataSourceID = "SingleSupplierDataSource";

/ / Asegúrese de que el DetailsView está en modo de sólo lecturaSupplierDetails.ChangeMode (DetailsViewMode.ReadOnly);

/ / Necesidad de "refrescar" el DetailsViewSupplierDetails.DataBind ();

}

Page 354: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 354/3

El controlador de eventos comienza con la determinación de si la opción "Mostrar / Editartodos los proveedores", se seleccionó la opción. Si lo fuera, se estableceel SupplierDetails DetailsView 's DataSourceID aAllSuppliersDataSource y devueal usuario al primer registro en el conjunto de proveedores mediante el establecimiento dla PageIndex propiedad a 0 . Sin embargo, si el usuario ha seleccionado un proveedor eparticular de la DropDownList , el DetailsView 's DataSourceID se asignaa SingleSuppliersDataSource . Independientemente de lo que la fuente de datos esusada, el SuppliersDetails modo se revierte de nuevo al modo de sólo lectura y los dato

de rebote a la DetailsView mediante una llamada ala SuppliersDetails control DataBind () método.

Con este controlador de eventos en el lugar, el DetailsView control ahora muestra elproveedor seleccionado, a menos que la opción "Mostrar / Editar todos los proveedores",seleccionó la opción, en cuyo caso todos los proveedores se pueden ver a través de lainterfaz de paginación. La Figura 9 muestra la página con la opción "Mostrar / Editar todolos proveedores" seleccionada, tenga en cuenta que la interfaz de paginación estápresente, lo que permite al usuario a visitar y actualizar cualquier proveedor. La figura 10muestra la página con el proveedor seleccionado Ma Maison, la información sólo Maison dMa se puede ver y editar, en este caso.

Figura 9. Toda la información de los proveedores se pueden ver y editar.

Page 355: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 355/3

Figura 10. Sólo la información del proveedor seleccionado se puede ver y edita

Nota: Para este tutorial, tanto enel DropDownList y DetailsView control EnableViewState debe establecerseen verdadero (por defecto), debido a que el DropDownList 's SelectedIndex yelDetailsView 's DataSourceID cambios de propiedad debe ser recordado a través depost-backs.

Paso 4: Listado de los productos de los proveedoreen un GridView editable

Con el DetailsView completa, el siguiente paso es incluir una editable GridView quemuestra los productos proporcionados por el proveedor seleccionado. Este GridView depermitir ediciones a sólo el ProductName yCantidadPorUnidad campos. Por otra partesi el usuario visita la página de un proveedor en particular, sólo se debe permitir que lasactualizaciones de los productos que están no interrumpido. Para lograr esto, primerotendrá que agregar una sobrecarga de la ProductsBLL clase UpdateProducts métodoque toma en tan sólo el ProductID ,ProductName y CantidadPorUnidad campos comentradas. Hemos intensificado a través de este proceso de antemano en numerosostutoriales, así que vamos a mirar el código aquí, que hay que añadir a ProductsBLL :

[System.ComponentModel.DataObjectMethodAttribute (System.ComponentModel.DataObjectMethodType.Update, false)]pública UpdateProduct bool (cadena productName, CantidadPorUnidad cadena, intproductID){

Northwind.ProductsDataTable productos =Adapter.GetProductByProductID (ProductID);

if (products.Count == 0)

Page 356: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 356/3

/ / Ningún registro coincidente, devuelva falsoreturn false;

Northwind.ProductsRow producto = productos [0];

product.ProductName = productName;if (CantidadPorUnidad == null)

product.SetQuantityPerUnitNull ();más

product.QuantityPerUnit = CantidadPorUnidad;

/ / Actualizar el registro del productoint = rowsAffected Adapter.Update (producto);

/ / Devuelve verdadero si, precisamente, una fila se ha actualizado, si no falsavolver rowsAffected == 1;

}

Con esta sobrecarga creado, estamos listos para agregar el GridView de control y susasociados ObjectDataSource .Añadir un nuevo GridView a la página, configurar su IDpropiedad de ProductsBySupplier , y configurarlo para usar unnuevo ObjectDataSource llamado ProductsBySupplierDataSource . Porque querem

que este GridView a la lista de los productos por parte del proveedor seleccionado, utilicel ProductsBLL clase GetProductsBySupplierID (supplierID) método. Además, elmapa de la actualización () método para la nueva UpdateProduct sobrecarga queacabamos de crear.

Figura 11. Configurar el ObjectDataSource para utilizar la sobrecargaUpdateProduct acaba de crear.

Nos pedirá que seleccione la fuente de parámetros para el GetProductsBySupplierID(supplierID) método supplierIDparámetro de entrada. Porque queremos mostrar losproductos para el proveedor seleccionado en el DetailsView , utilice

Page 357: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 357/3

el SuppliersDetails DetailsView control SelectedValue propiedad como la fuente de parámetros.

Figura 12. Utilice la propiedad SuppliersDetails DetailsView de SelectedValuecomo la fuente de los parámetros.

Volviendo a la GridView , eliminar todos los GridView camposexcepto ProductName , CantidadPorUnidad ydescatalogados , marcando

el interrumpidas CheckBoxField como de sólo lectura. Además, revise la Habilitarediciónopción del GridView tag 's inteligente. Después de estos cambios se han hecho,marcado declarativo del GridView yObjectDataSource debe ser similar a lo siguiente:

<Asp: GridView ID = "ProductsBySupplier" runat = "server"AutoGenerateColumns = "False"

DataKeyNames = "ProductID" DataSourceID = "ProductsBySupplierDataSource"><columnas>

<asp:CommandField ShowEditButton="True" /><Asp: BoundField DataField = "ProductName" HeaderText = "Producto"

SortExpression = "ProductName" /><Asp: BoundField DataField = "CantidadPorUnidad" HeaderText = "Cantidad / Unidad

SortExpression = "CantidadPorUnidad" /><Asp: CheckBoxField DataField = "interrumpidas" HeaderText = "interrumpidas"

ReadOnly = "True" SortExpression = "interrumpidas" /></ Columns>

</ Asp: GridView>

<Asp: ObjectDataSource ID = "ProductsBySupplierDataSource" runat = "server"OldValuesParameterFormatString = "original_ {0}" TypeName = "ProductsBLL"SelectMethod = "GetProductsBySupplierID" UpdateMethod = "UpdateProduct"><UpdateParameters>

<asp:Parameter Name="productName" tipo="String" /><asp:Parameter Name="quantityPerUnit" tipo="String" /><asp:Parameter Name="productID" Type="Int32" />

</ UpdateParameters>

Page 358: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 358/3

<SelectParameters><Asp: ControlParameter ControlID = "SupplierDetails" Name = "supplierID"

PropertyName = "SelectedValue" Type = "Int32" /></ SelectParameters>

</ Asp: ObjectDataSource>

Al igual que con nuestro anterior ObjectDataSource s, estees OldValuesParameterFormatString propiedad se establece en original_ {0} , lo qcausará problemas al intentar actualizar el nombre del producto o la cantidad por

unidad. Quitar esta propiedad de la sintaxis declarativa del todo o se establece en sudefecto, que es {0} .

Con esta configuración completa, ahora a nuestra página de las listas de los productossuministrados por el proveedor seleccionado en el GridView (ver figura 13). En laactualidad, cualquier nombre de producto o la cantidad por unidad se puede actualizar. Sembargo, debemos actualizar nuestra lógica de la página, de modo que la funcionalidadestá prohibida para productos descatalogados para los usuarios asociados a undeterminado proveedor. Vamos a hacer frente a esta última pieza en el paso 5.

Figura 13. Los productos ofrecidos por el proveedor seleccionado.

Nota: Con la adición de esteeditable GridView los proveedores DropDownList 'sSelectedIndexChanged controlor de eventos debe ser actualizado para devolver el GridView a un estado de sólolectura. De lo contrario, si un proveedor diferente es seleccionado, mientras que en elmedio de la edición de información de productos, el índice correspondiente enel GridView para el nuevo proveedor también será editable. Para evitar esto, acaba de

Page 359: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 359/3

establecer el GridView 's EditIndexpropiedad a -1 enel SelectedIndexChanged controlador de eventos.

Asimismo, recuerde que es importante que el GridView 's el estado de vista esté activad(por defecto). Si se establece el GridView 's EnableViewState propiedad a falso , secorre el riesgo de tener usuarios concurrentes sin querer borrar o editarregistros. (Ver ADVERTENCIA: punto de concurrencia con ASP.NET 2.0 GridViews /DetailsView / FormViews que la edición de apoyo y / o eliminar y cuya visión del Estadoestá deshabilitado para más información.)

Paso 5: Edición No permitir para productosdescatalogados en "Ver / Editar todos losproveedores" no está seleccionado

Mientras que el ProductsBySupplier GridView es completamente funcional, queactualmente permite el acceso demasiado a los usuarios que provienen de un proveedoren particular. Según las reglas de nuestro negocio, los usuarios no debería ser capaz deactualizar los productos descontinuados. Para cumplir esto, podemos ocultar (o desactiva

la Edición de botón en los GridView filas con productos descontinuados cuando la págiestá siendo visitada por un usuario de un proveedor.

Crear un controlador de eventos para el GridView 's RowDataBound evento. En estecontrolador de eventos, debemos determinar si el usuario está asociado con undeterminado proveedor, que, para este tutorial, se puede determinar mediante lacomprobación de los Proveedores DropDownList 's SelectedValue propiedad. Si se trade algo distinto de -1, el usuario se asocia con un proveedor en particular. Para estosusuarios, se debe determinar si el producto está descatalogado. Podemos tomar unareferencia a la actual ProductRow instancia enlazada a la GridView fila a través dela e.Row.DataItem propiedad, como se indica en el Resumen de la Información en el pide página Viendo el GridViewtutorial. Si el producto está descatalogado, podemos cogeruna referencia programática a la edición en elbotónGridView 's CommandField utilizando las técnicas explicadas en el tutorialanterior, Adición del lado del cliente confirmación cuando se eliminan . Tan pronto comotenemos una referencia, podemos ocultar o deshabilitar el botón.

protected void ProductsBySupplier_RowDataBound (object sender,GridViewRowEventArgs e){

si (== e.Row.RowType DataControlRowType.DataRow){

/ / Se trata de un proveedor específico de usuario?

if (Suppliers.SelectedValue! = "-1"){

/ / Obtener una referencia a la ProductRowNorthwind.ProductsRow producto =

 (Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem) Fila.;

/ / ¿Es esto producto descontinuado?if (product.Discontinued){

/ / Obtener una referencia a la LinkButton EditarLinkButton editbutton =

(LinkButton) e.Row.Cells [0] Controles [0].;

Page 360: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 360/3

/ / Ocultar el botón EditareditButton.Visible = false;

}}

}}

Con este controlador de eventos en el lugar, al visitar esta página como un usuario de un

proveedor específico, aquellos productos que son discontinuas no son modificables, comla edición botón se oculta de estos productos. Por ejemplo, Mezcla Gumbo del chef Antoes un producto descontinuado por el Cajun de Nueva Orleans Delicias proveedor. Al visitala página de este proveedor en particular, la Edición de botón de este producto estáoculto a la vista (ver figura 14). Sin embargo, cuando se visita usando la opción "MostrarEditar todos los proveedores" de laEdición botón está disponible (ver Figura 15).

Figura 14. De proveedores y usuarios específicos, en el botón Editar para MezcGumbo del chef Anton se oculta.

Page 361: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 361/3

Figura 15. Para "Mostrar / Editar todos los proveedores" los usuarios, el botónEditar para Mezcle Gumbo del chef Anton se muestra.

Comprobación de los derechos de acceso en la capade lógica de negocios

En este tutorial, la página de ASP.NET controla toda la lógica con respecto a la informacióque el usuario puede ver y qué productos se pueden actualizar. Idealmente, esta lógicatambién estaría presente en la capa de lógica de negocios.Por ejemplo,el SuppliersBLL clase GetSuppliers () método (que devuelve todos los proveedores)podrían incluir una verificación para asegurarse de que haya iniciado la sesión en el usuaes no asociados a un determinado proveedor.Asimismo,el UpdateSupplierAddress método podría incluir un control para asegurarse de que hainiciado la sesión en el usuario o bien trabajaban para la empresa (y por lo tanto, puedeactualizar la información de todos los proveedores de direcciones) o se asocia con elproveedor cuyos datos se está actualizando.

No incluí como BLL-capa comprueba aquí, porque en nuestro tutorial de los derechos de usuarios son determinados por un DropDownList en la página, que las clases BLL nopueden acceder. Cuando se utiliza el sistema de suscripciones o uno de los fuera de losesquemas de autenticación caja proporcionada por ASP.NET (por ejemplo, la autenticacióde Microsoft Windows), ha iniciado la sesión en la información del usuario y las funcionesde información se puede acceder desde la toma de BLL-así como acceso a los derechosposibles controles, tanto en la presentación y las capas de plomo en sangre.

Page 362: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 362/3

Conclusión

La mayoría de los sitios que ofrecen cuentas de usuario debe personalizar la interfaz demodificación de datos basado en el usuario ha iniciado sesión. Los usuarios administrativpueden ser capaces de eliminar y editar cualquier documento, mientras que los usuariosadministrativos pueden estar limitados a sólo actualizar o eliminar registros que ellosmismos crearon. Sea cual sea el escenario que sea, los controles web de

datos, ObjectDataSource , y las clases de negocios Capa de lógica se puede extenderpara agregar o negar determinadas funciones sobre la base de que el usuario ha iniciadosesión. En este tutorial, hemos visto cómo limitar los datos visibles y editables en funciónde si el usuario se asoció con un determinado proveedor o si trabajaban para la compañía

En este tutorial se concluye el examen de insertar, actualizar y eliminar datos medianteel GridView , DetailsView yFormView controles. Comenzando con el siguiente tutorialvamos a dirigir nuestra atención a la adición de paginación y la clasificación de apoyo.

Paginación y clasificación

Tutorial 24: Paging y ordenar datos deinforme 

Scott Mitchell

04 2007

Resumen: Este es el Visual C # tutorial. ( Cambie al tutorial de Visual Basic .) paginacióy la clasificación son dos características muy comunes al mostrar datos en una aplicaciónen línea. En este tutorial, vamos a echar un primer vistazo a la adición de la clasificación localización de nuestros informes, que luego se basará en futuros tutoriales. (21 páginasimpresas)

Descargar el código de la muestra .

Contenido del Tutorial 24 (Visual C #)

IntroducciónPaso 1: Agregar la paginación y la clasificación Web Tutorial PáginasPaso 2: Visualización de información del producto en un GridViewPaso 3: Adición de compatibilidad de paginaciónEl usuario de paginación experienciade paginación del lado del servidor de flujo de trabajoPaso 4: Personalizar la experiencia de paginación

Page 363: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 363/3

Paso 5: Agregar Apoyo Clasificación bidireccional examinar el flujo de trabajo ClasificaciónClasificación del GridView mediante programaciónConclusión

Introducción

Paginación y la clasificación son dos características muy comunes al mostrar datos en unaplicación en línea. Por ejemplo, en la búsqueda de libros de ASP.NET en una librería enlínea, puede haber cientos de libros, pero el informe que enumera los resultados debúsqueda sólo enumera 10 resultados por página. Por otra parte, los resultados pueden sordenados por título, precio, número de páginas, el nombre del autor, y así sucesivamente. Mientras que en los últimos 23 tutoriales han examinado cómo construiruna variedad de informes, incluyendo las interfaces que permiten agregar, editar y elimindatos no-hemos visto cómo ordenar los datos, y los ejemplos de paginación único quehemos visto han sido con el DetailsView y FormView controles.

En este tutorial, vamos a ver cómo agregar ordenación y paginación de nuestros informe

que se puede lograr simplemente marcando una casilla de verificación pocos. Pordesgracia, esta implementación simplista tiene sus inconvenientes: La interfaz de laclasificación deja un poco que desear, y las rutinas de búsqueda no están diseñados parauna eficiente localización a través de conjuntos de resultados grandes. Tutoriales futuro sestudiará la forma de superar las limitaciones de la paginación fuera de la caja y lassoluciones de ordenación.

Paso 1: Agregar la paginación y la clasificaciónPáginas Web Tutorial

Antes de empezar este tutorial, primero tome un momento para agregar las páginasASP.NET que necesitaremos para este tutorial y los tres siguientes. Comience por crear unueva carpeta llamada PagingAndSorting en el proyecto. A continuación, agregue lossiguientes cinco páginas ASP.NET en esta carpeta, teniendo todos ellos configurados parutilizar el Site.master página maestra:

• Default.aspx• SimplePagingSorting.aspx• EfficientPaging.aspx• SortParameter.aspx• CustomSortingUI.aspx

Page 364: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 364/3

Figura 1. Cree una carpeta PagingAndSorting y añadir las páginas ASP.NETtutorial.

A continuación, abra la página Default.aspx y arrastre el control de usuarioSectionLevelTutorialListing.ascx de la carpeta UserControls en la superficie de diseño. Escontrol de usuario que hemos creado en la páginas principales y de exploración delsitio tutorial, enumera el mapa del sitio y muestra los tutoriales de la sección actual en ulista con viñetas.

Page 365: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 365/3

Figura 2. Agregar el control de usuario SectionLevelTutorialListing.ascx aDefault.aspx.

Con el fin de tener la lista con viñetas mostrar la paginación y la clasificación tutoriales qestamos creando, hay que añadir al mapa del sitio. Abra el archivo Web.sitemap y agregel marcado siguiente después de la "Edición, insertar y eliminar" del mapa del sitio nodomarcado:

<SiteMapNode title = "paginación y la clasificación", url = "~ / PagingAndSorting /Default.aspx"

description = "Ejemplos de informes que proporcionan paginación y la clasificaciónCapacidades ">

<SiteMapNode url = "~ / PagingAndSorting / SimplePagingSorting.aspx"title = "Ejemplos simples de paginación y ordenación"description = "Examina cómo agregar paginación simple y clasificación

apoyo. "/><SiteMapNode url = "~ / PagingAndSorting / EfficientPaging.aspx"

title = "de manera eficiente Paginar a través de grandes conjuntos de resultadosdescription = "Aprender de manera eficiente a través de la página de resultados

grandeestablece. "/>

<SiteMapNode url = "~ / PagingAndSorting / SortParameter.aspx"title = "ordenar datos en el BLL o DAL"description = "Muestra cómo realizar la lógica de la clasificación en el

Lógica de NegocioCapa o de acceso a datos. "/>

<SiteMapNode url = "~ / PagingAndSorting / CustomSortingUI.aspx"title = "Personalización de la interfaz de usuario de ordenación"description = "Aprenda a personalizar y mejorar la ordenación de usuario

interfaz. "/></ SiteMapNode>

Page 366: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 366/3

Figura 3. Actualizar el mapa del sitio para incluir las nuevas páginas ASP.NET

Paso 2: Visualización de información del producto eun GridView

Antes de que realmente poner en práctica las capacidades de paginación y la clasificacióprimero vamos a crear un estándar no se puede escribir, no paginable GridView quemuestra la información del producto. Esta es una tarea que hemos hecho muchas vecesantes en toda esta serie de tutoriales, así, estas medidas deben estarfamiliarizados.Comience abriendo la página SimplePagingSorting.aspx y arrastreun control GridView de control de la caja de herramientas en el diseño, configuración dsu ID de propiedad de los productos . A continuación, cree unnuevoObjectDataSource que utiliza el ProductsBLL clase GetProducts () para devolvtoda la información del producto.

Page 367: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 367/3

Figura 4. Recuperar información acerca de todos los productos mediante el usode la GetProducts () método.

Debido a que este informe es un informe de sólo lectura, no hay necesidad de trazarel ObjectDataSource 's Insert () ,Update () o Eliminar () métodos a loscorrespondientes ProductsBLL métodos, por lo tanto, elija (Ninguno) en la listadesplegable para la ACTUALIZACIÓN , INSERTAR y BORRAR las fichas.

Page 368: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 368/3

Figura 5. Elija la opción (Ninguno) en la lista desplegable en el UPDATE, INSERTDELETE pestañas.

A continuación, vamos a personalizar el GridView los campos s, de modo que sólo losproductos de los nombres, proveedores, categorías, precios, y los estados de suspender muestran. Por otra parte, no dude en hacer cualquier cambio de formato a nivel de campcomo el ajuste del HeaderText propiedades o el formato del precio de unamoneda. Después de estos cambios, el GridView marcado declarativo 's debe ser simila

lo siguiente:

<Asp: GridView ID = "Productos" runat = "server" AutoGenerateColumns = "False"DataKeyNames = "ProductID" DataSourceID = "ObjectDataSource1"EnableViewState = "false"><columnas>

<Asp: BoundField DataField = "ProductName" HeaderText = "Producto"SortExpression = "ProductName" />

<Asp: BoundField DataField = "CategoryName" HeaderText = "Categoría"ReadOnly = "True" SortExpression = "CategoryName" />

<Asp: BoundField DataField = "SupplierName" HeaderText = "Proveedor"ReadOnly = "True" SortExpression = "SupplierName" />

<Asp: BoundField DataField = "UnitPrice" HeaderText = "Precio"

SortExpression = "UnitPrice" DataFormatString = "{0: C}"HtmlEncode = "false" />

<Asp: CheckBoxField DataField = "interrumpidas" HeaderText = "interrumpidas"SortExpression = "interrumpidas" />

</ Columns></ Asp: GridView>

La figura 6 muestra nuestro progreso hasta ahora cuando se ve a través de unnavegador. Tenga en cuenta que la página se enumeran todos los productos en una solapantalla, mostrando el nombre de cada producto, categoría, proveedor, precio, y el estadsuspendido.

Figura 6. Cada uno de los productos está en la lista.

Page 369: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 369/3

Paso 3: Añadir soporte de paginación

Listado de todos los productos en una sola pantalla puede conducir a una sobrecarga deinformación para el usuario leer los datos. Para ayudar a que los resultados sean másmanejables, podemos dividir los datos en páginas más pequeñas de datos y permiten alusuario paso a través de los datos de una página a la vez. Para lograr esto basta conmarcar la paginación Activar casilla de verificación de la GridView 's etiqueta intelige

(esto establece el GridView 'spropiedad AllowPaging de verdad ).

Figura 7. Marque la casilla de verificación Habilitar paginación para añadirsoporte de paginación.

Activación de paginación limita el número de registros mostrados por página y añadeuna interfaz de paginación alGridView . La interfaz de paginación por defecto, que semuestra en la figura 7, es una serie de números de página, que permite al usuario navegrápidamente de una página de datos a otro. Esta interfaz de paginación debe resultarlefamiliar, como lo hemos visto cuando se añade el apoyo de paginación parael DetailsView y FormView controles en tutoriales anteriores.

 Tanto el DetailsView y FormView sólo muestra los controles de un solo registro porpágina. El GridView , sin embargo, consulte a su propiedad PageSize para determinar elnúmero de registros a mostrar por página (por defecto esta propiedad a un valor de 10).

Este GridView , DetailsView y FormView interfaz 's de paginación se puede personalizmediante el uso de las siguientes propiedades:

• PagerStyle : indica la información de estilo para la interfaz de paginación, puedeespecificar la configuracióncomo BackColor , ForeColor , CssClass , HorizontalAlign , y así sucesivamente

Page 370: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 370/3

• PagerSettings -Contiene un grupo de propiedades que puede personalizar lafuncionalidad de la interfaz de búsqueda; PageButtonCount indica el númeromáximo de números de página numéricos muestran en la interfaz de paginación (pdefecto es 10), la propiedad Mode indica cómo la interfaz de paginación funciona yse puede establece en:

• SiguienteAnterior. Muestra una Siguiente y Anterior botones, permitiendal usuario paso hacia delante o hacia atrás una página a la vez.

• NextPreviousFirstLast. Además

de Siguiente y Anterior botones, Primero y Último botones también estáincluidos, lo que permite al usuario moverse rápidamente a la primera o últimpágina de datos.

• Numéricos. Muestra una serie de números de página, que permite al usuarisaltar a cualquier página de inmediato.

• NumericFirstLast. Además de los números de página,incluye primer y último botón, que permite al usuario pasar rápidamente a primera o última página de datos, el Primer / Último botones se muestransólo si todos los números de página numérico no puede encajar.

Por otra parte, el GridView , DetailsView y FormView ofrecen

la PageIndex y PageCount propiedades, lo que indica la página actual que se está vieny el número total de páginas de datos, respectivamente. El PageIndex propiedad estáindexada a partir de las 0-lo que significa que, al ver la primera página de losdatos, PageIndex será igual a 0.PageCount , por otro lado, empieza a contar a 1, lo qusignifica que PageIndex se limita a los valores entre 0 yPageCount - 1 .

 Tomemos un momento para mejorar la apariencia por defecto denuestro GridView interfaz de paginación 's. En concreto, vamos a tener la interfaz depaginación alineado a la derecha con un fondo gris claro. En lugar de establecerdirectamente estas propiedades a través del GridView 's PagerStyle propiedad, vamoscrear una clase CSS en styles.css llamado PagerRowStyle , a continuación, asignarel PagerStyle 's CssClass propiedad a través de nuestro tema. Comience abriendostyles.css y añadir la siguiente definición de clase CSS:

. PagerRowStyle{

background-color: # ddd;text-align: right;

}

A continuación, abra el archivo en la carpeta GridView.skin DataWebControls dentro de lacarpeta App_Themes. Como ya comentamos en la páginas principales y de exploración dsitio tutorial, los archivos de la piel se puede utilizar para especificar el valor de lapropiedad predeterminada de un control Web. Por lo tanto, aumentar las opcionesexistentes para incluir el establecimiento dela PagerStyle 's CssClass propiedad PagerRowStyle . Además, vamos a configurar lainterfaz de paginación para mostrar un máximo de cinco botones de página numéricosutilizando el NumericFirstLastinterfaz de paginación.

<asp:GridView runat="server" CssClass="DataWebControlStyle"><AlternatingRowStyle CssClass="AlternatingRowStyle" /><RowStyle CssClass="RowStyle" /><HeaderStyle CssClass="HeaderStyle" /><FooterStyle CssClass="FooterStyle" />

Page 371: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 371/3

<SelectedRowStyle CssClass="SelectedRowStyle" /><PagerStyle CssClass="PagerRowStyle" /><PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />

</ Asp: GridView>

La experiencia de usuario de paginación

La figura 8 muestra la página Web cuando se acceda a través de un navegador después d

que el GridView 's de paginación Activar casilla de verificación ha sido comprobado yel PagerStyle y PagerSettings configuraciones se han hecho a través dela GridView.skin archivo. Tenga en cuenta cómo sólo 10 se muestran los registros, y lainterfaz de paginación puede indicar que estamos viendo la primera página de los datos.

Figura 8. Cuando active la paginación, sólo un subconjunto de los registros semuestra a la vez.

Cuando el usuario hace clic en uno de los números de página en la interfaz de búsqueda,una devolución de datos sigue y vuelve a cargar la página, que muestra los registros quepágina solicitada. La Figura 9 muestra los resultados después de optar para ver la última

página de datos. Tenga en cuenta que la última página tiene sólo un registro, esto es asíporque hay 81 registros en total, que se traduce en ocho páginas de 10 registros porpágina, más una página con un registro único.

Page 372: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 372/3

Figura 9. Al hacer clic en un número de página hace una devolución de datos ymuestra el subconjunto apropiado de registros.

Paginación del lado del servidor de flujo de trabajo

Cuando el usuario final hace clic en un botón en la interfaz de búsqueda, una devolución datos sigue y comienza el siguiente servidor de flujo de trabajo:

1. El GridView 's (o DetailsView o FormView ) PageIndexChanging activa elevento.

2. El ObjectDataSource re-solicitudes de todos los datos de la BLL,el GridView 's PageIndex y PageSize valores de las propiedades se utilizan paradeterminar qué registros devueltos desde la BLL se debe mostrar en el GridView.

3. El GridView 's PageIndexChanged activa el evento.

En el paso 2, el ObjectDataSource re-solicitudes de todos los datos de la fuente dedatos. Este estilo de localización se conoce comúnmente como la paginación por defectoya que es el comportamiento de paginación utiliza por defecto la hora de establecerel AllowPaging propiedad real . Con la paginación por defecto en el control Web de datingenuamente recupera todos los registros de cada página de datos, a pesar de que sóloun subconjunto de los registros son efectivamente prestados en el código HTML que seenvía al navegador. A menos que los datos de base de datos se almacena en caché por eBLL o ObjectDataSource , la paginación por defecto es inviable para los conjuntos deresultados lo suficientemente grandes o para aplicaciones Web con muchos usuariossimultáneos.

En el siguiente tutorial, vamos a examinar cómo implementar la paginación personalizada . Con la paginación personalizada que específicamente puede instruiral ObjectDataSource para recuperar sólo el conjunto preciso de los registros necesariospara la página de datos solicitada. Como se puede imaginar, la paginación personalizadamejora la eficiencia de la localización a través de conjuntos de resultados grandes.

Nota: Mientras que la paginación por defecto no es adecuado cuando la paginación através de conjuntos de resultados lo suficientemente grande o de los sitios con muchosusuarios simultáneos, se dan cuenta que la paginación personalizada requiere máscambios y esfuerzos para aplicar y no es tan sencillo como marcar una casilla deverificación (como es la paginación por defecto) . Por lo tanto, la paginación por defecto

Page 373: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 373/3

puede ser la opción ideal para los pequeños sitios, web de bajo tráfico o cuando lapaginación a través de conjuntos de resultados relativamente pequeño, ya que es muchomás fácil y rápido de implementar.

Por ejemplo, si sabemos que nunca vamos a tener más de 100 productos en nuestra basede datos, la ganancia de rendimiento mínimo que gozan de paginación personalizada esprobable que compensado por el esfuerzo necesario para ponerlo en práctica. Si, sinembargo, que un día podría tener miles o decenas de miles de productos, no la aplicació

de paginación personalizada en gran medida dificultan la escalabilidad de nuestraaplicación.

Paso 4: Personalizar la experiencia de paginación

Los controles de datos de Web ofrecen una serie de propiedades que se pueden utilizarpara mejorar la experiencia del usuario de paginación. El PageCount propiedad, porejemplo, indica el número de páginas total hay, mientras que elPageIndex propiedadindica la página actual que se visita y se puede configurar para mover un usuario a unapágina específica rápidamente. Para ilustrar cómo utilizar estas propiedades para mejora

la experiencia de paginación del usuario, vamos a añadir una etiqueta de control deInternet a la página que informa al usuario de la página en que te encuentras en, junto coun DropDownList de control que les permite saltar rápidamente a cualquier dado págin

En primer lugar, añadir una etiqueta de control de Internet a la página, configurarsu ID de propiedad dePagingInformation , y claro a su texto la propiedad. Acontinuación, cree un controlador de eventos para el GridView's DataBound evento yagregue el siguiente código:

protected void Products_DataBound (object sender, EventArgs e){

PagingInformation.Text = String.Format ("Usted está viendo la página {0} de

{1 }...",Products.PageIndex + 1, Products.PageCount);

}

Este controlador de eventos asigna el PagingInformation etiqueta 's detexto propiedad a un mensaje que informa al usuario de la página que están visitandoactualmente- Products.PageIndex + 1 , de la forma total de muchaspáginasProducts.PageCount (se añade 1 a la Products.PageIndex propiedad ,porque PageIndex está indexada a partir de 0).Elegí el asignar esta etiqueta 's detexto de propiedad en el DataBound controlador de eventos, a diferencia delaPageIndexChanged controlador de eventos, ya que el DataBound evento se activa

cada vez que los datos se une a laGridView , mientras queel PageIndexChanged controlador de eventos sólo se activa cuando el índice de la páges cambiado. Cuando el GridView es inicialmente los datos consolidados sobre la visita la primera página, elPageIndexChanging evento no se dispara (mientras queel DataBound caso lo hace).

Con esta adición, el usuario ahora se muestra un mensaje indicando que la página queestán visitando y el número de páginas total hay de los datos.

Page 374: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 374/3

Figura 10. El número de página actual y el número total de páginas se muestra

Además de la etiqueta de control, también vamos a agregar un DropDownList de contque muestran los números de página en el GridView con la página actual en Firefoxseleccionado. La idea aquí es que el usuario puede saltar rápidamente de la página actuaa otra con sólo seleccionar el índice de la nueva página de la DropDownList .Comiencepor agregar un DropDownList al diseñador, el establecimiento de su ID de propiedadde PageList y el control de la AutoPostBack Habilitar la opción de su etiquetainteligente.

A continuación, volver a la DataBound controlador de eventos y añadir el siguientecódigo:

/ / ¡Acaba con todos los elementos de la DropDownListPageList.Items.Clear ();

/ / Añadir un ListItem por cada páginafor (int i = 0; i <Products.PageCount; i + +){

/ / Se añade el nuevo ListItemListItem pageListItem = new ListItem (String.Concat ("Página", i + 1),

i.ToString ());PageList.Items.Add (pageListItem);

/ / Selecciona el elemento actual, si es necesarioif (i == Products.PageIndex)

pageListItem.Selected = true;}

Este código empieza por la limpieza de los elementos dela PageList DropDownList . Esto podría parecer superflua, ya que uno no esperaría queel número de páginas para cambiar, pero otros usuarios pueden utilizar el sistemasimultáneamente, añadir o eliminar registros de la los productos de mesa. Talesinserciones o deleciones podrían alterar el número de páginas de datos.

Page 375: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 375/3

A continuación, debe crear los números de página de nuevo y tener la que se asigna a laactual GridView PageIndexseleccionada por defecto. Esto lo logramos con un bucle de a PageCount - 1 -añadiendo un nuevo ListItem en cada iteración y se fijanlas seleccionadas a la propiedad real , si el índice de iteración actual es igual ala GridView 'sPageIndex propiedad.

Por último, se debe crear un controlador de eventos parael DropDownList 's SelectedIndexChanged evento, que se activa cada vez que el

usuario elija un elemento diferente de la lista. Para crear este controlador de eventos, hadoble clic en el DropDownList en el diseño, a continuación, agregue el siguiente código

protected void PageList_SelectedIndexChanged (object sender, EventArgs e){

/ / Ir a la página especificadaProducts.PageIndex = Convert.ToInt32 (PageList.SelectedValue);

}

Como muestra la Figura 11 se muestra, simplemente cambiandoel GridView 's PageIndex propiedad hace que los datos se vuelvan a enlazar conel GridView . En el GridView 's DataBound controlador de eventos, las

correspondientes DropDownList ListItem está seleccionado.

Figura 11. El usuario es llevado automáticamente a la página sexta, cuando laselección de la "Página 6" desplegable elemento de la lista.

Paso 5: Agregar compatibilidad bidireccionalclasificación

Añadiendo soporte bidireccional clasificación es tan simple como añadir soporte depaginación, simplemente marque laHabilitar ordenación opción del GridView 's etiqueinteligente (que establece el GridView 's propiedad AllowSortingde verdad ). Esto haceque cada una de las cabeceras de los GridView campos 's como LinkButton s que, al

Page 376: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 376/3

hacer clic, hacer una devolución de datos y devolver los datos ordenados por la columnahace clic en orden ascendente. Al hacer clic en la misma cabecera LinkButton nuevo reordena los datos en orden descendente.

Nota: Si está utilizando una capa de datos personalizada de acceso en lugar de un DataScon tipo, puede que no tenga una Habilitar ordenación opción en el GridView tag 'sinteligente. Sólo GridView s ligado a las fuentes de datos que soporta de forma nativa laclasificación tiene esta casilla de verificación disponibles. El DataSet ofrece fuera de la ca

admite la ordenación, ya que la DataTable ADO.NET proporciona una Clasificar métodoque, cuando se invoca, tipo DataRow del DataTable, utilizando los criterios especificados

Si el DAL no devuelve los objetos que soporta de forma nativa la clasificación, tendrá queconfigurar elObjectDataSource para pasar la información de clasificación a la capa delógica empresarial, que puede ordenar los datos o los datos ordenados por el DAL. Vamoestudiar la forma de ordenar los datos en la lógica de negocios y las capas de acceso adatos en un tutorial futuro.

La clasificación LinkButton s se representan como hipervínculos HTML, cuyo actualcolores (azul para un enlace no visitado y una de color rojo oscuro de un vínculo visitado)

chocan con el color de fondo de la fila de encabezado. En su lugar, vamos a tener todos lenlaces fila de encabezado aparece en blanco, sin importar si son o no han sidovisitados. Esto se puede lograr mediante la adición de lo siguiente a la styles.css clase:

. HeaderStyle uno, HeaderStyle a:. Visitó{

Color: Blanco;}

Esta sintaxis indica que el uso de texto blanco cuando se muestran los hipervínculos dentde un elemento que utiliza elHeaderStyle clase.

Después de esta adición CSS, cuando se visita la página a través de un navegador, lapantalla debe ser similar a la Figura 12. En particular, la figura 12 muestra los resultadosdespués de que el precio vínculo de campo de cabecera se ha hecho clic.

Page 377: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 377/3

Figura 12. Los resultados han sido ordenados por el PrecioUnidad en ordenascendente.

Examinar el flujo de trabajo de clasificación

 Todos GridView campos-el BoundField , CheckBoxField , TemplateField , y así sucesivamente-tienen unSortExpression propiedad que indica la expresión que se debe

utilizar para ordenar los datos en ese campo de enlace de la clasificación de cabecera sehace clic. El GridView también tiene un SortExpression propiedad. Cuando unencabezado la clasificación LinkButton se hace clic en el GridView asigna esecampo SortExpression valor a susSortExpression propiedad. A continuación, los datosse vuelve a recuperar de la ObjectDataSource y se ordenan de acuerdo conel GridView 's SortExpression propiedad. La siguiente lista detalla la secuencia de pasque suceden cuando un tipo de usuario final de los datos en un GridView :

1. El GridView 's Clasificación evento incendios.2. El GridView 's propiedad SortExpression se establece en el SortExpression del

campo cuya clasificación cabecera LinkButton se ha hecho clic.

3. El ObjectDataSource re-recupera todos los datos de la BLL a continuación, ordenlos datos mediante elGridView 's SortExpression .

4. El GridView 's PageIndex propiedad se restablece a 0, lo que significa que alordenar el usuario vuelve a la primera página de datos (suponiendo que el apoyo dpaginación se ha implementado)

5. El GridView 's evento Sorted incendios.

Al igual que con la paginación por defecto, la opción por defecto de clasificación re-recupera todos los registros de la BLL. Cuando se utiliza la clasificación, sin paginación ocuando se utiliza la clasificación con la paginación por defecto, no hay manera de evitareste impacto en el rendimiento (por debajo de almacenamiento en caché los datos de ba

Page 378: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 378/3

de datos). Sin embargo, como veremos en un tutorial futuro, es posible ordenar de maneeficiente los datos cuando se utiliza la paginación personalizada.

Al enlazar un ObjectDataSource a la GridView a través de la lista desplegable enel GridView tag 's inteligente, cadaGridView campo automáticamente tienesu SortExpression propiedad asignada al nombre del campo de datos enelProductsRow clase. Por ejemplo,el ProductName BoundField 's SortExpression está establecido en ProductName ,

como se muestra en el marcado declarativo siguiente:

<Asp: BoundField DataField = "ProductName" HeaderText = "Producto"SortExpression = "ProductName" />

Un campo puede ser configurado de manera que no es clasificable en la limpieza desus SortExpression propiedad (asignándole una cadena vacía). Para ilustrar esto, imagique no quería dejar a nuestros clientes ordenar nuestros productos por elprecio. El PrecioUnidad BoundField 's SortExpression propiedad puede ser apartadodel el marcado declarativo o por medio de la Campos cuadro de diálogo (que se puedeacceder haciendo clic en el Editar columnas enlace en el GridView 's etiqueta

inteligente).

Figura 13. Los resultados han sido ordenados por el PrecioUnidad en ordenascendente.

 Tan pronto como el SortExpression propiedad se ha eliminadola PrecioUnidad BoundField , el encabezado se representa en forma de texto, en lugade como un enlace con ello evitar que los usuarios de la clasificación de los datos deprecios.

Page 379: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 379/3

Figura 14. Mediante la eliminación de la propiedad SortExpression, los usuariosya no pueden ordenar los productos por el precio.

Clasificación de los GridView medianteprogramación

 También puede ordenar el contenido de la GridView mediante programación conel GridView 's método Sort . Sólo tiene que pasar en el SortExpression valor por el quese ordenan, junto con el SortDirection ( ascendente odescendente ), y el GridView dedatos 's va a ser re-ordenados.

Imagina que la razón por la que apaga la clasificación por la PrecioUnidad era queestábamos preocupados de que nuestros clientes sólo podría comprar solamente losproductos de menor precio. Sin embargo, queremos animarlos a comprar los productosmás caros, así que, nos gustaría que fueran capaces de ordenar los productos por preciopero sólo desde el precio más caro de lo más mínimo.

Para lograr esto, agregar un botón de control Web a la página, configurar su ID depropiedad deSortPriceDescending , y su texto a la propiedad "Ordenar por precio". Acontinuación, cree un controlador de eventos para el botón de 's Haga clic en eventohaciendo doble clic en el botón de control en el diseñador. Agregue el siguiente código aeste controlador de eventos:

protected void SortPriceDescending_Click (object sender, EventArgs e){

/ / Ordenar por PrecioUnidad en orden descendenteProducts.Sort ("Precio por unidad", SortDirection.Descending);

}

Page 380: Creacion de Web en c#.Net Completo Paso a Paso

5/14/2018 Creacion de Web en c#.Net Completo Paso a Paso - slidepdf.com

http://slidepdf.com/reader/full/creacion-de-web-en-cnet-completo-paso-a-paso 380/3

Al hacer clic en este botón , el usuario regresa a la primera página con los productosordenados por precio, de más caro a más barato (ver Figura 15).

Figura 15. Al hacer clic en el botón de las órdenes de los productos más caros dlo caro.

Conclusión

En este tutorial, vimos cómo implementar la paginación por defecto y clasificar lascapacidades, tanto de los que era tan fácil como marcar una casilla! Cuando un tipo deusuario o las páginas a través de los datos, un flujo de trabajo similar se desarrolla:

1. Una devolución de datos se produce.2. El control de datos Web de pre-grado se activa el evento

( PageIndexChanging o clasificación ).

3.  Todos los datos se vuelve a recuperar el ObjectDataSource .4. El control de datos Web de nivel post-activa el evento( PageIndexChanged o Ordenado ).

Mientras que la aplicación de la paginación y la clasificación básica es muy sencilla más