Genesis Vargas J

Insertar, Consultar y Eliminar datos en ASP.NET, SQl Server y Bootstrap

Comparte:

Hola amigos, hoy les traigo este tutorial sobre como hacer una aplicación web para insertar, consultar y eliminar datos de una base de datos de Sql Server con ASP.NET. Cabe mencionar que en una oportunidad anterior ya habia desarrollado un tutorial igual pero utlizando PHP y Mysql y por eso decidí hacer la alternativa para los amantes de Microsoft .NET.

Para este ejemplo debemos abrir nuestro visual studio y crear un proyecto vacío de Asp.Net con C# y vamos a agregar al proyecto un webform (que en esta ocasion lo llamamos Default.aspx) y 2 clases: BaseDato y Registro. En la primera vamos a utilizar todos los métodos para comunicarnos con sql server y en la otra nos va a servir como puente entre la conexión y el webform (tendremos las funciones que vamos a desarrollar con el programa: insertar, eliminar y consultar).

Nuestro proyecto debería quedar de la siguiente manera (ademas de cargar la carpeta Assets que es la que tiene Bootstrap --> css, js y fonts):

Teniendo el marco de trabajo listo, veamos el código de cada archivo:

DEFAULT.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CRUD_Sencillo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Insertar, Consultar y Eliminar en ASP.NET SQl Server y Bootstrap</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="Assets/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Assets/js/jquery-1.10.2.min.js"></script>
    <script src="Assets/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="jumbotron" style="padding:20px;text-align:center">
            <h1>Insertar, Consultar y Eliminar en ASP.NET SQl Server y Bootstrap</h1>
            <p class="lead">Este es un ejemplo de como hacer una aplicación con ASP.NET para Insertar, Consultar, Eliminar y Actualizar Datos.</p>
        </div>

        <div class="row">
            <div class="col-md-4" style="text-align:center">
                <div class="well">
                    <h4>Insertar nuevo registro</h4><hr />
                    <p><asp:Label ID="LblGuardar" runat="server"></asp:Label></p>
                    <p><i class="glyphicon glyphicon-user"></i> Nombre y Apellido:</p>
                    <p><asp:TextBox ID="TxtNombre" runat="server" style="margin:0 auto" CssClass="form-control" Width="200px"></asp:TextBox></p>
                    <p><i class="glyphicon glyphicon-phone"></i> Telefono:</p>
                    <p><asp:TextBox ID="TxtTelefono" runat="server" style="margin:0 auto" CssClass="form-control" Width="200px"></asp:TextBox></p>
                    <p><i class="glyphicon glyphicon-home"></i> Ciudad:</p>
                    <p><asp:TextBox ID="TxtCiudad" runat="server" style="margin:0 auto" CssClass="form-control" Width="200px"></asp:TextBox></p>
                    <p><asp:Button ID="BtnGuardar" runat="server" CssClass="btn btn-primary" Text="Guardar Registro" OnClick="BtnGuardar_Click" /></p>
                </div>
            </div>
            <div class="col-md-4" style="text-align:center">
                <h4>Consulta desde la BD al cargar la página</h4><hr />
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </div>
            <div class="col-md-4" style="text-align:center">
                <h4>Escoge el registro que desees eliminar</h4><hr />
                <p><asp:Label ID="LblEliminar" runat="server"></asp:Label></p>
                <p><asp:DropDownList ID="CmbRegistro" CssClass="form-control" runat="server"></asp:DropDownList></p>
                <p><asp:Button ID="BtnEliminar" runat="server" CssClass="btn btn-primary" Text="Eliminar Registro" OnClick="BtnEliminar_Click" /></p>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Como ven este es el html de nuestro webform donde estamos llamando a bootstrap para mejorar el estilo de la página y tambien usamos controles de asp.net como el Literal para que cuando cargue la página nos muestre una tabla de bootstrap con la consulta de todos los registros que hayan en la base de datos, también estamos usando un dropdownlist y los textbox del formulario de registro.

DEFAULT.ASPX.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace CRUD_Sencillo
{
    public partial class Default : System.Web.UI.Page
    {
        Registro reg = new Registro();
        string html = "";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (reg.Consultar().Rows.Count > 0)
            {
                html += "<table class='table table-striped table-bordered'>";
                html += "<thead><tr><td>Nombre</td><td>Telefono</td><td>Ciudad</td></tr></thead>";
                html += "<tbody>";
                foreach (DataRow dbRow in reg.Consultar().Rows)
                {
                    html += "<tr>";
                    html += "<td>" + dbRow["Nombre"].ToString() + "</td>";
                    html += "<td>" + dbRow["Telefono"].ToString() + "</td>";
                    html += "<td>" + dbRow["Ciudad"].ToString() + "</td>";
                    html += "</tr>";
                }
                html += "</tbody>";
                html += "</table>";
            }
            else
            {
                html += "<table class='table table-striped table-bordered'>";
                html += "<tr><td>No hay registros</td></tr>";
                html += "</table>";
            }
            Literal1.Text = html;
            CmbRegistro.DataSource = reg.Consultar();
            CmbRegistro.DataTextField = "Nombre";
            CmbRegistro.DataValueField = "Nombre";
            CmbRegistro.DataBind();
        }

        protected void BtnGuardar_Click(object sender, EventArgs e)
        {
            if(TxtCiudad.Text != "" & TxtNombre.Text != "" & TxtTelefono.Text != "")
            {
                if(reg.Insertar(TxtNombre.Text,TxtTelefono.Text,TxtCiudad.Text))
                {
                    LblGuardar.Text = "El registro se guardo correctamente";
                    TxtCiudad.Text = "";
                    TxtTelefono.Text = "";
                    TxtNombre.Text = "";
                }
                else
                {
                    LblGuardar.Text = "El registro no se pudo guardar";
                }
            }
            else
            {
                LblGuardar.Text = "Por favor completa los campos";
            }
        }

        protected void BtnEliminar_Click(object sender, EventArgs e)
        {
            if (CmbRegistro.Text != "")
            {
                if (reg.Eliminar(CmbRegistro.Text))
                {
                    LblEliminar.Text = "El registro se elimino correctamente";
                    CmbRegistro.DataSource = reg.Consultar();
                    CmbRegistro.DataTextField = "Nombre";
                    CmbRegistro.DataValueField = "Nombre";
                    CmbRegistro.DataBind();
                }
                else
                {
                    LblEliminar.Text = "El registro no se pudo eliminar";
                }
            }
        }
    }
}

