首页 > 代码库 > B/S一些小知识及常用控件
B/S一些小知识及常用控件
一: B/S网页的运行
页面在设计的时候,本身就是一个类。在运行的时间,是一个对象。
其中aspx和aspx.cs是在同一个类下。
aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑。
呈现:把页面上所有的控件对象,转化成HTML标签。 内存中的对象--->HTML
** 规范 **:
以后写代码的时候,在Page_Load方法中,99%的代码需要写在
if (!IsPostBack) { }
IsPostBack——页面初始加载-false;表单提交加载-true
页面初始加载的情况:
1.地址栏中输入地址打开。
2.用超链接链到这个页面,或者代码 Response.Redirect()转过来的页面。
3.点击刷新按钮重新刷新。
1. 三个常用语句:
Response :响应 从服务端--客户端
Write("字符串"):向客户端页面输出一段文字,写出来的字符串在页面最上。
Redirect("URL"):重定向,一般用来转页面
End():结束向客户端的输出
Request:请求 从客户端--服务端
Request["名"]:获取客户端用post或get方式传递过来的数据。
Request.Form["名"]:获取客户端用post方式传递过来的数据。
Request.QueryString["名"]:获取客户端用get方式传递过来的数据。
Session :会话——用来保存访问者状态。 一个会话中保存状态,这个状态只在这个会话中可用。
HTTP :无状态协议
例子:登录成功纪录下状态
Session["uid"] = txtUID.Text;//登录的时候用Session纪录下登录者的UID,然后再跳转页面。 Session["uid"].ToString();//之后的界面可以这样取出登录者UID
2. 防止跳过登录界面进入其他界面:
(1)在其他界面的Load里面写代码,判断是否登录;
if (Session["uid"] == null) { Response.Redirect("Default.aspx"); }
(2)做一个PageBase类派生自System.Web.UI.Page类,其他页面都派生自这个类,在这个类里重写OnLoad函数:
protected override void onl oad(EventArgs e) { if (Session["uid"] == null) { Response.Redirect("Default.aspx"); } base.OnLoad(e);}
这样在加载每一个其他页面的时候都会事先判断一下是否登录,如果未登录则转向登录界面。
二: B/S常用控件:
1.1 Label 控件
父类WebControl,在呈现的时候,两边会呈现为span标签。
属性:
Width: (Unit)可设为像素,也可设为百分比
Height: (Unit)可设为像素,也可设为百分比
BackColor:(Color )设置背景颜色
ForeColor:(Color )设置前景色
BorderColor:(Color )设置边框颜色
BorderWidth:(Unit) 设置边框宽度
BorderStyle:(BorderStyle )设置边框样式
字体属性Font,包含下面一些属性:
Bold 加粗
Italic 倾斜
UnderLine 下划线
OverLine 上划线
StrikeOut 删除线
Name: 字体
Size: 大小
CssClass : 样式表的class名,多个控件可以设置为一个Class名,样式表添加样式方便
Text:标签上的文字
ToolTip : 鼠标放上去的气泡信息。
Enable:是否可用
Visible:是否可见
1.2 Literal也是一个标签:
在呈现的时候,两边不会出现span标签。
2、TextBox控件:
拥有Label的所有属性。
TextMode:文本框的呈现模式SingleLine-单行文本框,MultiLine-多行文本框,Password-密码框
Rows:行数。只有TextMode=MultiLine时候起作用。
Columns:列数,控制长度。
Wrap:是否自动换行。
MaxLength:最多输入多少个字符。只有TextMode=SingleLine/Password时起作用。
ReadOnly:只读
3、 Button 控件
LinkButton 超链接模样的按钮
ImageButton 图片模样的按钮(ImageUrl属性):
它们三个按钮拥有Label的所有属性。
OnClientClick:按钮点击的时候,要执行的客户端脚本。如果说设置了此属性,在HTML代码中又添加了OnClick,则两个都执行。
例子:如何给控件加上JS 的脚本调用?
法一:直接在源代码中加上相应的JS事件,及脚本调用。
<asp:TextBox onblur="checkEmail()" ID="TextBox3" runat="server"></asp:TextBox>
法二:在Page_Load事件中,通过控件的Attributes属性加入相应的JS事件及脚本调用。
protected void Page_Load(object sender, EventArgs e) { TextBox3.Attributes.Add("onblur","return checkEmail()"); }
法三:像按钮,它直接带有OnClientClick的脚本调用属性。
4、HyperLink超链接
拥有Label的所有属性。
Text:超链接的文本
NavigateUrl:超链接的地址,相当于href
Target:超链接打开的位置
ImageUrl:图片地址。如果设置此属性,则超链接会变成图片超链接,否则是文字超链接。
5、Image控件
拥有Label的所有属性。
ImageUrl:图片的地址
6、RadioButton控件:单选按钮
拥有Label的所有属性。
Text:文本
Checked:bool,是否被选中
GroupName:组名,将来被呈现为<input type=radio>中的name属性,设为一组。
7、CheckBox控件:复选框
拥有Label的所有属性。
Text:文本
Checked:bool,是否被选中
8、DropDownList下拉列表 //相似的控件ListBox,CheckBoxList,RadioButtonList
拥有Label的所有属性。
(一)把数据填进去
1.在界面中,手动一项项添加
2.用代码逐项添加
ListItem li = new ListItem("深圳","0755"); DropDownList1.Items.Add(li);
3.绑定
MyDBDataContext context = new MyDBDataContext(); var query = context.ChinaStates.Where(p=>p.ParentAreaCode == "37"); DropDownList1.DataSource = query; DropDownList1.DataTextField = "AreaName"; DropDownList1.DataValueField = "AreaCode"; DropDownList1.DataBind();
默认情况下,在绑定的时候,会把原有的内容给清空.
(二)把选中的数据取出来
Literal1.Text = DropDownList1.SelectedValue; Literal1.Text = DropDownList1.SelectedItem.Text + DropDownList1.SelectedItem.Value; int n = DropDownList1.SelectedIndex; Literal1.Text = DropDownList1.Items[n].Text + DropDownList1.Items[n].Value;
(三)设定某一项的选中状态
为下拉列表的SelectedIndex或SelectedValue属性赋值。
DropDownList1.SelectedIndex = Convert.ToInt32(TextBox1.Text); DropDownList1.SelectedValue = TextBox2.Text;
属性:
Items:所有子项的集合
DataSource:数据源
DataTextField: 设置要显示的文字是哪个属性(字段)
DataValueField: 设置Value值是哪个属性(字段)
AppendDataboundItems:是否追加数据绑定项。true-绑定的时候,不清空原有的内容。false-绑定的进候,清空源有的内容。
SelectedIndex 选中项的索引
SelectedValue 选中项的值
SelectedItem 选中项
方法:
DataBind();//绑定数据
例子(1):同意不同意控制按钮的可用
用两个RadioButton,不同意默认选中。
<asp:RadioButton ID="RadioButton1" onclick="tongyi()" runat="server" GroupName="aaa" Text="同意" /><asp:RadioButton ID="RadioButton2" onclick="tongyi()" runat="server" Checked="True" GroupName="aaa" Text="不同意" /><asp:Button ID="Button1" runat="server" Enabled="False" Text="下一步" />
方式一:JS脚本:
function tongyi() { var btn = document.getElementById("Button1"); var rd = document.getElementById("RadioButton1"); if (rd.checked == true) { btn.disabled = false; } else { btn.disabled = true; } }
方式二:用C#语句来判断,需要设置RadioButton的AutoPostBack为True
protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { if (RadioButton1.Checked) { Button1.Enabled = true; } else { Button1.Enabled = false; } }
9、ListBox——显示多个,选择多个。
Items 项
DataSource 数据源
DataTextField 设置要显示的文字是哪个属性(字段)
DataValueField 设置Value值是哪个属性(字段)
SelectedValue 选中项的值
SelectedItem 选中项
SelectedIndex 选中项的索引
AppendDataboudItem 是否追加数据绑定项。true-绑定的时候,不清空原有的内容。false-绑定的进候,清空源有的内容。
SelectionMode:Single-单选;Multiple-多选
获取选中项的值,多选的情况下需要遍历所有的项:
foreach (ListItem li in ListBox1.Items) { if (li.Selected) { Literal1.Text += li.Value; } }
10、RadioButtonList——显示多个,选择1个。布局。
Items 项
DataSource 数据源
DataTextField 设置要显示的文字是哪个属性(字段)
DataValueField 设置Value值是哪个属性(字段)
SelectedValue 选中项的值
SelectedItem 选中项
SelectedIndex 选中项的索引
AppendDataboudItem 是否追加数据绑定项。true-绑定的时候,不清空原有的内容。false-绑定的进候,清空源有的内容。
RepeatLayout:Table-用表格布局;Flow-用span布局。
RepeatColumns:一行显示几个。
RepeatDirection:布局方向。
11、CheckBoxList——显示多个,选择多个。布局。
Items 项
DataSource 数据源
DataTextField 设置要显示的文字是哪个属性(字段)
DataValueField 设置Value值是哪个属性(字段)
SelectedValue 选中项的值
SelectedItem 选中项
SelectedIndex 选中项的索引
AppendDataboudItem 是否追加数据绑定项。true-绑定的时候,不清空原有的内容。false-绑定的进候,清空源有的内容。
RepeatLayout:Table-用表格布局;Flow-用span布局。
RepeatColumns:一行显示几个。
RepeatDirection:布局方向。
获取选中项的值,多选的时候遍历所有项找选中的值:
foreach (ListItem li in CheckBoxList1.Items) { if (li.Selected) { Literal1.Text += li.Value; } }
设置那一项被选中:
CheckBoxList1.SelectedIndex = -1;//清除原有状态。 //设置选中状态。 string s = TextBox1.Text; string[] spliters = s.Split(‘/‘); foreach(string key in spliters) { foreach (ListItem li in CheckBoxList1.Items) { if (li.Value =http://www.mamicode.com/= key) { li.Selected = true; } } }
三: 三个案例:
案例一:添加员工
两段代码:
1.初始化民族下拉列表的代码。
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { InfoDataContext context = new InfoDataContext(); var query = context.Nation; //清空 ddNation.Items.Clear(); foreach(Nation data in query) { //造项,非绑定的方式 ListItem item = new ListItem(); item.Text = data.Name; item.Value = data.Code; //添加 ddNation.Items.Add(item); } } }
2.添加按钮,向数据库添加数据的代码。
protected void btnAdd_Click(object sender, EventArgs e) { //取数据 string code = txtCode.Text; string name = txtName.Text; bool sex = Convert.ToBoolean( radSex.SelectedValue); string nation = ddNation.SelectedValue; DateTime birthday = Convert.ToDateTime( txtBirthday.Text); InfoDataContext context = new InfoDataContext(); //造添加对象 Info data = http://www.mamicode.com/new Info(); data.Code = code; data.Name = name; data.Sex = sex; data.Nation = nation; data.Birthday = birthday; //添加提交 context.Info.InsertOnSubmit(data); context.SubmitChanges(); //清空函数 TxtClear(); }
案例二:三级联动
1.三个下拉列表填充数据的三个函数
//上下文对象 ChinaDataContext context = new ChinaDataContext(); //省份加载函数 protected void ShengLoad() { var sheng = context.ChinaStates.Where(p=>p.ParentAreaCode=="0001"); ddSheng.DataSource = sheng; ddSheng.DataTextField = "AreaName"; ddSheng.DataValueField = "AreaCode"; ddSheng.DataBind(); } //地市加载函数 protected void ShiLoad() { var shi = context.ChinaStates.Where(p => p.ParentAreaCode == ddSheng.SelectedValue); ddShi.DataSource = shi; ddShi.DataTextField = "AreaName"; ddShi.DataValueField = "AreaCode"; ddShi.DataBind(); } //区县加载函数 protected void QuLoad() { var qu = context.ChinaStates.Where(p => p.ParentAreaCode == ddShi.SelectedValue); ddQu.DataSource = qu; ddQu.DataTextField = "AreaName"; ddQu.DataValueField = "AreaCode"; ddQu.DataBind(); }
2.在Page_Load中调用三个函数
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ShengLoad(); ShiLoad(); QuLoad(); } }
3.在前两个下拉列表的Change事件中(双击进去的事件)填充相关联的下拉列表。
protected void ddSheng_SelectedIndexChanged(object sender, EventArgs e) { ShiLoad(); QuLoad(); } protected void ddShi_SelectedIndexChanged(object sender, EventArgs e) { QuLoad(); }
4.记得把前两个下拉列表的AutoPostBack属性设为True。自动提交。
案例三:修改员工
三段代码:
1.初始化民族下拉列表的代码,Load里面写。
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { InfoDataContext context = new InfoDataContext(); var query = context.Nation; //绑定显示 ddNation.DataSource = query; ddNation.DataTextField = "Name"; ddNation.DataValueField = "Code"; ddNation.DataBind(); } }
2.根据传过来人员主键,查询并向页面加载人员信息的代码,Load里面写。
//找出该代号的人员信息显示出来 string code = Request["code"].ToString(); var info = context.Info.Where(p=>p.Code==code); if (info.Count() > 0) { Info data = info.First(); txtCode.Text = data.Code; txtName.Text = data.Name; radSex.SelectedValue = data.Sex.Value.ToString(); ddNation.SelectedValue = data.Nation; txtBirthday.Text = data.Birthday.Value.ToString("yyyy年MM月dd日"); }
以上两段代码都要在Page_Load中执行
3.修改按钮,向数据库修改数据的代码。
protected void btnUpdata_Click(object sender, EventArgs e) { //找到该人员的信息 InfoDataContext context = new InfoDataContext(); string code = txtCode.Text; var info = context.Info.Where(p => p.Code == code); if (info.Count() > 0) { Info data = info.First(); //修改字段 data.Name = txtName.Text; data.Sex = Convert.ToBoolean(radSex.SelectedValue); data.Nation = ddNation.SelectedValue; data.Birthday= Convert.ToDateTime(txtBirthday.Text); //提交 context.SubmitChanges(); } //返回 Response.Redirect("InfoList.aspx"); }
B/S一些小知识及常用控件