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 實現效果