Ing.

Rubén Sanabria

Desarrollo de un mini Sistema en ASP.NET

Desarrollaremos este curso con la base de datos PostgreSql, utilizando la conexión a la base de datos
con ODBC.

La herramienta ODBC que utilizaremos es :

Lo descomprimimos y luego lo instalamos; le damos doble click y seguimos las prerrogativas, con sgte,
sgte. Etc.

Una vez instalado nos vamos a panel de control:

Le damos click en Sistema y Seguridad, luego aparecerá la siguiente pantalla:

En Herramientas administrativas, damos click al mismo:

 Ing. Rubén Sanabria

Y nos aparecerá esta pantalla:

Hacemos doble click en Orígenes de datos ODBC (64 bits), en caso de que nuestra base de datos sea de
64bits, en nuestro caso postgres, lo es, luego saldrá la siguiente pantalla:

Agregamos la conexión,
 Ing. Rubén Sanabria

Selecciono PostgreSQL ANSI, le doy finalizar y me pide los parámetros:

Le doy Save, y se guarda con el nombre de stockDS, que es el data source de conexión:

Diagrama ER de la base de datos, stock en PostgreSQL.

Ingresamos a Visual Studio, luego presionamos Archivo->Nuevo, se despliega una pantalla, le damos
Proyecto:
 Ing. Rubén Sanabria

Al darle Proyecto, se despliega la pantalla siguiente:

Seleccionamos el tipo de aplicación, en este caso Aplicación web ASP.NET(Framework), que luego

Debemos agregar el nombre de nuestra aplicación, la ubicación, y el Framework, nosotros lo llamaremos

WebCurso.

Al darle Aceptar, nos muestra otra pantalla como la que vemos, y seleccionamos los elementos
marcados:
 Ing. Rubén Sanabria

Marcar

Marcar

Luego darle Aceptar

Generará toda una aplicación, y se verá de la siguiente forma:

 Ing. Rubén Sanabria

Ejecutamos el Default.aspx, como página principal del proyecto y nos muestra lo siguiente:

Aquí se
ejecuta el
sistema

Luego de ejecutarse nos muestra :

Todo un proyecto funcional, al cual iremos agregando elementos:

 Ing. Rubén Sanabria

Vamos a crear una página de mercadería, utilizando el SiteMaster: Nos posicionames sobre el mismo,
luego le damos Agregar página de contenido, el me crea la pagina con algunos elementos entre ellos la
parte del contenido de la página a ser utilizada:

Este sería la pagina vacía, ya con los elementos del Site Master:

Esta seria la codificación del contenido de la pagina:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="mercaderia.aspx.cs" Inherits="WebCurso.Formulario_web1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<div style="font-size:x-large" align="center">Mercaderias</div>
<br />

</asp:Content>
Luego en el diseño se veria así :

Al mismo le agregamos una tabla:

 Ing. Rubén Sanabria

Vemos cómo va quedando el formulario, luego desde la barra de herramientas arrastramos los textbox,
correspondiente a cada campo:

También los botones respectivos:

Después de darles un poco de retoques a la página queda así:

 Ing. Rubén Sanabria

Parte 2

Una vez que hayamos estructurado todo el proyecto, la misma se vería de la siguiente forma :

Como se observa, agregamos las carpetas de Controllers, DAO, Views, dentro de los mismos se
programarán las clases correspondientes.

En la carpeta Models
 Ing. Rubén Sanabria

Vemos que tenemos la clase Usuario, por el momento y que :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace webuniversidad.Models
{
public class Usuario
{
public int Cod { get; set; }
public string Log { get; set; }
public string Clave { get; set; }
public string Nomb { get; set; }

public Usuario()
{
}

public Usuario(string log, string clave, string nomb)

{
Log = log;
Clave = clave;
Nomb = nomb;
}
}
}

En la carpeta DAO :

Tenemos las clases de Conexión y UsuarioDAO, por el momento :

La clase Conexión.cs
 Ing. Rubén Sanabria

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Odbc;

namespace webuniversidad.DAO
{
public class Conexion
{
protected OdbcConnection conn;
protected OdbcCommand cmd;
protected OdbcDataReader dr;

protected void Abrir()

{
try
{

conn = new OdbcConnection("DSN=unipgDS");

conn.Open();
}
catch (Exception ex)
{
new Exception("1-Error al cerrar la tabla!!!" + ex.Message);
}
}

protected void Cerrar()

{
try
{
conn.Close();
}
catch (Exception ex)
{
new Exception("Error al cerrar la tabla!!!" + ex.Message);

}
}
}
}

La clase UsuarioDAO.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MySql.Data;
using System.Data.Odbc;
using webuniversidad.Models;

namespace webuniversidad.DAO
{
 Ing. Rubén Sanabria
public class UsuarioDAO : Conexion
{
Usuario bean = new Usuario();

public void Insertar(Usuario obj)

{
string sql = "INSERT INTO usuarios (login,clave,nombre) "
+" VALUES (?,?,?)";
try
{
Abrir();
OdbcCommand cmd = new OdbcCommand(sql, conn);
cmd.Parameters.AddWithValue("?", obj.Log);
cmd.Parameters.AddWithValue("?", obj.Clave);
cmd.Parameters.AddWithValue("?", obj.Nomb);
cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
new Exception("Error al grabar en la tabla!!!" + ex.Message);
}
finally
{
Cerrar();
}
}

public void Modificar(Usuario obj)

{
String _sql = "UPDATE usuarios SET "
+ "login = ?,"
+ "clave = ?,"
+ "nombre = ?"
+ " WHERE id = ?";
try
{
Abrir();
OdbcCommand Cmd = new OdbcCommand(_sql, conn);
Cmd.Parameters.AddWithValue("?", obj.Log);
Cmd.Parameters.AddWithValue("?", obj.Clave);
Cmd.Parameters.AddWithValue("?", obj.Nomb);
Cmd.Parameters.AddWithValue("?", obj.Cod);
Cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
throw new Exception("Error al grabar la tabla...!!!"
+ ex.Message);
}
finally
{
Cerrar();
}
}

public void Eliminar(Usuario obj)

{
string sql = "DELETE FROM usuarios WHERE id = ?";
 Ing. Rubén Sanabria
try
{
Abrir();
OdbcCommand cmd = new OdbcCommand(sql, conn);
cmd.Parameters.AddWithValue("?", obj.Cod);
cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
throw new Exception("Error no se pudo eliminar...!!!"
+ ex.Message);

}
finally
{
Cerrar();
}
}

public List<Usuario> listaTodos()

{
string sql = "SELECT * from usuarios";
try
{
Abrir();
cmd = new OdbcCommand(sql, conn);
dr = cmd.ExecuteReader();
List<Usuario> lista = new List<Usuario>();
while (dr.Read())
{
Usuario usu = new Usuario();
usu.Cod = Convert.ToInt32(dr["id"]);
usu.Log = Convert.ToString(dr["login"]);
usu.Clave = Convert.ToString(dr["clave"]);
usu.Nomb = Convert.ToString(dr["nombre"]);
lista.Add(usu);
}
return lista;

}
catch (Exception ex)
{
new Exception("Error al leer la tabla!!!" + ex.Message);
}
finally
{
Cerrar();
}
return null;
}

}
}
 Ing. Rubén Sanabria

La carpeta Controllers :

La clase UsuarioControllers.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using webuniversidad.DAO;
using webuniversidad.Models;

