webform常用控件

1、Lable——标签：在网页中呈现出来的时候会变成span标签

属性：Text——标签上的文字

　　  BackColor，ForeColor——背景色，前景色

　　　Font——字体   

  Bold-加粗
  Italic-倾斜
  UnderLine-下划线     OverLine 上划线     StrikeOut 删除线
  Name - 字体名
  Size - 字体的大小

BorderColor——边框颜色

　　BorderWidth-边框粗细
　　BorderStyle - 边框样式

　　Height——高

　　Width——宽

　　Enabled-是否可用
　　Visible-是否可见
　　ToolTip-鼠标指上去的提示信息
　　CssClass - 样式表的class选择器

2.Literal——这也是一个文本标签，但它在网页中显示的时候不会变成span标签

它 的属性很少，是派生自control类的

3.TextBox——文本框     HiddenField——隐藏域  textarea--文本域 

属性：它拥有Lable所有的属性

　　 TextMode：文本框的呈现模式——SingleLine--单行文本框；MultiLine-多行文本框；Password-密码框

       ReadOnly - 只读
       MaxLength - 最大输入的字符数。只有TextMode是SingleLine和Password的时候起作用，在MultiLine的时候不起作用。

       Columns：宽度，以字母个数为单位
       Rows：高度，以行数为单位。只有TextMode是MultiLine的时候才起作用。在单行文本或多行文本下是不起作用的。

4.Button——按钮      LinkButton 超链接按钮        ImageButton 图片按钮(ImageUrl属性，需要把图片放项目文件夹中，如果VS没有显示出来，需要刷新下)

属性：它拥有Lable所有的属性

        OnClientClick：当按钮被点击的时候，要执行的客户端的JS代码。它的触发要在按钮的C#事件代码之前。

5.HyperLink：超链接

属性：它拥有Lable所有的属性

       NavigateUrl：超链接指向的地址，相当于href

　　 Target：打开位置

　　 ImageUrl：图片超链接的地址

6.Image——图片

属性：拥有Lable所有的属性

 ImageUrl：图片的地址

 

二，复合控件

1.DropDownList——下拉列表    拥有Lable的所有属性

对于DropDownlist必须会做三件事

（1）把内容填进去

法一：逐项添加

private void FillList()
    {
          List<QuanxianData> list = new QuanxianDA().Select();
         //QuanxianData qd=new QuanxianData();   
         //qd.Qname="请选择";
         //qd.Qno="-1";
         //list.Insert(0, qd);在第一项加上“请选择”的功能
 foreach (QuanxianData data in list)
         {
            //DropDownList 控件中的每个可选项都是由 ListItem 元素定义的！
             ListItem item = new ListItem();
             item.Text = data.Qname;
             item.Value = data.Qno;
             DropDownList1.Items.Add(item);
         }
     }

法二：数据绑定（用这种简便方法）

private void FillList2()
    {
        List<QuanxianData> list = new QuanxianDA().Select()；
        DropDownList1.DataSource = list;//绑定数据源
        DropDownList1.DataTextField = "Qname";//要显示哪一数据列
        DropDownList1.DataValueField = "Qno";//要设置一个value值
        DropDownList1.DataBind();  //最终执行绑定填充，不要漏掉
    }


//linq连接数据库方法

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        testDataContext _context = new testDataContext();
       DropDownList1.DataSource=  _context.Nation;
       DropDownList1.DataTextField ="Name";//要显示哪一项内容
       DropDownList1.DataValueField = "Code";//
       DropDownList1.DataBind();
 //最终执行绑定填充，不要漏掉
 }
}

技巧：如何给下拉列表加上“请选择”的功能

1.用以上代码中的方法

2.事先在下拉列表中设置静态的"请选择"列表项。然后再绑定或添加数据的时候在后面添加上。

如果采用数据绑定模式，默认情况下会把原有的项冲掉。需要设置AppendDataBoundItems属性为true。

3.所有的项都绑定或填加到下拉列表后，再写代码加上”请选择“的功能。

