ASP.NET+SQL SERVER的应用开发基础（一）

本文链接：https://blog.csdn.net/weixin_43751983/article/details/106112468

ASP.NET基本控件使用小练习

【注】：以下均使用VS 2017操作。

练习1：设置文本字体

1.1、页面控件

1个文本框 $T e x t B o x$
3个单选按钮 $R a d i o B u t t o n$
1个复选框 $C h e c k B o x L i s t$
1个命令按钮 $B u t t o n$

1.2、控件排版

设置1个文本框 $T e x t B o x$
首先在工具箱中选中 $T e x t B o x$ ，拉大文本框至适当大小和位置。然后在属性的行为中，设置 $T e x t M o d e$ 为 $M u l t i l i n e$ （多行）。
设置3个单选按钮 $R a d i o B u t t o n$
首先在工具箱中选中 $R a d i o B u t t o n$ ，双击三次。然后在属性的Font中分别设置 $T e x t$ 为隶书、楷体、黑体，在行为中设置 $G r o u p N a m e$ 均为 $g r o u p 1$ ，在布局中设置 $R e p e a t D i r e c t i o n$ 为 $H o r i z o n a l$ 。
设置1个复选框 $C h e c k B o x L i s t$
首先在工具箱中选中 $C h e c k B o x L i s t$ ，双击一次。然后点击复选框右边的小箭头，勾选 $A u t o P o s t B a c k$ ，点击编辑项，再点击3次添加，分别更改 $T e x t$ 为加粗、斜体、下滑线，点击确认。

在这里插入图片描述

1个命令按钮 $B u t t o n$
在工具箱中选中 $B u t t o n$ ，更改 $T e x t$ 为提交。

$A u t o P o s t b a c k$ 属性
事件发生后，立即执行相应的事件处理代码，需要相应控件的 $A u t o P o s t b a c k$ 属性为 $T r u e$ ；否则整个页面被提交后才统一执行事件处理代码（减少vweb$页面在服务器和客户端浏览器之间的传输次数，以减轻对服务器及网络带宽的压力）。
可以采取单击命令按钮 $B u t t o n 1$ ，提交 $w e b$ 页面。因此有时页面添加一个 $B u t t o n$ 按钮但对应 $C l i c k$ 代码为空。

单选按钮 $R a d i o B u t t o n$
若希望3个单选按钮互斥，则需要将3个单选按钮的 $G r o u p N a m e$ 属性设置为同一个值。同样功能可以用 $R a d i o B u t t o n L i s t$ 控件来实现。

复选框 $C h e c k B o x L i s t$
$R e p e a t D i r e c t i o n$ 属性 $v e r t i c a l$ ， $H o r i z o n t a l$ 排列

1.3、实现代码

分别点击全部控件，实现部分代码如下。

protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
    {
        TextBox1.Font.Name = "隶书";
    }

    protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
    {
        TextBox1.Font.Name = "楷体_GB2312";
    }

    protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
    {
        TextBox1.Font.Name = "黑体";
    }

    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (CheckBoxList1.Items[0].Selected)
            TextBox1.Font.Bold = true;
        if (CheckBoxList1.Items[1].Selected)
            TextBox1.Font.Italic = true;
        if (CheckBoxList1.Items[2].Selected)
            TextBox1.Font.Underline = true;
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (CheckBoxList1.Items[0].Selected == false)
            TextBox1.Font.Bold = false;
        if (CheckBoxList1.Items[1].Selected == false)
            TextBox1.Font.Italic = false;
        if (CheckBoxList1.Items[2].Selected == false)
            TextBox1.Font.Underline = false;
    }

1.4、实现效果

在这里插入图片描述

练习2：图片浏览

2.1 页面控件

1个Image
1个下拉列表DropDownList

2.2 控件排版

新建文件夹image

在资源管理器中打开文件夹，在image文件夹中添加5张照片；
添加 $i m a g e$ 控件
拉大选框，在属性 $I m a g e U r l$ 中添加图片路径“~/image/1.JPG”，在属性 $A l t e r n a t e T e x t$ 添加图片路径“ ~/image/1.JPG”（图片不存在时显示的文本内容）
添加 $D r o p D o w n L i s t$ 控件
启用 $A u t o P o s t B a c k$ ，编辑项，增加item0~item4共5项，ListItem中加入‘ ~/image/1.JPG ’到‘ ~/image/5.JPG ’

2.3 实现代码

点击DropDownList控件，编写代码，实现DropDownList控件与image控件联系；

  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    { 
        Image1.ImageUrl = DropDownList1.SelectedValue;
        Image1.AlternateText = DropDownList1.SelectedValue;
    }

2.4 实现效果

在这里插入图片描述

练习3：选择出行时间和目标城市

3.1 页面控件

2个标签Label
2个列表框ListBox
2个命令按钮Button
1个文本框TextBox
1个日历控件Calendar

3.2 控件排版

添加两个Label控件
分别设置Text属性为“可选城市”和“目标城市”;
添加两个ListBox控件
设置ListBox1的SelectionMode属性为Multiple（允许选择多项），启用 $A u t o P o s t B a c k$ ，编辑项，加入若干城市；
添加两个Button控件
分别设置Text属性为“确认”和“出发时间”；
添加TextBox控件
如下图所示：
添加Calendar控件
设置Calendar的Visible属性为False，ShowDayHeader属性为False；

3.3 实现代码

	protected void Button1_Click(object sender, EventArgs e)
    {
        ListBox2.Items.Add(ListBox1.SelectedValue);
        ListBox1.Items.Remove(ListBox1.SelectedItem);

    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Calendar1.Visible = true;
        Button1.Visible = false;
        Button2.Enabled = false;
        ListBox1.Visible = false;
        ListBox2.Visible = false;
        Label1.Visible = false;
        Label2.Visible = false;
    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        TextBox1.Text = "出发时间:" + Calendar1.SelectedDate.ToShortDateString();
        Calendar1.Visible = false;
        ListBox1.Visible = true;
        ListBox2.Visible = true;
        Button1.Visible = true;
        Button2.Enabled  = true;
        Label1.Visible = true;
        Label2.Visible = true;
    }

3.4 实现效果

在这里插入图片描述

练习4：用户注册界面设计

注：没有包括对注册信息的处理，只是建立一个注册界面

4.1 页面控件

6个Label
5个TextBox
1个Command
1个必填验证控件RequiredFieldValidator
1个比较验证控件CompareValidator
1个范围验证控件RangeValidator
1个正则表达式验证控件RegularExpressionValidator

4.2 控件排版

添加6个Label控件
分别设置为如下图所示：
添加5个TextBox控件
如下图所示：
添加一个Button控件
设置为确认；
添加验证控件
（1）RequiredFieldValidator:
ControlToValidate= TextBox1;
ErrorMessage=“用户ID不能为空”
（2）CompareValidator:
ControlToCompare= TextBox2;
ControlToValidate= TextBox3;
ErrorMessage=“两次输入的密码不相同”
（3）RangeValidator:
ControlToValidate= TextBox4;
MaximumValue=120
MinimumValue=1
ErrorMessage=“年龄应在1-120之间”
Type=integer
（4）RegularExpressionValidator:
ControlToValidate= TextBox5;
ValidationExpression，正则表达式编辑器选“Internet电子邮件地址”
ErrorMessage=“输入的信箱不正确”