Insertar Registro a una BD desde un Formulario Web

en C#
sábado, 10 de marzo de 2012

En este tutorial veremos como insertar un registro desde un formulario web en Asp.Net con C#.

Trabajaremos con una base de datos ejemplo que cree para este tutorial, la base de datos cuenta con

una tabla llamada usuarios y contiene los campos cod_usuario (que es la llave primaria y es un campo

auto incrementable), nombre, apellido, pais.

Ademas la base de datos cuenta con un procedimiento almacenado que utilizaremos para ingresar el

registro

Descargar Base de Datos

Una vez que descargemos la base de datos la adjuntamos a nuestro SQL para continuar.

Lo primero que aremos es crear un nuevo sitio web vació as.pnet en visual estudio.

Una vez creado nuestro proyecto asp.net agregamos un webform el cual nos tiene que quedar con

este diseño.
Hecho esto nos vamos al código c# de nuestro formulario web y empezamos a programar nuestro

formulario.

Lo primero que aremos sera añadir estas 2 referencias que nos sirven para trabajar con base de

datos sql en asp.net

1
using System.Data.SqlClient;
2 using System.Data;
3

Ahora declararemos nuestra cadena de conexión a nivel de la clase con el fin de poder utilizarla en

todos los eventos que programaremos.

1 //cadena de conexion la declaramos a nivel de la clase para utilizarla en todos lo

