(Repaste)ASP.NET 单击和双击事件的 GridView/DataGrid

来源:www.accessoft.com 点击数:14405 　 | 收藏 | 复制

时　间:2012-04-11 15:20:17
作　者:何必见戴 ID：13894 城市：厦门
摘　要:
正　文:

ASP.NET 单击和双击事件的 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)
{
  /**//*
    当然可以在这里进行客户端脚本绑定，
    但是，我选择在重载页的 Render 方法中处理，因为
    1. RowDataBound 仅仅在调用 DataBind 之后才会触发，回发通过 ViewState 创建空件不触发
    假如需要更多的处理，你需要分开部分逻辑到 RowCreated 等事件中
    2. 并且我们希望使用
    ClientScript.GetPostBackEventReference 和
ClientScript.RegisterForEventValidation 方法
    进行安全脚本的注册，而后者需要在页的 Render 阶段中才能处理
  */
}
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="ASP.NET">http://www.cnblogs.com/Jinglecat/archive/2007/07/15/818394.html">ASP.NET DEMO8: 为
GridView 每行添加服务器事件</a>
  <br />
  <input type="button" id="Button1" value="Rebind"
/>
  <div style="float:left">
  <h3>GridView Version</h3>
  <asp:GridView ID="GridView1" DataKeyNames="ProductID" runat="server"
AutoGenerateColumns="False"
>
    <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"
>
    <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>