Aplicación Web en C# en ASP.

NET MVC y procedimientos almacenados de SQL Server

Pasos para el desarrollo de la Aplicación Web “VEHICULOS WCG” usando c# ASP.NET en visual
studio 2015 o superior siguiendo el patrón de diseño MVC (Modelo-Vista-Controlador).

Permite capturar datos desde un formulario web, registrarlos en una base de datos y mostrarlos
dentro de una tabla en el mismo formulario.

Crear la base de datos

Abrir Microsoft SQL Server Management Studio 2014 o superior
Luego Click en la opción New Query (Nueva Consulta)
Escribir: create database MediosTransportes y presionar F5 (o botón ejecutar). Debe mostrar el
mensaje Command(s) completed successfully (Consulta ejecutada correctamente), con eso se a
creado la base de datos.
Ahora tenemos que decirle a SQL Server que esa es la base de datos que queremos usar entonces
escribimos use MediosTransportes y presionamos nuevamente F5; nos vuelve a enviar el mensaje
Command(s) completed successfully. Ya creada la base de datos y disponible, necesitamos crear
una tabla donde se pueda almacenar los datos que vamos a gestionar desde la aplicación web.
Entonces escribir el siguiente script y presionamos F5
create table Tipo_Vehiculo
(
IdTipo int(4) primary key,
NombreTipo varchar(25)
)
Ahora ya con la tabla creada, crear un procedimiento almacenado para que nuestra aplicación
web pueda guardar los datos registrados desde la capa de presentación. Escribir el siguiente script
y presionar F5
create proc registrarTipoVehiculo
(
@IdTipo int(4),
@NombreTipo varchar(25)
)

Soft Dev Enginner. Wilson Castro Gil

 as insert into Tipo_Vehiculo values(@IdTipo,@NombreTipo)

exec registrarTipoVehiculo '01','Trivilin'

Ahora solo falta verificar que el registro se haya incluido en nuestra base de datos eso lo
realizamos con la siguiente instrucción, seguida de un F5
Select * from Tipo_Vehiculo
Con esto finalizamos las tareas necesarias por ahora en la base de datos. Procedemos entonces a
programar la aplicación web.

Soft Dev Enginner. Wilson Castro Gil

 Proyecto Web en capas
Ya tenemos configurada nuestra base de datos lista para ser usada, ahora abrir Visual Studio y
crear un nuevo proyecto.
En el apartado tipo de proyecto seleccionamos Visual C#, después Web, por último, aplicación web
ASP.NET, a la solución darle el nombre “MediosTransCapas” y el proyecto llamarlo
“Presentacion”. Este proyecto (presentación) será la capa de presentación. Luego Empity (vacio),
por ultimo click en aceptar

Ahora crear una clase llamada Configuracion, en la cual pondremos la cadena de conexión, para
ello en el explorador de soluciones seleccionamos el proyecto Datos y le hacemos un clic derecho
para que nos muestre las opciones, entre ellas seleccionamos agregar y por último en el menú
emergente seleccionamos clase.
Ahora Visual Studio nos muestra la estructura básica del programa. Para trabajar la clase de
Configuracion, tenemos que hacerla pública si no lo está, agregándole la palabra reservada public
antes de class.
Con esto ya establecido le creamos un método a la clase Configuracion el cual se llamara
CadenaConexion que se encargara de proporcionar la cadena de conexión a cualquier proceso que
la necesite. El código siguiente muestra cómo debería quedar la clase.
public class Configuracion
{
static string cadenaConexion = @"Data Source=pale-HP;Initial
Catalog=Empleados;Trusted_Connection=true"

public static string CadenaConexion

{
get { return cadenaConexion; }
}
}
Nota:
Cadena solo debemos substituir los datos mostrados en interrogación:
@"Data Source=???????????;Initial Catalog=??????;User ID=sa;Password=????????"
En “Initial Catalog”, para efectos de este laboratorio le asignaremos Empleados entonces la
cadena quedaría de la siguiente manera:
@"Data Source=pale-HP;Initial Catalog=Empleados;Trusted_Connection=true"
En el caso que se desee acceder con autentificación de windows lo que se tiene que hacer es
agregar Trusted_Connection=true o Integrated Security=SSPI a la línea de conexión en vez del
usuario y el password. Esta es una imagen de la clase en Visual Studio.

Soft Dev Enginner. Wilson Castro Gil

El siguiente paso es agregar otra clase de la misma manera que la clase Configuracion, pero esta
vez se llamara MetodosDatos (o TipoVehiCRUD). Esta clase tendrá la tarea de acceder a la base de
datos y obtener la información de allí. Al igual que Configuracion le agregamos la propiedad de
public sin no está por defecto, y además le agregaremos dos referencias.
Using System.Data.SqlClient;
using System.Data;
Las cuales se insertan antes del namespace; estas referencias sirven para llamar métodos ya
establecidos en C#; a continuación agregaremos los siguientes tres métodos.
CrearComando
Este método servirá para crear un comando sql estandard como un select el cual será devuelto por
su método return
public static SqlCommand CrearComando()
{
string _cadenaConexion = Configuracion.CadenaConexion;
SqlConnection _conexion = new SqlConnection();
_conexion.ConnectionString = _cadenaConexion;
SqlCommand _comando = new SqlCommand();
_comando = _conexion.CreateCommand();
_comando.CommandType = CommandType.Text;
return _comando;
}

CrearComandoProc
Este método al igual que el anterior crea un comando sql, pero con la diferencia que este creara el
comando de manera que pueda ejecutar el procedimiento almacenado que establecimos
anteriormente llamado InsDatos.
public static SqlCommand CrearComandoProc()
{
string _cadenaConexion = Configuracion.CadenaConexion;

Soft Dev Enginner. Wilson Castro Gil

SqlConnection _conexion = new SqlConnection(_cadenaConexion);
SqlCommand _comando = new SqlCommand("InsDatos", _conexion);
_comando.CommandType = CommandType.StoredProcedure;
return _comando;
}

EjecutarComandoInsert
Este método obtiene como parámetro un comando sql que proviene del método anterior
CrearComandoProc y ejecuta el procedimiento almacenado que se le ha asignado al comando. A
continuacion vemos cómo se le asigna el procedimiento almacenado a este comando.
public static int EjecutarComandoInsert(SqlCommand comando)
{
try
{
comando.Connection.Open();
return comando.ExecuteNonQuery();
}
catch { throw; }
finally
{
comando.Connection.Dispose();
comando.Connection.Close();
}
}

EjecutarComandoSelect
Este método ejecuta un comando select el cual devuelve un datatable con todos los registros que
se encuentren en alguna tabla dada, toma como parámetro el comando que contiene la sentencia
sql select.
public static DataTable EjecutarComandoSelect(SqlCommand comando)
{
DataTable _tabla = new DataTable();
try{
comando.Connection.Open();
SqlDataAdapter adaptador = new SqlDataAdapter();
adaptador.SelectCommand = comando;
adaptador.Fill(_tabla);
}
catch (Exception ex)
{ throw ex; }
finally
{ comando.Connection.Close(); }
return _tabla;
}

Estas serían todas las clases que MetodosDatos.cs (o TipoVehiCRUD) contendrá. A continuación la
imagen que muestra la estructura completa de nuestra class.

Soft Dev Enginner. Wilson Castro Gil

Ahora creamos la clase que genera los comandos que se pasaron como parámetros en la clase
anterior MetodosDatos.cs.
Al igual que se creó las clases Configuracion y MetodosDatos anteriores creamos una clase llamada
AccesoDatos y se le agrega la propiedad public y las referencias
using System.Data.SqlClient;
using System.Data;

De la misma manera que se realizó en la clase MetodosDatos.cs. En esta clase utilizaremos dos
métodos:

Soft Dev Enginner. Wilson Castro Gil

Insert Este método obtiene un comando sql proveniente de la clase MetodosDatos de su método
CrearComandoProc le agrega los parámetros que se necesitan para completar el procedimiento
almacenado y después lo ejecuta con el método EjecutarComandoInsert que se encuentra en la
clase MetodosDatos, de esta manera podemos ingresar información a la base de datos tan solo
con asignarle parámetros al método Insert el cual tiene asignados 3 parámetros Nombre, Apellido
y Edad los cuales son los campos que tenemos asignados en nuestra base de datos.
public int Insert(string idEmpleado, string Nombre, string Apellido, int Edad)
{
SqlCommand _comando = MetodosDatos.CrearComandoProc();
_comando.Parameters.AddWithValue("@idempleado", IdEmpleado);
_comando.Parameters.AddWithValue("@nombre", Nombre);
_comando.Parameters.AddWithValue("@apellido", Apellido);
_comando.Parameters.AddWithValue("@edad", Edad);
return MetodosDatos.EjecutarComandoInsert(_comando);
}

ObtenerEmpleados Este método obtiene un comando del método CrearComando de la Clase

MetodosDatos lo almacena en _comando y después le agrega la sentencia a ejecutar y por medio
del método EjecutarComandoSelect la ejecuta y nos regresa un DataTable que es un objeto que
contiene la estructura de una tabla (filas, columnas, registros, etc)
public static DataTable ObtenerEmpleados()
{
SqlCommand _comando = MetodosDatos.CrearComando();
_comando.CommandText = "SELECT * FROM Datos";
return MetodosDatos.EjecutarComandoSelect(_comando);
}
Estos dos métodos integran a AccesoDatos.cs. Con esto hemos terminado la capa de datos es hora
de crear la capa de negocio.

