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