ASP.NET DEMO 15: 同時支援行單擊和輕按兩下事件的 GridView/DataGrid

功能：

• 單擊行彈出目前行詳細頁面
• 輕按兩下行進入編輯狀态（GridView/DataGrid内置 Edit）

  說明：

• 單擊事件（onclick）使用了 setTimeout 延遲，根據實際需要修改延遲時間
• 常見處理行方式會選擇在 RowDataBound/ItemDataBound 中處理，這裡我選擇 Page.Render 中處理，至少基于以下考慮
• RowDataBound 僅僅在調用 DataBind 之後才會觸發，回發通過 ViewState 建立空件不觸發 假如需要更多的處理，你需要分開部分邏輯到 RowCreated 等事件中
• 并且我們希望使用 ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法 進行安全腳本的注冊，而後者需要在頁的 Render 階段中才能處理
• 關于“DataGrid中采取的輔助按鈕支援回發”見ASP.NET DEMO8: 為 GridView 每行添加伺服器事件

• PS：未實作 Edit 對應的 Update/Cancel ，根據需要自行添加即可。 

  原始需求：既有單擊又有輕按兩下的ＧｒｉｄＶｉｅｗ是否存在（問了許多人都說不能，郁悶）

  可直接運作源碼（單頁 .aspx）： 

  

  <% @ Page Language = " C# "   %>

  

  <% @ Import Namespace = " System.Data "   %>

  

  

  <%-- http: // community.csdn.net/Expert/TopicView3.asp?id=5767096--%>

  

  

  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

  

  

  < script runat = " server " >

  

  

       protected   void  Page_Load( object  sender, EventArgs e)

  

  

  

  {

  

  

          if (!IsPostBack) 

  

  {

  

              LoadGridViewProductData();

  

              LoadDataGridProductData();

  

          }

  

      }

  

  

       protected   void  GridView1_RowDataBound( object  sender, GridViewRowEventArgs e)

  

  

  

  {

  

  

  

      }    

  

  

       protected   void  DataGrid1_ItemDataBound( object  sender, DataGridItemEventArgs e)

  

  

  

  {

  

          // 隐藏輔助按鈕列

  

          int cellIndex = 0;

  

          e.Item.Cells[cellIndex].Attributes["style"] = "display:none";

  

      }    

  

  

       void  LoadGridViewProductData()

  

  

  

  {

  

          DataTable dt = CreateSampleProductData();

  

  

          GridView1.DataSource = dt;

  

          GridView1.DataBind();    

  

      }

  

  

       void  LoadDataGridProductData()

  

  

  

  {

  

          DataTable dt = CreateSampleProductData();

  

  

          DataGrid1.DataSource = dt;

  

          DataGrid1.DataBind();

  

      }

  

  

  

       sample data #region sample data

  

  

      static DataTable CreateSampleProductData()

  

  

  

  {

  

          DataTable tbl = new DataTable("Products");

  

  

          tbl.Columns.Add("ProductID", typeof(int));

  

          tbl.Columns.Add("ProductName", typeof(string));        

  

          tbl.Columns.Add("UnitPrice", typeof(decimal));

  

          tbl.Columns.Add("CategoryID", typeof(int));

  

  

          tbl.Rows.Add(1, "Chai", 18, 1);

  

          tbl.Rows.Add(2, "Chang", 19, 1);

  

          tbl.Rows.Add(3, "Aniseed Syrup", 10, 2);

  

          tbl.Rows.Add(4, "Chef Anton's Cajun Seasoning", 22, 2);

  

          tbl.Rows.Add(5, "Chef Anton's Gumbo Mix", 21.35, 2);

  

          tbl.Rows.Add(47, "Zaanse koeken", 9.5, 3);

  

          tbl.Rows.Add(48, "Chocolade", 12.75, 3);

  

          tbl.Rows.Add(49, "Maxilaku", 20, 3);        

  

  

          return tbl;

  

      }

  

  

      #endregion     

  

  

       protected   void  GridView1_RowEditing( object  sender, GridViewEditEventArgs e)

  

  

  

  {

  

          GridView1.EditIndex = e.NewEditIndex;

  

          LoadGridViewProductData();

  

      }

  

  

       protected   void  DataGrid1_EditCommand( object  source, DataGridCommandEventArgs e)

  

  

  

  {

  

          DataGrid1.EditItemIndex = e.Item.ItemIndex;

  

          LoadDataGridProductData();

  

      }

  

  

       protected   override   void  Render(HtmlTextWriter writer)

  

  

  

  {

  

          // GridView

  

  

          foreach (GridViewRow row in GridView1.Rows) 

  

  {

  

  

              if (row.RowState == DataControlRowState.Edit) 

  

  { // 編輯狀态

  

                  row.Attributes.Remove("onclick");

  

                  row.Attributes.Remove("ondblclick");

  

                  row.Attributes.Remove("style");

  

                  row.Attributes["title"] = "編輯行";

  

                  continue;

  

              }

  

  

              if (row.RowType == DataControlRowType.DataRow) 

  

  {

  

                  //單擊事件，為了響應輕按兩下事件，延遲 1 s，根據需要可能需要增加延遲

  

                  row.Attributes["onclick"] = String.Format("javascript:setTimeout(/"window.open('DummyProductDetail.aspx?productid={0}')/", 1000*1);event.cancelBubble=true;", GridView1.DataKeys[row.RowIndex].Value.ToString());

  

                  // 擷取ASP.NET内置回發腳本函數，傳回 __doPostBack(<<EventTarget>>, <<EventArgument>>)

  

                  // 可直接寫死寫入腳本，不推薦

  

                  row.Attributes["ondblclick"] = ClientScript.GetPostBackEventReference(GridView1, "Edit$" + row.RowIndex.ToString(), true);

  

                  //

  

                  row.Attributes["style"] = "cursor:pointer";

  

                  row.Attributes["title"] = "單擊打開詳細頁面、輕按兩下進入編輯";

  

              }

  

          }

  

  

          // DataGrid

  

  

          foreach (DataGridItem item in DataGrid1.Items) 

  

  {

  

  

              if (item.ItemType == ListItemType.EditItem) 

  

  {

  

                  item.Attributes.Remove("onclick");

  

                  item.Attributes.Remove("ondblclick");

  

                  item.Attributes.Remove("style");

  

                  item.Attributes["title"] = "編輯行";

  

                  continue;

  

              }

  

  

              if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem) 

  

  {

  

                  //單擊事件，為了響應輕按兩下事件，延遲 1 s，根據需要可能需要增加延遲

  

                  item.Attributes["onclick"] = String.Format("javascript:setTimeout(/"window.open('DummyProductDetail.aspx?productid={0}')/", 1000*1);event.cancelBubble=true;", DataGrid1.DataKeys[item.ItemIndex].ToString());

  

                  // 輕按兩下

  

                  // 擷取輔助的支援回發按鈕

  

                  // 相對而言， GridView 支援直接将 CommandName 作為 <<EventArgument>> 故不需要輔助按鈕

  

                  Button btnHiddenPostButton = item.FindControl("btnHiddenPostButton") as Button;

  

                  // 擷取ASP.NET内置回發腳本函數，傳回 __doPostBack(<<EventTarget>>, <<EventArgument>>)

  

                  // 可直接寫死寫入腳本，不推薦

  

                  item.Attributes["ondblclick"] = ClientScript.GetPostBackEventReference(btnHiddenPostButton, "");

  

                  //

  

                  item.Attributes["style"] = "cursor:pointer";

  

                  item.Attributes["title"] = "單擊打開詳細頁面、輕按兩下進入編輯";

  

              }

  

          }

  

  

          base.Render(writer);

  

      }

  

  </ script >

  

  

  < html xmlns = " http://www.w3.org/1999/xhtml "   >

  

  < head id = " Head1 "  runat = " server " >

  

       < title > ASP.NET DEMO15: GridView 行單擊與輕按兩下事件 </ title >

  

  </ head >

  

  < body >

  

       < form id = " form1 "  runat = " server " >

  

       < div >         

  

           < h3 > 功能： </ h3 >

  

               < li > 單擊彈出目前詳細頁面 </ li >

  

               < li > 輕按兩下進入編輯狀态（GridView / DataGrid内置 Edit） </ li >         

  

           < h3 > 說明： </ h3 >

  

               < li > 單擊事件（onclick）使用了 setTimeout 延遲，根據實際需要修改延遲時間 </ li >

  

               < li > 常見處理行方式會選擇在 RowDataBound / ItemDataBound 中處理，這裡我選擇 Page.Render 中處理，至少基于以下考慮

  

                   < li style = " padding-left:20px; list-style-type:square " > RowDataBound 僅僅在調用 DataBind 之後才會觸發，回發通過 ViewState 建立空件不觸發

  

              假如需要更多的處理，你需要分開部分邏輯到 RowCreated 等事件中 </ li >  

  

                   < li style = " padding-left:20px; list-style-type:square " > 并且我們希望使用 

  

              ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法

  

              進行安全腳本的注冊，而後者需要在頁的 Render 階段中才能處理 </ li >

  

               </ li >

  

               < li > 關于“DataGrid中采取的輔助按鈕支援回發”見 < a href = " http://www.cnblogs.com/Jinglecat/archive/2007/07/15/818394.html " > ASP.NET DEMO8: 為 GridView 每行添加伺服器事件 </ a >

  

           < br  />

  

           < input type = " button "  id = " Button1 "  value = " Rebind "  onclick = " location.href=location.href; "   />

  

           < div style = " float:left " >

  

           < h3 > GridView Version </ h3 >

  

           < asp:GridView ID = " GridView1 "  DataKeyNames = " ProductID "  runat = " server "  AutoGenerateColumns = " False "  OnRowEditing = " GridView1_RowEditing "  OnRowDataBound = " GridView1_RowDataBound " >

  

               < Columns >                               

  

                   < asp:TemplateField HeaderText = " ProductName "   >

  

                       < ItemTemplate >

  

                           <% # Eval( " ProductName " )  %>

  

                       </ ItemTemplate >

  

                       < EditItemTemplate >

  

                           < asp:TextBox ID = " txtProductName "  runat = " server "  Text = ' <%# Bind("ProductName") %> '   />

  

                       </ EditItemTemplate >

  

                   </ asp:TemplateField >

  

                   < asp:BoundField DataField = " UnitPrice "  HeaderText = " UnitPrice "   />

  

  

               </ Columns >

  

           </ asp:GridView ></ div >

  

           < div style = " float:left;padding-left:100px; " >

  

           < h3 > DataGrid Version </ h3 >

  

           < asp:DataGrid ID = " DataGrid1 "  DataKeyField = " ProductID "   runat = " server "  AutoGenerateColumns = " False "  OnEditCommand = " DataGrid1_EditCommand "  OnItemDataBound = " DataGrid1_ItemDataBound " >

  

               < Columns >  

  

                   < asp:TemplateColumn >

  

                       < ItemTemplate >

  

                           < asp:Button ID = " btnHiddenPostButton "  CommandName = " Edit "  runat = " server "  Text = " HiddenPostButton "  style = " display:none "   />

  

                       </ ItemTemplate >

  

                   </ asp:TemplateColumn >           

  

                   < asp:BoundColumn DataField = " ProductName "  HeaderText = " ProductName "   />

  

                   < asp:BoundColumn DataField = " UnitPrice "  HeaderText = " UnitPrice "   />  

  

               </ Columns >

  

           </ asp:DataGrid ></ div >

  

           </ li >

  

           </ div >

  

       </ form >

  

  </ body >

  

  </ html >

  

   效果：