2 SqlConnection cn = new SqlConnection("Data Source = .\\SQLEXPRESS; Initial Catalog
3 Security = True");
Ahora aremos un método donde cargaremos los datos al griedview de nuestra base de datos, el

código va comentado para que entiendan todo.

1
2 public void cargardatos()
3 {
4 //hacemos la consulta a la base de datos
5 SqlCommand cmd = new SqlCommand("Select * from usuarios", cn);
6 //objeto adapter para hacer el enlace y llenado del dataset
SqlDataAdapter adapter = new SqlDataAdapter();
7 //asignamos la propiedad selectcommand al objeto command para que ejecu
8 consulta
9 adapter.SelectCommand = cmd;
10 //abrimos la conexion
cn.Open();
11 //creamos objeto dataset
12 DataSet objdataset = new DataSet();
13 //llenamos el datable del dataset
14 //el metodo fill obtiene los datos recuperados del dataadapter y los co
15 dentro del dataset
adapter.Fill(objdataset);
16 //cerramos conexion
17 cn.Close();
18 //enlazamos los datos al griedvied
19 GridView1.DataSource = objdataset;
GridView1.DataBind();
20
}
21
22

Ahora para que los datos que tenga la base de datos se carguen al momento de iniciar nuestro

formulario web crearemos el método Load de nuestra webform y llamaremos al metodo que

creamos anteriormente (el método Load sirve para cargar datos al momento que se inicializa el

formulario)

1
2 protected void Page_Load(object sender, EventArgs e)
{
3 cargardatos();
4 }
5

Por ultimo aremos el evento click de nuestro botón para que cuando el usuario presione el botón

insertar los datos se inserten en la base de datos y se muestren en el griedview, aquí es donde

aremos uso del procedimiento almacenado insertar usuarios. nuevamente el código esta

comentado cada linea para que comprendan.

?

1
2
3 protected void Button1_Click(object sender, EventArgs e)
4 {
5 //utilizamos el procedimiento alamacenado insertarusuarios
6 SqlCommand cmd = new SqlCommand("insertarusurios", cn);
7 //especificamos que el comando es un procedimiento almacenado
cmd.CommandType = CommandType.StoredProcedure;
8 //creamos los parametros que usaremos
9 cmd.Parameters.Add("@nombre", SqlDbType.VarChar);
10 cmd.Parameters.Add("@apellido", SqlDbType.VarChar);
11 cmd.Parameters.Add("@pais", SqlDbType.VarChar);
12 //asignamos el valor de los textbox a los parametros
cmd.Parameters["@nombre"].Value = TextBox1.Text;
13 cmd.Parameters["@apellido"].Value = TextBox2.Text;
14 cmd.Parameters["@pais"].Value = TextBox3.Text;
15 //abrimos conexion
16 cn.Open();
//ejecutamos la instruccion con ExcecuteNonQuerry indicando que no
17 retorna registros.
18 cmd.ExecuteNonQuery();
19 Label1.Text = "Usuario ingresado...";
20 //cerramos conexion
21 cn.Close();
//cargamos los datos nuevamente
22 cargardatos();
23 //limpiamos los textbox
24 TextBox1.Text = "";
25 TextBox2.Text = "";
TextBox3.Text = "";
26
27 }
28
29
30

Para terminar les dejo el código completo así les tiene que quedar al final

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
using System.Web;
4 using System.Web.UI;
5 using System.Web.UI.WebControls;
6 using System.Data.SqlClient;
7 using System.Data;
8
public partial class _Default : System.Web.UI.Page
9 {
10 //cadena de conexion la declaramos a nivel de la clase para utilizarla en t
11 SqlConnection cn = new SqlConnection("Data Source = .\\SQLEXPRESS; Initial C
12 Integrated Security = True");
13
14 public void cargardatos()
15 {
//hacemos la consulta a la base de datos
16 SqlCommand cmd = new SqlCommand("Select * from usuarios", cn);
17 //objeto adapter para hacer el enlace y llenado del dataset
18 SqlDataAdapter adapter = new SqlDataAdapter();
19 //asignamos la propiedad selectcommand al objeto command para que ejecu
adapter.SelectCommand = cmd;
20 //abrimos la conexion
21 cn.Open();
22 //creamos objeto dataset
23 DataSet objdataset = new DataSet();
24 //llenamos el datable del dataset
//el metodo fill obtiene los datos recuperados del dataadapter y los co
25 adapter.Fill(objdataset);
26 //cerramos conexion
27 cn.Close();
28 //enlazamos los datos al griedvied
29 GridView1.DataSource = objdataset;
GridView1.DataBind();
30 }
31 protected void Page_Load(object sender, EventArgs e)
32 {
33 cargardatos();
}
34
35 protected void Button1_Click(object sender, EventArgs e)
36 {
37 //utilizamos el procedimiento alamacenado insertarusuarios
38 SqlCommand cmd = new SqlCommand("insertarusurios", cn);
39 //especificamos que el comando es un procedimiento almacenado
cmd.CommandType = CommandType.StoredProcedure;
40 //creamos los parametros que usaremos
41 cmd.Parameters.Add("@nombre", SqlDbType.VarChar);
42 cmd.Parameters.Add("@apellido", SqlDbType.VarChar);
43 cmd.Parameters.Add("@pais", SqlDbType.VarChar);
//asignamos el valor de los textbox a los parametros
44
cmd.Parameters["@nombre"].Value = TextBox1.Text;
45 cmd.Parameters["@apellido"].Value = TextBox2.Text;
46 cmd.Parameters["@pais"].Value = TextBox3.Text;
47 //abrimos conexion
48 cn.Open();
//ejecutamos la instruccion con ExcecuteNonQuerry indicando que no reto
49 cmd.ExecuteNonQuery();
50 Label1.Text = "Usuario ingresado...";
51 //cerramos conexion
52 cn.Close();
53 //cargamos los datos nuevamente
cargardatos();
54 //limpiamos los textbox
55 TextBox1.Text = "";
56 TextBox2.Text = "";
57 TextBox3.Text = "";
58
}
59 }
60
61
62
63
64
65
66
67
68
69
70
71

Capturas de la aplicación corriendo

Les dejo el proyecto de la aplicación también para que lo descarguen y lo prueben con visual estudio
¿Cómo llenar un control
GridView en ASP NET?
Administrador08/31/2014Control de Servidor, Control GridView, Tablas

El ejemplo siguiente se trabaja sobre Visual Studio 2012 pero el código utilizado
es compatible con versiones anteriores probados hasta Visual Studio 2005.

El control Gridview de ASP NET es utilizado para mostrar datos en filas y

columnas; podemos también realizar operaciones de edición y eliminación. El
control Gridview soporta diferentes orígenes de datos entre los que podemos
incluir ACCES, SQL, XML, MY SQL, ORACLE, entre muchos otros

El control Gridview es bastante extenso por lo que dividiré el tema en muchos

otros temas específicos; en esta sección en concreto veremos cómo llenar el
control Gridview desde un origen de dato System.Data.OleDb conectándonos
hacia una base de datos Microsoft SQL Server.
Para este ejemplo deberemos agregar el control UpdatePanel de tal forma que
podamos hacer uso de AJAX. A su vez agregaremos el atributo
“EnableEventValidation” en nuestra página.

<%@ Page Language="vb" EnableEventValidation="true" AutoEventWireup="false"

CodeBehind="test.aspx.vb" Inherits="Protecto.WebForm" %>

<head>
...
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server"></asp:ScriptManager>
</form>
</body>
Empezaremos ahora a trabajar nuestro respectivo código asp para construir el
diseño de nuestro gridview.

Colocaremos entre las etiquetas <form></form> y debajo de asp:ScriptManager

el siguiente código:
<div class="divGrid">
<div class="grid">

</div><!-- grid -->

</div><!-- divGrid -->
Estos dos paneles div nos servirán para ubicar y formatear el Gridview utilizando
clases CSS como veremos más adelante.

El paso siguiente es colocar el control UpdatePanel que dará la funcionalidad

AJAX al Gridview.
<div class="divGrid">
<div class="grid">

<asp:UpdatePanel ID="UpdatePanel1" runat="server"

UpdateMode="Conditional">
<ContentTemplate>

</ContentTemplate>
</asp:UpdatePanel>

</div><!-- grid -->

</div><!-- divGrid -->
Ahora colocaremos nuestro Gridview dentro del control UpdatePanel
estructurando cada columna a recuperar de la base de datos.
<div class="divGrid">
<div class="grid">

<asp:UpdatePanel ID="UpdatePanel" runat="server"

UpdateMode="Conditional">
<ContentTemplate>

<asp:GridView
ID="GridViewOne"
runat="server"
CssClass="datatable"
CellPadding="0"
CellSpacing="0"
GridLines="None"
AutoGenerateColumns="False">

<RowStyle CssClass="even"/>
<HeaderStyle CssClass="header" />
<AlternatingRowStyle CssClass="odd"/>

</asp:GridView>

</ContentTemplate>
</asp:UpdatePanel>

</div><!-- grid -->

</div><!-- divGrid -->
Como puede apreciarse en el código anterior hemos colocado algunos atributos
en el Gridview los cuales servirán mayormente para formatear el control.

CssClass: Clase CSS que será aplicada al Gridview

CellPadding: Separación del contenido de cada celda con su respectivo borde.
CellSpacing: Separación entre cada celda.
GridLines: Especifica la orientación de líneas que serán visibles en el Gridview.
AutoGenerateColumns: Especifica si las columnas serán creadas dinámicamente
desde el origen de datos.
Una vez tenemos definido el diseño de nuestro Gridview es hora de colocar las
columnas que poblaran nuestro control.
<asp:GridView
ID="GridViewOne"
runat="server"
CssClass="datatable"
CellPadding="0"
CellSpacing="0"
GridLines="None"
AutoGenerateColumns="False"
DataKeyNames="id_del_registro">

<RowStyle CssClass="even"/>
<HeaderStyle CssClass="header" />
<AlternatingRowStyle CssClass="odd"/>

<Columns>
<asp:BoundField HeaderText="Nombre-de-Columna" DataField="Campo-del-
DataSource"/>
</Columns>

</asp:GridView>
Como se aprecia en el código anterior hemos agregado un
atributo DataKeyNames en el Gridview, este atributo debe tener como valor el
nombre del ID que representa el registro que poblara cada fila en el control; es
decir, el nombre ID de la tabla que estamos recuperando en nuestro origen de
datos.
Otra parte importante del código es la incorporación de los elementos:

Columns: Encapsula las columnas que serán visualizadas en el Gridview

BoundField: Cada columna con su respectivo texto de cabecera y campo llamado
desde el origen de datos. Cabe mencionar que podemos agregar tantos
BoundField como necesitemos pero es recomendable no poblar demasiado el
control.
Vallamos ahora a nuestro code behind en donde colocaremos el código Visual
Basic para llenar nuestro control Gridview.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
If Not Page.IsPostBack Then
Llenar_GridView()
End If
End Sub

Private Sub Llenar_GridView()

' CREAMOS NUESTRO ELEMENTO CONNCTION PARA TENER ACCESO A LA BASE DE DATOS
 Dim dbCon As New System.Data.OleDb.OleDbConnection("CADENA DE CONEXION
HACIA SQL SERVER")

Try
'ABRIMOS LA CONEXION HACIA SQL
If dbCon.State = ConnectionState.Closed Then
dbCon.Open()
End If

Dim SQL As String = String.Empty

SQL = "CONSULTA O PRECEDIMIENTO ALMACENADO QUE DEVOLVERA VALORES

DESDE SQL"
' LAS COLUMNAS DE LA CONSULTA DEBEN TENER LOS MISMOS NOMBRE QUE SE
DECLARAN EN EL BoundField

'RECUPERAMOS LOS DATOS DESDE SQL

Dim da As New System.Data.OleDb.OleDbDataAdapter(SQL, dbCon)
'CREAMOS UN DATATABLE
Dim dt As New DataTable("NOMBRE_DEL_DATATABLE")
'LLENAMOS EL DATATABLE
da.Fill(dt)

'AGREGAMOS EL ORIGEN DE DATOS A NUESTRO GRIDVIEW

Me.GridViewOne.DataSource = dt

'POBLAMOS LA TABLA
Me.GridViewOne.DataBind()

'LIMPIAMOS LA MEMORIA DEL SERVIDOR

dt.Dispose()

Catch ex As Exception
'CAPTRAR MENSAJE DE ERROR

Finally
If dbCon.State = ConnectionState.Open Then
dbCon.Close()
End If

End Try
End Sub
Esto debería bastar para poblar un control Gridview ahora solo el toque final que
sería incluir nuestro estilo CSS para darle una apariencia mejorada a nuestro
control.
div.divGrid{width:98%; margin:1.5% 1%;}

.scroll{overflow: scroll; overflow-y: hidden;}

.grid{font-size:10pt; font-weight: normal; width:100%;}

.grid .datatable{width:100%; border:none; padding:0px; margin:0px; color:#333;}

.grid .datatable th
, .grid .datatable td
{
padding:10px 7px;
font-weight:bold;
text-align:left;
font-size:10pt;
border-bottom:solid 1px #BDBDBD;
vertical-align:middle;
}

.grid .datatable th a{color:inherit; text-decoration:none;}

.grid .datatable th a:hover{color:#0B0B3B;}

.grid .datatable td{font-weight:normal; font-size:9pt; }

.grid .datatable tr:hover{cursor:pointer;}

/* FILAS DE LA TABLA */
.grid .datatable tr.even {background-color:#F2F2F2;}

/* FILAS ALTERNATIVAS */
.grid .datatable tr.odd {background-color:#FFF;}

/* PAGINACION DEL GRIDIVIEW */

.grid .pager{width:100%; overflow:hidden;}

.grid .pager input[type=submit]

{
float:left;
margin:0px;
padding:5px 7px;
border:solid 1px #BDBDBD;
font-size:8pt;
font-weight:bold;
background:none;
background-color:#FFF;
border-right:none;
cursor:pointer;
}

.grid .pager input[type=submit]:hover{color:#0080FF;}

.grid .pager .ultimo{border:solid 1px #BDBDBD !important;}

.PagerLabel{display:inline-block; padding:7px 0 0 0;}

.SelectedRow{background-color:#EFFBFB; opacity: 0.8;}

/* ORDEN DE COLUMNAS */
th.Ascending
, th.Descending
{
background-position:left center;
background-repeat:no-repeat;
padding-left: 20px !important;
}
 /* Imagen que se mostrara para las columnas que permiten orden */

th.Ascending{background-image:URL(../img/Ascending.png);}

th.Descending{background-image:URL(../img/Descending.png);}
Espero les sea de utilidad, pueden colocar cualquier duda en la caja de
comentarios, en próximos temas estaremos hablando de otras funcionalidades
que podemos realizar con este poderoso control.