2011年8月30日 星期二

ASP.NET 自訂控制項 - DataFieldForm

ASP.NET 自訂控制項 - QueryFieldForm中已經有介紹過用定義的方式來產生一些基本的表單,並容易的取得相關參數來進行程式的處理.不過最重要的還是如何針對一筆資料庫中的資料進行維護.

在這個展示中,我一樣用類似於QueryFieldForm的方式來定義需要維護的欄位,並更快速的透過控制項的方法來取得類別的實例來進行後續的資料的維護.

定義需要的欄位


比較特殊的參數是
DataObjectTypeName="Likol.Web.TestWebSite.Data.Product, Likol.Web.TestWebSite"
這表示定義中的欄位會對應至這個類別的屬性,並做出相對應的處理(驗證,取值或設定)

執行結果UI


接下來透過控制項提供的存取方法來取得類別的實例




類別的實例就是在控制項屬性:DataObjectTypeName所設定的

以這樣的設定方式,可以很快的由定義好的資料類別來設定出維護的UI,另一方面資料類別也可以直接用來進行資料相關處理.

2011年8月25日 星期四

ASP.NET UI Sample Demo - 資料檢視切換

此編所展示的功能基本上與ASP.NET UI Sample Demo - 單一資料表維護是差不多的,不同的地方在於,此篇中的範例在清單列表時,可以進行切換,使用像Windows檔案總管"縮圖"的方式進行管理.

[二] 資料檢視切換

在畫面右上角使用了一個群組的按鈕{#GroupButton}來進行Grid或是Image的切換

Grid:


Image:


編輯的方式與ASP.NET UI Sample Demo - 單一資料表維護相同模式,圖片的選擇則需要先上傳,然後進行選擇{#ImagePicker}(目前尚未處理上傳部份)





上述的範例可以在ASP.NET UI Sample Demo]網址中看到Live Demo.
相關注記的部份{#??????}也可以在[ASP.NET 自訂控制項 - Live Demo]網址中看到.

[ASP.NET UI Sample Demo]
http://www.aspcity.idv.tw/sample.aspx


[ASP.NET 自訂控制項 - Live Demo]
http://www.aspcity.idv.tw/demo.aspx

2011年8月22日 星期一

2011年8月18日 星期四

ASP.NET 自訂控制項 - QueryFieldForm

在Web Form的資料列表中,每一次都要根據不同的資料進行搜尋條件的使用者介面設計,往往在這個階段要投入很多的時間,而且當需求者想要對這個部份進行修改時,也需要耗費相當多的心力進行處理,QueryFieldForm也就為了這樣的不便而產生.先看看該如何定義與產生的結果:

定義需要的欄位(在這裡我預設這個控制項會是以兩欄的方式往下延伸)



執行結果UI



接下來可以透過控制項提供的存取方法來取得使用者所填入的值





整體的概念應該是類似FormView,不過在這個部份我稍微做了一些變化,每一個欄位UI是從外部的使用者控制項(User Control)載入,一方面能有效的達到共用的目的,一方面也容易進行修改.

2011年8月16日 星期二

ASP.NET 自訂控制項 - Live Demo (2011/08/16)

[2011/08/16]
[NEW] ImageView
[NEW] RepeaterPager

在Windows檔案總管有一個檢視的模式是縮圖,如果要用GridView來做,實在是很難可以達到那個效果,ImageView就是為了這樣的效果而實作的.



搭配RepeaterPager這個控制項,就可以有效的處理在Web上瀏覽的行為



[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

2011年8月12日 星期五

ASP.NET UI Sample Demo - 單一資料表維護

接下來我將會用ASP.NET 自訂控制項 - Live Demo中所建立的控制項,開發出一些使用的方式與情境.

[一] 單一資料表維護

瀏覽畫面可以區分為四個區塊
1. 功能列(包含搜尋) {#Expander}
2. 搜尋條件列 {#SearchKeyPanel}
3. 資料顯示區 {#ScrollGridView}
4. 資料分頁資訊與選項 {#GridViewPager}


功能列(包含搜尋)可以進行縮小{#Expander},讓資料可以有更多的顯示範圍


搜尋完成後,搜尋條件列{#SearchKeyPanel}就會顯示輸入的條件或其他參數,可以點選搜尋條件列進行條件的移除或移除所有


搜尋條件上的Parent Category是使用彈出視窗{#DialogBox}的方式來進行選擇


點選新增按鈕或選取其中一筆資料編輯時,會開啟一個網頁內的小視窗{#WindowsPanel}進行資料的新增



上述的範例可以在ASP.NET UI Sample Demo]網址中看到Live Demo.
相關注記的部份{#??????}也可以在[ASP.NET 自訂控制項 - Live Demo]網址中看到.

[ASP.NET UI Sample Demo]
http://www.aspcity.idv.tw/sample.aspx


[ASP.NET 自訂控制項 - Live Demo]
http://www.aspcity.idv.tw/demo.aspx

2011年8月8日 星期一

ASP.NET 自訂控制項 - Live Demo (2011/08/08)

[2011/08/08]
[NEW] Expander
[FIX] DialogBox在非IE瀏覽器無法傳值問題
[BUG] DialogBox目前仍無法在Opera中使用

Expander這個控制項在預設的展開模式時,當滑鼠移到內容中就會在控制項下方跳出可縮小的按鈕(如下圖)



當按下縮小後,就會僅呈現一行說明文字的方式,可以有效的將資料可以顯示的範圍盡量的擴大.



[Live Demo]
http://www.aspcity.idv.tw/demo.aspx

2011年8月2日 星期二

ASP.NET 自訂控制項 - Live Demo (2011/08/02)

[2011/08/02]
[NEW] ScrollGridView 加入凍結欄位設定
[NEW] Spinner
[NEW] WindowPanel

Spinner是一個類似UpdateProgress的控制項,不過原始的UpdateProgress只能顯示在一個固定的地方,而且沒辦法根據畫面來呈現,Spinner在顯示時,會最大化在目前的視窗,並加上一個半透明的背景,然後顯示讀取的圖示與訊息在視窗中間.你只要把Spinner放在會透過UpdatePanel更新的頁面上,就會自動在更新時出現效果,步需要額外的設定.



WindowPanel主要用於動態的載入使用者控制項,並可根據目前視窗的大小進行選擇.當視窗關閉時也可以根據需要進行重新整理動作.



[Live Demo]
http://www.aspcity.idv.tw/demo.aspx