En este archivo se puede observar que en el evento de cargar la página se hace utiliza una variable string llamada html para pasarle el codigo html de nuestra tabla con todos los registros de la base de datos con el estilo de bootstrap, para ello al inicio se crea un objeto de la clase Registro y en el evento se accede a la función Consultar() que devuelve un datatable y para mostrar los registros usamos un for each con un datarow en las filas de nuestra funcion datatable. También le colocamos esa misma funcion en el datasource del combobox que va a mostrar los registros a eliminar y lo bindeamos. Finalmente en los eventos de los botones guardar registro y eliminar registro utilizamos el objeto de la clase registro para acceder a la funcion correspondiente (Eliminar o Insertar) pasándoles los párametros correspondientes a cada una.

REGISTRO.CS

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

namespace CRUD_Sencillo
{
    public class Registro
    {
        bool ejecuto;
        BaseDato bd = new BaseDato();

        public DataTable Consultar()
        {
            DataTable dt;
            bd.Conectar();
            bd.CrearComando("SELECT * FROM Registro");
            dt= bd.EjecutarDataTable();
            bd.Desconectar();
            return dt;
        }

        public bool Insertar(string nom, string tel, string ciu)
        {
            bd.Conectar();
            bd.CrearComando("INSERT INTO Registro(Nombre,Telefono,Ciudad) VALUES(@nom,@tel,@ciu);");
            bd.AsignarParametro("@nom",SqlDbType.VarChar, nom);
            bd.AsignarParametro("@tel", SqlDbType.VarChar, tel);
            bd.AsignarParametro("@ciu", SqlDbType.VarChar, ciu);
            if(bd.EjecutarConsulta() > 0)
            {
                ejecuto = true;
            }
            else
            {
                ejecuto = false;
            }
            return ejecuto;
        }

        public bool Eliminar(string nom)
        {
            bd.Conectar();
            bd.CrearComando("DELETE FROM Registro WHERE Nombre = @nom;");
            bd.AsignarParametro("@nom", SqlDbType.VarChar, nom);
            if (bd.EjecutarConsulta() > 0)
            {
                ejecuto = true;
            }
            else
            {
                ejecuto = false;
            }
            return ejecuto;
        }
    }
}

En esta clase podemos ver que creamos un objeto de la clase base dato para poder acceder a sus métodos y creamos 3 funciones escenciales de nuestra aplicación: Insertar, Eliminar y Consultar. La función Consultar la declaramos como datatable y le asignamos la consulta básica de select * from para consultar todo, la función Eliminar e Insertar las declaramos como booleanas para que retornen algo que nos diga si ejecutaron nuestra consulta o si no, en el caso de Eliminar le pasamos un solo párametro que vendria siendo el ID de la tabla Registro (el valor que este en el DropDownList) y le pasamos la consulta básica de eliminar y en Insertar le pasamos los 3 párametros que vendrían siendo los valores que recogamos de los 3 textbox y le pasamos la consultar normal de un INSERT.

BASEDATO.CS

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

namespace CRUD_Sencillo
{
    public class BaseDato
    {
        private SqlConnection con;
        private SqlDataAdapter da;
        static DataTable dt;
        private SqlCommand cmd;

        public void Conectar()
        {
            con = new SqlConnection("server=localhost;user=sa;pwd;123456;initial catalog=registro");
            con.Open();
        }

        public void Desconectar()
        {
            con.Close();
        }

        public void CrearComando(string consulta)
        {
            cmd = new SqlCommand(consulta, con);
        }

        public void AsignarParametro(string param, SqlDbType tipo, object val)
        {
            cmd.Parameters.Add(param, tipo).Value = val;
        }

        public int EjecutarConsulta()
        {
            return cmd.ExecuteNonQuery();
        }

        public DataTable EjecutarDataTable() 
        {
            dt = new DataTable();
            da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            return dt;
        }
    }
}

En esta clase importamos el espacio de nombre system.data y system.datasqlcient para comunicarnos con nuestra base de datos sql server y creamos nuestros métodos para conectarnos, crear comandos, asignar parametros, ejecutar una consulta y ejecutar un datatble (útil para las consultas).

Al final nuestro emplo compilado y corriendo en localhost se verá así:

Bueno eso es todo espero que les sirva mucho para aprender y practicar.

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: