[GridView][ASP.NET] GridView 新增、修改、刪除與排序，沒資料時顯示標題列
Introduction
GridView 一直都是賴以為生的工具，如何寫好與善用真是需要用心；
再不改寫控制項的情況下(下次分享)，我自己大概是以下面方式達成。
環境：xp sp3 + vs2005 + asp.net 2.0 + SqlServer 2005 + 北風資料庫
Examples
版面配置
.aspx
<form id="form1" runat="server">
<div>
<asp:LinkButton ID="lcmdAdd" runat="server" OnClick="lcmdAdd_Click">新增</asp:LinkButton>
<asp:Label ID="lblTotal" runat="server" ForeColor="Red" Text="Label"></asp:Label><br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AllowPaging="True" AllowSorting="True"
OnPageIndexChanging="GridView1_PageIndexChanging"
OnRowCancelingEdit="GridView1_RowCancelingEdit"
OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating"
OnSorting="GridView1_Sorting" OnRowDeleting="GridView1_RowDeleting">
<Columns>
<asp:TemplateField HeaderText="編輯">
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:LinkButton ID="lcmdUpdate" runat="server" CommandName="Update">更新</asp:LinkButton>
<asp:LinkButton ID="lcmdCancel_E" runat="server" CommandName="Cancel">取消</asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="lcmdSave" runat="server" OnClick="lcmdSave_Click">儲存</asp:LinkButton>
<asp:LinkButton ID="lcmdCancel_F" runat="server" OnClick="lcmdCancel_F_Click">取消</asp:LinkButton>
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton ID="lcmdModify" runat="server" CommandName="Edit">修改</asp:LinkButton>
<asp:LinkButton ID="lcmdDelete" runat="server" CommandName="Delete">刪除</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EmployeeID" Visible="False">
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:Label ID="lblEmployeeID_E" runat="server" Text='<%#Eval("EmployeeID") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblEmployeeID" runat="server" Text='<%#Eval("EmployeeID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName" SortExpression="LastName">
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
<ControlStyle Width="100px" />
<EditItemTemplate>
<asp:TextBox ID="lblLastName_E" runat="server" Width="100%" Text='<%#Eval("LastName") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblLastName_F" runat="server" Width="100%" Text='<%#Eval("LastName") %>'></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%#Eval("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
<ControlStyle Width="100px" />
<EditItemTemplate>
<asp:TextBox ID="lblFirstName_E" runat="server" Width="100%" Text='<%#Eval("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblFirstName_F" runat="server" Width="100%" Text='<%#Eval("FirstName") %>'></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%#Eval("FirstName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
GridView 事件
GridView 屬性
最主要是將排序與分頁打開
程式碼
using System.Data.SqlClient;
namespace TestWebGridView {
public partial class _Default : System.Web.UI.Page {
private SqlConnection _DbConn;
private SqlCommand _DbCmd;
private string _DbConnectionString;
public _Default() {
this._DbConnectionString = @"Data Source=localhost;Initial Catalog=Northwind;
User Id=sa;Password=1234;";
this._DbConn = new SqlConnection(this._DbConnectionString);
this._DbCmd = new SqlCommand();
this._DbCmd.CommandType = CommandType.Text;
}
protected void Page_Load(object sender, EventArgs e) {
if (!Page.IsPostBack) {
this.BindData();
}
}
//繫結資料
private void BindData() {
this.GVGetData(this.GridView1);
}
//抓取資料並繫結 GridView
private void GVGetData(GridView pGridView) {
try {
//判斷是否排序過
if (ViewState["NowSE"] == null) {
//沒有排序過，直接抓 DataTable
DataTable oDT = this.GetData();
this.BindGridView(oDT, pGridView);
} else {
//有排序，所以除了抓資料，還要排序
string NowSE = ViewState["NowSE"].ToString();
SortDirection NowSD = (SortDirection)ViewState["NowSD"];
this.GVGetData(NowSD, NowSE,pGridView);
}
} catch {
throw;
}
}
//有指定排序的抓資料並繫結 GridView
private void GVGetData(SortDirection pSortDirection, string pSortExpression,GridView pGridView) {
try {
DataTable oDT = this.GetData();
string sSort = string.Empty;
if (pSortDirection == SortDirection.Ascending) {
sSort = pSortExpression;
} else {
sSort = pSortExpression + " DESC";
}
DataView oDV = oDT.DefaultView;
oDV.Sort = sSort;
this.BindGridView(oDV, pGridView);
} catch {
throw;
}
}
//繫結 GridView
private void BindGridView(DataView InDV, GridView InGridView) {
DataTable oDT = InDV.Table;
this.BindGridView(oDT, InGridView);
}
//繫結 GridView
private void BindGridView(DataTable InDT, GridView InGridView) {
//判斷 DataTable 有無資料
if (InDT.Rows.Count == 0) {
//設定筆數
this.SetTotalData("0");
//使用與來源資料表相同的結構新增資料列
DataRow oDR = InDT.NewRow();
//允許資料列的欄位可以是 DBNULL 值
foreach (DataColumn item in oDR.Table.Columns) {
item.AllowDBNull = true;
}
//DataTable 加入資料列
InDT.Rows.Add(oDR);
//將資料來源結構指定給 Grid DataSource
InGridView.DataSource = InDT;
InGridView.DataBind();
//取得儲存格筆數
int columnCount = InGridView.Rows[0].Cells.Count;
InGridView.Rows[0].Cells.Clear();
InGridView.Rows[0].Cells.Add(new TableCell());
//合併儲存格
InGridView.Rows[0].Cells[0].ColumnSpan = columnCount;
//設定儲存格文字
InGridView.Rows[0].Cells[0].Text = "No Data!";
InGridView.RowStyle.HorizontalAlign = HorizontalAlign.Center;
InGridView.RowStyle.VerticalAlign = VerticalAlign.Middle;
} else {
InGridView.DataSource = InDT;
InGridView.DataBind();
this.SetTotalData(InDT.Rows.Count.ToString());
}
}
/// <summary>
/// 取得資料表。
/// </summary>
private DataTable GetData() {
DataTable oDT = new DataTable();
SqlDataReader oDbReader = null;
if (this._DbConn.State != ConnectionState.Open) {
this._DbConn.Open();
}
try {
this._DbCmd.Connection = this._DbConn;
this._DbCmd.CommandText = this.GetQueryStringSelect();
oDbReader = this._DbCmd.ExecuteReader(CommandBehavior.CloseConnection);
oDT.Load(oDbReader);
} catch {
throw;
}
finally {
if (oDbReader != null) {
oDbReader.Dispose();
}
}
return oDT;
}
/// <summary>
/// 取得 SQLCommand Select 字串。
/// </summary>
private string GetQueryStringSelect() {
string sResult = string.Empty;
sResult = @"Select EmployeeID,LastName,FirstName
From [dbo].Employees";
return sResult;
}
/// <summary>
/// 設定總筆數。
/// </summary>
private void SetTotalData(string Value) {
this.lblTotal.Text = string.Format("總比數：{0}", Value);
}
/// <summary>
/// 分頁切換。
/// </summary>
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) {
//指定 GridView 的新頁面索引
(sender as GridView).PageIndex = e.NewPageIndex;
//重新繫結 GridView
this.GVGetData(sender as GridView);
}
/// <summary>
/// 排序資料列。
/// </summary>
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e) {
string NowSE = ViewState["NowSE"] != null ? ViewState["NowSE"].ToString() : string.Empty;
SortDirection NowSD = ViewState["NowSD"] != null ? (SortDirection)ViewState["NowSD"] : SortDirection.Ascending;
if (string.IsNullOrEmpty(NowSE)) {
NowSE = e.SortExpression;
NowSD = SortDirection.Ascending;
}
if (NowSE != e.SortExpression) {
NowSE = e.SortExpression;
NowSD = SortDirection.Ascending;
} else {
if (NowSD == SortDirection.Ascending) {
NowSD = SortDirection.Descending;
} else {
NowSD = SortDirection.Ascending;
}
}
ViewState["NowSD"] = NowSD;
ViewState["NowSE"] = NowSE;
this.GVGetData(NowSD, NowSE,sender as GridView);
}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e) {
this.RowEditingGridVeiw(sender as GridView, e.NewEditIndex);
}
/// <summary>
/// 修改資料列。
/// </summary>
protected void RowEditingGridVeiw(GridView pGridView, int NewEditIndex) {
//設定 GridView 要編輯的資料列
pGridView.EditIndex = NewEditIndex;
//取消新增資料列
this.CancelRowAddGridView(pGridView);
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) {
this.UpdatingRowGridView(sender as GridView, e);
}
/// <summary>
/// 更新資料列。
/// </summary>
protected void UpdatingRowGridView(GridView pGridView, GridViewUpdateEventArgs e) {
//DoUpdateData...
//離開模式
//this.CancelRowEditGridView(pGridView);
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) {
this.CancelRowEditGridView(sender as GridView);
}
/// <summary>
/// 取消資料列修改。
/// </summary>
protected void CancelRowEditGridView(GridView pGridView) {
pGridView.EditIndex = -1;
this.GVGetData(pGridView);
}
protected void lcmdAdd_Click(object sender, EventArgs e) {
this.AddRowGridView(this.GridView1);
}
protected void AddRowGridView(GridView InGridView) {
//顯示新增資料列
InGridView.ShowFooter = true;
//關閉修改列
this.CancelRowEditGridView(InGridView);
//關閉 No Data 資料列
this.VisibleGridViewNoData(InGridView, false);
}
protected void lcmdCancel_F_Click(object sender, EventArgs e) {
this.CancelRowAddGridView(this.GridView1);
}
/// <summary>
/// 取消資料列新增。
/// </summary>
protected void CancelRowAddGridView(GridView InGridView) {
InGridView.ShowFooter = false;
this.GVGetData(InGridView);
}
protected void lcmdSave_Click(object sender, EventArgs e) {
this.SaveRowGridView(this.GridView1);
}
/// <summary>
/// 儲存資料列。
/// </summary>
protected void SaveRowGridView(GridView InGridView) {
//DoInsertData...
//this.CancelRowAddGridView(InGridView);
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) {
this.DeletingRowGridView(sender as GridView, e.RowIndex);
}
/// <summary>
/// 刪除資料列
/// </summary>
protected void DeletingRowGridView(GridView InGridView,int RowIndex) {
//DoDeleteData
//this.GVGetData(InGridView);
}
/// <summary>
/// 顯示 No Data 資料列。
/// </summary>
protected void VisibleGridViewNoData(GridView InGridView, bool IsShow) {
if (InGridView.Rows.Count == 1 && !IsShow) {
if (InGridView.Rows[0].Cells[0].Text.Trim().Equals("No Data!")) {
InGridView.Rows[0].Visible = IsShow;
}
}
}
}
}
達到效果
我們希望 GirdView 具備了新刪修之後還可以排序，並且沒資料時顯示標題列
List
新增
修改
排序(lastName)
顯示標題列
當沒資料時除了顯示標題列外，按下新增 No Data 隱藏起來
下載程式碼：TestWebGridView.rar
三小俠 小弟獻醜，歡迎指教