Ing. Dulfran A. Montaño M.

17 de Septiembre de 2015

Items Descripción
Instructivo Técnico Aplicación Web Asp.net + C# + SQLSERVER
Fecha Creación Septiembre 17 de 2015
Diseñado Por Dulfran A. Montaño M.
Categoría Desarrollo Web
Nivel Avanzado
Herramienta SQLSERVER, VISUAL ESTUDIO

Introducción
ASP.NET es un modelo de desarrollo Web unificado que incluye los servicios necesarios para crear
aplicaciones Web empresariales con el código mínimo. ASP.NET forma parte de .NET Framework y al
codificar las aplicaciones ASP.NET tiene acceso a las clases en .NET Framework. El código de las
aplicaciones puede escribirse en cualquier lenguaje compatible con el CommonLanguageRuntime
(CLR), entre ellos Microsoft Visual Basic, C#, JScript .NET y J#. Estos lenguajes permiten desarrollar
aplicaciones ASP.NET que se benefician del CommonLanguageRuntime, seguridad de tipos,
herencia, etc.
ASP.NET incluye:
 Marco de trabajo de página y controles
 Compilador de ASP.NET
 Infraestructura de seguridad
 Funciones de administración de estado
 Configuración de la aplicación
 Supervisión de estado y características de rendimiento
 Capacidad de depuración
 Marco de trabajo de servicios Web XML
 Entorno de host extensible y administración del ciclo de vida de las aplicaciones
 Entorno de diseñador extensible

Fuente: https://msdn.microsoft.com/es-es/library/4w3ex9c2(v=vs.100).aspx

Información del Documento: en este instructivo aprenderemos los pasos para crear una aplicación en
ASP.net, en este caso utilizaremos el lenguaje de Programación C# para desarrollar nuestro código, y
SQLSERVER como sistema de almacenamiento.

Antes de empezar la codificación de nuestro ejercicio construiremos la base de datos que permitirá, realizar
el almacenamiento de la información.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Pasos para crear la base de datos.

Paso 1: Ingresar a SQLSERVER, por medio de SQLSERVER MANAGEMENT STUDIO

Paso 2, Creación de la Tabla

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Paso 3, Agregar Campos a la Tabla

Paso 4, Creación de Procedimiento Almacenado “nueva_persona”

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Paso 5, Creación de Procedimiento Almacenado “consultar_personas”

Resultado: base de datos creada con una tabla y dos procedimientos almacenados.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Primero conoceremos el entorno de desarrollo de Visual Estudio como se ilustra en la Imagen 1

Imagen 1 – Entorno Visual Estudio

Ahora crearemos nuestro Proyecto para la aplicación Web

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 2 – Creando el Proyecto Aplicación Web

En la imagen 2, podemos observar la secuencia para crear el proyecto para la aplicación Web,
primero damos clic en Archivo, luego escogemos la opción que dice Nuevo, y luego opción
Proyecto.

Imagen 3 – Agregando Aplicación Web a Proyecto

