Operación Edit, Delete, Update e Insert en un DataGrid: Parte I Si va a utilizar un DataGrid entonces necesitarás usar los edit, update, delete con los datos en un DataGrid. Suponiendo que en la tabla la cual los datos estarán utilizándose en los DataGrid, esos entonces contendrán varios recordos en un página los cuales no se podrán visualuzarlos, entonces se pueden desplegar haciendo roles en un DataGrid. Este artículo se presentará cómo usar los edit, delete and update data en un DataGrid para presentarlos en la página. Este es el código aspx: Aquí estña el contenido de cómo se diseñó el web form. Utilizamos un DataGrid en el webform. Aquí configuramos las propiedades que necesitamos emplear en la operación con el DataGrid. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>edit Update Cancel In DataGrid</title> </head> <body> <form id="form1" runat="server"> <div> <asp:datagrid ID="gridedit" runat="server" DataKeyField="id" BorderStyle="Ridge" GridLines="None" BorderWidth="2px" BorderColor="White" BackColor="White" CellPadding="3" CellSpacing="1" AllowSorting="True" PagerStyle- HorizontalAlign="Center" HorizontalAlign="Left" OnEditCommand="editgrid_click" OnCancelCommand="gridcancel_click" OnPageIndexChanged="gridedit_PageIndexChanged" OnUpdateCommand="updategrid_UpdateCommand" Height="267px" PageSize=5 AllowPaging="true" OnDeleteCommand="gridedit_DeleteCommand" AutoGenerateColumns="false" Width="50%"> <FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle> <HeaderStyle Font-Bold="True" ForeColor="#FFFFFF" BackColor="#A53A6A"></HeaderStyle> <FooterStyle BackColor="beige" /> <PagerStyle Font-Bold="true" Mode=NumericPages Font-Underline="true"/> <Columns> <asp:boundcolumn DataField=id HeaderText="ID"> <ItemStyle BackColor="graytext" />
<HeaderStyle BackColor="graytext" /> <asp:boundcolumn DataField=name HeaderText="Name"> <asp:boundcolumn DataField=F_name HeaderText="F_Name"> <asp:boundcolumn DataField=l_name HeaderText="L_Name"> <asp:boundcolumn DataField=City HeaderText="City"> <asp:boundcolumn DataField=State HeaderText="State"> <asp:editcommandcolumn CancelText="Cancel" EditText="Edit" UpdateText="Update" HeaderText="Edit"> </asp:editcommandcolumn> <asp:buttoncolumn CommandName="Delete" HeaderText="Delete" Text="Delete"> </asp:buttoncolumn> </Columns> </asp:datagrid> </div> </form> </body> </html>
Con este código de aspx el web form podría verse así: Figure 1 Este es el código fuente: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page SqlDataAdapter da; DataSet ds = new DataSet(); SqlConnection con; SqlCommand cmd = new SqlCommand(); protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack)
// Define the Edit Command public void editgrid_click(object sender, DataGridCommandEventArgs e) gridedit.edititemindex = e.item.itemindex; // Define the Cancel Command public void gridcancel_click(object sender, DataGridCommandEventArgs e) gridedit.edititemindex = -1; //Here we Bind the data public void Binddata() con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); cmd.commandtext="select * from record"; cmd.connection = con; da = new SqlDataAdapter(cmd); da.fill(ds); con.open(); gridedit.datasource = ds; gridedit.databind(); con.close(); //Update Command Defination protected void updategrid_updatecommand(object source, DataGridCommandEventArgs e) con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); cmd.commandtext = "Update record set name=@name,f_name=@f_name, l_name=@l_name,city=@city,state=@state where id=@id"; cmd.parameters.add("@name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells
[1].Controls[0]).Text; cmd.parameters.add("@f_name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells [2].Controls[0]).Text; cmd.parameters.add("@l_name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells [3].Controls[0]).Text; cmd.parameters.add("@city", SqlDbType.Char).Value = ((TextBox)e.Item.Cells [4].Controls[0]).Text; cmd.parameters.add("@state", SqlDbType.Char).Value = ((TextBox)e.Item.Cells [5].Controls[0]).Text; cmd.parameters.add("@id", SqlDbType.Int).Value = gridedit.datakeys [e.item.itemindex]; cmd.connection = con; cmd.connection.open(); cmd.connection.close(); gridedit.edititemindex = -1; // Delete Command Defination public void gridedit_deletecommand(object sender, DataGridCommandEventArgs e) con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); int U_ID = (int)gridedit.datakeys[(int)e.item.itemindex]; cmd.commandtext = " Delete from record where id=" + U_ID; cmd.connection = con; cmd.connection.open(); cmd.connection.close(); gridedit.edititemindex = -1; // For Paging public void gridedit_pageindexchanged(object source, DataGridPageChangedEventArgs e) gridedit.currentpageindex = e.newpageindex;
Cuando ejecutamos el proyecto, podremos verlo así: Figure 2
Si le damos click al Edit entonces podemos mirarlo de la siguiente forma: Figure 3
Operación Edit, Delete, Update e Insert en un DataGrid: Parte II En el artículo anterior se explicó cómo emplear edit, delete y update a los records en el DataGrid. Ahora se explicará cómo utilizar el insert en un nuevo record en un DataGrid. Este es el código aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>edit Update Delete Cancel and Insert In DataGrid</title> </head> <body> <form id="form1" runat="server"> <div> <asp:datagrid ID="gridedit" runat="server" Width="100px" DataKeyField="id" BorderStyle="Ridge" GridLines="None" BorderWidth="2px" BorderColor="White" BackColor="White" CellPadding="3" CellSpacing="1" AllowSorting="True" PagerStyle-HorizontalAlign="Center" HorizontalAlign="Left" OnEditCommand="editgrid_click" OnCancelCommand= "gridcancel_click" OnPageIndexChanged= "gridedit_pageindexchanged" OnUpdateCommand="updategrid_UpdateCommand" Height="267px" PageSize=5 AllowPaging="true" OnDeleteCommand="gridedit_DeleteCommand" AutoGenerateColumns="false" SelectedItemStyle-Width="100px"> <FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle> <HeaderStyle Font-Bold="True" ForeColor="#FFFFFF" BackColor="#A53A6A"></HeaderStyle> <FooterStyle BackColor="beige" /> <PagerStyle Font-Bold="true" Mode=NumericPages Font-Underline="true"/> <Columns> <asp:boundcolumn DataField=id HeaderText="ID" ItemStyle-Width="10px" Visible="false"> <ItemStyle BackColor="graytext" /> <HeaderStyle BackColor="graytext" /> <asp:boundcolumn DataField=name HeaderText="Name">
<asp:boundcolumn DataField=F_name HeaderText="F_Name"> <asp:boundcolumn DataField=l_name HeaderText="L_Name"> <asp:boundcolumn DataField=City HeaderText="City"> <asp:boundcolumn DataField=State HeaderText="State"> <asp:editcommandcolumn CancelText="Cancel" EditText="Edit" UpdateText="Update" HeaderText="Edit"> </asp:editcommandcolumn> <asp:buttoncolumn CommandName="Delete" HeaderText="Delete" Text="Delete"> </asp:buttoncolumn> </Columns> </asp:datagrid> <br /><br /> <asp:button ID="btninsert" runat="server" Text="Click Here to Insert a New record" Width="250px" OnClick="InsertNewRecord_click" /><br /><br /> <asp:label ID="lblnewname" runat="server" Width="120px" Text="Enter Name" Visible="false"></asp:Label> <asp:textbox ID="txtnewname" runat="server" Visible="false"></asp:TextBox><br /><br /> <asp:label ID="lblF_name" runat="server" Width="120px" Text="Enter Father Name" Visible="false"></asp:Label> <asp:textbox ID="txtF_name" runat="server" Visible="false" ></asp:textbox> <br /><br /> <asp:label ID="lblLast_name" runat="server" Width="120px" Text="Enter Last Name" Visible="false"></asp:Label> <asp:textbox ID="txtLast_Nmae" runat="server" Visible="false"></asp:TextBox> <br /><br /> <asp:label ID="lblcity" runat="server" Text="Enter city" Width="120px" Visible="false"></asp:Label>
<asp:textbox ID="txtcity" runat="server" Visible="false"></asp:TextBox> <br /><br /> <asp:label ID="lblState" runat="server" Width="120px" Text="Enter State Name" Visible="false"></asp:Label> <asp:textbox ID="txtState" runat="server" Visible="false"></asp:TextBox> <asp:button ID="btnnewRecordSubmit" runat="server" Text="Insert" OnClick="Submitnew" Width="100px" Visible="false" /> </div> </form> </body> </html> La aplicación de aspx se vería así: Figure 1: El diseño de la Aplicación. Se configura la propiedad visible de todas los label, textbox e insert button en False. Todos estos estarán visible cuando se le de click en Insert como un Nuevo record button. El código fuente se ve así: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page SqlDataAdapter da;
DataSet ds = new DataSet(); SqlConnection con; SqlCommand cmd = new SqlCommand(); protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) // Define the Edit Command public void editgrid_click(object sender, DataGridCommandEventArgs e) gridedit.edititemindex = e.item.itemindex; // Define the Cancel Command public void gridcancel_click(object sender, DataGridCommandEventArgs e) gridedit.edititemindex = -1; //Here we Bind the data public void Binddata() con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); cmd.commandtext="select * from record order by id Asc"; cmd.connection = con; da = new SqlDataAdapter(cmd); da.fill(ds); con.open(); gridedit.datasource = ds; gridedit.databind(); con.close(); //Update Command Defination protected void updategrid_updatecommand(object source, DataGridCommandEventArgs e) try con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); cmd.commandtext = "Update record set name=@name,f_name=@f_name, l_name=@l_name,city=@city,state=@state where id=@id";
cmd.parameters.add("@name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[1].Controls[0]).Text; cmd.parameters.add("@f_name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[2].Controls[0]).Text; cmd.parameters.add("@l_name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[3].Controls[0]).Text; cmd.parameters.add("@city", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[4].Controls[0]).Text; cmd.parameters.add("@state", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[5].Controls[0]).Text; cmd.parameters.add("@id", SqlDbType.Int).Value = gridedit.datakeys[e.item.itemindex]; cmd.connection = con; cmd.connection.open(); cmd.connection.close(); gridedit.edititemindex = -1; catch (Exception ex) Response.Write(ex.Message); // Delete Command Defination public void gridedit_deletecommand(object sender, DataGridCommandEventArgs e) con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); int U_ID = (int)gridedit.datakeys[(int)e.item.itemindex]; cmd.commandtext = " Delete from record where id=" + U_ID; cmd.connection = con; cmd.connection.open(); cmd.connection.close(); gridedit.edititemindex = -1; // For Paging public void gridedit_pageindexchanged(object source, DataGridPageChangedEventArgs e)
gridedit.currentpageindex = e.newpageindex; //Link for Insert a new Record in a table public void InsertNewRecord_click(object source, System.EventArgs e) lblnewname.visible = true; txtnewname.visible = true; lblf_name.visible = true; txtf_name.visible = true; lbllast_name.visible = true; txtlast_nmae.visible = true; lblcity.visible = true; txtcity.visible = true; lblstate.visible = true; txtstate.visible = true; btnnewrecordsubmit.visible = true; // Command for insert a new Record public void Submitnew(object source, System.EventArgs e) con = new SqlConnection(ConfigurationSettings.AppSettings["connect"]); cmd.commandtext = "insert into record(name,f_name,l_name,city,state) values(@name,@f_name,@l_name,@city,@state)"; cmd.parameters.add("@name", SqlDbType.Char).Value = txtnewname.text; cmd.parameters.add("@f_name", SqlDbType.Char).Value = txtf_name.text; cmd.parameters.add("@l_name", SqlDbType.Char).Value = txtlast_nmae.text; cmd.parameters.add("@city", SqlDbType.Char).Value = txtcity.text; cmd.parameters.add("@state", SqlDbType.Char).Value = txtstate.text; cmd.connection = con; cmd.connection.open(); cmd.connection.close(); gridedit.edititemindex = -1; txtnewname.text = ""; txtf_name.text = ""; txtlast_nmae.text = ""; txtcity.text = ""; txtstate.text = ""; lblnewname.visible = false; txtnewname.visible = false; lblf_name.visible = false; txtf_name.visible = false; lbllast_name.visible = false; txtlast_nmae.visible = false; lblcity.visible = false;
txtcity.visible = false; lblstate.visible = false; txtstate.visible = false; btnnewrecordsubmit.visible = false; Ahora cuando el User ejecutará el proyecto la venta se verá así: Figure 2: In running State Project. Supuestamente si el usuario desea insertar un nuevo record, entonces tundra que hacer click en el butón "Click Here" para insertar u nuevo record. Onclick del button, la nueva ventana se verá así:
Figure 3: Insertar un Nuevo Record. Cuando el usuario clickeé en el butón insertar entonces el record se insertará en el DataGrid. Figure 4: Record Insertado.