El documento describe los pasos para crear una aplicación web usando Visual Studio 2008 que permite ingresar y editar datos en una base de datos SQL Server. Incluye la creación de una base de datos con una tabla, el desarrollo de páginas para insertar y editar datos, y el uso de controles como GridView y SqlDataSource para mostrar y manipular los datos.

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

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

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

4. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
A. INGRESO DE DATOS
En 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.

5. VBASIC-ASPX
Ajuste de Datos Página ASPX
Imports System
Imports System.Data
Imports System.Data.SqlClient
Partial 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:WebSiteCatalogoApp_DataCatalogo.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

6. 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 Sub
End Class

7. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
1. 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.

8. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
3. 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…>

9. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
6. 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…”.

10. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
9. 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”

11. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
11. 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”.

12. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
14. 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.

13. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
15. 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

14. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
16. Luego de dar Aceptar, se genera una ventana para efectuar una consulta de prueba y para ver
los datos. Una vez revisado dar Finalizar.

15. VBASIC-ASPX
Ajuste de Datos y Edición de Datos por Página en ASPX
B. EDICION DE DATOS
17. 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.