Una vez ejecutamos los pasos de la imagen 2, el resultado es el que podemos observar en la
imagen 3, las aplicaciones Web con ASP.net soportan trabajarlas en dos lenguajes de
programación (Visual Basic) y/o (Visual C#), es importante tener esto en cuenta ya que la sintaxis y
forma de trabajo de ambos lenguajes es distinta, en mi caso yo utilizare Visual C# para la
construcción de la Aplicación Web.

Entonces procedemos a escoger visual C# como lenguaje de programación y luego a mano derecha
escogemos Aplicación web vacía de ASP.NET, cambiamos el nombre del proyecto en la casilla que
dice nombre en la parte inferior, yo lo llamare “proy_mipaginaweb”, como se ilustra en la imagen
4.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 4 – Asignar Nombre y Leguaje de Aplicación web

Imagen 5 – Proyecto Aplicación Web

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

En la imagen 5, podemos observar el resultado de los pasos ejecutados anteriormente la pantalla

de desarrollo del proyecto, en la parte izquierda podemos observar el proyecto y sus clases, en
este caso como escogimos en el paso anterior “aplicación web vacía” no contiene ningún
formulario.

En la parte derecha podemos observar la paleta de controles y propiedades, esta se utiliza para
cambiar las configuraciones de los controles que agreguemos al formulario web.

Imagen 6 – Agregando las Capas al Proyecto

Como es bien sabido por todos nosotros a nivel de programación existen dos estándares para
trabajar desarrollo de software “MVC” y/o “3 Capas”, en la imagen 5 podemos observar la
secuencia para crear las capas del proyecto, esto se utiliza para separar las clases de (codificación,
diseño de formularios y conexiones a base de datos), en este caso crearemos 3 (Capa_Datos,
Capa_Logica, Capa_Diseño).
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 7 – Capas Agregadas a Proyecto

Como podemos observar en la imagen 7, ya tenemos nuestras capas creadas en el proyecto en la

“Capa_Datos”, estarán todas las conexiones con nuestro servidor en este caso base de datos, en la
“Capa_Logica”, estarán todas las clases que permiten Agregar,Actualizar,Borrar,Consultar ( CRUD)
la información de la base de datos a nuestra aplicación, en la “Capa_Diseño”, estarán todos los
formularios y vistas que le permiten al usuario interactuar con la aplicación y datos.

Imagen 8 – Insertar Formulario a Proyecto

En la Imagen 8, podemos observar que hemos seleccionado la “Capa_Diseño”, donde se colocan

todas las vistas y formularios que le permiten al usuario interactuar con la aplicación y datos,
damos clic derecho en la “Capa_Diseño”, escogemos la opción agregar, luego la opción
Formularios Web Forms.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 9 – Agregar Formulario a Proyecto

Imagen10 – Formulario Agregado a Proyecto

En la Imagen 10, podemos observar el resultado de la creación del proyecto, ahora nos indica que
en la “Capa_Diseño”, hay un formulario llamado “frmdatospersonales.aspx”, y en la parte central
nos muestra el código básico del formulario código HTML con ASP.NET, en la parte derecha se
visualizan los controles que permiten interactuar en los diferentes formularios, el formulario si nos
damos cuenta en la parte inferior central, muestra tres opciones (Diseño, Dividir, Código), la
opción código es la que se ilustra en la imagen 10, que nos permite agregar las funciones del
formulario mediante código.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 11 –Vista Dividir

La vista dividir nos permite trabajar el formulario de manera que podamos observar el código y
también visualizar el diseño.

Imagen 12 – Vista Diseño

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

La vista diseño nos permite trabajar el formulario y sus componentes de forma visual, esto quiere
decir que no tenemos que codificar nada en el formulario el mismo interprete de ASP.NET se
encarga de la creación de dichos comandos, como se ilustra en la Imagen 12.

Para mayor información Lenguaje de Etiquetas HTML consulte: https://www.uv.es/jac/guia/

A continuación veremos cómo crear la interfaz de desarrollo del formulario web.

Lo primero que debemos entender es que las aplicaciones web como las aplicaciones de escritorio
trabajan bajo formularios, los cuales le permiten al usuario de la aplicación interactuar con la
información.

Los controles básicos que podemos encontrar en la barra de herramientas ubicada en la parte
derecha de la aplicación.

Imagen 13 – Cuadro de Herramientas

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Después de saber dónde están ubicados los controles procedemos agregar los controles que
utilizaremos en nuestra aplicación pueden ser (Button, TextBox, GridView,Label), en el caso de las
aplicaciones web, los entornos de desarrollo son distintos a los entornos de escritorio es
recomendable el uso de tablas para la ubicación de los controles, esto facilita la tarea del diseño
de los formularios, entonces arrastramos los controles que necesitemos a nuestro formulario.

Imagen 14 – Creando una Tabla

Las tablas como bien habíamos mencionado anteriormente, nos ayudan al diseño de los
formularios web, la forma de crear una nueva tabla es, primero nos ubicamos en la parte del
formulario donde queremos que aparezca y luego damos clic en el menú “TABLA”, luego
seleccionamos la opción “Insertar tabla”.

Imagen 15 – Configurando la tabla

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Como podemos darnos cuenta en la Imagen 15, nos aparece un cuadro de configuración de la
tabla, una tabla está conformada por filas y columnas, las filas están ubicadas de forma horizontal
y las columnas de forma vertical, en este caso como nuestro proyecto capturara información
personal destinaremos que los datos que vamos a capturar son: (Documento, Nombres, Apellidos,
Teléfono), lo que implica que tendremos 2 columnas una donde estarán ubicadas las etiquetas
mencionadas anteriormente y otra donde ira el control en este caso TextBox para capturar la
información.

Imagen 16 – Tabla con etiquetas y controles agregados

Como podemos observar en la Imagen 16, la tabla ya tiene agregadas las etiquetas mencionadas
anteriormente, y también en la segunda columna podemos apreciar 4 cajas de texto(TextBox), que
nos permitirán digitar los datos, esto lo logramos arrastrando el control hacia la posición del
formulario donde queremos que aparezca el control.

Luego procedemos a cambiarle el nombre a los controles del formulario el estándar para
programar dice que las cajas de texto se deben llamar de la siguiente manera “txtnombrecontrol”,
de esta manera se utiliza un nombre estandarizado para todos los controles Cajas de Texto
(TextBox), para los Botones (Button) se utiliza “btnnombrecontrol”, para el GridView o
DataGridView se utiliza “dtgnombrecontrol”, sabiendo esto procedemos a cambiar el nombre de
los controles.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 17 – Cambiar Nombre a Controles

Como podemos observar en la Imagen 17, lo primero que debemos hacer es seleccionar el control
en el formulario y después en la pestaña propiedades en la opción (ID), colocamos el nombre del
control teniendo en cuenta el estándar “txtnombrecontrol”, y así lo hacemos con todos.

Si queremos darle una apariencia un poco profesional a nuestro formulario podemos utilizar la
opción formato lo que debemos hacer primero es seleccionar la tabla que acabamos de construir y
configurar, luego damos clic en la opción formato.

Imagen 18 – Colocar Formato a las tablas del Formulario

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 19 – Resultado Colocar Formato Bordes y Sombreados a tabla

En la Imagen 19, podemos observar el resultado de los pasos ejecutados en las imágenes
anteriores podemos darnos cuenta que se le coloco un borde de color verde a nuestro formulario,
lo cual hace que la apariencia de la aplicación sea un poco más agradable, “tendrás muchas
opciones para escoger ya tu imaginación te guiara a un diseño óptimo para tu aplicación”.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 20 – Formulario con todos los controles utilizados

Como podemos darnos cuenta en la Imagen 20, se ilustra el formulario que utilizaremos en
nuestra aplicación web, contiene los siguientes controles:

1 Button (btnregistrar), 4 TextBox(txtdocumento,txtnombres, txtapellidos,txttelefono) 1 GridView

(dtgdatospersonales)

Teniendo en cuenta lo anterior procedemos a probar el diseño del formulario ejecutando la

aplicación, esto lo hacemos dando clic en el botón

En este caso nos damos cuenta que aparece el Navegador Google Chrome, esto es porque
tenemos el navegador de Google predeterminado pero podemos seleccionar el de nuestra
elección como se ilustra en la Imagen 21.

Imagen 21 – Cambiar Navegador de Preferencia

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 22 – Ejecución de Aplicación web

En la Imagen 22, podemos observar el resultado de la ejecución de la aplicación web, en este caso
observamos la palabra “localhost” dentro de la barra de direcciones lo que quiere decir que la
aplicación está en un ámbito local ejecutándose en la misma computadora.

El paso siguiente será programar la clase que nos permite conectarnos con la base de datos, para
ellos lo primero que debemos hacer es crear la clase.

Imagen 23 – Creación de una nueva Clase

Como podemos observar en la Imagen 23, vamos a crear la clase que nos conectara con la base de
datos, debemos tener en cuenta que primero damos clic derecho en la Capa_Datos, ya que en la
programación en capas esta capa es la que contiene todas las operaciones con base de datos
incluida la conexión.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 24 – Asignar nombre a clase

Como podemos observar en la imagen 24, nos aparece una ventana donde colocamos el nombre a
la clase que vamos a crear en la Capa_Datos, en este caso utilizamos el nombre de “conexión”.

Imagen 25 – Codificación clase conexión

Como podemos observar en la Imagen 25, hemos realizado la codificación de la clase conexión,
agregamos dos librerías usingSystem.Datay usingSystem.Data.SqlClient que nos permiten trabajar
con SQLSERVER, luego agregados el “String de conexión” que nos permite conectarnos con el
servidor de base de datos SQLSERVER.

String de Conexión:

publicSqlConnection connection = newSqlConnection("Data Source=SERVER-

TADSI2\\SQLEXPRESS2;Initial Catalog=bdcrud;Integrated Security=True")

El String de conexión está compuesto por varios aspectos, uno es una variable pública llamada
connection que se utiliza para referenciar la conexión en otras clases, Data Source se utiliza para
referenciar el Servidor y la instancia a utilizar en este casoSERVER-TADSI2\\SQLEXPRESS2, la
conexión que se establece con la base de datos, donde indicamos la base de datos donde nos
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

conectaremosInitialCatalog=bdcrud, y por último el sistema de seguridad que utilizaremos en

este caso utilizaremos el esquema de seguridad integrado por WindowsIntegrated
Security=True.

Luego procedemos a realizar codificación de la clase que nos permite agregar un nuevo dato en la
base de datos, esta clase la crearemos en la Capa_Logica.

Imagen 26 –Creación clase Capa_Logica (agregar_persona)

Luego de crear la clase en la Capa_Logica, procedemos a realizar la codificación.

Imagen 26 – Codificación clase agregar_personaCapa_Logica

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

En la Imagen 26, podemos observar unas secuencias de código que explicaremos al detalle a
continuación.

using System;
usingSystem.Data;
usingSystem.Data.SqlClient;
usingproy_mipaginaweb.Capa_Datos;
usingSystem.Web;

Estas líneas de código lo que hacen es llamar a las librerías esenciales para el buen funcionamiento
del programa las librerías, se utilizan para poder utilizar conexiones con la base de datos de
SQLSERVER.
usingSystem.Data;usingSystem.Data.SqlClient;

En esta línea usingproy_mipaginaweb.Capa_Datos;lo que estamos hacienda es llamar a la

Capa_Datos, ya que esta es la que contiene la clase para la conexión al servidor de base de datos,
por lo tanto tenemos que referenciarla.

En la línea de código publicstring documento, nombres, apellidos, telefono;lo quehacemos

es crear las variables públicas que utilizaremos para enviar la información a través del objeto para
almacenarla en la base de datos.

Imagen 27 – Validación de variables

En la Imagen 27, podemos observar la validación que realizamos para la información digitada por
el usuario, si los campos están vacíos no realizamos ninguna acción y si los campos contienen
información, entonces llamamos una función “agregar_regpersonabd”, que nos permite enviar los
parámetros a un procedimiento almacenado y guardar la información en la base de datos.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 28 – enviar parámetros a procedimiento almacenado

En la imagen 28, podemos observar que la función “agregar_regpersonabd”, envía las variables
públicas como parámetros a un procedimiento almacenado llamado “nueva_persona”, el cual se
encuentra en el servidor de base de datos y realizara la función de agregar a la nueva persona en
la base de datos.

Ahora realizaremos la codificación de la Capa_Diseño, donde cargaremos los datos del GridView y
también enviaremos los parámetros para agregar a la nueva persona.

Imagen 29 – Codificar el Diseño

Como podemos observar en la Imagen 29, procedemos a realizar la codificación del diseño, que
comprende la función de enviar los parámetros digitados por el usuario y también cargar los datos
en el GridView.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 30 – agregando librerías

Como podemos observar en la Imagen 30, agregamos las librerías.

usingSystem.Data;
usingSystem.Data.SqlClient;

También hemos agregado la capa Capa_Datos y la Capa_Logica ya que para poder conectarnos al
servidor de base de datos necesitamos la Capa_Datos ya que esta contiene la clase que permite
conectarnos y también la capa Capa_Logica que contiene la clase que nos permite agregar un
nuevo registró en la base de datos.

Imagen 31 –enviando parámetros a clase agregar_persona

Como podemos observar en la Imagen 31, hemos agregado un segmento de código que lo que
realiza es enviar los parámetros digitados por el usuario mediante las cajas de texto del Diseño, y
que envía estos datos para ser validados por la clase agregar_persona que codificamos en pasos
anteriores, el envió de esta información la hacemos mediante un objeto que hemos llamado
“objagregapersona”, que esta direccionado a la clase “agregar_persona”.
 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Imagen 32 – cargar datos en el GridView

En la Imagen 32, podemos observar un segmento de código que contiene la codificación para
cargar los datos almacenados en el control GridView, se utiliza un procedimiento almacenado
llamado “consultar_personas”, para realizar la consulta a la base de datos.

Imagen 33 – Codificando el Botón Registrar (eventos)

En la imagen 33, podemos observar que seleccionamos el botón que queremos codificar en este
caso solo tenemos un botón, pero puede darse la posibilidad de que tengamos más de un botón
en el formulario, en este caso damos doble clic al botón para generar el evento que se
desencadenara al momento de presionarlo.

Imagen 34 – Programando Funciones al Botón (evento_Click)

 Ing. Dulfran A. Montaño M.
17 de Septiembre de 2015

Como podemos observar en la Imagen 34, en el segmento de código del botón hacemos el
llamado de las funciones “nuevo_registro” y “cargar_personas”, estas funciones fueron las que
programamos anteriormente lo único que hacemos es el llamado para que ejecuten ese segmento
de código, la función “cargar_personas”, tambien la llamamos para que cada vez que se agregue
una persona refresque los datos del control GridView y se pueda visualizar en tiempo real la
información, la función Focus(); lo que hace es ubicar el cursos en la caja de texto “txtdocumento”.

Imagen 35 – Cargar los datos al iniciar Formulario

Como podemos observar en la Imagen 35, en la función Page_Load, que es la función que se
ejecuta cuando se inicia el formulario, lo que quiere decir es que cuando se ejecute el formulario
se ejecutaran todos los comandos y segmentos de código que hay estén, por eso en este caso
hacemos el llamado de la función “cargar_personas”, que llena el control del GridView, entonces
lo ubicamos en esta función para que una vez se ejecute el programa cargue los datos registrados
previamente.

Probando nuestra Aplicación

Paso 1: Ejecutar la Aplicación, damos clic en el botón ejecutar, en este caso utilizare el Navegador
FireFox para la ejecución, pero como vimos en este tutorial podemos escoger el que nosotros
deseemos.

Paso 2: Una vez se ha realizado el proceso de Compilación de la Aplicación nos mostrara el

formulario que creamos en la Capa_Diseño, ingresamos la información de prueba y luego
presionamos el botón “registrar”, y veremos el resultado que se muestra en la siguiente imagen.

Bueno hemos llegado al final de este instructivo espero que les sea de mucha ayuda Felices Códigos.
“Si Buscas resultados distintos, no hagas siempre lo mismo”. Albert Einstein