Vinculación de una hoja de trabajo con una base de datos mediante Worksheets Designer en VS.Net 2005
Vinculación de una hoja de trabajo con una base de datos mediante Worksheets Designer en VS.Net 2005
El propósito de este artículo es permitir que todos los desarrolladores aprendan cómo crear una aplicación de enlace de datos enVS.Net 2005 y comprender el uso y la función deDiseñador de hojas de trabajo editor. La mejor manera de aprender y entender cualquier cosa es a través de ejemplos. Entonces, en este artículo, también sería mejor para nosotros crear una aplicación de muestra para demostrar el uso deDiseñador de hojas de trabajoen hojas de trabajo vinculantes con base de datos. Vamos a crear una aplicación paso a paso.
Paso 1: crear una base de datos de muestra
En primer lugar, crearemos una base de datos de muestra que se utilizará en este artículo. Hemos utilizado MS Access para crear una base de datos de muestra que contieneproductos tabla cuyo esquema se muestra a continuación:
Figura: Información de diseño deproductos mesa
Se agregan pocos registros ficticios alproductos tabla como se muestra a continuación en la figura:
Figura: Registros enproductos mesa
Paso 2: Diseño de una aplicación de muestra
UnASP.NET Aplicación web está creado y diseñado en Visual Studio.NET 2005 como se muestra en las siguientes figuras. Estas capturas de pantalla son útiles para aquellos desarrolladores que no están muy familiarizados con el uso de Aspose.Cells.GridWeb en Visual Studio.Net 2005.
Primero inicie VS.Net 2005.
Figura: A partir de VS.Net 2005
Cree un nuevo sitio web desde el menú Archivo|Nuevo|Sitio web….
Figura: Creación de un nuevo sitio web
Después de hacer clic en la opción de menú Archivo|Nuevo|Sitio web…,Nuevo sitio web se muestra el cuadro de diálogo. Haga clic en elNavegar botón en él.
**Figura:**Cuadro de diálogo Nuevo sitio web
Después de hacer clic en elNavegar , elija la carpeta de ubicación en el IIS local. Puede crear una nueva carpeta y convertirla en una carpeta virtual como se muestra en la figura.
Figura: Crear una nueva carpeta
Después de hacer clic en elAbierto botón en elElegir la ubicación diálogo,Nuevo sitio web se verá el diálogo.
Figura: Configuración de la ubicación del proyecto
Ahora el proyecto está creado.
Figura: Proyecto creado
Modos XHTML y HTML
Aspose.Cells.GridWeb es totalmente compatible con el modo XHTML que se implementa de forma predeterminada en VS.Net 2005 desde elModo Xhtml propiedad de laGridWeb el control está puesto enVerdadero por defecto cuando coloca el control en la página web. Pero si desea implementar el modo HTML para el control en VS.Net 2005, puede hacerlo con bastante facilidad. Tienes que modificar el**<!DOCTYPE>** etiquetar un poco en el código fuente de la página web y configurar el**Modo Xhtml** propiedad de la**GridWeb** controlar a**Falso** .
En este tema usaremos el Modo HTML para el control. Así que sigue los pasos a continuación
1. Cambie a la vista Fuente de la página web y busque la siguiente etiqueta <!DOCTYPE> en el código fuente.
XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Una vez que encuentre esa etiqueta, seleccione esa etiqueta completa en el código fuente como se muestra a continuación.
Figura: Seleccionandoetiqueta <!DOCTYPE>
Reemplace la**<!DOCTYPE>** etiqueta de su código fuente con la siguiente.
XML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Figura: modificandoetiqueta <!DOCTYPE>
2. Después, agregará el control GridWeb al formulario web. Debe seleccionar el control y elegir la propiedad XhtmlMode de la ventana Propiedades para establecerlo en Falso.
Agregar GridWeb al WebForm
Haga clic derecho enCaja de herramientas y seleccioneElija elementos… del menú.
Figura: Elección de elementos
Ahora seleccioneGridWeb componente y haga clicDE ACUERDO
Figura: SeleccionandoGridWeb componente en el cuadro de diálogo de componentes
Ahora elGridWeb se agrega como se muestra en la siguiente figura.
Figura: GridWeb se agrega en la caja de herramientas
Colocar elGridWeb en el formulario web como se muestra a continuación.
Figura: ColocaciónGridWeb en la página web
Paso 3: Conexión con la base de datos usando Server Explorer y configuración del objeto de conexión
Primero agregamos la base de datos de MS Access al proyecto que creamos previamente enPaso 1 . Puedes ver esodb.mdb El archivo se agrega al proyecto.
Figura: Base de datos agregada a la carpeta del proyecto.
Ahora, vamos aDiseñador de componentes ventana del formulario web utilizando la opción de menú contextual de la página web.
Figura: SeleccionandoVer diseñador de componentes opción
La ventana Diseñador de componentes se muestra a continuación.
Figura: Ventana del diseñador de componentes
Haga doble clic en elConexión OleDb componente del panel Datos para colocar el objeto oleDbConnection1 en la ventana.
Figura: objeto oleDbConnection1
Ahora, es el momento de conectarse con la base de datos. Podemos hacerlo fácilmente usandoExplorador de servidores en Visual Studio.NET 2005. Simplemente seleccioneConección de datos enExplorador de servidores y clic derecho. Verá un menú contextual que aparece frente a usted. Seleccione**Añadir conexión…**opción del menú como se muestra a continuación en la figura:
Figura: SeleccionandoAñadir conexión… opción del menú
Después de seleccionarAñadir conexión… opción del menú,Agregar conexión se abrirá el cuadro de diálogo yNavegar para seleccionar el archivo de base de datos como se muestra a continuación.
Figura: Selección del archivo de la base de datos
Puede probar la conexión.
Figura: Probando la conexión
Puede navegar por la conexión para comprobar la tabla y sus campos.
Figura: Comprobación de la tabla y sus campos de la conexión.
Ahora si seleccionasoleDbConnection1 objeto en elDiseñador de componentes ventana, puede seleccionar la cadena de conexión relacionada con la conexión existente que se acaba de crear, está allí en la propiedad “Cadena de conexión” de laoleDbConnection1 objeto en la ventana Propiedades.
Figura: Selección de la cadena de conexión para el objeto
Finalmente, el modificador del objeto se cambia aProtegido para una mejor accesibilidad.
Figura: Establecer el modificador del objeto
Paso 4: Configuración del objeto del adaptador de datos
Ahora, agrega unOleDbDataAdapterOleDbDataAdapter componente del panel Datos en la caja de herramientas para configurarlo. Haga doble clic en elOleDbDataAdapterOleDbDataAdapter en el panel Datos de la caja de herramientas, iniciará su asistente de configuración y seleccionará la conexión existente como se muestra en la figura:
Figura: Asistente de configuración del adaptador de datos
Después de hacer clicPróximo botón, haga clic en elConsultor de construcción para agregar elproductos tabla, seleccione Todas las columnas y haga clic enDE ACUERDO botón.
Figura: Agregar tabla de productos
Figura: Consultor de construcción
Ahora haga clicFinalizar botón para finalizar el asistente.
Figura: Terminando el mago
Después de configurar el asistente, el oleDbDataAdapter1 se agrega automáticamente a la ventana como se muestra a continuación. Además, puede establecer su modificador enProtegido.
Figura: Recuperando el objeto OleDbDataAdapter en la ventana del diseñador
Paso 5: Generación de DataSet
Como hemos creado una conexión de base de datos y objetos de adaptador de datos, aún necesitamos algo donde podamos almacenar datos después de conectarnos con la base de datos. Aconjunto de datosEl objeto puede almacenar datos con precisión y también podemos generarlos fácilmente usando VS.NET 2005 IDE. Para hacerlo, seleccioneoleDbDataAdaper1 y clic derecho. Aparecerá un menú contextual con algunas opciones. SeleccioneGenerar Conjunto de datos… opción del menú como se muestra a continuación en la figura.
Figura: SeleccionandoGenerar Conjunto de datos… opción del menú
Después de seleccionarGenerar Conjunto de datos… opción del menú, unaGenerar conjunto de datos se abriría el diálogo. Usando este diálogo, podemos seleccionar cuál sería el nombre del nuevoconjunto de datos objeto que se creará y qué tablas se deben agregar aconjunto de datos . ControlarAgregar este conjunto de datos al diseñador opción y haga clicDE ACUERDO como se muestra a continuación en la figura.
Figura: haciendo clicDE ACUERDO botón para generarconjunto de datos
Ahora, puedes ver undataSet11 objeto agregado al diseñador como se muestra a continuación en la figura. Establezca el modificador de objeto enProtegido.
Figura: conjunto de datos generado y agregado a la ventana del diseñador
Cierto código se genera automáticamente en la conexión relacionada con el archivo .cs, el adaptador de datos, el objeto del conjunto de datos.
Figura: Código generado
Paso 6: Usar el Diseñador de hojas de trabajo
Ahora, es hora de abrir el secreto. Seleccione el control y haga clic derecho. Se abriría un menú contextual. Seleccione la opción Worksheets Designer… del menú como se muestra a continuación en la figura.
Figura: SeleccionandoDiseñador de hojas de trabajo… opción del menú
DespuésEditor de colección de hojas de trabajo diálogo (también llamadoDiseñador de hojas de trabajo ) se abrirá, puede ver varias propiedades que se pueden configurar para enlazar elHoja1 con cualquier tabla de la base de datos. seleccionemosFuente de datos propiedad. EscribirdataSet11 en él (que generamos y agregamos a la ventana del diseñador en el paso anterior). Luego haga clic enmiembro de datos propiedad. Escribirproductos como un nombre de tabla aquí como se muestra a continuación en la figura:
Figura: AjusteFuente de datos ymiembro de datos propiedades
Ahora, puedes configurarBindColumns propiedad. Después de hacer clic en él, ahora puede agregar las columnas de enlace y configurar elSubtítulo , Campo de datos (Debe ser igual queproductos campos de tabla) y otras propiedades. Puede configurar elEsAutoCreado averdadero y aplicarValidación y establecer elNúmeroTipode diferentes campos para sus necesidades.
Figura: haciendo clicBindColumns propiedad
Figura: Editor de la colección BindColumn diálogo
Paso 7: agregar algunas líneas de código para la página web
Hemos usadoDiseñador de hojas de trabajo fácilmente y ahora solo tenemos que agregar algunas líneas de código
Primero agregaremosOnInit código relacionado con el evento para inicializarInitializeComponent método para inicializar y crear objetos de conexión, comando, adaptador de datos y conjunto de datos. Estas líneas de código no se agregan con el código generado automáticamente, por lo que debemos agregarlas manualmente.
Figura: Agregando algo de código1
Figura: Agregando algo de código2
Ahora agregamos algo de código en elCargar página manejador de eventos para llenardataSet11 objeto con datos de la base de datos (usandooleDbDataAdapter1 ) y vinculanteGridWeb controlar condataSet11 llamando a suenlace de datos método.
Ejemplo:
C#
//Implementing Page_Load event handler
protected void Page_Load(object sender, EventArgs e)
{
//Checking if there is not any PostBack
if (!IsPostBack)
{
try
{
//Filling DataSet with data
oleDbDataAdapter1.Fill(dataSet11);
//Binding GridWeb with DataSet
GridWeb1.DataBind();
}
finally
{
//Finally, closing database connection
oleDbConnection1.Close();
}
}
}
VB.NET
'Implementing Page_Load event handler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Checking if there is not any PostBack
If Not IsPostBack Then
Try
'Filling DataSet with data
oleDbDataAdapter1.Fill(dataSet11)
'Binding GridWeb with DataSet
GridWeb1.DataBind()
Finally
'Finally, closing database connection
oleDbConnection1.Close()
End Try
End If
End Sub
También puede comprobar el código añadido aCargar página controlador de eventos como se muestra a continuación en la figura:
Figura: Código añadido aCargar página controlador de eventos
De lejos, hemos creado una aplicación de base de datos muy útil. Pero, esta aplicación solo le permite ver los datos de la tabla. Aunque puede editar datos enGridWeb pero cuando cerrará la ventana de su navegador y abrirá su base de datos. Usted encontraría que nada ha cambiado. Significa que los cambios que realizó no se guardan en la base de datos. Entonces, hay algo que tienes que hacer.
Ahora agregaremos algo de código a nuestra aplicación para queGridWeb puede guardar sus cambios en la base de datos real. Vamos a abrirPropiedades panel y seleccioneGuardarComando evento de laGridWeb control de la lista de sus eventos. Si hace doble clic enGuardarComando evento entonces VS.NET 2005 IDE crearáGridWeb1_SaveCommand controlador de eventos para usted. Agregue código a este controlador de eventos para actualizar la base de datos con datos modificados contenidos enconjunto de datos (encuadernado con la hoja de trabajo) usandooleDbDataAdapter1.
Ejemplo:
C#
//Implementing the event handler for SaveCommand event
protected void GridWeb1_SaveCommand(object sender, EventArgs e)
{
try
{
//Getting the modified data of worksheet as a DataSet
DataSet dataset = (DataSet)GridWeb1.WebWorksheets[0].DataSource;
//Updating database according to modified DataSet
oleDbDataAdapter1.Update(dataset);
}
finally
{
//Closing database connection
oleDbConnection1.Close();
}
}
VB.NET
'Implementing the event handler for SaveCommand event
Protected Sub GridWeb1_SaveCommand(ByVal sender As Object, ByVal e As System.EventArgs)
Handles GridWeb1.SaveCommand
Try
'Getting the modified data of worksheet as a DataSet
Dim dataset As DataSet = CType(GridWeb1.WebWorksheets(0).DataSource, DataSet)
'Updating database according to modified DataSet
oleDbDataAdapter1.Update(dataset)
Finally
'Closing database connection
oleDbConnection1.Close()
End Try
End Sub
También puede comprobar el código añadido aGridWeb1_SaveCommand controlador de eventos como se muestra a continuación en la figura:
Figura: Código añadido aGridWeb1_SaveCommand controlador de eventos
Ahora, si guardará sus cambios en la base de datos usandoAhorrar botón de laGridWeb , definitivamente se salvarían.
Paso 8: ejecutar su aplicación
Finalmente, podemos compilar y ejecutar nuestra aplicación presionandoCtrl+F5 o haciendo clicComenzar botón. En el cuadro de diálogo de depuración, puede especificar la opción de depuración adecuada y hacer clic enDE ACUERDO como se muestra a continuación en la figura.
Figura: Aplicación en ejecución
Después de la compilación,Predeterminado.aspx La página de nuestra aplicación web se abrirá en una nueva ventana del navegador donde podemos ver todos los datos cargados desde la base de datos como se muestra a continuación:
Figura: Datos cargados enGridWeb controlar desde la base de datos
Cuando se cargan datos enGridWeb control entonces sentiría que Aspose.Cells.GridWeb proporciona un control implícito de datos a sus usuarios. Verifiquemos qué tipo de funciones de manipulación de datos ofreceGridWeb a sus usuarios.
Validación de datos
Aspose.Cells.GridWeb crea automáticamente reglas de validación apropiadas para todas las columnas enlazadas de acuerdo con sus tipos de datos definidos en la base de datos. Puede ver el tipo de validación de una celda al pasar el puntero del mouse sobre ella como se muestra a continuación en la figura:
**Figura:**Verificando el tipo de validación de una celda
En la figura anterior, podemos ver que la celda seleccionada contiene**<INT>** tipo de validación, lo que significa que los usuarios solo pueden ingresar un valor entero; de lo contrario, se producirá un error de validación. Es más,**<OBLIGATORIO>** muestra que el valor de**identificación de producto** se requiere que sea enviado por el usuario.
Eliminación de filas
Para eliminar una fila, primero debe seleccionar una fila (o cualquier celda de la fila) y seleccionarBorrar fila opción del menú contextual como se muestra a continuación:
Figura: SeleccionandoBorrar fila opción del menú
Después de seleccionarBorrar fila del menú, la fila se elimina de laGridWeb . Ahora haga clicahorrar botón de laGridWeb para eliminar ese registro en la tabla de la base de datos original.
Figura: Datos de cuadrícula (después de eliminar una fila)
Edición de filas
También puede editar datos en celdas o filas y luego hacer clic enAhorrar botón para guardar los cambios.
Figura: Datos de cuadrícula (edición de registro 1)
Figura: Datos de cuadrícula (edición de registro 2)
Adición de filas
Para agregar una fila, seleccioneAñadir fila opción del menú contextual como se muestra a continuación:
Figura: SeleccionandoAñadir fila opción del menú
Se agregará una nueva fila a la hoja al final de las filas después de seleccionarAñadir fila opción del menú. A la izquierda de la fila recién agregada, notará unaasterisco marca, lo que indica que la fila es una recién agregada.
Figura: Nueva fila agregada a Grid
Después de ingresar los valores en la nueva fila, haga clic enAhorrar botón para confirmar los cambios en la tabla de base de datos original como se muestra a continuación
Figura: Guardar cambios en la tabla de la base de datos haciendo clic enAhorrar botón