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

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

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

练习1：设置文本字体

1.1、页面控件

1个文本框$TextBox$
3个单选按钮$RadioButton$
1个复选框$CheckBoxList$
1个命令按钮$Button$

1.2、控件排版

1. 设置1个文本框$TextBox$
   首先在工具箱中选中$TextBox$，拉大文本框至适当大小和位置。然后在属性的行为中，设置$TextMode$为$Multiline$（多行）。
2. 设置3个单选按钮$RadioButton$
   首先在工具箱中选中$RadioButton$，双击三次。然后在属性的Font中分别设置$Text$为隶书、楷体、黑体，在行为中设置$GroupName$均为$group1$，在布局中设置$RepeatDirection$为$Horizonal$。
3. 设置1个复选框$CheckBoxList$
   首先在工具箱中选中$CheckBoxList$，双击一次。然后点击复选框右边的小箭头，勾选$AutoPostBack$，点击编辑项，再点击3次添加，分别更改$Text$为加粗、斜体、下滑线，点击确认。

4. 1个命令按钮$Button$
   在工具箱中选中$Button$，更改$Text$为提交。

• $AutoPostback$属性
  • 事件发生后，立即执行相应的事件处理代码， 需要相应控件的$AutoPostback$属性为$True$；否则整个页面被提交后才统一执行事件处理代码（减少vweb$页面在服务器和客户端浏览器之间的传输次数，以减轻对服务器及网络带宽的压力）。
  • 可以采取单击命令按钮$Button1$，提交$web$页面。因此有时页面添加一个$Button$按钮但对应$Click$代码为空。
• 单选按钮$RadioButton$
  • 若希望3个单选按钮互斥，则需要将3个单选按钮的$GroupName$属性设置为同一个值。同样功能可以用$RadioButtonList$控件来实现。
• 复选框$CheckBoxList$
  • $RepeatDirection$属性$vertical$，$Horizontal$排列

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 控件排版

1. 新建文件夹image
   
   在资源管理器中打开文件夹，在image文件夹中添加5张照片；
2. 添加$image$控件
   拉大选框，在属性$ImageUrl$中添加图片路径“~/image/1.JPG”，在属性$AlternateText$添加图片路径“ ~/image/1.JPG”（图片不存在时显示的文本内容）
   
3. 添加$DropDownList$控件
   启用$AutoPostBack$，编辑项，增加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 控件排版

1. 添加两个Label控件
   分别设置Text属性为“可选城市”和“目标城市”;
   
2. 添加两个ListBox控件
   设置ListBox1的SelectionMode属性为Multiple（允许选择多项），启用$AutoPostBack$，编辑项，加入若干城市；
   
   
3. 添加两个Button控件
   分别设置Text属性为“确认”和“出发时间”；
   
4. 添加TextBox控件
   如下图所示：
   
5. 添加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 控件排版

1. 添加6个Label控件
   分别设置为如下图所示：
   
2. 添加5个TextBox控件
   如下图所示：
   
3. 添加一个Button控件
   设置为确认；
   
4. 添加验证控件
   （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=“输入的信箱不正确”
   

4.3 实现效果