ASP.NET服务器控件

HTML服务器控件

要转换XHTML元素到HTML服务器控件在XHTML元素里加入“runat = "server"”

<input id="btuSubmit" type="button" value="button"  runat = "server"/>

Web服务器控件

Web服务器控件的共有属性
属性名	说明	属性名	说明
AccessKey	控件键盘的快捷键	Font	控件字体属性
Attributes	控件的所有属性集合	Heigth	控件的高度
BackColor	控件的背景颜色	ID	控件的编程标识符
BoderWidth	控件的边框宽度	Text	控件上显示的文本
BoderStyle	控件的边框样式	ToolTip	当鼠标悬浮在控件上时显示的文本
CssClass	控件的CSS类名	Visible	控件是否在页面显示
Enabled	是否启用Web服务器控件	Width	控件的宽度

Label控件

Label控件一个很有用的属性是AssociatedControlID,其属性可以关联窗体中的另一个控件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="example4-2.aspx.cs" Inherits="服务器控件.example4_2" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="lblName" runat="server" Text="账号(N):" AccessKey="N" AssociatedControlID="txtName"></asp:Label>
            <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />
            <asp:Label ID="lblPasswd" runat="server" Text="密码(P):" AccessKey="P" AssociatedControlID="txtPasswd"></asp:Label>
            <asp:TextBox ID="txtPasswd" runat="server"></asp:TextBox>
        </div>
    </form>
</body>
</html>

TextBox控件

TextBox属性、方法和事件	说明
TextMode属性	设置文本类型。比如有Passwrod表示密码框，MultiLine表示多行文本框
AutoPostBack属性	值true表示当文本框内容改变且把焦点移出文本框时触发TextChanged事件
AutoCompleteType属性	标注能自动完成的类型，如值Email表示能自动完成邮箱列表
Focus()方法	设置文本框焦点
TextChanged事件	当改变文本框中内容且焦点离开文本框后被触发

example4-3.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="example4-3.aspx.cs" Inherits="服务器控件.example4_3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="lblName" runat="server" Text="用户名(N):" AccessKey="N" AssociatedControlID="txtName"></asp:Label>
            <asp:TextBox ID="txtName" runat="server" AutoPostBack ="true" OnTextChanged="txtName_TextChanged"></asp:TextBox>
            <asp:Label ID="lblNameTrue" runat="server" Text=""></asp:Label><br />
            <asp:Label ID="lblPasswd" runat="server" Text="密码(P):" AccessKey="P" AssociatedControlID="txtPasswd"></asp:Label>
            <asp:TextBox ID="txtPasswd" TextMode="Password" runat="server"></asp:TextBox><br />
            <asp:Label ID="lblMail" runat="server" Text="邮箱(E):" AccessKey="E" AssociatedControlID="txtMail"></asp:Label>
            <asp:TextBox ID="txtMail" TextMode="Email" runat="server"></asp:TextBox><br />
            <asp:Button ID="btuSubmit" runat="server" Text="提交" />
        </div>
    </form>
</body>
</html>

example4-3.aspx.cs文件

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

namespace 服务器控件
{
    public partial class example4_3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //打开界面默认选中的txtMail控件
            txtMail.Focus();
        }

        protected void txtName_TextChanged(object sender, EventArgs e)
        {
            if (txtName.Text == "123")
            {
                lblNameTrue.Text = "用户名已经存在！";
            }
            else 
            {
                lblNameTrue.Text = "√";
            }
        }
    }
}

Button、LinkButton和ImageButton控件

按钮控件有Button、LinkButton和ImageButton，他们功能相同，但呈现的外观不一样。Botton呈现传统的按钮，LinkButton呈现超链接外观，ImageButton呈现图形外观

共同属性和事件	说明
PostBackUrl属性	设置跨页面提交时的目标页面
Click事件	当点击按钮被触发，执行服务器端代码
ClientClick	当点击按钮时在Click事件之前被触发，执行客户端代码

