GridView, DataList and ListBox 行 单击与双击事件处理
前台页面放置GridView,DataList和ListBox控件
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Admin_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>单击与双击事件</title>
</head>
<body>
<form id="form1" runat="server">
<h2> GridView, DataList and ListBox单击与双击事件</h2>
<div>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical"
OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
<FooterStyle BackColor="#CCCC99" />
<Columns>
<asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="false"/>
<asp:ButtonField Text="DoubleClick" CommandName="DoubleClick" Visible="false"/>
</Columns>
<RowStyle BackColor="#F7F7DE" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<br /><br />
<asp:DataList ID="DataList1" runat="server" width="400px"
OnItemCommand="DataList1_ItemCommand" OnItemDataBound="DataList1_ItemDataBound">
<HeaderTemplate>
任务列表
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" Text="SingleClick" CommandName="SingleClick" Visible="false"/>
<asp:LinkButton ID="LinkButton2" runat="server" Text="DoubleClick" CommandName="DoubleClick" Visible="false"/>
<asp:Panel ID="Panel1" runat="server">
<span style="float:left;">
<b>编号: </b><%# Eval("Id") %>
<b>任务: </b><%# Eval("Task") %>
</span>
<span style="float:right;">
<b>是否完成: </b><%# Eval("IsDone") %>
</span>
</asp:Panel>
</ItemTemplate>
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#F7F7DE" BorderStyle="Solid" BorderColor="lightgray" BorderWidth="1px" />
<AlternatingItemStyle BackColor="white" />
<SelectedItemStyle BackColor="#CE5D5A" />
</asp:DataList>
<br /><br />
<asp:ListBox ID="ListBox1" runat="server" DataTextField="Task" DataValueField="Id" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"></asp:ListBox>
<br /><br />
<asp:Label id="Message" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>单击与双击事件</title>
</head>
<body>
<form id="form1" runat="server">
<h2> GridView, DataList and ListBox单击与双击事件</h2>
<div>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical"
OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
<FooterStyle BackColor="#CCCC99" />
<Columns>
<asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="false"/>
<asp:ButtonField Text="DoubleClick" CommandName="DoubleClick" Visible="false"/>
</Columns>
<RowStyle BackColor="#F7F7DE" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<br /><br />
<asp:DataList ID="DataList1" runat="server" width="400px"
OnItemCommand="DataList1_ItemCommand" OnItemDataBound="DataList1_ItemDataBound">
<HeaderTemplate>
任务列表
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" Text="SingleClick" CommandName="SingleClick" Visible="false"/>
<asp:LinkButton ID="LinkButton2" runat="server" Text="DoubleClick" CommandName="DoubleClick" Visible="false"/>
<asp:Panel ID="Panel1" runat="server">
<span style="float:left;">
<b>编号: </b><%# Eval("Id") %>
<b>任务: </b><%# Eval("Task") %>
</span>
<span style="float:right;">
<b>是否完成: </b><%# Eval("IsDone") %>
</span>
</asp:Panel>
</ItemTemplate>
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#F7F7DE" BorderStyle="Solid" BorderColor="lightgray" BorderWidth="1px" />
<AlternatingItemStyle BackColor="white" />
<SelectedItemStyle BackColor="#CE5D5A" />
</asp:DataList>
<br /><br />
<asp:ListBox ID="ListBox1" runat="server" DataTextField="Task" DataValueField="Id" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"></asp:ListBox>
<br /><br />
<asp:Label id="Message" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
</form>
</body>
</html>
后台数据绑定与处理代码
代码using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Admin_Default : System.Web.UI.Page
{
#region Page Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.GridView1.DataSource = GetData();
this.GridView1.DataBind();
this.DataList1.DataSource = GetData();
this.DataList1.DataBind();
this.ListBox1.DataSource = GetData();
this.ListBox1.DataBind();
SetupListBoxEvents(this.ListBox1);
}
}
#endregion
#region GridView1
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Get the LinkButton control in the first cell
LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];
// Get the javascript which is assigned to this LinkButton
string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
// To prevent the first click from posting back immediately
// (therefore giving the user a chance to double click) pause the
// postback for 300 milliseconds by using setTimeout
_jsSingle = _jsSingle.Insert(11, "setTimeout(\"");
_jsSingle += "\", 300)";
// Add this javascript to the onclick Attribute of the row
e.Row.Attributes["onclick"] = _jsSingle;
// Get the LinkButton control in the second cell
LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[1].Controls[0];
// Get the javascript which is assigned to this LinkButton
string _jsDouble = ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
// Add this javascript to the ondblclick Attribute of the row
e.Row.Attributes["ondblclick"] = _jsDouble;
}
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
GridView _gridView = (GridView)sender;
// Get the selected index and the command name
int _selectedIndex = int.Parse(e.CommandArgument.ToString());
string _commandName = e.CommandName;
switch (_commandName)
{
case ("SingleClick"):
_gridView.SelectedIndex = _selectedIndex;
this.Message.Text += "Single clicked GridView row at index " + _selectedIndex.ToString() + "<br />";
break;
case ("DoubleClick"):
this.Message.Text += "Double clicked GridView row at index " + _selectedIndex.ToString() + "<br />";
break;
}
}
#endregion
#region DataList1
protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
// Get the first LinkButton control
LinkButton _singleClickButton = (LinkButton)e.Item.Controls[1];
// Get the javascript which is assigned to this LinkButton
string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
// To prevent the first click from posting back immediately
// (therefore giving the user a chance to double click) pause the
// postback for 300 milliseconds by using setTimeout
_jsSingle = _jsSingle.Insert(11, "setTimeout(\"");
_jsSingle += "\", 300)";
// Get the panel wrapping the item
Panel itemPanelSingle = (Panel)e.Item.Controls[5];
// Add this javascript to the onclick Attribute of the panel
itemPanelSingle.Attributes["onclick"] = _jsSingle;
// Get the second LinkButton control
LinkButton _doubleClickButton = (LinkButton)e.Item.Controls[3];
// Get the javascript which is assigned to this LinkButton
string _jsDouble = ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
// Get the panel wrapping the item
Panel _itemPanelDouble = (Panel)e.Item.Controls[5];
// Add this javascript to the ondblclick Attribute of the panel
_itemPanelDouble.Attributes["ondblclick"] = _jsDouble;
}
}
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
DataList _dataList = (DataList)source;
// Get the selected index and the command name
int _selectedIndex = e.Item.ItemIndex;
string _commandName = e.CommandName;
switch (_commandName)
{
case ("SingleClick"):
_dataList.SelectedIndex = _selectedIndex;
this.Message.Text += "Single clicked DataList row at index " + _selectedIndex.ToString() + "<br />";
break;
case ("DoubleClick"):
this.Message.Text += "Double clicked DataList row at index " + _selectedIndex.ToString() + "<br />";
break;
}
}
#endregion
#region ListBox1
private void SetupListBoxEvents(ListBox listBox)
{
// Build the javascript for the single click
string _jsSingle = "setTimeout(\"__doPostBack(\'" + listBox.UniqueID + "\',\'SingleClick\')\", 300)";
// Add the javascript to the onclick Attribute of the ListBox
listBox.Attributes["onclick"] = _jsSingle;
// Build the javascript for the double click
string _jsDouble = "__doPostBack(\'" + listBox.UniqueID + "\',\'DoubleClick\')";
// Add the javascript to the ondblclick Attribute of the ListBox
listBox.Attributes["ondblclick"] = _jsDouble;
}
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
ListBox _listBox = (ListBox)sender;
// Get the selected index and the command name
int _selectedIndex = _listBox.SelectedIndex;
string _commandName = Request.Form["__EventArgument"].ToString();
switch (_commandName)
{
case ("SingleClick"):
this.Message.Text += "Single clicked ListBox row at index " + _selectedIndex.ToString() + "<br />";
break;
case ("DoubleClick"):
this.Message.Text += "Double clicked ListBox row at index " + _selectedIndex.ToString() + "<br />";
break;
}
}
#endregion
#region Render Override
// Register the dynamically created client scripts
protected override void Render(HtmlTextWriter writer)
{
// The client scripts for GridView1 were created in GridView1_RowDataBound
foreach (GridViewRow r in GridView1.Rows)
{
if (r.RowType == DataControlRowType.DataRow)
{
Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl00");
Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl01");
}
}
// The client scripts for DataList1 were created in DataList1_ItemDataBound
foreach (DataListItem i in DataList1.Items)
{
if (i.ItemType == ListItemType.Item
|| i.ItemType == ListItemType.AlternatingItem
|| i.ItemType == ListItemType.SelectedItem)
{
Page.ClientScript.RegisterForEventValidation(i.UniqueID + "$ctl00");
Page.ClientScript.RegisterForEventValidation(i.UniqueID + "$ctl01");
}
}
base.Render(writer);
}
#endregion
#region GetData
// Some data to bind to the Gridview and DataList
private DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Id", typeof(int)));
dt.Columns.Add(new DataColumn("Task", typeof(string)));
dt.Columns.Add(new DataColumn("IsDone", typeof(bool)));
dt.Rows.Add(new object[] { 0, "Create a new project", true });
dt.Rows.Add(new object[] { 1, "Build a demo applcation", true });
dt.Rows.Add(new object[] { 2, "Test the demo applcation", true });
dt.Rows.Add(new object[] { 3, "Deploy the demo applcation", false });
dt.Rows.Add(new object[] { 4, "Support the demo applcation", false });
return dt;
}
#endregion
}
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Admin_Default : System.Web.UI.Page
{
#region Page Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.GridView1.DataSource = GetData();
this.GridView1.DataBind();
this.DataList1.DataSource = GetData();
this.DataList1.DataBind();
this.ListBox1.DataSource = GetData();
this.ListBox1.DataBind();
SetupListBoxEvents(this.ListBox1);
}
}
#endregion
#region GridView1
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Get the LinkButton control in the first cell
LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];
// Get the javascript which is assigned to this LinkButton
string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
// To prevent the first click from posting back immediately
// (therefore giving the user a chance to double click) pause the
// postback for 300 milliseconds by using setTimeout
_jsSingle = _jsSingle.Insert(11, "setTimeout(\"");
_jsSingle += "\", 300)";
// Add this javascript to the onclick Attribute of the row
e.Row.Attributes["onclick"] = _jsSingle;
// Get the LinkButton control in the second cell
LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[1].Controls[0];
// Get the javascript which is assigned to this LinkButton
string _jsDouble = ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
// Add this javascript to the ondblclick Attribute of the row
e.Row.Attributes["ondblclick"] = _jsDouble;
}
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
GridView _gridView = (GridView)sender;
// Get the selected index and the command name
int _selectedIndex = int.Parse(e.CommandArgument.ToString());
string _commandName = e.CommandName;
switch (_commandName)
{
case ("SingleClick"):
_gridView.SelectedIndex = _selectedIndex;
this.Message.Text += "Single clicked GridView row at index " + _selectedIndex.ToString() + "<br />";
break;
case ("DoubleClick"):
this.Message.Text += "Double clicked GridView row at index " + _selectedIndex.ToString() + "<br />";
break;
}
}
#endregion
#region DataList1
protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
// Get the first LinkButton control
LinkButton _singleClickButton = (LinkButton)e.Item.Controls[1];
// Get the javascript which is assigned to this LinkButton
string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
// To prevent the first click from posting back immediately
// (therefore giving the user a chance to double click) pause the
// postback for 300 milliseconds by using setTimeout
_jsSingle = _jsSingle.Insert(11, "setTimeout(\"");
_jsSingle += "\", 300)";
// Get the panel wrapping the item
Panel itemPanelSingle = (Panel)e.Item.Controls[5];
// Add this javascript to the onclick Attribute of the panel
itemPanelSingle.Attributes["onclick"] = _jsSingle;
// Get the second LinkButton control
LinkButton _doubleClickButton = (LinkButton)e.Item.Controls[3];
// Get the javascript which is assigned to this LinkButton
string _jsDouble = ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");
// Get the panel wrapping the item
Panel _itemPanelDouble = (Panel)e.Item.Controls[5];
// Add this javascript to the ondblclick Attribute of the panel
_itemPanelDouble.Attributes["ondblclick"] = _jsDouble;
}
}
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
DataList _dataList = (DataList)source;
// Get the selected index and the command name
int _selectedIndex = e.Item.ItemIndex;
string _commandName = e.CommandName;
switch (_commandName)
{
case ("SingleClick"):
_dataList.SelectedIndex = _selectedIndex;
this.Message.Text += "Single clicked DataList row at index " + _selectedIndex.ToString() + "<br />";
break;
case ("DoubleClick"):
this.Message.Text += "Double clicked DataList row at index " + _selectedIndex.ToString() + "<br />";
break;
}
}
#endregion
#region ListBox1
private void SetupListBoxEvents(ListBox listBox)
{
// Build the javascript for the single click
string _jsSingle = "setTimeout(\"__doPostBack(\'" + listBox.UniqueID + "\',\'SingleClick\')\", 300)";
// Add the javascript to the onclick Attribute of the ListBox
listBox.Attributes["onclick"] = _jsSingle;
// Build the javascript for the double click
string _jsDouble = "__doPostBack(\'" + listBox.UniqueID + "\',\'DoubleClick\')";
// Add the javascript to the ondblclick Attribute of the ListBox
listBox.Attributes["ondblclick"] = _jsDouble;
}
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
ListBox _listBox = (ListBox)sender;
// Get the selected index and the command name
int _selectedIndex = _listBox.SelectedIndex;
string _commandName = Request.Form["__EventArgument"].ToString();
switch (_commandName)
{
case ("SingleClick"):
this.Message.Text += "Single clicked ListBox row at index " + _selectedIndex.ToString() + "<br />";
break;
case ("DoubleClick"):
this.Message.Text += "Double clicked ListBox row at index " + _selectedIndex.ToString() + "<br />";
break;
}
}
#endregion
#region Render Override
// Register the dynamically created client scripts
protected override void Render(HtmlTextWriter writer)
{
// The client scripts for GridView1 were created in GridView1_RowDataBound
foreach (GridViewRow r in GridView1.Rows)
{
if (r.RowType == DataControlRowType.DataRow)
{
Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl00");
Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl01");
}
}
// The client scripts for DataList1 were created in DataList1_ItemDataBound
foreach (DataListItem i in DataList1.Items)
{
if (i.ItemType == ListItemType.Item
|| i.ItemType == ListItemType.AlternatingItem
|| i.ItemType == ListItemType.SelectedItem)
{
Page.ClientScript.RegisterForEventValidation(i.UniqueID + "$ctl00");
Page.ClientScript.RegisterForEventValidation(i.UniqueID + "$ctl01");
}
}
base.Render(writer);
}
#endregion
#region GetData
// Some data to bind to the Gridview and DataList
private DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Id", typeof(int)));
dt.Columns.Add(new DataColumn("Task", typeof(string)));
dt.Columns.Add(new DataColumn("IsDone", typeof(bool)));
dt.Rows.Add(new object[] { 0, "Create a new project", true });
dt.Rows.Add(new object[] { 1, "Build a demo applcation", true });
dt.Rows.Add(new object[] { 2, "Test the demo applcation", true });
dt.Rows.Add(new object[] { 3, "Deploy the demo applcation", false });
dt.Rows.Add(new object[] { 4, "Support the demo applcation", false });
return dt;
}
#endregion
}