Capa de negocio
Para crear nuestra capa de negocio empezaremos por crear un nuevo proyecto, para esto nos
situamos en el explorador de soluciones y hacemos un clic derecho a nuestra solución llamada
Empleos la cual nos presentara un menú y elegimos Agregar y en el menú emergente
seleccionamos Nuevo Proyecto.
Creamos una clase llamada AccesoLogica esta será la encargada de enviar y recibir información de
las otras dos capas (la de Datos y la de Presentacion)
Ya con nuestra clase AccesoLogica.cs creada, necesitamos agregar la referencia de nuestra capa
anterior. En referencias del proyecto Negocio le hacemos un clic derecho y seleccionaremos
agregar referencia a capa Modelo (AccDatos).
Ya con la referencia agregada, la podemos usar en nuestra clase AccesoLogica. Para usarla
debemos agregarla de igual manera que lo hicimos en las clases anteriormente creadas, en la
parte superior de nuestra clase agregamos.
using System.Data;
using Datos;

Ahora agregaremos la propiedad de public a nuestra clase AccesoLogica.

Con lo anterior podemos empezar a crear los métodos para la clase que en este caso serán solo
dos ObtenerEmpleados e Insert

Soft Dev Enginner. Wilson Castro Gil

El método ObtenerEmpleados de esta clase AccesoLogica utiliza el método con el mismo nombre
que se estableció en la capa de Datos que se encuentra en AccesoDatos, el cual recordemos que
nos regresa un Datatable conteniendo el resultado de la sentencia select. De esta manera la capa
de negocio se comunica con la capa de datos y obtiene información proveniente de la base de
datos.
public static DataTable ObtenerEmpleados()
{
return AccesoDatos.ObtenerEmpleados();
}

El método Insert recibe los parámetros Nombre, Apellido y Edad y los envía por medio de una
instancia de AccesoDatos a su método Insert.
public int Insert(string Nombre, string Apellido, int Edad)
{
AccesoDatos acceso = new AccesoDatos();
return acceso.Insert(Nombre, Apellido, Edad);
}

Con esto terminamos la capa de Negocio y continuamos se crea la última capa, la capa de
Presentación.

Capa de presentación
La última capa será de presentación y la realizaremos en ASP.NET, para esto debemos agregar un
proyecto a nuestra solución, hacemos clic derecho en la solución llamada Empleos seleccionamos
agregar y posteriormente Nuevo Proyecto.
Luego hacemos clic derecho en el nuevo proyecto llamado Presentacion seleccionamos nuevo
elemento y posteriormente Formulario Web Form.

Dentro del div, escribir el siguiente codigo

<asp:Label ID="lblMensaje" runat="Server" ForeColor="red" EnableViewState="False"/>
<table style="border:2px solid #cccccc;">
<tr style="background-color:#507CD1;color:White;">
<th colspan="3">Agregar Registros</th>
</tr>
<tr>
<td>
Nombre:
</td>
<td>
<asp:TextBox ID="txtNombre" runat="Server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Apellido:
</td>
<td>
<asp:TextBox ID="txtApellido" runat="Server"></asp:TextBox>

Soft Dev Enginner. Wilson Castro Gil

</td>
<td>
<asp:RequiredFieldValidator ID="val2" runat="Server" Text="*" ControlToValidate="txtApellido"
Display="dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Edad:
</td>
<td>
<asp:TextBox ID="txtEdad" runat="Server" Columns="4"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="val3" runat="Server" Text="*" ControlToValidate="txtEdad"
Display="dynamic"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="Comp" runat="Server" Text="Solo Enteros"
ControlToValidate="txtEdad"
Operator="DataTypeCheck" Type="Integer"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>&amp;nbsp;</td>
<td>
<asp:Button ID="btnEnviar" runat="server" Text="Enviar" OnClick="Agregar" />
</td>
<td>
<asp:Button ID="Load" runat="server" Text="Mostrar" OnClick="gvMostrar" />
</td>
</tr>
<tr>
<td/>
</tr>
<tr>
<td colspan="3" align=center>
<asp:GridView ID="GridView" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="id" HeaderText="Id" />
<asp:BoundField DataField="strNombre" HeaderText="Nombre" />
<asp:BoundField DataField="strApellido" HeaderText="Apellido" />
<asp:BoundField DataField="intEdad" HeaderText="Edad" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>

Soft Dev Enginner. Wilson Castro Gil