ClientClick.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientClick.aspx.cs" Inherits="服务器控件.ClientClick" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h6>Button控件</h6><br />
            <asp:Button ID="btuDelete" runat="server" Text="删除" OnClientClick="return confirm('你确定要删除吗？')" OnClick="btudelete_Click" />
            <h6>LinkButton控件</h6><br />
            <asp:LinkButton ID="lnkbtu" runat="server" PostBackUrl="~/example4-2.aspx">LinkButton</asp:LinkButton>
            <h6>ImageButton控件</h6><br />
            <asp:ImageButton ID="imgbtu" runat="server" ImageUrl="~/images/imgbtu.jpeg" PostBackUrl="~/example4-3.aspx"/>
        </div>
    </form>
</body>
</html>

ClientClick.aspx.cs

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

namespace 服务器控件
{
    public partial class ClientClick : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btudelete_Click(object sender, EventArgs e)
        {
            Response.Write("删除成功");
        }
    }
}

DropDownList控件

DropDownList控件添加数据项时，DropDownList标签李会嵌套ListItem

<asp:ListItem Value="beijing">北京</asp:ListItem>

属性、事件	说明
DataSource属性	设置数据源
DataTextField属性	对应数据源中的一个字段，该字段所有内容将被显示于下拉列表中
DataValueField属性	对应数据源中的一个字段，指定下拉列表中每个可选项的值
Items属性	列表中所有选项的集合，常用Add()方法添加项，Clear()方法删除所有项
SelectedItem属性	选定当前项
SelectedValue属性	选定当前项的Value属性值
SelectedIndexChanged事件	当选择下拉列表中一项后被触发
DataBind()方法	绑定数据源

DropDownList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownList.aspx.cs" Inherits="服务器控件.DropDownList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlYear_SelectedIndexChanged"></asp:DropDownList>年
            <asp:DropDownList ID="ddlMonth" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlMonth_SelectedIndexChanged"></asp:DropDownList>月
            <asp:DropDownList ID="ddlDay" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDay_SelectedIndexChanged"></asp:DropDownList>日
            <asp:Label ID="lblweek" runat="server" Text=""></asp:Label>
        </div>
    </form>
</body>
</html>

DropDownList.aspx.cs

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

namespace 服务器控件
{
    public partial class DropDownList : System.Web.UI.Page
    {
        protected static string t;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindYear();
                BindMonth();
                BindDay();
                Week();
            }
        }

        protected void BindYear()
        {
            //清空控件数据
            ddlYear.Items.Clear();
            int startDate = DateTime.Now.Year - 10;
            int endDate = DateTime.Now.Year;

            //循环年份
            for (int i = startDate; i <= endDate; i++)
            {
                ddlYear.Items.Add(new ListItem(i.ToString()));
            }

            //选择默认年份
            ddlYear.SelectedValue = endDate.ToString();
        }

        protected void BindMonth()
        {
            ddlMonth.Items.Clear();

            //循环月份
            for (int i = 1; i <= 12; i++)
            {
                ddlMonth.Items.Add(new ListItem(i.ToString()));
            }

            //选择默认年份
            ddlMonth.SelectedValue = (DateTime.Now.Month).ToString();
        }

        protected void BindDay()
        {
            
            ddlDay.Items.Clear();
            string year = ddlYear.SelectedValue;
            string month = ddlMonth.SelectedValue;

            //获取相年、月的对应天数
            int days = DateTime.DaysInMonth(int.Parse(year), int.Parse(month));

            //循环天数
            for (int i = 1; i <= days; i++)
            {
                ddlDay.Items.Add(new ListItem(i.ToString()));
            }

            //选择默认日
            ddlDay.SelectedValue = (DateTime.Now.Day).ToString();
        }

        protected void Week()
        {
            string week = null;
            string year = ddlYear.SelectedValue;
            string month = ddlMonth.SelectedValue;
            string day = ddlDay.SelectedValue;
            string time = year + "." + month + "." + day;
            string dt = Convert.ToDateTime(time).DayOfWeek.ToString();
            switch(dt)
            {
                case "Monday":
                    week = "星期一";
                    break;
                case "Tuesday":
                    week = "星期二";
                    break;
                case "Wednesday":
                    week = "星期三";
                    break;
                case "Thursday":
                    week = "星期四";
                    break;
                case "Friday":
                    week = "星期五";
                    break;
                case "Saturday":
                    week = "星期六";
                    break;
                case "Sunday":
                    week = "星期日";
                    break;
                default:
                    break;
            }
            lblweek.Text = week;
        }

        protected void ddlYear_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindDay();
            Week();
        }

        protected void ddlMonth_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindDay();
            Week();
        }

        protected void ddlDay_SelectedIndexChanged(object sender, EventArgs e)
        {
            Week();
        }
    }
}

