C#网页设计 - Web控件

最新推荐文章于 2025-04-29 14:30:38 发布

git1314

最新推荐文章于 2025-04-29 14:30:38 发布

阅读量6.3k

点赞数 12

分类专栏： c# C#网站设计文章标签： C#网页设计 - Web控件

本文链接：https://blog.csdn.net/github_39533414/article/details/89441592

版权

本文详细介绍了ASP.NET中的Web服务器控件，包括Label、TextBox、Button等基本控件，以及列表控件如ListBox、DropDownList、CheckBoxList、RadioButtonList的用法。还讲解了Bootstrap4的实现以及验证控件，如RequiredFieldValidator、CompareValidator、RangeValidator和RegularExpressionValidator的使用，帮助开发者确保用户输入的数据正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 服务器控件

ASP.NET控件分为服务器控件和HTML标记。

服务器控件是在服务器端运行的执行程序逻辑的组件，服务器端的程序可以访问这类控件；而HTML标记是在客户端运行的，服务器端程序不能访问这类控件。

服务器控件编程的关键是runat属性，如果一个控件使用了runat="server"属性进行声明，则该控件被认为是服务器控件。

工具箱的“HTML”选项卡中的HTML控件都是HTML标记，可以通过加上runat="server"属性将它们改为服务器控件。
ASP.NET服务器控件又分为两大类：Web服务器控件和HTML服务器控件。

1..1 Web服务器控件的基本属性

Web服务器控件位于System.Web.UI.WebControl命名空间中，是从WebControl基类直接或间接派生的。

Web服务器控件的属性可以通过“属性”窗口来设置，也可以通过HTML代码实现。Web服务器控件以“asp:”为前缀，ID属性指定其ID值，作为控件的唯一标识。基本属性可为布局、行为、可访问性、外观等几类。

2 基本的Web服务器控件

2.1 Label控件又称为标签控件，用于显示静态文本。其主要的属性是Text，用于设置或获取该控件的显示文本。
仅当需要在服务器代码中更改文本内容或其他特性时，才使用Label控件

2.2 TextBox控件

TextBox控件是用于向Web页面输入信息的最常用的控件。默认为单行文本框，可通过TextMode属性来改变它的文本显示模式，该属性是TextBoxMode枚举类型的属性值，具有如下三种可选值。
①SingleLine：表示单行输入模式。
②MultiLine：表示多行输入模式。
③PassWord：表示密码输入模式。

例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="W5_3_2_1.aspx.cs" Inherits="W5_3_2_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>单价：<asp:TextBox ID="TextBox1" runat="server" Text="0" AutoPostBack="True" 
                ontextchanged="TextBox1_TextChanged"></asp:TextBox></p>
        <p>数量：<asp:TextBox ID="TextBox2" runat="server" Text="0" AutoPostBack="True" 
                ontextchanged="TextBox2_TextChanged"></asp:TextBox></p>
        <p>
           
        </p>
        <p>
            <asp:Label ID="Label1" runat="server" Text="<%#Convert.ToString(Convert.ToDecimal(TextBox1.Text)*Convert.ToInt32(TextBox2.Text))%>"></asp:Label>
        </p>
    </div>
    </form>

    <script type="text/javascript">
       
    </script>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class W5_3_2_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Page.DataBind();

    }



    protected void TextBox2_TextChanged(object sender, EventArgs e)
    {
        TextBox1.DataBind();

    }
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        TextBox2.DataBind();
    }
}

2.3 Button控件

Button控件可以分为提交按钮和命令按钮。

默认的Button按钮为提交按钮，在单击时，将包含它的表单提交给相应服务器进行处理，一般响应Click事件。

当设置了CommandName属性和CommandArgument属性后，Button按钮成为命令按钮，用于处理控件命令事件，在单击时可响应Command事件，从事件参数中可获取命令名及命令参数值。

例：响应Command事件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="W5_3_3_1.aspx.cs" Inherits="W5_3_3_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="container mx-auto text-center m-auto">
     <p>
         <asp:Button ID="Button1" runat="server" Text="Button1" 
             CommandArgument="button1" CommandName="B1" oncommand="Button1_Command" />&nbsp;
     
        <asp:Button ID="Button2" runat="server" Text="Button2" CommandArgument="button2" 
             CommandName="B2" oncommand="Button2_Command" /></p>
        <p>
            <asp:Label ID="Label1" runat="server" Text="你点击的是：Button1" Enabled="False"></asp:Label></p>
        <p>
            <asp:Label ID="Label2" runat="server" Text="你点击的是：Button2" Enabled="False" 
                ViewStateMode="Enabled"></asp:Label></p>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class W5_3_3_1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Command(object sender, CommandEventArgs e)
        
    {
        Label1.Visible = true;
       // Label1.Text = "你点击的是：" + e.CommandArgument.ToString();
        Label2.Visible = false;
    }

    protected void Button2_Command(object sender, CommandEventArgs e)
    {
        Label2.Visible = true;
       // Label2.Text = "你点击的是：" + e.CommandArgument.ToString();
        Label1.Visible = false;
    }
}

3. 列表控件

3.1 ListBox

ListBox控件（列表框控件）用于显示一组列表项，用户可以从中选择一项或多项。

例1：实现选择按钮

w5_4_4_1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="w5_4_1_1.aspx.cs" Inherits="w5_4_1_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>listBox</title>
   <style type="text/css">
       #div0
       {
          width:400px;
          height:200px;
          margin-left:auto;
          margin-right:auto;
          margin-top: 50px;
          margin:50px auto auto auto;