ASP.NET学习笔记四 控件使用

[本课笔记资源]  http://download.youkuaiyun.com/source/1850967

 ASP.net控件分类：
1、HTML控件 System.Web.UI.Htmlcontrols
 普通HTML脚本控件，属于客户端控件，用于客户端解释页面的显示的内容
 也可以转化成服务器控件，只需要加上属性 runat="server"
 如：文本框配合按钮使用

姓名: <input id="txtUserName" name="txtUserName" type="text" /> <input id="btnSubmit" type="button" value="显示" οnclick="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="显示" οnclick="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

 [案例]网站建议

 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>"); } }

 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> /// 根据省的ＩＤ号填充市级 /// </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(); }