ListBox控件

ListBox控件的属性、方法和事件等与DropDownList控件类似，但多了一个实用的SelectionMode属性，其值为Multiple表示允许选择多项。

ListBox.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListBox.aspx.cs" Inherits="服务器控件.ListBox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="lstLeft" runat="server" SelectionMode="Multiple">
                <asp:ListItem Value="beijing">北京</asp:ListItem>
                <asp:ListItem Value="tianjin">天津</asp:ListItem>
                <asp:ListItem Value="guangdong">广东</asp:ListItem>
            </asp:ListBox>
            <asp:Button ID="btuLeft" runat="server" Text="->" OnClick="btuLeft_Click" />
            <asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple"></asp:ListBox>
        </div>
    </form>
</body>
</html>

ListBox.aspx.cs

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

namespace 服务器控件
{
    public partial class ListBox : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btuLeft_Click(object sender, EventArgs e)
        {
            for (int i = 0; i < lstLeft.Items.Count; i++)
            {
                if (lstLeft.Items[i].Selected)
                {
                    lstRight.Items.Add(lstLeft.Items[i]);
                    lstLeft.Items.Remove(lstLeft.Items[i]);
                    i--;
                }
            }
        }
    }
}

CheckBox和CheckBoxList控件

判断CheckBox控件是否选中的属性是Checked，而CheckBoxList控件作为集合控件，判断数据项是否选中的属性是成员的Selected属性。CheckBoxList控件的AutoBackPost属性值为False。RepeatColumns属性设置列数。

CheckBoxList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckBoxList.aspx.cs" Inherits="服务器控件.CheckBoxList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:CheckBoxList ID="chklsSport" runat="server" RepeatColumns="4" >
                <asp:ListItem Value="football">足球</asp:ListItem>
                <asp:ListItem Value="baskeball">篮球</asp:ListItem>
                <asp:ListItem Value="badminton">羽毛球</asp:ListItem>
                <asp:ListItem Value="pingpong">乒乓球</asp:ListItem>
            </asp:CheckBoxList>
            <asp:Button ID="btuSubmit" runat="server" Text="提交" OnClick="btuSubmit_Click" /><br />
            <asp:Label ID="lblshow" runat="server" Text=""></asp:Label>
        </div>
    </form>
</body>
</html>

CheckBoxList.aspx.cs

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

namespace 服务器控件
{
    public partial class CheckBoxList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btuSubmit_Click(object sender, EventArgs e)
        {
            lblshow.Text = "你选择了：";
            foreach (ListItem listItem in chklsSport.Items)
            {
                if (listItem.Selected)
                {
                    lblshow.Text = lblshow.Text + listItem.Text + "&nbsp";
                }
            }
        }
    }
}

RadioButton和RadioButtonList控件

多个RadioButton控件设置为一组需要用GroupName属性为同一名称。RadioButtonList控件的RepeatColumns属性表示设置列数。

RadioButtonList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioButtonList.aspx.cs" Inherits="服务器控件.RadioButtonList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:RadioButtonList ID="rdolsSex" runat="server" RepeatColumns="3">
                <asp:ListItem Value="1" Selected="True">男</asp:ListItem>
                <asp:ListItem Value="0">女</asp:ListItem>
            </asp:RadioButtonList>
            <asp:Button ID="btuSubmit" runat="server" Text="提交" OnClick="btuSubmit_Click" />
            <asp:Label ID="lblShow" runat="server" Text=""></asp:Label>
        </div>
    </form>
</body>
</html>

RadioButtonList.aspx.cs

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

namespace 服务器控件
{
    public partial class RadioButtonList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btuSubmit_Click(object sender, EventArgs e)
        {
            lblShow.Text = "你的性别：" + rdolsSex.SelectedItem.Text;
        }
    }
}

Image和ImageMap控制

Image控件只是单纯显示图片,不包含Click事件。

<asp:Image ID="img" runat="server" ImageUrl="Images/map.jpg" />

ImageMap控件除了可以显示图片，还可以实现图片的超链接，可以划分多种形状。

posted on 2020-04-27 17:06 白客C 阅读(244) 评论(0) 编辑收藏举报