一、简单控件
1、Label(作用:显示文字)
Web中:
<asp:Label ID="Label1" runat="server" Text="Label" BorderColor="Black" BorderStyle="Solid" BorderWidth="5px"></asp:Label>
编译完成后的元素时span(html)
<span id="Label1" style="display:inline-block;border-color:Black;border-5px;border-style:Solid;">Label</span>
属性:①BackColor:控件背景色 ;
②BorderColor:控件边框颜色;
③BorderStyle:控件边框样式;
④BorderWidth:控件边框宽度
2、Literal(作用:显示文字)
Web中:
<asp:Literal ID="Literal1" runat="server" Text ="编译后不会形成什么元素"></asp:Literal>
编译后不会形成什么元素(一般用来后台输出js代码)
</div> 编译后不会形成什么元素
3、TextBox(文字输入框)
属性:①TextMode:文本矿的行为模式,有以下几种模式:
★默认SingleLine:单行。
Web中:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
编译后:
<input name="TextBox1" type="text" id="TextBox1" />
★Password:密码框
Web中:
<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>
编译后:
<input name="TextBox1" type="password" id="TextBox1" />
★Multiline:文本域
Web中:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
编译后textarea:
<textarea name="TextBox1" rows="2" cols="20" id="TextBox1">
②warp:换行(true:换行;false:不换行)
③Enabled:控件启用状态
④Readonly:是否可以更改控件中的文本
⑤Maxlength:限制最长长度;比如:密码限制多少位,就可以更改此属性
4、按钮类
(1)Button:
Web中:
<asp:Button ID="Button1" runat="server" Text="Button" />
编译后submit:
<input type="submit" name="Button1" value="Button" id="Button1" />
属性:Onclintclick:比如:在onclintclick后面加上alert("nihao");
编译后是:
<input type="submit" name="Button1" value="Button" onclick="alert("nihao");" id="Button1" />
注:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick='if(confirm("是否要提交?")){return false;}' />
Confirm():
confirm() 方法用于显示一个带有指定消息和OK 及取消按钮的对话框。
如果用户点击确定按钮,则confirm() 返回true。如果点击取消按钮,则confirm() 返回false。
在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用confirm() 时,将暂停对JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。
下面我们通过这两个小例子,来了解一下它的使用方法吧:
<head> <title>confrim 的使用方法</title> <script type="text/javascript"> function clear1() { if(confirm("确定要清空数据吗?")) { document.main.text1.value=""; } } </script> </head> <boty> <form name="main"> <input type="text" name="text1"/> <input type="button" name="submit" value="数据清空" onclick="return clear1()"/> </form> </body>
(2)ImageButton:图片按钮
属性同Button类似,多以个ImageUrl属性,此属性用于存放图片地址。
(3)LinkButton:被编辑成超链接模样的按钮,
注:①HyperLink:超链接控件(不经常用此方式见超链接)
②边框注意:边框颜色——边框样式——边框粗细
二、数据库连接样式
例:做一个登录页面,连接数据库,判断是否登录成功。
实体类:
/// <summary> /// Users 的摘要说明 /// </summary> public class Users { public Users() { // // TODO: 在此处添加构造函数逻辑 // } private string _UserName; /// <summary> /// 账号 /// </summary> public string UserName { get { return _UserName; } set { _UserName = value; } } private string _Parssword; /// <summary> /// 密码 /// </summary> public string Parssword { get { return _Parssword; } set { _Parssword = value; } } }
数据访问类:
/// <summary> /// UsersDA 的摘要说明 /// </summary> public class UsersDA { SqlConnection conn = null; SqlCommand cmd = null; public UsersDA() { conn = new SqlConnection("server=.;database=mydb;user=sa;pwd=128712jdhlys"); cmd = conn.CreateCommand(); } /// <summary> /// 用户验证 /// </summary> /// <param name="uname">用户名验证</param> /// <param name="pwd">密码验证</param> /// <returns></returns> public bool Select(string uname, string pwd) { bool yanzheng = false; cmd.CommandText = "select * from Users where UserName=@uname and Password=@pwd"; cmd.Parameters.Clear(); cmd.Parameters.Add("@uname",uname); cmd.Parameters.Add("@pwd", pwd); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { yanzheng = true; } conn.Close(); return yanzheng; } }
注:●创建的类要放在App_Code文件夹中,一般不需要自己创建,建类时会有提示。
●web没有命名空间
Web中代码:
<body> <form id="form1" runat="server"> 账号:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> 密码:<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox><br /> <asp:Button ID="Button1" runat="server" Text="登录" /> <asp:Literal ID="Literal1" runat="server"></asp:Literal> </form> </body>
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Button1.Click += Button1_Click;//登录按钮事件 } void Button1_Click(object sender, EventArgs e) { string zh = TextBox1.Text; string mm = TextBox2.Text; bool yanz = new UsersDA().Select(zh, mm); //法一,无弹窗 if (yanz) Literal1.Text = "登陆成功!"; else Literal1.Text = "用户名或密码错误!"; //法二,有弹窗 //if (yanz) // Literal1.Text = "<script>alert('登陆成功!')</script>"; //else // Literal1.Text = "<script>alert('用户名或密码错误!')</script>"; } }
三、复合控件
首先建两个类,下面的复合控件将会用到!
实体类:
/// <summary> /// Nation 的摘要说明 /// </summary> public class Nation { public Nation() { // // TODO: 在此处添加构造函数逻辑 // } private string _NationCode; /// <summary> /// 民族编号 /// </summary> public string NationCode { get { return _NationCode; } set { _NationCode = value; } } private string _NationName; /// <summary> /// 民族名称 /// </summary> public string NationName { get { return _NationName; } set { _NationName = value; } } }
数据访问类:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; /// <summary> /// NationData 的摘要说明 /// </summary> public class NationDA { SqlConnection conn = null; SqlCommand cmd = null; public NationData() { conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123"); cmd = conn.CreateCommand(); } /// <summary> /// 返回全部Nation表数据集合 /// </summary> /// <returns></returns> public List<Nation> Select() { List<Nation> list = new List<Nation>(); cmd.CommandText = "select *from Nation"; conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { while (dr.Read()) { Nation n = new Nation(); n.NationCode = dr["NationCode"].ToString(); n.NationName = dr["NationName"].ToString(); list.Add(n); } } conn.Close(); return list; }
(一)DropDownList:下拉列表框
Web显示:
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
编译后select:
<select name="DropDownList1" id="DropDownList1"> </select>
1、给DropDownList写入数据(两种方法)——放在Page_Load中
法一:与winform中给下拉表框填数据类似(DataSource)
protected void Page_Load(object sender, EventArgs e) { DropDownList1.DataSource = new NationData().Select();//数据源指向 DropDownList1.DataTextField = "NationName";//显示字段绑定 DropDownList1.DataValueField = "NationCode";//隐藏字段绑定 DropDownList1.DataBind(); }
法二:Foreach遍历,同时加上默认选中
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { List<Nation> Nlist = new NationData().Select(); foreach (Nation n in Nlist) { ListItem li = new ListItem(n.NationName, n.NationCode); if (li.Value == "N003") { li.Selected = true; } DropDownList1 . Items.Add(li); } } }
编译后显示:
<select name="DropDownList1" id="DropDownList1"> <option value="N001">汉族</option> <option value="N002">满族</option> <option selected="selected" value="N003">藏族</option> <option value="N004">彝族</option> </select>
注:加一个Button和Label,点击按钮时,将取到的value或text显示在label上。下面用到
2、取DropDownList的Value或者text(只能取一条数据的value或text)
void Button1_Click(object sender, EventArgs e) { Label1.Text = DropDownList1.SelectedItem.Value; //Label1.Text = DropDownList1.SelectedItem.Text; }
3、取多条数据(ListBox控件)
ListBox控件(此控件可以取一条或多条数据)——编译后也是select(下拉列表框)
属性:SelectionMode(列的选择模式)——single:单行,只单选;Multiple:多行,可多选。
ListBox绑定数据的方法同DropDownList一样。
ListBox取数据的方法:
void Button1_Click(object sender, EventArgs e) { string end = ""; foreach (ListItem li in ListBox1.Items) { if (li.Selected) { end += li.Text + " - " + li.Value + ","; } } Label1.Text = end; }
(二)CheckBoxList:多选列表
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatLayout="UnorderedList"></asp:CheckBoxList>
属性:①RepeatColumns:一行最多显示多少个数据
②RepeatDirection——Vetical:垂直显示 ; Horizontal:水平显示
④RepeatLayout:Table → 用table布局
Flow → 用span布局
UnorderedList → 无序列表
OrderedList → 有序列表
用法同DropDownList和ListBox!
(三)RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server"></asp:RadioButtonList>
属性同CheckBoxList类似,用法同DropDownList和ListBox!
四、http协议无状态性
每一次事件提交,都会将页面刷新,刷新就必走Load事件,进而出现重复绑定的情况
解决方法:判断页面是第一次加载,还是由已经加载出来的页面中的某个按钮执行了提交返回回来的
if (!IsPostBack)
{ load事件中95%的代码都要写在这里面,委托点击事件除外! }
后注:★控件中,name用于服务端 , id用于客户端,
未完待续!!!!!!!