ASP.NET--简单空间、复合控件(提纲)
简单控件:
Label - 文本显示控件,虽然说属性中可以设置此控件的诸多样式,但是不建议大家使用,而是使用CSS来设置相应的样式
Literal - 用来显示文本,text中的内容会原封不动的打印到浏览器中,不会生成其它的代码
TextBox - -TextMode---文本框行为模式
(SingleLine---单行;MultiLine--多行;Password--密码;Color--颜色选择器(输出"#xxxxxx");Data--时间日期;Email--邮箱格式;Number--只能输入数字;)
ReadOnly ---只读,可选中,不可更改
MaxLength-----可输入的最大字符数,默认0为无限
AutoPostBack----文本修改后,自动提交
Button - 按钮 --- onClientClick - 要执行的JS代码,比后台代码优先执行
LinkButton - 超链接模样的按钮
ImageButton - 图片模样的按钮
html的表单元素:
文本类:
<input type="text"/>--------文本框----------------等同于--TextBox - -TextMode--SingleLine---单行;
<input type="password"/>--密码框----------------等同于--TextBox - -TextMode-Password--密码;
<input type="hidden"/>-----文本域---------------等同于--TextBox - -TextMode-MultiLine--多行;
<textarea />-----------------隐藏域----------等同于--在css-样式表-(visibility:collapse;)-----FileUpload
按钮类:
<input type="submit" />--提交--|
<input type="button" />--重置--|-- Button - 按钮---C#代码不同
<input type="reset" />----普通--|
<input type="image" />----图片-------ImageButton - 图片模样的按钮
选择类:
<input type="radio"/>--单选----RadioButtonList——RadioButton
<input type="checkbox"/>--多选--CheckBoxList——CheckBox
<input type="file" />--文件上传
<select>
<option></option> -----下拉列表---DropDownList
</select>
=================================================
复合控件:
CheckBoxList - 复选框组,可以添加无数个复选框,每一个都是一个ListItem,而这些项都放在了复选框组的Items集合中
单选 - 复选框组.SelectedItem来选出选中的项
多选 -
if (CheckBoxList1.SelectedIndex > -1) //阻止未选择报错的情况
{
Label1.Text = "";
//遍历全部的项,看看如果是被选中了,就。。。。
foreach (ListItem li in CheckBoxList1.Items)
{
if (li.Selected)
{
Label1.Text += li.Text;
}
}
}
RadioButtonList - 单选框组
可以添加无数个单选框,需要注意的属性与上面一样,
唯一需要注意的:单选框组要注意分组
FileUpload - 文件选择对话框
获取选中的文件路径 - FileUpload1.FileName
但是此时获取的仅仅是相对路径,如何转换成绝对路径?
string path = Server.MapPath(FileUpload1.FileName);
=======================注意=======================
web端 - 无状态性 每一次事件提交都会刷新页面,而刷新后的页面与之前你看到的页面就不再是同一个页面了
每一次页面刷新都会走一遍PageLode事件,那么里面的某些代码我们只需要让它在页面第一次加载的时候才需要执行,那么需要增加判断:
if(IsPostBack == false)
{
XXXXX
}
=======================注意=======================
DropDownList - 下拉列表框 - 单选
ListBox - 列表框 - 多选 SelectionMode属性来设置单选或多选
界面:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <style type="text/css"> 10 .la1 { 11 width: 200px; 12 height: 200px; 13 background-color: blue; 14 border: 10px solid black; 15 display: inline-block; 16 } 17 </style> 18 19 <script type="text/javascript"> 20 function TiShi() { 21 alert('你好'); 22 } 23 24 </script> 25 26 </head> 27 <body> 28 <form id="form1" runat="server"> 29 <asp:TextBox ID="TextBox1" runat="server" MaxLength="6" OnTextChanged="TextBox1_TextChanged" ReadOnly="True">fsdfsdfsdf</asp:TextBox> 30 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="alert('这是JS');" /> 31 <asp:Literal ID="Literal1" runat="server"></asp:Literal> 32 33 34 35 36 <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton> 37 <asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton1_Click" /> 38 39 40 41 42 </form> 43 </body> 44 </html>
//后台代码:::
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 public partial class Default1 : System.Web.UI.Page 9 { 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 } 14 protected void Button1_Click(object sender, EventArgs e) 15 { 16 Literal1.Text = "你好啊"; 17 18 } 19 protected void TextBox1_TextChanged(object sender, EventArgs e) 20 { 21 22 } 23 protected void LinkButton1_Click(object sender, EventArgs e) 24 { 25 Literal1.Text = "你好啊"; 26 } 27 protected void ImageButton1_Click(object sender, ImageClickEventArgs e) 28 { 29 30 } 31 }