第3章EEP2019WEB表單基礎設計(中)第3章EEP2019WEB表單基礎設計(中)\3-4使用WebDateTimePicker

3-4使用WebDateTimePicker

 

 

WebDateTimePicker是設定與使用方式與WebRefVal相似,都是在設定在Template的頁中,只是WebDataTimePicker容易很多。

 

q   WebFormView中使用WebDateTimePicker

 

Step1打開W005。右鍵按一下wfvMaster,選擇Edit Template,並點選EditItemTemplate。這裏要對PurchaseDate欄位作設定,所以將原有的TextBox刪除,增加一個WebDateTimePicker,命名為wdtPurchaseDate(新版Wizard產生的W005自動生成了這個WebDatatimePicker,命名為PurchaseDateDateTimePickerE


3-4-1 增加WebDateTimePicker元件

 

Step2選中WebDateTimePicker時,右上角有個小三角,即為快捷鈕,先選擇Edit DataBindings


3-4-2 進入Edit DataBindings

Step3在顯示出來的畫面中,選擇Field binding項目的Bind to,然後下拉選擇PurchaseDate,代表將用PurchaseDate來顯示此日期,按一下OK如果是灰色不可選的,請按一下左下角的Refresh Schema


3-4-3 Binding PurchaseDate欄位

 

Step4wfvMaster的右上角,下拉選擇InsertItemTemplate,設置新增時的WebDateTimePicker,將其命名為wdtPurchaseDate,其他設定方式與上述EditItemTemplate的步驟完全相同。


3-4-4 設置WebDateTimePicker

 

Step5選中wfvMaster,按一下右鍵,選擇End Template Editing

3-4-5 結束Template Editing

 

Step6將此W005存檔,並點選W005,對其右鍵執行Build,進行預先的編譯工作,最後點選InfoLogin.aspx右鍵執行View in Browser,重新打開此W005網頁。

我們在WebNavigator上按下「更改」的功能時,可以看見如下圖中的WebDataTimePicker出現,並可以選擇一日期傳回到PurchaseDate欄位中。


3-4-6 打開W005網頁

q  WebDetailsView中使用WebDateTiemPicker

 

打開W004。在WebDetailsView中使用WebDateTimePicker也同樣先要將對應的欄位轉化為TemplateField

Step1按一下wdvMasterFields屬性,這裏要對OrderDate欄位作設定,所以選中 OrderDate並按一下畫面的右下角的Convert this field into a TemplateField按一下OK


3-4-7 轉化為TemplateField

Step2右鍵按一下wdvMaster,選擇Edit Template。選中OrderDate。將原有的TextBox刪除,包括EditItemTemplateInsertItemTemplate,並分別增加一個WebDateTimePicker,都是命名為wdtOrderDate,因為此兩個Template是不會同時存在的,所以名稱可以是一樣的。

3-4-8 增加WebDateTimePicker元件

 

Step3對兩個WebDateTimePicker的設置方法與上述的方式相同。按一下wdtOrderDate右上角有個小三角,會出現設置快捷鈕。選擇Edit DataBindings…

3-4-9 進入Edit DataBindings

 

Step4會打開一個畫面,選擇Field binding項目的Bind to,然後下拉選擇OrderDate,按一下OK如果是灰色不可選的,請按一下左下角的Refresh Schema

3-4-10 Binding OrderDate欄位

 

Step5選中wdvMaster,按一下右鍵,選擇End Template Editing

 

3-4-11 結束Template Editing

 

Step6將此W004存檔,並點選W004,對其右鍵執行Build,進行預先的編譯工作,最後點選InfoLogin.aspx右鍵執行View in Browser,重新打開此W004網頁。

我們在WebNavigator上按下「更改」的功能時,可以看見如下圖中的WebDataTimePicker出現,並可以選擇一日期傳回到OrderDate欄位中。

3-4-12 打開W004網頁

q  WebGridView中使用WebDeteTimePicker

 

WebGridView中使用WebDateTimePicker元件,與使用WebRefVal元件的設置方法一樣。

Step1先要將要替換輸入的日期欄位轉化為TemplateField

Step2然後,分別在Edit TemplateFooterTemplate貼入WebDateTimePicker元件,在此是使用FooterTemplate來代替InsertTemplate;依前例可在元件設定好WebDateTimePickerEdit Databindings…

Step3最後,比較特殊的是要在wgvDetailAddNewRowControls屬性,定義這些WebDateTimePicker元件與這些Data Binding所對應的欄位關係。這是因爲FooterTemplate無法進行Data Binding的關係,否則新增的資料是無法存回WebDataSource數據源中。


 

 

Top of Page