ASP.NET学习系列(六)开始控件之旅之Button及其Ajax扩展控件
按钮控件把表单提交给服务器,是服务器端能够开始处理请求。按钮有三种类型:Button,LinkButton,ImageButton。Button是标准按钮,LinkButton为用户提供一个超链接,但是它又执行一个回发操作。ImageButton则是用图片替代Button的外观,其功能和Button完全一样。
三种按钮的一些共同属性:
AccessKey:指定一个导向Button控件的键。
CommandArgument:传给Command事件的命令参数。
CommandName:指定传给Command的命令名。
OnClientClick:点击按钮时执行的客户端脚本。
PostBackUrl:用于设置将表单传给指定页面。
TabIndex:设置控件的Tab顺序。
UseSubmitBehavior:使用JavaScript回传表单。
Command:点击Button控件时引发。
ImageButton自己的属性:
AlternateText:当图片无法显示时的替代文本。
ImageAlign:指定图片和页面中其他HTML中元素的对齐方式。
ImageUrl:用于指定图片的地址。
三种控件的一个简单实例:
<!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>
<script runat="server">
protected void LinkButton1_Click(object sender, EventArgs e)
{
Response.Redirect("http://www.cnblogs.com");
}
</script>
</head>
<body>
<form id="form1" defaultbutton="ImageButton1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick=" return confirm('Thank you!');" />
<br />
<asp:LinkButton ID="LinkButton1" ToolTip="link to a page."
runat="server" onclick="LinkButton1_Click">博客园</asp:LinkButton>
<br />
<asp:TextBox ID="searchText" Width="100" runat="server"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" ImageUrl="~/Image/imageButton.png"
PostBackUrl="~/Button/ButtonSearchResult.aspx" ToolTip="Search"
Width="30" Height="30" runat="server" />
</div>
</form>
</body>
</html>
其中ImageButton中定义了PostBackUrl,是为了演示表单发送到别的网页,因此,又定义了一个网页,用以演示此功能。
<!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>Search Result</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Result"></asp:Label>
</div>
</form>
</body>
</html>
后台代码:
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Button_ButtonSearchResult : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null)
{
TextBox txtSearch = (TextBox)PreviousPage.FindControl("searchText");
if (txtSearch != null)
Label1.Text = "The Result is :" + txtSearch.Text;
}
}
}
在这个示例中,第二个网页得到了第一个页面的整个表单,通过PreviousPage来得到前一个页面的引用,因此可以通过查找指定ID的控件,获得其属性值,进行工作。当然,也可以通过设置页面属性,通过页面属性来暴露表单的中的控件。例如,可以在表单中定义一个SearchString来完成值的传递。第一种方法提供从前一个页面获取弱类型的方法,第二种则提供了一个强类型方法。(强类型:Typed,类型是确定的。弱类型:untyped,没有为实例指定详细的类型,这样就不能直接引用详细类型特有的属性、方法和事件。)
在上面示例的第一个页面中,还为表单指定了一个DefaultButton按钮,它用来指定表单的默认按钮,这样就可以通过回车键来直接调用这个按钮。
处理Command事件
三种Button控件都支持Click事件和Command事件。不同之处在于Command可以获取一个命令名和一个命令参数。
简单示例:
<!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>Button Command Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAsc"
CommandName="Sort" CommandArgument="ASC"
OnCommand="Sort_Command"
runat="server" Text="升序" />
<asp:Button ID="btnDesc"
CommandName="Sort" CommandArgument="DESC"
OnCommand="Sort_Command"
runat="server" Text="降序" />
<br />
<asp:BulletedList ID="colorList" runat="server">
</asp:BulletedList>
</div>
</form>
</body>
</html>
后台代码:
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Button_ButtonCommand : System.Web.UI.Page
{
private List<string> Colors = new List<string>();
protected void Page_Load(object sender, EventArgs e)
{
Colors.Add("Red");
Colors.Add("Blue");
Colors.Add("Gray");
Colors.Add("Green");
}
protected void Sort_Command(object sender, CommandEventArgs e)
{
if (e.CommandName == "Sort")
{
switch (e.CommandArgument.ToString())
{
case "ASC":
Colors.Sort(SortASC);
break;
case "DESC":
Colors.Sort(SortDESC);
break;
default:
break;
}
}
}
int SortASC(string x, string y)
{
return String.Compare(x, y);
}
int SortDESC(string x, string y)
{
return String.Compare(x, y) * -1;
}
void Page_PreRender()
{
colorList.DataSource = Colors;
colorList.DataBind();
}
}
因为Button的功能比较简单、单一,所以Ajax控件对它的扩展很少,主要的就是一个ConfirmButtonExtender,它在按钮被点击后和表单回发前起作用。它会给用户弹出一个确认回发的警告框,或者也可以把任何应该通过点击确定才能执行的操作绑定到Button_Click事件上。如果用户点击取消按钮,怎不会回发。功能有点类似于在OnClientClick上绑定 return confirm操作。