.NET 隨筆

隨手紀錄一些心得,虛心才是王道!

英文園地

最新回應

Introduction

GridView 一直都是賴以為生的工具,如何寫好與善用真是需要用心;

再不改寫控制項的情況下(下次分享),我自己大概是以下面方式達成。

環境:xp sp3 + vs2005 + asp.net 2.0 + SqlServer 2005 + 北風資料庫

其中北風資料庫安裝檔:http://www.microsoft.com/downloads/en/details.aspx?FamilyID=06616212-0356-46A0-8DA2-EEBC53A68034&displaylang=en

 

Examples

版面配置

2010-10-01_105128

 

.aspx

<form id="form1" runat="server">
        <div>
            <asp:LinkButton ID="lcmdAdd" runat="server" OnClick="lcmdAdd_Click">新增</asp:LinkButton>
            &nbsp; &nbsp; &nbsp;
            <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 事件

2010-10-01_105753

 

GridView 屬性

最主要是將排序與分頁打開

2010-10-01_105853

 

 

程式碼

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

2010-10-01_111541

 

新增

2010-10-01_111653

修改

2010-10-01_111757

排序(lastName)

2010-10-01_111928

顯示標題列

2010-10-01_112115

 

當沒資料時除了顯示標題列外,按下新增 No Data 隱藏起來

2010-10-01_112246

 

 

 下載程式碼:TestWebGridView.rar

HEMiDEMi 的標籤:,

三小俠  小弟獻醜,歡迎指教



DotBlogs Tags: ASP.NET GridView

回應

  • feelyousilently 2011/12/9 下午 09:50 回覆

    # re: [GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

    您好!首先我很尊敬您,是因为看大您写到GRIDVIEW是您赖以生存的工具。其次,我只是个生手,所以我没能够很好地看懂上面的这篇文章,于是只好照搬到我的电脑中(xp,iis,vs2005),然而我调试时出现

    “/”应用程序中的服务器错误。
    --------------------------------------------------------------------------------

    分析器错误
    说明: 在分析向此请求提供服务所需资源时出错。请检查下列特定分析错误详细信息并适当地修改源文件。

    分析器错误信息: 未能加载类型“TestWebGridView._Default”。

    源错误:


    行 1: <%@ Page Language="C#" AutoEventWireup="true" Codebehind="ceshi.aspx.cs" Inherits="TestWebGridView._Default" %>
    行 2:
    行 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    源文件: /ceshi.aspx 行: 1


    --------------------------------------------------------------------------------
    版本信息: Microsoft .NET Framework 版本:2.0.50727.42; ASP.NET 版本:2.0.50727.42

    我调试了好久,在IIS中设置虚拟目录,找SLN文件,调试vs2005中的asp.net配置等等,都不能解决问题--我的确也不知道问题在哪--您能抽空关注下这个问题,帮助我下吗?非常感谢!

  • 三小俠 2011/12/11 上午 03:10 回覆

    # re: [GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

    to feelyousilently :  

    恩,若你是下載我的壓縮檔的話,在 Default.aspx 檔中的

    第一行 應該是

    <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="TestWebGridView._Default" %>

    觀察您的 Codebehind 屬性設定似乎與我的不太一樣。

    以上給你參考

  • feelyousilently 2011/12/15 上午 10:21 回覆

    # 看到你的回复,很高兴

    谢谢你^-^ 之所以是Codebbehind="ceshi.aspx.cs"是因为我改了cs文件名;应该是我的系统环境的问题,我重安了下,正在调试,试试看。

  • feelyousilently 2011/12/19 上午 11:07 回覆

    # 调试了,解决了前述问题,但又出现新问题:(

    1、前面,将codebehind该codefile可以了;2、我用的ACCESS数据库,在VS2005重新生成解决方案时没出错,运行时出现以下错误,我是个菜菜鸟,是不是ACCESS的数据库语句和SQL不同?“/”应用程序中的服务器错误。
    --------------------------------------------------------------------------------

    没有可用的错误消息,结果代码: DB_SEC_E_AUTH_FAILED(0x80040E4D)。
    说明: 执行当前 Web 请求期间,出现未处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。

    异常详细信息: System.Data.OleDb.OleDbException: 没有可用的错误消息,结果代码: DB_SEC_E_AUTH_FAILED(0x80040E4D)。

    源错误:


    行 126: OleDbDataReader oDbReader = null;
    行 127: if (this._DbConn.State != ConnectionState.Open) {
    行 128: this._DbConn.Open();
    行 129: }
    行 130: try {


    源文件: c:\Inetpub\wwwroot\hanada\ceshi.aspx.cs 行: 128

    O(∩_∩)O谢谢!

  • feelyousilently 2011/12/19 下午 12:27 回覆

    # 终于可以显示了

    to 三小俠 :
    找出原因了,是ConnectionString没设置好。

    页面终于可以显示了,可是修改、添加等用了不灵啊,我还要再琢磨,当点击“修改”时,看到底下出现的javascript:_doPostBack('GridView'$ctl11$lcmdModify','')语句,我照例晕了过去--这个很难看得懂。

  • feelyousilently 2011/12/19 下午 12:31 回覆

    # 这不好办

    它执行起来看没什么错误,可就是对数据库丝毫没有影响,当然,它也不提示修改成功。而页面里面没有相关的代码,难道是GRIDVIEW自带的?

  • tony 2012/4/5 上午 01:18 回覆

    # re: [GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

    大大您好

    很高興在你這找到實用的資訊

    不過有個問題想要請教你

    就是

    //DoInsertData...

    這部分該怎麼寫啊 好苦惱 試了好久都沒頭緒><

     

     

  • 三小俠 2012/4/5 下午 01:19 回覆

    # re: [GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

    to tony :
    這邊需要處理的是,將使用者輸入的資料新增到資料庫去,

    需要用到一點點的 Sql 語法。

  • sjstone 2013/5/28 下午 07:10 回覆

    # re: [GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

    //DoInsertData...

    請問新增資料時,要如何取到在畫面上新增的欄位資料,

    謝謝。

*標  題:

*姓  名:

  電子郵件: (將不會被顯示)

  個人網頁:

*回應

登入後使用進階評論

Please add 1 and 6 and type the answer here: