ASP.NET学习笔记四 控件使用
2009-11-27 10:11
841 查看
[本课笔记资源] http://download.csdn.net/source/1850967
ASP.net控件分类:
1、HTML控件 System.Web.UI.Htmlcontrols
普通HTML脚本控件,属于客户端控件,用于客户端解释页面的显示的内容
也可以转化成服务器控件,只需要加上属性 runat="server"
如:文本框配合按钮使用
脚本部分代码为:
在JavaScript中我们根据元素的id来定位到元素,再通过元素的value、innerText、innerHTML、style等属性来
改变元素或做一些处理工作。那么对于像单选按钮、多选按钮等组合性质的控件,就要根据其组名来获取元素,如下:
脚本代码:
2、Web控件 System.Web.UI.Controls
服务器控件,提供丰富的功能,可执行复杂的页面请求
Web服务器控件以asp:开头,称为标记前缀,后面是控件类型,
例如:<asp:Label ID="lblTitle" runat="server"></asp:Label>
这种标注方式就很清楚地知道控件的具体类型,不像HTML控件中都是input标记,还要看type属性才知道
1)虽然知道asp:是Web控件,但是runat="server"是必写的属性,否则报错
2)Web控件命名清晰明了
3)Web控件可以编程,与WinForm一样可以采用事件驱动编程,拥有方法和属性,并且响应事件,可执行复杂的页面请求
分类:
1)内部控件:与HTML控件相同,映射到HTML元素并通过runat="server"属性在服务器上执行,它是基于HTML控件的
Label : 标签
ID : 控件的ID
Text : 文本属性
CssClass : 样式类名
ForeColor : 前景色 BackColor : 背景色 一般通过样式CssClass来控制
Enabled : 启用状态,默认为True,Visible : 可见性,默认为true ,一般控件都有这两个属性
Label控件,在服务器上执行后返回给客户端的是span标记
TextBox : 文本框,它有三种模式 TextMode=SingleLine|MultiLine|Password ,
分别代表单行文本、文本域、密码框,返回给客户端的分别为
<input type="text"/><textarea /><input type="password"/>
ReadOnly : 只读,可以以编码方式改变内容,但客户端不能改变其内容,与Enabled差不多,但不会变灰
ID和Text同上
AutoPostBack : 回传,默认为False ,设置为true时,当内容改变失去焦点时会自动提交服务器,激发TextChanged事件
一般不用
Wrap : 文本是否自动换行,默认为true,如果设置为false,当内容超过边界时文本域不会自动换行。
对于文本域,还有Rows和Columns属性,设置显示的行和列数
转移控件: Button、ImageButton、HyperLink、LinkButton都具有页面跳转的功能
Button 和 ImageButton 将数据传到服务器 ,HyperLink 在页面之间导航,不会提交服务器 , LinkButton是
将数据保存到服务器或访问服务器上的数据。只有HyperLink没有PostBackUrl属性
Button : 按钮
PostBackUrl : 回传页面地址
OnClientClick : 客户端的单击事件,关联js中的函数
CommandName : 与此按钮关联的命令,当多个Button共享一个事件方法时,用它来驱动用户是通过单击哪个按钮触发的
Response.Write("<script>alert('您单击的是:"+((Button)sender).CommandName+"按钮');</script>");
ImageButton : 图片按钮
ImageUrl : 要显示的图片地址,要使用本项目内图片
ImageAlign : 该图片按钮与其它内容的对齐方式,left|right|top|middle|bottom等选项
AlternateText : 图片说明文字,当鼠标悬停时显示
ImageButton与其它转移控件不同的是,
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
System.Web.UI.ImageClickEventArgs e ,其中e.X和e.Y可以帮助我们制作图片热点
LinkButton : 与Button一样,只不过显示的样式不同罢了
HyperLink : 就一普通的超链接,但是它可以编程,有属性
NavigateUrl : 链接的地址
ImageUrl : 可以给定一个图片
其它还有Text属性也很重要
选择控件: CheckBox、CheckBoxList、RadioButton、RadioButtonList、ListBox、DropDrownList
CheckBox : 多选按钮
Text:为显示文本内容
TextAlign : 文本在按钮的哪边 Left|right,默认为right
当AutoPostBack设置为true时会响应CheckedChanged事件
Checked : 是否被选中,默认为false
CheckBoxList : 与WinForm开发不同的是,位于同一容器中的多选按钮会被认为是一组,但是Web开发不一样,
我们不能为CheckBox控件指定组名 name,所以就出现了CheckBoxList。
ID: 组名
Items : 组项的集合
DataSourceID:数据源 DataTextField :显示的文本 DataValueField : 显示的值
DataTextFormatString : 格式化显示文本
我们可以手动添加项,也可以绑定数据源
1)手动添加项(通过编程方式添加)
后置处理代码为:
2) 绑定数据源
2.1)绑定数据库(SQLServer2005)
数据库脚本:WebControl.sql -- 见chap03.rar
创建Web.Config文件,添加如下内容:
创建一个DBHelper.cs类,用于数据库连接操作
在页面加载事件中这样绑定:
2.2)绑定XML文件
添加:/App_Data/cbl_hover.xml文件
文件内容为:
绑定是这样的:
RadioButton : 单选按钮,同CheckBox。
RadioButtonList : 同样也是为了处理同一组而出现的,它的用法同CheckBoxList
[案例]网站建议
[b]
ListBox : 同其中选择控件一样,可以绑定数据源,还可以添加项
Rows : 同时显示的行数
DropDownList : 演示一个省级连动
[案例]省市联动
ASP.net控件分类:
1、HTML控件 System.Web.UI.Htmlcontrols
普通HTML脚本控件,属于客户端控件,用于客户端解释页面的显示的内容
也可以转化成服务器控件,只需要加上属性 runat="server"
如:文本框配合按钮使用
姓名: <input id="txtUserName" name="txtUserName" type="text" /> <input id="btnSubmit" type="button" value="显示" onclick="show1()"/>
脚本部分代码为:
<mce:script type="text/javascript"><!-- function show1() { var userName = document.getElementById("txtUserName").value; if(userName != "") alert("您输入的姓名是:"+userName); else alert("别逗了,您不没输入呢!"); } // --></mce:script>
在JavaScript中我们根据元素的id来定位到元素,再通过元素的value、innerText、innerHTML、style等属性来
改变元素或做一些处理工作。那么对于像单选按钮、多选按钮等组合性质的控件,就要根据其组名来获取元素,如下:
您的兴趣爱好:<br /> <input name="hover" type="checkbox" value="tour"/>旅游 <input name="hover" type="checkbox" value="net"/>上网 <input name="hover" type="checkbox" value="reading" />阅读 <input id="btnHover" type="button" value="显示" onclick="show2()"/>
脚本代码:
<mce:script type="text/javascript"><!-- function show2() { var hovers = document.getElementsByName("hover"); var _hovers = new Array(); var info = "您的兴趣爱好为:" ; for(var i=0;i<hovers.length;i++) if(hovers[i].checked) _hovers[i] = hovers[i].value; for(var t in _hovers) info += _hovers[t] + "/t"; alert(info); } // --></mce:script>
2、Web控件 System.Web.UI.Controls
服务器控件,提供丰富的功能,可执行复杂的页面请求
Web服务器控件以asp:开头,称为标记前缀,后面是控件类型,
例如:<asp:Label ID="lblTitle" runat="server"></asp:Label>
这种标注方式就很清楚地知道控件的具体类型,不像HTML控件中都是input标记,还要看type属性才知道
1)虽然知道asp:是Web控件,但是runat="server"是必写的属性,否则报错
2)Web控件命名清晰明了
3)Web控件可以编程,与WinForm一样可以采用事件驱动编程,拥有方法和属性,并且响应事件,可执行复杂的页面请求
分类:
1)内部控件:与HTML控件相同,映射到HTML元素并通过runat="server"属性在服务器上执行,它是基于HTML控件的
Label : 标签
ID : 控件的ID
Text : 文本属性
CssClass : 样式类名
ForeColor : 前景色 BackColor : 背景色 一般通过样式CssClass来控制
Enabled : 启用状态,默认为True,Visible : 可见性,默认为true ,一般控件都有这两个属性
Label控件,在服务器上执行后返回给客户端的是span标记
TextBox : 文本框,它有三种模式 TextMode=SingleLine|MultiLine|Password ,
分别代表单行文本、文本域、密码框,返回给客户端的分别为
<input type="text"/><textarea /><input type="password"/>
ReadOnly : 只读,可以以编码方式改变内容,但客户端不能改变其内容,与Enabled差不多,但不会变灰
ID和Text同上
AutoPostBack : 回传,默认为False ,设置为true时,当内容改变失去焦点时会自动提交服务器,激发TextChanged事件
一般不用
Wrap : 文本是否自动换行,默认为true,如果设置为false,当内容超过边界时文本域不会自动换行。
对于文本域,还有Rows和Columns属性,设置显示的行和列数
转移控件: Button、ImageButton、HyperLink、LinkButton都具有页面跳转的功能
Button 和 ImageButton 将数据传到服务器 ,HyperLink 在页面之间导航,不会提交服务器 , LinkButton是
将数据保存到服务器或访问服务器上的数据。只有HyperLink没有PostBackUrl属性
Button : 按钮
PostBackUrl : 回传页面地址
OnClientClick : 客户端的单击事件,关联js中的函数
CommandName : 与此按钮关联的命令,当多个Button共享一个事件方法时,用它来驱动用户是通过单击哪个按钮触发的
Response.Write("<script>alert('您单击的是:"+((Button)sender).CommandName+"按钮');</script>");
ImageButton : 图片按钮
ImageUrl : 要显示的图片地址,要使用本项目内图片
ImageAlign : 该图片按钮与其它内容的对齐方式,left|right|top|middle|bottom等选项
AlternateText : 图片说明文字,当鼠标悬停时显示
ImageButton与其它转移控件不同的是,
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
System.Web.UI.ImageClickEventArgs e ,其中e.X和e.Y可以帮助我们制作图片热点
LinkButton : 与Button一样,只不过显示的样式不同罢了
HyperLink : 就一普通的超链接,但是它可以编程,有属性
NavigateUrl : 链接的地址
ImageUrl : 可以给定一个图片
其它还有Text属性也很重要
选择控件: CheckBox、CheckBoxList、RadioButton、RadioButtonList、ListBox、DropDrownList
CheckBox : 多选按钮
Text:为显示文本内容
TextAlign : 文本在按钮的哪边 Left|right,默认为right
当AutoPostBack设置为true时会响应CheckedChanged事件
Checked : 是否被选中,默认为false
CheckBoxList : 与WinForm开发不同的是,位于同一容器中的多选按钮会被认为是一组,但是Web开发不一样,
我们不能为CheckBox控件指定组名 name,所以就出现了CheckBoxList。
ID: 组名
Items : 组项的集合
DataSourceID:数据源 DataTextField :显示的文本 DataValueField : 显示的值
DataTextFormatString : 格式化显示文本
我们可以手动添加项,也可以绑定数据源
1)手动添加项(通过编程方式添加)
<asp:CheckBoxList ID="cblFruit" runat="server" Width="72px" AutoPostBack="True" OnSelectedIndexChanged="cblFruit_SelectedIndexChanged"> <asp:ListItem Selected="True" Value="apple">苹果</asp:ListItem> <asp:ListItem Value="banana">香蕉</asp:ListItem> </asp:CheckBoxList> 水果名:<asp:TextBox ID="txtFruit" runat="server"></asp:TextBox> <asp:Button ID="btnAddFruit" runat="server" Text="添加水果" OnClick="btnAddFruit_Click" />
后置处理代码为:
protected void btnAddFruit_Click(object sender, EventArgs e) { //省略检查... String fruitName = this.txtFruit.Text.Trim(); //添加水果 this.cblFruit.Items.Add(new ListItem(fruitName, fruitName)); //更改默认选择项(第二项被选中) if(this.cblFruit.Items.Count>1) this.cblFruit.SelectedIndex = 1; }
2) 绑定数据源
2.1)绑定数据库(SQLServer2005)
数据库脚本:WebControl.sql -- 见chap03.rar
创建Web.Config文件,添加如下内容:
<connectionStrings> <add name="sqlConnection" connectionString="server=.;uid=sa;pwd=sa.;database=WebControl"/> </connectionStrings>
创建一个DBHelper.cs类,用于数据库连接操作
conn = new SqlConnection(ConfigurationManager.ConnectionStrings["sqlConnection"].ToString()); public static DataTable GetTable(String sql) { DataTable dt = new DataTable(); SqlDataAdapter sda = new SqlDataAdapter(sql, Conn); sda.Fill(dt); return dt; }
在页面加载事件中这样绑定:
if(!IsPostBack) //页面第一次加载时绑定 { this.cblHover.DataSource = DBHelper.GetTable("select * from hover"); this.cblHover.DataTextField = "name"; this.cblHover.DataValueField = "id"; this.cblHover.DataBind(); }
2.2)绑定XML文件
添加:/App_Data/cbl_hover.xml文件
文件内容为:
<?xml version="1.0" encoding="utf-8" ?> <hoverlist> <hover> <id>1</id> <name>旅游</name> </hover> <hover> <id>2</id> <name>上网</name> </hover> <hover> <id>3</id> <name>钓鱼</name> </hover> </hoverlist>
绑定是这样的:
String xmlFile = Server.MapPath("~")+"/App_Data/cbl_hover.xml"; DataSet ds = new DataSet(); ds.ReadXml(xmlFile); this.cblHover.DataSource = ds; this.cblHover.DataTextField = "name"; this.cblHover.DataValueField = "id"; this.cblHover.DataBind();
RadioButton : 单选按钮,同CheckBox。
RadioButtonList : 同样也是为了处理同一组而出现的,它的用法同CheckBoxList
[案例]网站建议
[b]
public static int VOTEID = 1; //页面第一次加载,绑定建议选项 DataTable dt = new DataTable(); dt = DBHelper.GetTable("select id,content from voteItem where voteID=@voteid", new SqlParameter("voteid", VOTEID)); this.rblVote.DataSource = dt ; this.rblVote.DataTextField = "content" ; this.rblVote.DataValueField = "id" ; this.rblVote.DataBind(); protected void btnSubmit_Click(object sender, EventArgs e) { //如果用户没有选择直接返回 if (this.rblVote.SelectedItem == null) { return; } //更新数据库 int id = Convert.ToInt32(this.rblVote.SelectedItem.Value); String sugName = this.rblVote.SelectedItem.Text; int lines = DBHelper.Execute("update voteItem set num=num+1 where id=@id", new SqlParameter("id", id)); if (lines > 0) { Response.Write("建议成功!"); Response.Write("<br/>建议条目为:<font color='#ff0000'>"+sugName); //查询单条目记录数和总记录数 int thisNum = Convert.ToInt32(DBHelper.GetSignleObj("select num from voteItem where id=@id", new SqlParameter("id", id))); //总记录数 int totalNum = Convert.ToInt32(DBHelper.GetSignleObj("select total from vote where id=@id", new SqlParameter("id", VOTEID))); //显示出来 Response.Write("</font><br/>您建议的记录数为:<font color='#ff0000'>"+thisNum); Response.Write("</font><br/>总的建议记录数为:<font color='#ff0000'>"+totalNum+"</font>"); } }[/b]
ListBox : 同其中选择控件一样,可以绑定数据源,还可以添加项
Rows : 同时显示的行数
DropDownList : 演示一个省级连动
[案例]省市联动
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //页面加载时加载省信息 DataTable provDT = DBHelper.GetTable("select * from province"); this.ddlProvice.DataSource = provDT; this.ddlProvice.DataTextField = "name"; this.ddlProvice.DataValueField = "id"; this.ddlProvice.DataBind(); //填充市 FillCity(Convert.ToInt32(this.ddlProvice.SelectedValue)); } } /// <summary> /// 制作省市连动效果 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void ddlProvice_SelectedIndexChanged(object sender, EventArgs e) { //清空市选项 this.ddlCity.Items.Clear(); //当前省id int provID = Convert.ToInt32(this.ddlProvice.SelectedItem.Value); //根据省id填充市 FillCity(provID); } /// <summary> /// 根据省的ID号填充市级 /// </summary> /// <param name="provID"></param> private void FillCity(int provID) { //从数据库中查询所有市 DataTable cityDT = DBHelper.GetTable("select id,name from city where provID=@provID", new SqlParameter("provID", provID)); //绑定数据 this.ddlCity.DataSource = cityDT; this.ddlCity.DataTextField = "name"; this.ddlCity.DataValueField = "id"; this.ddlCity.DataBind(); }
相关文章推荐
- ASP.NET学习笔记--自定义验证控件的使用
- ASP.NET 学习笔记_01 广告控件的使用
- asp.net学习之textbox控件使用的小例子
- telerik asp.net 控件学习笔记之————Calendar
- Asp.net控件开发学习笔记(四)---Asp.net服务端状态管理
- Asp.net控件开发学习笔记(五)---Asp.net客户端状态管理
- ASP.NET_MVC使用Spring.Net.MVC依赖注入学习笔记
- Sharepoint学习笔记—Debug&TroubleShooting--Developer Dashboard的使用(4.显示ASP.NET Tracing信息)
- 【ASP.NET MVC 学习笔记】- 07 使用 Entity Framework
- asp .net学习笔记之使用jmail发送邮件
- 一步步学习SPD2010--第十四章节--在Web页面使用控件(4)--使用ASP.NET验证控件
- Asp.net控件开发学习笔记整理篇 - 复习大纲
- 【转】Asp.net控件开发学习笔记整理篇 - WebControl基类
- ASP.NET 3.5核心编程学习笔记(25):GridView控件
- 黑马程序员之 ASP.NET学习笔记:GridView控件的常用属性及方法
- 学习asp.net中使用 log4net 笔记
- 黑马程序员之ASP.NET学习笔记:AJAX解决什么问题?如何使用AJAX?
- 【学习】Asp.net MVC 学习笔记之-使用MVC中的AJAX
- Asp.Net学习笔记:使用DataSet
- Asp.net控件开发学习笔记(十一)----服务器控件模板