Webform（简单控件复合控件）

Posted 2020-08-14 fei！

一、简单控件：

1.label控件

<asp:Label ID="Label1" runat="server" Text="账  号:"></asp:Label>

被编译为：

<span id="Label1" >账  号:</span>

属性：

Text：文本
ForeColor：字体颜色
Visible：是否可见
CssClass：即html的class

2.Literal

类似label，但它不会被编译，只会在位置上将Text内容完全展示出来，可以往它的Text属性中添加js代码

3.Textbox

不一定被编译成什么元素，它被编译成什么表单元素取决于TextMode，它能够完成form12个表单元素中的文本类（除隐藏域），它还能完成Webform提供的一些元素

（1）文本框

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

它被编译为：

<input name="TextBox1" type="text" id="TextBox1" />

（2）密码框

<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>

它被编译为：

<input name="TextBox2" type="password" id="TextBox2" />

（3）文本域

<asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine"></asp:TextBox>

它被编译为：

<textarea name="TextBox3" rows="2" cols="20" id="TextBox3">
</textarea>

（4）TextMode属性

color：只能选择颜色

datetime-local：可选择时间，输入时间，有日历

number：只能输入数字

4.按钮类

普通按钮和重置按钮在Webform没有提供按钮

<input type="button" value="按钮1" />
<input type="reset" value="重置" />

（1）Button

<asp:Button ID="Button1" runat="server" Text="Button" />

它被编译为：

 <input type="submit" name="Button1" value="Button" id="Button1" />/*提交按钮*/

（2）ImageButton

<asp:ImageButton ID="ImageButton1" runat="server" />

它被编译为：

 <input type="image" name="ImageButton1" id="ImageButton1" src="" />/*图片按钮*/

（3）LinkButton 超链接按钮

（4）按钮的OnClientClick是执行客户端脚本（js），客户端（js）执行优先级高于服务端（C#）

5.隐藏域

HiddenField控件

<asp:HiddenField ID="HiddenField1" runat="server" />

它被编译为：

<input type="hidden" name="HiddenField1" id="HiddenField1" />

 二、复合控件

1.单选按钮：
HTML编码方式：

<input type="radio" name="" checked="checked"/>

Webform：RadioButton 不建议使用
RadionButtonList
使用数据库取值步骤：
（1）数据绑定

List<Nation> list = new NationData().Select();

方法1：

RadioButtonList1.DataSource = list;//数据源
            RadioButtonList1.DataTextField = "NationName";//显示值
            RadioButtonList1.DataValueField = "NationCode";//实际值
            RadioButtonList1.DataBind();

方法2：

foreach (Nation n in list)
            {
                ListItem li = new ListItem(n.NationName, n.NationCode);
                RadioButtonList1.Items.Add(li);
            }

（2）设置默认选中项

RadioButtonList1.SelectedIndex = 0;或
  RadioButtonList1.SelectedValue = "N001";

（3）取值
添加一个按钮点击事件，事件中写：

 Label1.Text = "";
        ListItem li = RadioButtonList1.SelectedItem;
        Label1.Text += li.Value + "," + li.Text;

四、布局
RepeatDirection:项的布局方式 Vertical 纵向 Horizontal：横向
RepeatColumns:规定项的列数
RepeatLayout：项的布局方式 Table Flow （UnorderedList：无序列表 OrderedList：有序列表 前两种属性无效）
2.复选按钮
HTML编码方式：

<input type="checkbox" name="" checked="checked"/>

Webform：
CheckBox 不建议使用
CheckBoxList
使用数据库取值步骤：
（1）数据绑定

遍历数据集合，ListItem

 foreach (Nation n in list)
            {
                ListItem li = new ListItem(n.NationName, n.NationCode);
                CheckBoxList1.Items.Add(li);
            }

（2）设置默认选中项
在数据添加的时候进行判断，设置Selected属性

foreach (Nation n in list)
            {
                ListItem li = new ListItem(n.NationName, n.NationCode);
                if (li.Value == "N001" || li.Value == "N003")
                    li.Selected = true;
                CheckBoxList1.Items.Add(li);
            }

3）取值
遍历所有的项，判断如果是选中状态那么就把值取出来保存

Label1.Text = "";
        foreach (ListItem li in CheckBoxList1.Items)
        {
            if (li.Selected)
            {
                Label1.Text += li.Value + "," + li.Text + "|";
            }
        }

四、布局
RepeatDirection:项的布局方式 Vertical 纵向 Horizontal：横向
RepeatColumns:规定项的列数
RepeatLayout：项的布局方式 Table Flow （UnorderedList：无序列表 OrderedList：有序列表 前两种属性无效）
3.下拉列表
HTML编码方式：

<select name="" id="" size=""   multiple="multiple">
     <option></option>
     <option></option>
 </select>  

（1）当它为一行可选菜单时：
Webform中使用DropDownList
使用数据库取值步骤与RadionButtonList相同，只是没有布局
（2）当它为列表时
Webform使用ListBox按钮，在属性中可选择单选还是多选
使用数据库取值步骤与CheckBoxList 相同，只是没有布局