功能:
单击选中行 双击打开详细页面
说明:
- 这是 ASP.NET DEMO 15: 同时支持行单击和双击事件的的改进版本
- 单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间
- 当双击时,通过全局变量 dbl_click 来取消单击事件的响应
- 常见处理行方式会选择在 RowDataBound/ItemDataBound 中处理,这里我选择 Page.Render 中处理,至少基于以下考虑
- RowDataBound 仅仅在调用 DataBind 之后才会触发,回发通过 ViewState 创建空件不触发 假如需要更多的处理,你需要分开部分逻辑到 RowCreated 等事件中
- 并且我们希望使用 ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法 进行安全脚本的注册,而后者需要在页的 Render 阶段中才能处理
- 关于“DataGrid中采取的辅助按钮支持回发”见ASP.NET DEMO8: 为 GridView 每行添加服务器事件
<% @ 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();
}
#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 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) {
// 单击事件,为了响应双击事件,需要延迟单击响应,根据需要可能需要增加延迟
// 获取ASP.NET内置回发脚本函数,返回 __doPostBack(<<EventTarget>>, <<EventArgument>>)
// 可直接硬编码写入脚本,不推荐
row.Attributes[ " onclick " ] = String.Format( " javascript:setTimeout(\ " if (dbl_click){{dbl_click = false ;}} else {{{ 0 }}};\ " , 1000*0.3); " , ClientScript.GetPostBackEventReference(GridView1, " Select$ " + row.RowIndex.ToString(), true ));
// 双击,设置 dbl_click=true,以取消单击响应
row.Attributes[ " ondblclick " ] = String.Format( " javascript:dbl_click=true;window.open('DummyProductDetail.aspx?productid={0}'); " , GridView1.DataKeys[row.RowIndex].Value.ToString());
//
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,根据需要可能需要增加延迟
// 获取辅助的支持回发按钮
// 相对而言, GridView 支持直接将 CommandName 作为 <<EventArgument>> 故不需要辅助按钮
Button btnHiddenPostButton = item.FindControl( " btnHiddenPostButton " ) as Button;
item.Attributes[ " onclick " ] = String.Format( " javascript:setTimeout(\ " if (dbl_click){{dbl_click = false ;}} else {{{ 0 }}};\ " , 1000*0.3); " , ClientScript.GetPostBackEventReference(btnHiddenPostButton, null ));
// 双击
// 双击,设置 dbl_click=true,以取消单击响应
item.Attributes[ " ondblclick " ] = String.Format( " javascript:dbl_click=true;window.open('DummyProductDetail.aspx?productid={0}'); " , DataGrid1.DataKeys[item.ItemIndex].ToString());
//
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 行单击与双击事件2</title>
<script>
// 辅助全局变量,指示是否双击
var dbl_click = false ;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>功能:</h3>
<li>单击选中行</li>
<li>双击打开详细页面</li>
<h3>说明:</h3>
<ul>
<li>这是<a href="GridView/DataGrid http://www.cnblogs.com/Jinglecat/archive/2007/09/20/900645.html"> ASP.NET DEMO 15: 同时支持行单击和双击事件</a>的改进版本</li>
<li>单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间</li>
<li>当双击时,通过全局变量 dbl_click 来取消单击事件的响应</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>
</ul>
<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" OnRowDataBound="GridView1_RowDataBound">
<SelectedRowStyle BackColor="CadetBlue" />
<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" OnItemDataBound="DataGrid1_ItemDataBound">
<SelectedItemStyle BackColor="CadetBlue" />
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Button ID="btnHiddenPostButton" CommandName="Select" 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>