【ASP.NET】服务器控件大演练与实例分析

asp服务器控件

简介（特点）：保存视图状态，公共对象模型，简单，用户定制，创建浏览器特定HTML

 

1.  web服务器控件：文本控件（2个）

    1） TextBox控件

<asp:TextBox ID="TextBox5" runat="server" AutoPostBack="True"   BackColor="#CCCCCC" BorderColor="#FF0080" BorderStyle="Solid" BorderWidth="3px"  Font-Bold="True" Font-Overline="True" Font-Size="Larger" Font-Strikeout="False"  ForeColor="Red" Height="79px" MaxLength="12"  ontextchanged="TextBox5_TextChanged" ReadOnly="True" TextMode="MultiLine" ToolTip="这是一个文本控件" ViewStateMode="Enabled" Width="282px">文本控件属性事件</asp:TextBox>
      2） Label控件

• 控制权转移控件（4个）1）Button 2）ImageButton3）LinkButton4）HyperLink

2   选择控件，（4）

1）DropDownList控件

代码如下：

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            dlbl.Text = "你选择的是" +DropDownList1.SelectedItem.Value +".";
        }

 

2）CheckBoxList控件

代码如下：

protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string str = "";
            foreach (ListItem item in CheckBoxList1.Items)
            {
                if (item.Selected)
                {
                    str+=item.Value+"";
                }
            }
            chlbl.Text = "你选择的是：" + str + ".";
        }

 

3）RadioButtonList控件

代码如下：

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string str = "";
            foreach (ListItem item in RadioButtonList1.Items)
            {
                if (item.Selected)
                {
                    str = item.Value + "";
                }
            }
            rlbl.Text = "你选择的是：" + str + ".";
        }

 

4）ListBox控件

 <asp:ListBox ID="ListBox1"  runat="server" AutoPostBack="True" 
            onselectedindexchanged="ListBox1_SelectedIndexChanged" 
            SelectionMode="Multiple">
          <asp:ListItem>唱歌</asp:ListItem>
          <asp:ListItem>写代码</asp:ListItem>
          <asp:ListItem>游戏</asp:ListItem>
        </asp:ListBox>
        <br />
        <br />
        <asp:Label ID="lbrlbl" runat="server" />

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string str = "";
            foreach (ListItem item in ListBox1.Items)
            {
                if (item.Selected)
                {
                    str += item.Value + "";
                }
            }
            lbrlbl.Text = "你选择的是：" + str + ".";
        }

 

3  容器控件

1）Panel控件

panel.aspx:

<asp:Panel ID="Panel1" runat="server" BorderColor="Blue" BorderStyle="Solid" 
            BorderWidth="4px" Height="45px" onload="Panel1_Load" Width="543px">
        </asp:Panel>

panel.aspx.cs

protected void Panel1_Load(object sender, EventArgs e)
        {
            TextBox text = new TextBox();
            text.BorderColor = System.Drawing.Color.Red;
            text.BorderStyle = BorderStyle.Solid;
            text.BorderWidth = 2;
            text.Text = "this is panel test page.";
            this.Panel1.Controls.Add(text);
        }

 

2）PlaceHolder控件

placeholder.aspx:

<asp:PlaceHolder ID="PlaceHolder1" runat="server" onload="PlaceHolder1_Load">
        </asp:PlaceHolder>

 

placeholder.aspx.cs:

protected void PlaceHolder1_Load(object sender, EventArgs e)
        {
            TextBox text = new TextBox();
            text.BorderColor = System.Drawing.Color.Red;
            text.BorderStyle = BorderStyle.Solid;
            text.BorderWidth = 2;
            text.Text = "this is panel test page.";
            this.PlaceHolder1.Controls.Add(text);
        }

  4  HTML服务器控件：

• HtmlFrom控件，

 <form id="form1" runat="server" method="post" action="目标页面的URL"></form>

5 HtmlImage控件

<img id="img1" src="图像URL" runat="server"/>

  6 验证控件：

通过一个实例验证所有控件

 

