Button
Button 控件提供了命令按钮样式的控件,它用于将 Web 窗体页回发到服务器。下面的示例演示如何使用一个简单的
Button 控件。
在列表内冒泡按钮单击
当用于模板化的列表(如 Repeater 或 DataList)中时,许多 Button 控件可能会随着列表循环访问其数据源而呈现。因为这些 Button 控件中的每一个均共享同一个 ID,所以无法简单地将一个事件处理程序绑定到每个 Button 控件的 OnClick 事件来确定单击的特定 Button。若要解决此问题,请使用事件冒泡来触发容器控件(在此情况下为 Repeater、 DataList 或 DataGrid)的一个事件,再由容器将关于引发该事件的项的附加信息告知事件处理程序。可以通过将 CommandName 属性指定为事件的名称来从 Button 引发这些事件。单击 Button 后,该命令“冒泡”到容器控件(如 Repeater),它触发自己的事件。此事件的参数可能包含附加信息,如自定义字符串或引发事件的项的索引。
下面的示例演示 Button 控件的命令如何能够冒泡到列表的 OnItemCommand 事件。 Button 控件的 CommandName 和 CommandArgument 字符串被传递给 OnItemCommand 事件,从而允许代码示例区分单击了哪一个按钮。
<
html
>
< head > < script language="C#" runat="server" >
void Page_Load(Object Sender, EventArgs e) {
if (!Page.IsPostBack) {
ArrayList values = new ArrayList();
values.Add( new PositionData("Microsoft", "Msft", "150 shares"));
values.Add( new PositionData("Intel", "Intc", "25 shares"));
values.Add( new PositionData("Dell", "Dell", "115 shares"));
repeater1.DataSource = values;
repeater1.DataBind();
}
}
void Repeater1_ItemCommand( object sender, RepeaterCommandEventArgs e) {
lblResult.Text = "<u>Command</u> is: <b>" + e.CommandName + "</b>, <u>CommandArgument</u> is: <b>" + e.CommandArgument + "</b>";
}
public class PositionData {
private string name;
private string ticker;
private string shares;
public PositionData( string name, string ticker, string shares) {
this.name = name;
this.ticker = ticker;
this.shares = shares;
}
public string Name {
get {
return name;
}
}
public string Ticker {
get {
return ticker;
}
}
public string Shares {
get {
return shares;
}
}
}
</ script >
</ head >
< body >
< h3 > < font face="Verdana" >Bubbling Button Clicks Within a List </ font > </ h3 >
< p > </ p >
< form runat=server >
< font face="Verdana" size="-1" >
< asp:Repeater id=repeater1 onitemcommand="Repeater1_ItemCommand" runat="server">
< ItemTemplate >
< asp:Button id=btnBuy Text="Buy" CommandName="buy" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Ticker") %>' runat="server" />
< asp:Button id=btnSell Text="Sell" CommandName="sell" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Shares") %>' runat="server" />
< asp:Label id=lblCompany Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' Font-Bold="true" runat=server />
< p >
</ ItemTemplate >
</ asp:Repeater>
< asp:Label id=lblResult runat="server" />
</ font >
</ form >
</ body >
</ html >
< head > < script language="C#" runat="server" >
void Page_Load(Object Sender, EventArgs e) {
if (!Page.IsPostBack) {
ArrayList values = new ArrayList();
values.Add( new PositionData("Microsoft", "Msft", "150 shares"));
values.Add( new PositionData("Intel", "Intc", "25 shares"));
values.Add( new PositionData("Dell", "Dell", "115 shares"));
repeater1.DataSource = values;
repeater1.DataBind();
}
}
void Repeater1_ItemCommand( object sender, RepeaterCommandEventArgs e) {
lblResult.Text = "<u>Command</u> is: <b>" + e.CommandName + "</b>, <u>CommandArgument</u> is: <b>" + e.CommandArgument + "</b>";
}
public class PositionData {
private string name;
private string ticker;
private string shares;
public PositionData( string name, string ticker, string shares) {
this.name = name;
this.ticker = ticker;
this.shares = shares;
}
public string Name {
get {
return name;
}
}
public string Ticker {
get {
return ticker;
}
}
public string Shares {
get {
return shares;
}
}
}
</ script >
</ head >
< body >
< h3 > < font face="Verdana" >Bubbling Button Clicks Within a List </ font > </ h3 >
< p > </ p >
< form runat=server >
< font face="Verdana" size="-1" >
< asp:Repeater id=repeater1 onitemcommand="Repeater1_ItemCommand" runat="server">
< ItemTemplate >
< asp:Button id=btnBuy Text="Buy" CommandName="buy" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Ticker") %>' runat="server" />
< asp:Button id=btnSell Text="Sell" CommandName="sell" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Shares") %>' runat="server" />
< asp:Label id=lblCompany Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' Font-Bold="true" runat=server />
< p >
</ ItemTemplate >
</ asp:Repeater>
< asp:Label id=lblResult runat="server" />
</ font >
</ form >
</ body >
</ html >
按钮的鼠标悬停效果
可以将客户端脚本事件 onmouseover 和 onmouseout 与 Button 控件相关联,来提供鼠标悬停效果,如更改按钮的字体或颜色。在服务器上,ASP.NET 忽略客户端属性(如 onmouseover),并将之 “按原样”传递给浏览器。如果应用程序面向支持 DHTML 的新浏览器,则当光标经过按钮时将在浏览器中引发这些事件。下面的示例演示具有鼠标悬停效果的按钮。
<html> <head> <script language="C#" runat="server"> void Button1_Click(object s, EventArgs e) { Label1.Text="You clicked Button1"; } void Button2_Click(object s, EventArgs e) { Label1.Text="You clicked Button2"; } </script> </head> <body> <h3><font face="Verdana">Mouse-Over Effects on Button</font></h3> <p>Move your mouse over the buttons to observe the mouse-over effects.</p> <form runat=server> <font face="Verdana" size="-1"> <asp:Button id=Button1 runat="server" Text="Button1" Width="100px" οnmοuseοver="this.style.backgroundColor='yellow'" οnmοuseοut="this.style.backgroundColor='buttonface'" οnclick="Button1_Click" /> Applies an inline CSS style (button background color)... <p> <asp:Button id=Button2 runat="server" Text="Button2" Width="100px" οnmοuseοver="this.style.fontWeight='bold'" οnmοuseοut="this.style.fontWeight='normal'" οnclick="Button2_Click" /> Applies an inline CSS style (button font bold)... <p> <asp:Label id=Label1 runat=server /> </font> </form> </body> </html>