Para realizar la programación de esta parte primero necesitamos agregar la referencia de nuestra
capa de negocio, al igual que lo hicimos en la capa anterior.
Seleccionamos la capa de presentacion y le damos un clic derecho en referencias, después
elegiremos agregar referencia
En esta ventana seleccionar la pestaña de Proyectos, nos aparece la capa de Negocios y la capa de
Datos ya creadas, seleccionar la capa de Negocios y aceptar.
Ahora debemos concluir nuestro programa, para esto solo basta con modificar el código que hay
detrás de la interface, para ello vamos al explorador de soluciones, seleccionar el proyecto
presentacion, dentro del encontramos el archivo WebForm1.aspx el cual modificamos
anteriormente (pero solo la parte de diseño) ahora modificamos su código, seleccionamos
WebForm1.aspx le hacemos un clic derecho y seleccionamos Ver Código el cual nos lleva al código
que hay detrás de nuestra página.
Antes de empezar a escribir el código necesitamos agregar la referencia de nuestra capa de
Negocio, para ello agregaremos la referencia
using Negocio;

Enseguida agregamos una clase llamada Agregar la cual es un evento del botón Enviar que se
encuentra en la fila 5 la tabla, esta clase será la encargada de realizar todo el proceso de insertar
un registro en la base de datos, utilizando todo lo que hemos construido hasta ahora.
Esta clase funciona de la siguiente manera, verifica que los datos ingresados estén correctos de lo
contrario se aborta y sale de la ejecución, en caso de que no se encuentren errores, se crea una
instancia de la clase AccesoLogica que proviene de nuestra capa de Negocios esta instancia se le
da el nombre de negocio, después se asigna todos los contenidos de los textbox en una variable
los cuales posteriormente nos sirven para pasar los parámetros requeridos para una inserción en
nuestra capa de negocio por medio de su método insert el cual devuelve un resultado, el cual será
negativo en caso de que ocurra un error en la base de datos. A continuación se manda un mensaje
por medio de la etiqueta lblMensaje en caso de que exista o no error en la inserción, por último se
libera la memoria de la instancia negocio.
protected void Agregar(object sender, EventArgs e)

Soft Dev Enginner. Wilson Castro Gil

{
if (!Page.IsValid)
return;
AccesoLogica negocio = new AccesoLogica();
string identificacion = txtId.Text;
string nombre = txtNombre.Text;
string apellido = txtApellido.Text;
int edad = Int32.Parse(txtEdad.Text);
int resultado = negocio.Insert(identificación,nombre,apellido,edad);
if (resultado > 0)
lblMensaje.Text = "Nuevo Registro Agregado Satisfactoriamente.";
else
lblMensaje.Text = "Identificacion:  [<b>" + txtId.Text + "</b>] ya existe, agrege otro";
negocio = null;
}

Ahora agregamos otra clase llamada gvMostrar la cual al igual que la anterior se ejecutara al hacer
clic en el botón Mostrar, esta clase tendrá la tarea de llenar el GridView con los datos contenidos
en la base de datos, para ello obtiene sus datos de la clase proveniente AccesoLogica llamada
ObtenerEmpleados, el cual se le asigna como DataSource a nuestro GridView y después se le liga a
el GridView con la función DataBind, por último se deshace de todos los datos contenidos en los
textbox
protected void gvMostrar(object sender, EventArgs e)
{
GridView.DataSource = AccesoLogica.ObtenerEmpleados();
GridView.DataBind();
txtId.Text = txtEdad.Text = txtNombre.Text = txtApellido.Text = "";
}

Ahora si deseamos ver la información contenida en nuestra base de datos, al momento que
ingresemos a nuestra página, debemos agregar algo de código a la clase Page_Load la cual C# nos
ha proporcionado por defecto a la hora de crear un proyecto ASP.NET, esta clase se ejecuta justo
antes de que la página se muestre, por ello si colocamos algo en esta clase, esto aparecerá al
momento de cargar la página.
En esta clase solo agregamos una línea de código, en la cual nos referiremos al evento gvMostrar
el cual hemos realizado anteriormente, y lo utilizaremos para mostrar la información contenida en
nuestra base de datos.
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
gvMostrar(sender, e);
}

A continuación el código completo de la capa de presentacion.

Soft Dev Enginner. Wilson Castro Gil

Con esto concluimos nuestro proyecto. Pero antes de ejecutarlo por primera vez debemos
establecer la capa de presentacion como proyecto de inicio, para esto seleccionamos nuestro
proyecto Presentacion le hacemos un clic derecho y seleccionamos la opción Establecer como
proyecto de inicio.

Con todo lo anterior en su lugar es hora de ejecutar nuestro programa el cual nos deberá mostrar
lo siguiente.

Soft Dev Enginner. Wilson Castro Gil

http://localhost:56114/TipoVehiculos.aspx
En conclusión la programación en tres capas facilita el acceso a la base de datos, separando cada
una de las fases del proceso, además reduce la cantidad de código necesario para cada clase
haciéndolas más claras y concisas en las tareas que realizan, pero para gozar de estos beneficios
requiere de mucha planeación.

Recuerde subir a Sofiaplus este documento.

Firma Aprendiz:

Soft Dev Enginner. Wilson Castro Gil