CONEXIÓN A BASE DE DATOS SQL SERVER DESDE ASP.

NET (C#)

Para conectar ASP.NET, usando C# a un motor de base de datos como Sql Server, lo común es
hacerlo usando dos tipos de conexión, la primera usando un objeto del tipo DataAdapter y la otra
es usando un objeto del tipo Connection. Esta última opción es la que debemos usar si el acceso lo
haremos por medio de un objeto Command en lugar del DataAdapter, por ejemplo, para acceder a
un procedimiento almacenado.

En la presente guía usaremos el DataAdapter, en el cual usaremos un objeto del tipo DataTable
para traer los datos y un objeto tipo DataRow, para recorrer estos datos.

Este mismo código es válido si la aplicación es para Windows o para una página web.

Conectar usando un objeto SqlDataAdapter

Para realizar el ejemplo completo, vamos a estructurar primero el ambiente necesario para ello.

Creemos inicialmente una base de datos llamada ElectivaVI, y dentro de ella crearemos la
siguiente tabla.

CREATE TABLE [dbo].[TbUsuarios](

[UsuDocumento] [int] NOT NULL,
[UsuNombres] [varchar](50) NULL,
[UsuApellidos] [varchar](50) NULL,
[UsuCorreo] [varchar](120) NULL,
[UsuPerfil] [varchar](20) NULL,
[UsuLogin] [varchar](30) NULL,
[UsuPassword] [varchar](20) NULL,
[UsuEstado] [varchar](15) NULL,
CONSTRAINT [PK_TbUsuarios] PRIMARY KEY CLUSTERED
(
[UsuDocumento] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Ahora, crear el proyecto web en Visual Studio, seleccione como código de desarrollo C#.

Agregue al proyecto una clase llamada Conex.cs, el código de la clase es el que se muestra a
continuación.
Se definen las variables necesarias para la Conexión, como la Cadena de Conexión, el DataAdapter,
el DataTable, el DataRow y una variable tipo String para las consultas. Tenga presente que debe
cambiar el nombre del servidor por el de su computador.

Luego se define una función llamada operarRegistros, esta función nos servirá para hacer las
consultas, las inserciones, las actualizaciones y la eliminación de registros.

Lo primero que se hará es realizar un test de conexión, agregaremos un nuevo Formulario Web
Forms, insertamos un botón y un label y en el evento clic del botón programaremos lo siguiente:
Para que nuestro SqlDataAdapter funcione, al igual que el DataTable, hay que agregar las dos
librerías.

using System.Data;
using System.Data.SqlClient;

Ejecute la aplicación, si todo está bien debe conectarse correctamente al servidor.

Inserción de registros

Agreguemos un nuevo formulario llamado frmnuevousuario.aspx, con el diseño como el que se

observa en la imagen. Para el diseño se agregó al formulario una hoja de estilos, el código de la
hoja de estilos se deja a continuación del diseño del formulario.

Los nombres de los controles, son:

 TxtDocumento
 TxtNombres
 TxtApellidos
 TxtCorreo
 CmbPerfil
 TxtLogin
 TxtPassword
 CmbEstado.

El código de la hoja de estilo es:

BODY {
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: .9em;
color:#000000;
background-color:#ffffff;
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0px 0px;
}

a.sinsubraya
{
text-decoration:none;
color:#ff0000;
font-weight: bold;
}

a.sinsubraya:hover
{
color:#000000;
text-decoration:underline;
font-weight: bold;
}

TABLE
{
width: 100%;
background-color: #ffffff;
border: 1px #000000 solid;
border-collapse: collapse;
border-spacing: 0px;
alignment-adjust: central;
}

TABLE.ficha
{
width:60%;
background-color: #ffffff;
border: 1px #000000 solid;
border-collapse: collapse;
border-spacing: 0px;
}

TABLE.mensaje
{
width:460px;
background-color: #ffffff;
border: 0px;
}

TABLE.mensaje2
{
width:90%;
background-color: #ffffff;
border: 1px #ffffff solid;
border-collapse: collapse;
border-spacing: 0px;
}

TD
{
border-bottom: 1px #0C9816 dotted;
text-align: left;
font-weight: bold;
font-size: .9em;
color: #000000;
background-color: #ffffff;
}

TD.derecha
 {
border-bottom: 1px #0C9816 dotted;
text-align: right;
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: .9em;
color: #000000;
background-color: #ffffff;
}

TD.primeralinea
{

border-bottom: 1px #0C9816 dotted;

border: 1px dotted #0c9816;
text-align: center;
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: .9em;
color: #ffffff;
background-color: #76B77A;
}
TD.primeralineaizquierda
{

border-bottom: 1px #0C9816 dotted;

border: 1px dotted #0c9816;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: .9em;
color: #ffffff;
background-color: #76B77A;
}
TD.segundalinea
{

border-bottom: 1px #0C9816 dotted;

border-right: 1px #0C9816 dotted;
border-left: 1px #0C9816 dotted;
text-align: center;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .6em;
color: #404040;
background-color: #ffffff;
}
TD.segundalineaizquierda
{

border-bottom: 1px #0C9816 dotted;

border-right: 1px #0C9816 dotted;
border-left: 1px #0C9816 dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .6em;
 color: #404040;
background-color: #ffffff;
}

TD.segundalineaderecha
{

border-bottom: 1px #0C9816 dotted;

border-right: 1px #0C9816 dotted;
border-left: 1px #0C9816 dotted;
text-align: right;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .6em;
color: #404040;
background-color: #ffffff;
}

input
{
BACKGROUND-COLOR: #ffff99;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 8pt;
border: 1px solid #000000;
text-align: center;
}

select
{
BACKGROUND-COLOR: #ffff99;
BORDER-BOTTOM: #0C9816 1px solid;
BORDER-LEFT: #0C9816 1px solid;
BORDER-RIGHT: #0C9816 1px solid;
BORDER-TOP: #0C9816 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 8pt;
}

textarea
{
BACKGROUND-COLOR: #ffff99;
BORDER-BOTTOM: #0C9816 1px solid;
BORDER-LEFT: #0C9816 1px solid;
BORDER-RIGHT: #0C9816 1px solid;
BORDER-TOP: #0C9816 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 7pt;
}

Al CmbPerfil, agregar dos opciones: Administrador y Consulta; y al CmbEstado: Activo e Inactivo.

El botón Enviar, el siguiente sería el código, antes de ingresar el código, debemos de crear una
instancia de la clase Conex.

Conex f = new Conex();

Esta línea debe venir después de la definición de la clase, después del public partial class

No olvidar agregar las dos librerías.

El botón cancelar, es como se muestra en la siguiente imagen.

Hasta aquí puede probar la aplicación para ir mirando los resultados.

Eliminar un registro

Para la eliminación de un registro, agregaremos un nuevo Formulario de Web Forms (frmeliminar)

y haremos el diseño que se observa en la imagen.

Los controles tendrán los mismos nombres a excepción del primero que será un combo y se
llamará CmbDocumento, procederemos ahora a mostrar en este combo los documentos y
nombres de los usuarios que están registrados en la tabla TbUsuarios.

Para ello seleccione el combo, clic en la pestaña de la derecha y luego seleccionamos Elegir origen
de datos, se muestra la siguiente ventana:
 En seleccionar un origen
de datos, de clic en Nuevo
Origen de Datos, clic en
Aceptar

Seleccione Base de Datos y

clic en Aceptar

Clic en Nueva conexión y

luego Aceptar
 Ingrese aquí el nombre del
Servidor

Seleccione aquí la base de

datos y clic en Aceptar.

Seleccione la conexión
creada y clic en Siguiente.
 Clic en Siguiente

En la siguiente ventana que aparece, clic en Finalizar

Coloque la configuración
como en la figura y clic en
Aceptar.

Seleccione la opción
habilitar AutoPostBack

Agregue dos botones al final del formulario, uno que diga eliminar y otro cancelar.
Vamos al código.

Código del CmbDocumento.

La función mostrarDatos()

Esto lo que nos permite es que cuando en el combo se seleccione algún documento, el
automáticamente me muestra los datos del documento eliminado, esto es para validar antes si
realmente ese es el usuario que deseamos eliminar.
El botón Eliminar

Validando el botón eliminar

Para ello seleccionamos el botón eliminar, vamos a las propiedades y seleccionamos la propiedad
OnClientClick, y allí escribimos lo siguiente: return confirm('¿Esta seguro de eliminar?');

Ejecute y valide el cambio.

Actualización de un registro

Para actualizar un registro podemos hacer dos cosas, agregar un nuevo formulario con el mismo
diseño del formulario eliminar, simplemente cambiar el eliminar por Actualizar, pero por
versatilidad y sencillez lo vamos a hacer en el mismo formulario de eliminar, para ello modifique el
texto del botón cancelar por Actualizar; procedemos a ingresar el siguiente código.

Uso del GridView

El GridView es un elemento de ASP.NET que es muy útil al momento de trabajar con las tablas, en
las páginas siguientes vamos a ver cómo podemos trabajarlo.

Agreguemos un Web Forms llamado frmadminusuarios.aspx.

Inserte en este formulario una tabla, con una columna y tres filas, en la segunda fila inserte un
GridView, observa la imagen.
Seleccione la grilla, de clic en
la pestaña superior derecha,
seleccione Formato
Automático, seleccione el de
su agrado y de clic en
Aceptar.

Vuelva a seleccionar la grilla, clic en la pestaña y en Elegir Origen de Datos, de clic en Nuevo
Origen de Datos.

Selecciona la conexión que ya está allí creada y clic en el Botón Siguiente.

 Seleccione la tabla
TbUsuarios y luego de
clic en el botón
Avanzadas, y seleccione
la opción Generar
instrucciones Insert,
Update y Delete y de clic
en Aceptar.

Clic en Siguiente y luego Siguiente para finalizar el asistente.

El resultado sería como se observa en la imagen.

En las tareas de GridView, habilitar las siguientes opciones:

Ejecute la aplicación y observe los resultados.

Vamos a realizar algunas modificaciones en la grilla, para ver más en detalle las utilidades que
tiene, empezaremos por realizar una confirmación en el botón eliminar, ya que, si prueba, este
botón elimina el registro directamente sin antes pedir confirmación del usuario.

Pedir confirmación del botón eliminar en el GridView

Para llevar a cabo el procedimiento, seleccione la grilla y desmarque la opción Habilitar

Eliminación.

De clic en Editar Columnas

 Seleccione
ButtonField y clic
en el botón
Agregar

Propiedad
ButtonType en
Link, Text:
Eliminar y de clic
en la opción que
dice Convertir
este informe en
TemplateField

Con los botones

de Arriba, Abajo,
si lo desea ubique
el botón eliminar
de segundo (ver
imagen), Clic en el
botón Aceptar.

Como resultado tendremos:

Seleccione la grilla, vaya al código aspx, ubique las siguientes líneas y haga los cambios
correspondientes para que quede como se ubica en el resaltado de la imagen.

Ejecute la aplicación y notará que antes de eliminar el registro, pide confirmación.

Insertar botón nuevo en el GridView

El GridView debe tener activada sus opciones Habilitar Paginación, Habilitar Ordenación y
Habilitar Edición, seleccione la opción Editar Columnas.

Añada un ButtonField a la
grilla y establezca su
propiedad CommandName
en Insert. Los usuarios
podrán hacer clic en el botón
Insertar para insertar un
nuevo registro. En la
propiedad Text coloque lo
mismo. Clic en Aceptar
 Haga clic derecho en el
GridView y seleccione Editar
plantillas, luego EmptyData
Template. Arrastre y suelte un
control DetailsView (opción
Datos) dentro de la planilla,
establezca la propiedad
DataSourceID para
SqlDataSource1, seleccione
Habilitar Inserción

Establezca la propiedad DefaultMode en Insertar

del DetailsView1, de esta manera cuando la
plantilla de datos se muestra, aparece listo para
ingresar datos (ver imagen anterior).

Termine la edición y vuelva al formulario.

Ahora vaya al código y escriba el siguiente código en el evento RowCommand del gridView como
se muestra a continuación.

En el DetailsView, en el evento ItemInserted, insertar el siguiente código.

 Seleccione ahora el
DetailsView, y en la
pestaña tareas de
DetailsView, seleccione la
opción Editar Plantillas.

Seleccione FooterTemplate e
inserte un botón, tal y como se
ve en la imagen, la
programación del botón será
la siguiente:

Ejecute la aplicación y hasta aquí el resultado debe ser como se muestra en las siguientes
imágenes.

De clic en
Insert
Haga los cambios correspondientes para que el template quede mejor para el ingreso de datos de
parte del usuario, tales como cambiarles el tamaño a los campos de texto, en Perfil debe aparecer
el combo con los perfiles; En Estado, un combo, al igual que en Perfil, que en password sea del tipo
correspondiente, etc.

Mejore el encabezado de la tabla con los títulos correspondientes: Documento, Nombres…