日期: 2023.10.12 星期二

作業

設計一輸入體重,單位可用英鎊或體重與一身高可用公分或英寸,計算 BMI 的值與並顯示其 BMI 值所代表的意義(太瘦或過胖),使用類別方式(例如 BMI)設計,其屬性有*性別身高體重,方法計算 BMI 值與顯示 BMI 值代表的意義。

控制項: DropdownList 下拉式選單

  1. 建立新專案: 檔案 > 新增 > 專案
    20231031072102
    20231031072236
    20231109053936
    20231031150345
  2. 於專案項目上,滑鼠右鍵選擇加入 Web 表單
    20231103143257
    指定項目的名稱: WebForm1表單項目名稱
    20231109055139
  3. WebForm1 上,滑鼠右鍵,選擇設計工具檢視,進入設計界面
    20231109055556

  4. 控制項上,選擇 DropdownList,裡面有許多內容,將選擇到的內容顯示出來。

    • DropdownList1
    • Label.Text = ""
      20231109061756
  5. 編輯項目
    20231109063441
    20231109064559
    20231109064818

  6. DropdownList 選擇切換項目後能具有像網頁 Sublime 按鈕的功能,Button 預設本身有 PostBack 功能,但一般控制項並沒有此功能,
    ,如果需具有這功能,需要勾選啟用 AutoPostBack。如此它就能在選項後提交這資料給伺服器後,在要求去執行 WebForm1.aspx 的功能。
    20231109095135

    PostBack 意指當在 Html 頁面按下 Submit 時,會把表單的資料提交給伺服器,要求它要去執行 WebForm1.aspx

  7. 當按下下拉式選單後,就去執行指定的事件程序。

    1. 滑鼠指向 DropdownList 控制項後,雙擊進入 SelectIndexChanged 事件進行編成:

      protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
      {
          //選擇到對應到的項目值
          //Label1.Text = DropDownList1.SelectedValue;
          //或被選擇到的那一個 ListItem
          Label1.Text = DropDownList1.SelectedItem.Value;
      }
  8. 輸出結果
    20231109100556

PageLoad 事件

  1. 前言
    Asp.Net 引擎,當所有需要的控制項物件都產生後,就會自動呼叫 PageLoad 事件。
  2. 示範案例: 同一例子,先將 DropdownList 中的所有 ListItem 都刪除,改在 PageLoad 事件發生時再入其值。
    20231109101757

  3. 編輯 PageLoad 事件程序

    protected void Page_Load(object sender, EventArgs e)
     {
         //執行 PageLoad事件之前,DropdownList 物件已經產生,這物件中有一屬性elList 物件
         ListItem item1 = new ListItem();
         ListItem item2 = new ListItem();
    
         item1.Text = "Find";
         item1.Value = "discover something";
         item2.Text = "Kill";
         item2.Value = "Let someone die";
         DropDownList1.Items.Add(item1);
         DropDownList1.Items.Add(item2);
     }
  4. 執行專案,結果中發現問題: DropdownList 在選擇項目後,項目內容重複一直增加。
    20231109103750

    原因: 每一次做 PostBack 都會呼叫伺服器,而伺服器會執行 WebForm1.asxp,所以會去執行 PageLoad 事件。
    解決: 判斷侍讀是第一次呼叫 PostBack,任何一 WebForm 上有一屬性 IsPostback,這屬性如果是第一次呼叫會是 false,如果曾經有呼叫過 WebForm1.aspx 它就會變成 true;將程式修改成:

    protected void Page_Load(object sender, EventArgs e)
    {
      //沒做過 Postback
      if (!this.IsPostBack)
      {
         //執行 PageLoad事件之前,DropdownList 物件已經產生,這物件中有一屬性是 ItelList 物件
         ListItem item1 = new ListItem();
         ListItem item2 = new ListItem();
    
         item1.Text = "Find";
         item1.Value = "discover something";
         item2.Text = "Kill";
         item2.Value = "Let someone die";
    
         DropDownList1.Items.Add(item1);
         DropDownList1.Items.Add(item2);
      }
    }
  5. 再次執行專案
    20231109110208

  6. 這兩種做法差異性:
    第一種作法: 在設計階段,ListItem 就已經產生放入 DropdownList 物件中, PageLoad 階段並沒有做任何事。
    第二種作法: 一樣,當使用者呼叫 WebFor.aspx 時,會先產生 DropdownList 控制項物件,然後才呼叫 PageLoad 事件,在這時才加入 ListItemDropdownList 物件裏。

  7. 如何刪除列表項目

    DropDownList1.Items.Remove(item2);

StateManagement 狀態管理

  1. 前言
    一般情況下只會使用到一個網頁,若要網頁跟網頁之間資料做傳遞。因為頁面為 statelesss 狀態

    WebForm1 —–>
    /
    /
    / Server
    WebForm2 —–>

    Server 接收 Client 端請求後處理將結果回傳給 Client 端後就會與 Client 斷線,無法保存 Client 端任何資料。為了解決這問題(跨網頁與跨不同的 PostBack 之間資料傳遞問題)有四種技術

  2. 範例: 計算按了幾次 (即 PostBack 做了幾次),使用單一網頁,不同時間的 PostBBack,希望能保存變數值

    步驟: 加一新 WerForm2 表單

    Label1 顯次目前第幾次
    Button1 每按一次就回到伺服器,要求在執行 WebForm2 得到 PostBack

  3. 結論: 按下 Button 後, PostBack 一次, Label1 的值加一,使用 State Management 技術的 ViewState(像一個 colletion, 類似一個 list, 更像 Java 的資料型別 Dictionary(不同於 list 的索引只能為整數,但字典的索引值可以為為字或其他資料類型)狀態管理技術完成該功能

    Button1_Click(){
      int counter;
    
    }

    WebForm1.aspx.cs

    Page_Load(){
      if ( !this.IsPostBack){
        /* 說明 Dictionary
        是一個泛型的 class,泛型中須提供兩個資料類型 <資料類型 index, 資料類型 value>
        Dictionary<string, string> dd = new Dictionary<string, string>(); // () 符號指建構子
    
        dd["find"] = "Discover";
        dd["kill"] = ",,,";
    
        view stage 是 .NetFramework 預設的 Dictionary
        */
    
        //自動建立 ListItem
        ListItem1 w1 = new ListItem();
        ListItem1 w2 = new ListItem();
        w1.Text ="item1";
        w2.Text ="item2";
        DropDownList1.Items.Add(w1);
        DropDownList1.Items.Add(w2);
      }
    }

    WebForm2.aspx.cs

    Button1_Click(){
      int counter;
      //不存在該物件 ViewState["counter"] 時
      if(ViewState["counter"] == null){
        counter = 1;
      }else{
        counter = (int) ViewState["counter"] + 1;
      }
      //做完之後重新設定(刷新) ViewStage 的值
      ViewState["counter"] = counter;
      Label1.Text = counter.ToString();
    }

    測試 WebForm2 表單,按下 Button1 驗證結果。

最後修改日期: 2023 年 11 月 22 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。