namespace webuniversidad.Controllers
{
public class UsuarioController
{
Usuario bean = new Usuario();
UsuarioDAO dao = new UsuarioDAO();

public void Insertar(string log,string cla,string nom)

{
bean.Log = log;
bean.Clave = cla;
bean.Nomb = nom;
dao.Insertar(bean);
}
public void Modificar(string log,string cla,string nom,int cod)
{
bean.Log = log;
bean.Clave = cla;
bean.Nomb = nom;
bean.Cod = cod;
dao.Modificar(bean);
}
public void Eliminar(int cod)
{
bean.Cod = cod;
dao.Eliminar(bean);
}

public List<Usuario> listaTodos()

 Ing. Rubén Sanabria
{
return dao.listaTodos();
}

}
}

Dentro de la carpeta Views, tenemos las paginas web que serán utilizadas en el proyecto,
un ejemplo es la de usuarioWF.aspx

La vista es la siguiente :
 Ing. Rubén Sanabria

Vemos datos que son leídos desde la base de datos:

Ahora veremos el Html comprendido de dicha página:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="usuarioWF.aspx.cs" Inherits="webuniversidad.Views.usuarioWF" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<h3> Usuarios</h3>
<p></p>

<table class="nav-justified">
<tr>
<td class="text-right" style="width: 211px">Codigo : </td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="90px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right" style="width: 211px; height: 22px;">Login : </td>
<td style="height: 22px">
<asp:TextBox ID="TextBox2" runat="server" Width="92px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right" style="width: 211px; height: 22px">Clave : </td>
<td style="height: 22px">
<asp:TextBox ID="TextBox3" runat="server" TextMode="Password"
Width="94px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="text-right" style="width: 211px">Nombre : </td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Width="204px"></asp:TextBox>
</td>
</tr>
</table>
<br />
<asp:Button ID="Button1" runat="server" Text="Nuevo" OnClick="Button1_Click"
style="margin-left: 194px" />
<asp:Button ID="Button2" runat="server" Text="Grabar" OnClick="Button2_Click"
Width="80px" />
<asp:Button ID="Button3" runat="server" Text="Button" style="margin-left: 13" />

<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None" Width="543px"
AutoGenerateDeleteButton="True" AutoGenerateEditButton="True"
AutoGenerateSelectButton="True" OnRowDeleting="GridView1_RowDeleting"
OnRowEditing="GridView1_RowEditing"
OnSelectedIndexChanging="GridView1_SelectedIndexChanging" AllowPaging="True"
OnPageIndexChanging="GridView1_PageIndexChanging"
OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowUpdating="GridView1_RowUpdating">
 Ing. Rubén Sanabria
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="CODIGO">
<EditItemTemplate>
<asp:Label ID="lbl_eit_codigo" runat="server" Text='<%# Bind("Cod")
%>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbl_it_codigo" runat="server" Text='<%# Bind("Cod")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LOGIN">
<EditItemTemplate>
<asp:TextBox ID="txt_eit_login" runat="server" Text='<%# Bind("Log")
%>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbl_it_login" runat="server" Text='<%# Bind("Log")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CLAVE">
<EditItemTemplate>
<asp:TextBox ID="txt_eit_clave" runat="server" Text='<%#
Bind("Clave") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbl_it_clave" runat="server" Text='<%# Bind("Clave")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NOMBRE">
<EditItemTemplate>
<asp:TextBox ID="txt_eit_nombre" runat="server" Text='<%#
Bind("Nomb") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbl_it_nombre" runat="server" Text='<%# Bind("Nomb")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />

</asp:GridView>
<br />
<asp:Label ID="lbl_message" runat="server"></asp:Label>
</asp:Content>
 Ing. Rubén Sanabria

En esta parte veremos la codificación en C#, con los eventos correspondientes :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using webuniversidad.Controllers;

