martes, 5 de diciembre de 2017

 

Gridview insert update delete EN asp.net C# visual estudio 2017 & Bootstrap 4

En este artículo explicaré cómo realizar seleccionar, insertar, editar, actualizar, eliminar en GridView en ASP.Net usando C #
Este proceso también se conoce como CRUD, es decir, Crear, Leer, Actualizar y Eliminar en GridView con el backend de la base de datos SQL Server en ASP.Net.

1.- primeramente creamos nuestro base de datos
CREATE database crud
use CRUD

CREATE TABLE [dbo].[alumnos](
       [codigo] [char](10)primary key not NULL,
       [nombres] [varchar](50) NULL,
       [telefono] [char](10) NULL
) ON [PRIMARY]

GO

2.-Diseñamos nuestro form1 seria como la imagen siguiente

controles.
codigo html seria lo siguiente

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CRUD EN C#</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="jumbotron">
  <h3 class="display-3">Listado de Alumnos!</h3>
      </div>
            <div class="row">
                <div class="col-12">
                    <div>
                        <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Ingresar nuevo
</button>
                        <br />
                        <br />

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Registro de Alumnos Nuevos</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="form-group">
    <label for="exampleInputEmail1">codigo</label>

      <asp:TextBox CssClass="form-control"  placeholder="tu codigo" required=""  ID="TextBox3" runat="server"></asp:TextBox>
  <label for="exampleInputEmail1">Nombres</label>
      <asp:TextBox CssClass="form-control" placeholder="tu nombre" required="" ID="TextBox2" runat="server"></asp:TextBox>
  <label for="exampleInputEmail1">telefono</label>
      <asp:TextBox CssClass="form-control" placeholder="tu telefono" required="" ID="TextBox4" runat="server"></asp:TextBox>
             <br />
             <asp:Button CssClass="btn btn-outline-success" ID="Button1" OnClick="Button1_Click" runat="server" Text="Guardar" />
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <%-- <button type="button" class="btn btn-primary">Save changes</button>--%>
      </div>


    </div>
  </div>
</div>
                    </div>
                      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" DataKeyNames="codigo" DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
                <Columns>
                    <asp:BoundField DataField="codigo" HeaderText="codigo" SortExpression="codigo" />


                    <asp:BoundField DataField="nombres" HeaderText="nombres" SortExpression="nombres" />
                    <asp:BoundField DataField="telefono" HeaderText="telefono" SortExpression="telefono" />
                </Columns>
                          <FooterStyle BackColor="White" ForeColor="#000066" />
                          <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                          <PagerStyle BackColor="White" BorderStyle="Groove" ForeColor="#000066" HorizontalAlign="Left" />
                          <RowStyle ForeColor="#000066" />
                          <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                          <SortedAscendingCellStyle BackColor="#F1F1F1" />
                          <SortedAscendingHeaderStyle BackColor="#007DBB" />
                          <SortedDescendingCellStyle BackColor="#CAC9C9" />
                          <SortedDescendingHeaderStyle BackColor="#00547E" />
            </asp:GridView>
                </div>
               
            </div>
          
                    <div>
                      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                       <asp:Button ID="Button3" runat="server" Text="Buscar" OnClick="Button3_Click" />
                       
                    </div>
          
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CRUDConnectionString %>"
              updateCommand="UPDATE [alumnos] Set[nombres]=@nombres,[telefono]=@telefono where [codigo]=@codigo"
                SelectCommand="SELECT * FROM [alumnos]"
                DeleteCommand="DELETE  FROM [alumnos] Where [codigo]=@codigo"
                ></asp:SqlDataSource>
        </div>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    </form>
    
</body>
</html>

2.-codificacion para el button insertar

para codificar dale doble clik en button1

protected void Button1_Click(object sender, EventArgs e)
        {
            SqlCommand cmd = new SqlCommand("insert into alumnos values('" + TextBox3.Text + "','" + TextBox2.Text + "','" + TextBox4.Text + "')", con);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            TextBox3.Text = "";
            TextBox2.Text = "";
            TextBox4.Text = "";
            Response.Redirect("WebForm2.aspx");


        }


eso seria todo cualquier duda o sugerencia deja tu mensaje en los comentarios..
link de proyectoaqui >>>>http://yoineer.com/3Nus
Share:

0 comentarios:

Publicar un comentario

Dudas y sugerencias aqui