1 protected void Page_Load(object sender, EventArgs e)
2     {
3         FillList();
4         ListItem li = new ListItem("请选择", "-1");
5         DropDownList1.Items.Insert(0, li);
6     }

2.RadioButtonList——单选按钮列表  Radiobutton--单选按钮

1.Radiobutton: 属性GroupName组名，同一个组名下的单选按钮产生互斥效果（例如：注册时选男、女）

例子：给2个Radiobutton设置同样的组名

属性：它拥有Dropdownlist所有的属性和功能

RepeatDirection：布局的方向

RepeatLayout：布局方式

RepeatColumns：一行显示几个

案例： 和Dropdownlist相同

3.CheckBoxList——复选框列表  CheckBox——复选框

1.CheckBox——复选框：属性:checked 是否选中；取值checkbox.text="";

拥有RadioButtonList所有的属性和功能

显示数据：

protected void Page_Load(object sender, EventArgs e)
    {
        DataClassesDataContext _conect = new DataClassesDataContext();//建立上下文连接对象
       CheckBoxList1.DataSource =   _conect.Nation;  //获取数据源
       CheckBoxList1.DataTextField = "Name";//要显示的项
       CheckBoxList1.DataValueField = "Code";//返回值
       CheckBoxList1.DataBind();//绑定数据源

    }

4.ListBox——列表框

拥有Dropdownlist所有的属性和功能

SelectionMode - Single,Multiple

案例：如果是单选的话就照着Dropdownlist来做

如果是多选的话就照着Checkboxlist来做

5.RadioButtonList:单选按钮列表：
显示数据：
RadioButtonList1.DataSource = context.Nation;
RadioButtonList1.DataTextField = "Name";
RadioButtonList1.DataValueField = "Code";
RadioButtonList1.DataBind();
取选中项的值：
RadioButtonList1.SelectedValue.ToString();
设置选中项：
RadioButtonList1.SelectedIndex = 2;

6.验证控件

验证控件：
一、非空验证：RequiredFieldValidator
ErrorMessage：错误提示信息
ControlToValidate：要验证哪一个控件
Display：Static--不显示也占空间。Dynamic--不显示不占空间
InitialValue：初始值。

二、对比验证：CompareValidator
ErrorMessage：
ControlToValidate：
Display：Static--不显示也占空间。Dynamic--不显示不占空间
ControlToCompare：要对比的控件。
ValueToCompare：要对比的值
Type：按照什么类型对比。输入的类型。
Operator：运算符

应用：
1.密码和确认密码——两个控件对比
2.月收入——控件和某个固定值对比。

三、范围验证： RangeValidator
ErrorMessage：
ControlToValidate：
Display：Static--不显示也占空间。Dynamic--不显示不占空间
Type:按照什么类型对比，需要输入的是什么类型
MaximumValue：范围的最大值
MinmumValue：范围的最小值

 

四、正则表达式验证：RegularExpressionValidator
ErrorMessage：
ControlToValidate：
Display：Static--不显示也占空间。Dynamic--不显示不占空间
RegularExpression：正则表达式

注意：正则表达式的使用与修改

五、自定义验证：CustomValidator
ErrorMessage：
ControlToValidate：
Display：Static--不显示也占空间。Dynamic--不显示不占空间
ClientValidationFunction：自定义的客户端验证函数

第一步：设置ClientValidationFunction属性
第二步：为ClientValidationFunction的属性编写JS代码
//像C#服务端事件函数一样，sender是事件源，args是事件数据
function checkSex(sender, bbb) {
//把要验证的值取出来。
var s = bbb.Value; //把验证控件要验证的那个控件（文本框）里面的值给取出来。
//进行验证
if (s == "男生" || s == "女生") {
//告诉系统，验证结果是否正确
bbb.IsValid = true;
}
else {
//告诉系统，验证结果是否正确
bbb.IsValid = false;
}

}

六、ValidationSummary：验证汇总控件
ShowMessageBox：是否以对话框的形式显示错误信息
ShowSummary：是否在页面上显示错误信息

七、验证分组：
把同一组的输入控件、按钮、验证控件的ValidationGroup属性设成一样的。