前台代码：

        <asp:Panel ID="Panel2" runat="server" Height="382px" style=" margin-left:300px" Width="440px" BackColor="#99CCFF" BorderColor="Red" BorderWidth="4px">
        <div id="div1">
        <ul style="font-size:small; vertical-align:middle;">
            <li  style=" font-size:large; text-align: center;">用户注册</li>
            <li>用户名：&nbsp;&nbsp;<asp:TextBox  ID="txtname" runat="server"/>
                <asp:RequiredFieldValidator ID="rfvname" runat="server" ErrorMessage="用户名不能为空" ForeColor="red" ControlToValidate="txtname"></asp:RequiredFieldValidator>
                <asp:CustomValidator ID="CustomValidator1" runat="server"  ControlToValidate="txtname" ForeColor="Red" ErrorMessage="必须包含a" onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
            </li>
            <li>密 码：&nbsp;&nbsp; <asp:TextBox ID="txtpass" runat="server"/>
                <asp:RequiredFieldValidator ID="rfvpwd" runat="server"  ControlToValidate="txtpass" ForeColor="red" ErrorMessage="密码不能为空"></asp:RequiredFieldValidator>
            </li>
            <li>确认密码：&nbsp; <asp:TextBox ID="txtrepass" runat="server"/>
                <asp:CompareValidator ID="cvpwd" runat="server" ControlToCompare="txtpass" ForeColor="red" ControlToValidate="txtrepass"   ErrorMessage="确认密码和密码必须相同"></asp:CompareValidator>
            </li>
            <li>
                出生日期：&nbsp;&nbsp; <asp:TextBox ID="txtbirthday" runat="server" />
                <asp:CompareValidator ID="cvbri" runat="server"  ControlToValidate="txtbirthday" ForeColor="red" ErrorMessage="输入必须是日期" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
                <asp:RangeValidator ID="rvBrithday" runat="server" ControlToValidate="txtbirthday" MaximumValue="2012/12/31" MinimumValue="2012/1/1" ForeColor="Red" ErrorMessage="日期超出范围"></asp:RangeValidator>
            </li>
            <li>
                邮箱：&nbsp;&nbsp;&nbsp; <asp:TextBox ID="txtem" runat="server" />
                <asp:RegularExpressionValidator ID="revEmail" runat="server"  ErrorMessage="请输入正确的E-mail地址！" ControlToValidate="txtem" ForeColor="Red"  ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
           </li>
            <li>性别：
            <asp:RadioButtonList  ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
                 <asp:ListItem Selected="True">男</asp:ListItem>
                 <asp:ListItem>女</asp:ListItem>
            </asp:RadioButtonList>
            </li>
            <li>
            爱好：
               <asp:CheckBoxList  ID="CheckBoxList2" runat="server" RepeatDirection="Horizontal">
                     <asp:ListItem>睡觉</asp:ListItem>
                     <asp:ListItem>聊天</asp:ListItem>
                     <asp:ListItem>写代码</asp:ListItem>
                </asp:CheckBoxList>
            </li>
            <li>
            省份：
            <asp:DropDownList ID="DropDownList2" runat="server">
              <asp:ListItem >河南省</asp:ListItem>
              <asp:ListItem >安徽省</asp:ListItem>
              <asp:ListItem >河北省</asp:ListItem>
            </asp:DropDownList>
            </li>
            <li>
                <asp:Button ID="Button4" runat="server" Text="注册" onclick="Button4_Click" />
                <asp:Button ID="Button5" runat="server" Text="取消" />
            </li>
            <li>
            <asp:TextBox  TextMode="MultiLine" ID="zhucetxt" runat="server" Height="44px"  Width="378px"></asp:TextBox>
             </li>
             <li>
                 <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
            </li>
        </ul>
        </div>
        </asp:Panel>

后台代码：

protected void Button4_Click(object sender, EventArgs e)
        {
            string name = txtname.Text;
            string pass = txtpass.Text;
            string repass = txtrepass.Text;
            string birthday = txtbirthday.Text;
            if (repass != pass)
            {
                Response.Write("<script>alert('密码必须相同！')</script>");
            }
            string sex=RadioButtonList2.SelectedItem.Value;
            string str = "";
            foreach(ListItem item in CheckBoxList2.Items)
            {
                if(item.Selected)
                {
                    str+=item.Value;
                }
            }
            string like = str;
            string pro = DropDownList2.SelectedItem.Value;
            zhucetxt.Text = "姓名：" + name + ""+ "密码：" + pass + "" +"生日："+birthday + "性别：" + sex + ""+ "爱好：" + like + ""+ "省份：" + pro;
        }

  1）RequiredFiledValidator控件:用于验证必填字段中是否输入了值。

用户名：&nbsp;&nbsp;<asp:TextBox  ID="txtname" runat="server"/>
<asp:RequiredFieldValidator ID="rfvname" runat="server" ErrorMessage="用户名不能为空" ForeColor="red"ControlToValidate="txtname"/>               

<asp:CustomValidator ID="CustomValidator1" runat="server"  ControlToValidate="txtname" ForeColor="Red" ErrorMessage="必须包含a" onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>             

 2）CompareValidator控件：将用户输入的值和另一个控件值进行比较，或固定值比较。

确认密码：&nbsp; <asp:TextBox ID="txtrepass" runat="server"/>

 <asp:CompareValidator ID="cvpwd" runat="server" ControlToCompare="txtpass"ForeColor="red"ControlToValidate="txtrepass"   ErrorMessage="确认密码和密码必须相同"/>       

3）RangeValidator控件：验证用户输入的值是否在指定范围

  出生日期：&nbsp;&nbsp; <asp:TextBox ID="txtbirthday" runat="server" />
 <asp:CompareValidator ID="cvbri" runat="server"  ControlToValidate="txtbirthday" ForeColor="red" ErrorMessage="输入必须是日期" Operator="DataTypeCheck" Type="Date"/> 

<asp:RangeValidator ID="rvBrithday" runat="server" ControlToValidate="txtbirthday" MaximumValue="2012/12/31" MinimumValue="2012/1/1" ForeColor="Red" ErrorMessage="日期超出范围"/>

4）RegularExpressionValidator控件：验证输入的值是否与正则表达式匹配

 邮箱：&nbsp;&nbsp;&nbsp; <asp:TextBox ID="txtem" runat="server" />
 <asp:RegularExpressionValidator ID="revEmail" runat="server"  ErrorMessage="请输入正确的E-mail地址！" ControlToValidate="txtem" ForeColor="Red"  ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>

5）CustomValidator控件：用于创建自定义验证     

用户名     <asp:TextBox  ID="txtname" runat="server"/>
 <asp:CustomValidator ID="CustomValidator1" runat="server"  ControlToValidate="txtname" ForeColor="Red" ErrorMessage="必须包含   a" onservervalidate="CustomValidator1_ServerValidate"/>    

CustomValidator1_ServerValidate事件：

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
        {
            args.IsValid = args.Value.Contains("a");
        }

6）ValidationSummar控件：用于概括所有错误提示

  <asp:ValidationSummary ID="ValidationSummary1" runat="server" />

==》满足所有条件，运行正确结果：

1.  自定义控件：

常见自定义服务器控件分4种：复合控件，验证控件，模板控件和数据绑定控件