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 事件,從而允許代碼示例區分單擊了哪一個按鈕。
<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 的新瀏覽器,則當光標經過按鈕時將在瀏覽器中引發這些事件。下面的示例演示具有鼠標懸停效果的按鈕。
language="C#" runat="server" Button1_Click( s, EventArgs e) { Label1.Text="You clicked Button1"; } Button2_Click( s, EventArgs e) { Label1.Text="You clicked Button2"; } face="Verdana"Mouse-Over Effects on Button Move your mouse over the buttons to observe the mouse-over effects. runat=server face="Verdana" size="-1" Applies an inline CSS style (button background color)... Applies an inline CSS style (button font bold)...