VBASIC-ASPX

Objetivo de la presentación:

General •Aplicar los pasos con el propósito de crear una muestra de aplicación web utilizando la herramienta Visual Studio 2008.

Específicos Creación de la Base de Datos en SQL Server Expresss.Creación de una pagina para implementar la instrucción para el ingreso de datos en una tabla.Creación de una pagina para implementar la instrucción de edición de datos para una tabla.

PROCESO DE DESARROLLO DE APLICACIÓN WEB-ASPX (Transacciones)

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

Creación de la Base de datos:

•Utilizando el entorno de desarrollo del sitio (Visyual Studio 2008), agregar un nuevo elemento de tipo Base de Datos(extension mdf) y renombrarlo como catalogo.mdf y crear internamente una tabla llamada cliente.•La tabla cliente debe contener los siguientes campos : rut varchar(10), nombre varchar(20), apel varchar(20), fono varchar(15),direc varchar(30), correo varchar(30). Esta tabla sera nuestro elemento de transacción).•También puede ser desarrollada en MSAccess y exportada a SQL Server.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

Creación de la Base de datos:

•Utilizando el entorno de desarrollo del sitio (Visyual Studio 2008), agregar un nuevo elemento de tipo Base de Datos(extension mdf) y renombrarlo como catalogo.mdf y crear internamente una tabla llamada cliente.•La tabla cliente debe contener los siguientes campos : rut varchar(10), nombre varchar(20), apel varchar(20), fono varchar(15),direc varchar(30), correo varchar(30). Esta tabla sera nuestro elemento de transacción).•También puede ser desarrollada en MSAccess y exportada a SQL Server.•Utilizando la interfaz de usuarios de la aplicación de creación del sitio web, iniciar implementación de las paginas para las transacciones.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

A. INGRESO DE DATOSEn base a la interfaz de captura de datos, se describe a continuación el ingreso de datos a la tabla Cliente:1.- Esta interfaz posee como elementos de captura de datos una Tabla grafica, 6 TextBox s, un Button y un Link Button.2.- Generar el enlace entre la interfaz de control de transacciones y la que se encuentra a continuación.3.- Una vez creada esta interfaz y llenado los campos con los datos, dar click al botón de aceptar datos para efectuar la transacción con la BD. En la pagina siguiente se aprecia el código de inserción de datos.

VBASIC-ASPX

Ajuste de Datos Página ASPX

Imports SystemImports System.DataImports System.Data.SqlClientPartial Class Cliente Inherits System.Web.UI.Page Protected Sub btnAgregar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAgregar.Click Dim objConex As New SqlConnection 'Crea un canal de conexion Dim objCmd As New SqlCommand 'Crea las sentencia u ordenes Dim rut As String Dim nombre As String Dim apel As String Dim fono As String Dim direc As String Dim correo As String Dim servidor As String servidor = "C:\WebSiteCatalogo\App_Data\Catalogo.mdf" 'Posicion del(servidor) objConex.ConnectionString = "Data Source=.\SQLEXPRESS;AttachDbFilename=" & servidor & ";Integrated Security=True;User Instance=True" rut = txtRut.Text nombre = txtNombre.Text apel = txtApel.Text fono = txtFono.Text direc = txtDirec.Text correo = txtCorreo.Text objCmd.Connection = objConex

VBASIC-ASPX

Ajuste de Datos Página ASPX

objCmd.CommandText = "INSERT INTO CLIENTE(rut,nombre,apel,fono,direc,correo) VALUES (@rut,@nombre,@apel,@fono,@direc,@correo)" objCmd.Parameters.AddWithValue("@rut", rut) objCmd.Parameters.AddWithValue("@nombre", nombre) objCmd.Parameters.AddWithValue("@apel", apel) objCmd.Parameters.AddWithValue("@fono", fono) objCmd.Parameters.AddWithValue("@direc", direc) objCmd.Parameters.AddWithValue("@correo", correo) objConex.Open() objCmd.ExecuteNonQuery() objConex.Close() objCmd.Parameters.Clear() MsgBox("Registro Ingresado a Cliente")  End SubEnd Class

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS1. Elija pagina donde desea insertar un grilla de datos para edición de ellos, objeto poder presentar, modificar o eliminarlo desde la tabla de BD.2. Seleccione u objeto de datos GridView desde la Paleta Grafica de VStudio, tal como se aprecia en la grafica y arrástrelo a la pagina aspx.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS3. En la página aspx se presentara de la siguiente forma para poder configurar la grilla de datos 4. En el lado superior derecho del objeto GridView clickear sobre el símbolo de redireccionamiento que presenta “< “. Aparecerá una ventana de configuración de datos que se cargaran al objeto.5. En “Elegir origen de datos:” (Ninguno), seleccionar desde el selector del combo box el origen de datos < Nuevo origen de datos…>

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS6. Al seleccionar < Nuevo origen de datos…>, aparece el “Asistente para la configuración de orígenes de datos”, seleccionar “Base de datos”. Al dar click sobre el tambor, asistente especifica por defecto un origen de datos: SqlDataSource1, dar Aceptar para continuar con configuración.

7. Al dar Aceptar , aparece la pagina de configuración de origen de datos para SqlDataSource1. Desde el combo que esta sobre el término “Cadena de Conexión” selecciona uno existente o simplemente dar click sobre el Botón “Nueva conexión…”.

8. Al dar dar click sobre el Botón “Nueva conexión…”. Aperece una ventana para buscar la ruta de la base de datos donde se requieren sacar datos. En esta nueva ventana (Agregar conexión), seleccione dando click sobre el botón “Examinar…”.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS9. Al dar dar click sobre el Botón “Nueva conexión…”. Aparece una ventana para buscar la ruta de la base de datos donde se requieren sacar datos. En esta nueva ventana (Agregar conexión), seleccione dando click sobre el botón “Examinar…”.

10. Base de datos y hacer click en botón “Abrir”

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS11. Al dar click sobre el Botón “Abrir”, se carga en la ventana de conexión la ruta de ubicación de la fuente de datos, objeto proseguir con configuración. Dar aceptar para cargar el origen de datos.

12. Una vez que aparece en forma definitiva el origen de datos, dar click sobre el Botón “Siguiente”, aparecerá la venta de configuración, donde se pide guardar la conexión implementada.13. Dar click sobre el Botón “Siguiente”.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS14. Aparece ventana de configuración de la instrucción SELECT, seleccionar Tabla y luego la casilla con * si desea todos los datos de la tabla, o de lo contrario seleccione las casillas que requiera para la presentación de datos.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS15. Seleccionar opción de botones “Avanzadas…, objeto ajustar las instrucciones de edición que va a presentar la grilla de datos. Marque ambas cajas de selección: Generar instrucciones Insert, Update y Delete y Usar concurrencia optimista. Luego dar Aceptar

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS16. Luego de dar Aceptar, se genera una ventana para efectuar una consulta de prueba y para ver los datos. Una vez revisado dar Finalizar.

VBASIC-ASPX

Ajuste de Datos y Edición de Datos por Página en ASPX

B. EDICION DE DATOS17. Finalmente se llega a la interfaz de inicio. En la Ventana de Tareas de GridView seleccionar todas las casillas del pie de pagina (Habilitar paginación hasta Habilitar selección).18. Compilar y probar la aplicación. Presenta en esta instancia los datos y los correspondientes controles de edición: Editar, Eliminar, Seleccionar. Objeto pueda actualizar datos en forma directa.