namespace webuniversidad.Views
{
public partial class usuarioWF : System.Web.UI.Page
{
UsuarioController ctrl = new UsuarioController();

protected void Page_Load(object sender, EventArgs e)

{
if (IsPostBack == false)
{
ObtenerTabla();
}
}

private void ObtenerTabla()

{
GridView1.DataSource = ctrl.listaTodos();
GridView1.DataBind();
}
private void limpiar()
{
TextBox1.Text = "";
TextBox2.Text = "";
TextBox3.Text = "";
TextBox4.Text = "";
}
protected void Button1_Click(object sender, EventArgs e)
{
//boton nuevo
limpiar();
TextBox2.Focus();
}

protected void Button2_Click(object sender, EventArgs e)

{
//Grabar
string log = TextBox2.Text;
string cla = TextBox3.Text;
string nom = TextBox4.Text;

if(!log.Equals(null) && !cla.Equals(null) && !nom.Equals(null))

{
ctrl.Insertar(TextBox2.Text, TextBox3.Text, TextBox4.Text);
Response.Write("<script>alert('Registro fue grabado')</script>");
}

ObtenerTabla();
}

protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

{
//se busca los datos en el ItemTemplate
String id = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_codigo")).Text;
String log = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_login")).Text;
String cla = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_clave")).Text;
String nom = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_nombre")).Text;
 Ing. Rubén Sanabria

lbl_message.Text = "selecciono la fila " + id + " " + log + " " + cla + " " + nom;
}

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)

{
//busco id del libro
String id = ((Label)GridView1.Rows[e.RowIndex].FindControl("lbl_it_codigo")).Text;
ctrl.Eliminar(Convert.ToInt32(id));
ObtenerTabla();

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

{
GridView1.EditIndex = e.NewEditIndex;
ObtenerTabla();
}

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

{
GridView1.EditIndex = -1;
ObtenerTabla();
}

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{
//se busca los datos en el edit itemtemplate
String id = ((Label)GridView1.Rows[e.RowIndex].FindControl("lbl_eit_codigo")).Text;
String log = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("txt_eit_login")).Text;
String cla = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("txt_eit_clave")).Text;
String nom = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("txt_eit_nombre")).Text;
ctrl.Modificar(log, cla, nom, Convert.ToInt32(id));
GridView1.EditIndex = -1;
ObtenerTabla();
}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

{
GridView1.PageIndex = e.NewPageIndex;
ObtenerTabla();
}
}
}

Hay que tener en cuenta la programación que sucede por detrás en el GridViews.

Tenemos una página en blanco, donde insertaremos el GridView

En el párrafo correspondiente insertamos un GridView

 Ing. Rubén Sanabria

Vemos que en las tareas de GridView, se muestran Formato automático, donde le dan los colores a la
GridView, Origen de datos: elemento que conectan a un origen de datos , para Editar columnas, las
columnas que se muestran pueden ser editadas, Agregar nueva columna, si quiere agregar otras
columnas, Editar plantilla: esta es un modo especial que iremos viendo.

Presione Formato automático y me muestra:

Selecciono el estilo que tendría mi grilla:

 Ing. Rubén Sanabria

Titulo de la grilla

Selecciono TemplateField, en sus propiedades le pongo el título de la columna correspondiente:

Se van agregando las columnas con el formato correspondiente.

Una vez que definido los títulos de las columnas, ponemos los elementos para el detalle, entonces
utilizamos.
 Ing. Rubén Sanabria

El editar plantillas

Que nos muestra la pantalla siguiente, donde pondríamos los elementos correspondientes del cuadro
de herramientas :

Aquí vemos el ItemTemplate de cada columna, le agregamos un label, con solo arrastrarlo dentro del
cuadro.

Aquí editamos enlaces de datos: nos muestra una pantalla como la siguiente :
 Ing. Rubén Sanabria

1- Seleccionamos Text
2- Ponemos en expresión de código ->Bind(“Cod”), la palabra Cod, en este caso proviene del
modelo.
public class Usuario
{
public int Cod { get; set; }
public string Log { get; set; }
public string Clave { get; set; }
public string Nomb { get; set; }

Las demás columnas tendría el mismo procedimiento, estos son los datos que se mostrarán en
la Grilla.
Ing. Rubén Sanabria