您的位置:首页 > 编程语言 > ASP

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"
如:文本框配合按钮使用

姓名: <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();
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: