|
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "GridView_2.aspx.cs" Inherits = "GridView_2"%>
<! 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> GridView's online editing capabilities </ title>
</ head>
<body>
<form id = "form1" runat = "server">
<div>
<asp: GridView ID = "GridView1" DataKeyNames = "id" runat = "server" AllowPaging = "True" AutoGenerateColumns = "False"
PageSize = "4" OnPageIndexChanging = "GridView1_PageIndexChanging" Width = "100%" OnRowCancelingEdit = "GridView1_RowCancelingEdit" OnRowEditing = "GridView1_RowEditing" OnRowUpdating = "GridView1_RowUpdating" OnRowDeleting = "GridView1_RowDeleting">
<Columns>
<asp: BoundField DataField = "id" HeaderText = "ID number" ReadOnly = "true" />
<asp: BoundField DataField = "name" HeaderText = "name" ReadOnly = "true" />
<asp: ImageField DataImageUrlField = "face" HeaderText = "Avatar" ReadOnly = "true" />
<asp: BoundField DataField = "tel" HeaderText = "Phone" />
<asp: CommandField HeaderText = "Update" ShowEditButton = "True" />
<asp: CommandField HeaderText = "Delete" ShowDeleteButton = "True" />
</ Columns>
</ asp: GridView>
</ div>
</ form>
</ body>
</ html>
Note that when we declared the GridView control above, OnRowCancelingEdit = "GridView1_RowCancelingEdit" specifies the name of the event that cancels editing, OnRowEditing = "GridView1_RowEditing" indicates the name of the event that activates editing, OnRowUpdating = "GridView1_RowUpdating" indicates the name of the event that confirms the update, OnRowDeleting = "GridView1_RowDeleting" indicates the name of the event that performed the deletion. By default, all columns of the GridView in the edit state are editable. If we are not allowed to edit a column, specify ReadOnly = "true" for a column. Here, we assume that only the phone column is allowed to be edited, and the other columns are not allowed to be edited.
The code of GridView_2.aspx.cs is as follows.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
public partial class GridView_2: System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
if (! Page.IsPostBack)
{
// Save the generated data table in the Session,
Session ["DataBase"] = CreatDataBase ();
// Call the binding method
GridViewDataBind ();
}
}
// data binding
protected void GridViewDataBind ()
{
DataTable dt = (DataTable) Session ["DataBase"];
// Specify the data source of the GridView1 control
this.GridView1.DataSource = dt;
// Call the DataBind method of the GridView1 control
this.GridView1.DataBind ();
}
// Generate a data table, which is the data source of the data-bound control
protected DataTable CreatDataBase ()
{
DataTable dt = new DataTable ();
DataColumn dc = new DataColumn ("id", typeof (int));
dt.Columns.Add (dc);
dc = new DataColumn ("name", typeof (string));
dt.Columns.Add (dc);
dc = new DataColumn ("tel", typeof (string));
dt.Columns.Add (dc);
dc = new DataColumn ("email", typeof (string));
dt.Columns.Add (dc);
dc = new DataColumn ("face", typeof (string));
dt.Columns.Add (dc);
int i = 1;
DataRow dr;
for (i = 1; i <10; i ++)
{
dr = dt.NewRow ();
dr ["id"] = i;
dr ["name"] = "Name." + i.ToString () + ".";
dr ["tel"] = "+ 86-755-8839-3207";
dr ["email"] = "Email_" + i.ToString () + "@ hotmail.com";
dr ["face"] = "./images/" + i.ToString () + ".gif";
dt.Rows.Add (dr);
}
return dt;
}
// GridView control page turning event
protected void GridView1_PageIndexChanging (object sender, GridViewPageEventArgs e)
{
this.GridView1.PageIndex = e.NewPageIndex;
GridViewDataBind ();
}
protected void GridView1_RowEditing (object sender, GridViewEditEventArgs e)
{
this.GridView1.EditIndex = e.NewEditIndex;
GridViewDataBind ();
}
protected void GridView1_RowCancelingEdit (object sender, GridViewCancelEditEventArgs e)
{
this.GridView1.EditIndex = -1;
GridViewDataBind ();
}
protected void GridView1_RowUpdating (object sender, GridViewUpdateEventArgs e)
{
// The current operation line, Index = e.RowIndex of the current operation line
GridViewRow dvr = GridView1.Rows [e.RowIndex];
// Get updated cells
TableCell tc = dvr.Cells [3];
// The TextBox control in the cell.
TextBox tb = (TextBox) tc.Controls [0];
// Get the Txext of the TextBox control, which is the updated value
string NewValue = tb.Text;
// Get the ID key value in the data table
string id = dvr.Cells [0] .Text;
/ * -----------------------------------
* The method of obtaining id above is equivalent to string id = GridView1.DataKeys [e.RowIndex] .Value.ToString ();
* Although the above method is tedious, this method can get the content of other columns,
* You can also get the properties of other controls in each cell, this is especially useful in the responsible GridView table
* ------------------------------------------------- -
* * /
DataTable dt = (DataTable) Session ["DataBase"];
foreach (DataRow dr in dt.Rows)
{
// Find the original data and update
if (dr ["id"]. ToString () == id)
{
dr ["tel"] = NewValue;
break;
}
}
// Save the updated data to Seesion. In practice, we will save it to the database.
Session ["DataBase"] = dt;
// Restore edit status
this.GridView1.EditIndex = -1;
// Refresh the data
GridViewDataBind ();
}
protected void GridView1_RowDeleting (object sender, GridViewDeleteEventArgs e)
{
string id = GridView1.DataKeys [e.RowIndex] .Value.ToString ();
DataTable dt = (DataTable) Session ["DataBase"];
foreach (DataRow dr in dt.Rows)
{
// Find the original data and update
if (dr ["id"]. ToString () == id)
{
dt.Rows.Remove (dr);
break;
}
}
// Save the updated data to Seesion. In practice, we will save it to the database.
Session ["DataBase"] = dt;
// Refresh the data
GridViewDataBind ();
}
} |
|