[使用者控制項] 您不知道的UC技巧,原來UC可以這樣變化? (User Control)

摘要:[使用者控制項] 您不知道的UC技巧,原來UC可以這樣變化?
微軟MVP -- Allen Kuo主講

 

 

使用者控制項(UC,User Controls)有許多特殊的技巧與用法

各位可以看看這些技巧,哪些您用的上?

 

 

以下資訊由 Allen Kuo提供:

...........................................................................................................................................................................................

 

UserControl的簡單應用時機
 
      如果不同網頁需要相同外觀, 您可以在網站裡新增 MasterPage(主版頁面), 讓不同網頁套用它即可。
 
      如果不同網頁的某一個小區塊是相同的, 您可以在網站裡新增 UserControl(使用者控制項), 在網頁需要的位置插入 uc 即可。
 
 
用UserControl呈現版型相同但參數不同的資訊

      

如上圖所示,在同一頁裡希望uc能根據QueryString 呈現不同的新聞內容及筆數, 可以將相關設定給uc即可

      

如上圖所示, 在不同網頁裡但有某一區塊需要呈現新聞且版型相同, 也是使用uc的恰當時機            

      

如上圖所示, 在不同網頁都需要呈現新聞記錄清單,但區塊寬度, 記錄筆數, 新聞類型不同, 都可以經由指定uc不同參數來達成目的

      

在同一網頁動態載入不同UserControl

      

如上圖所示, 若您希望寫好一個網站能建置多份(例如在不同分公司使用), 但有局部表單需要不同,例如台灣/美國分公司填寫請假單時, 要填的欄位不盡相同。
 
或者您開發一套購物網站,但後台針對產品上稿的表單欄位有些許不同,或者哪些欄位必填、欄位顯示順序…., 需要根據客戶需要做小修改, 可以在網頁裡動態載入不同uc來達到目的
 
 
使用UserControl 的優點
 
如果一個網站一共有10個網頁, 當您寫完3頁時, 其實您的完成比例不一定是 3/10 。因為每一個網頁複雜度不同, 有時一個網頁要包含數十個小區塊, 有些網頁只包含一個簡單的區塊, 如果您單純地只以網頁數量來估算會比較不準確。
 
相反地, 如果您事先將每個網頁切割成一個個小區塊, 評估哪些區塊可以共用, 最後假設統計出一共要寫60個uc,那麼當您寫完20個uc時, 您可以比較準確地估算出進度大約是20/60。
 
由於事先已評估過每支uc是否可以被不同網頁共用, 因此您在撰寫完一支uc之後便可以在多個網頁同時測試這支uc功能是否完備, 開發進度不再是一支支網頁,而是一個個區塊。
 
由於網頁被切割成多個uc, 所以每個uc的邏輯會變得比page單純, 開發起來會更快。
 
您是否在寫完一頁複雜的網頁後, 因為客戶要求某些區塊位置要移動位置而感到困擾呢? 如果您網頁是由一支支uc組成, 移動位置將會是件簡單的事情。
 
有時網頁需要在特定日期區間內才顯示某區塊, 例如5月呈現母親節特賣活動的廣告、選舉期間在網頁顯示投票模組、在特定時間才顯示問卷調查區塊。
 
您可以撰寫程式, 在需要時才在網頁裡插入uc, 或者將uc顯示或隱藏。
 
 
UserControl與Page的互動應用
 
當您習慣使用uc來組合出網頁的開發方式後, 您一定要學會:
  • uc之間如何互動
  • uc與page如何互動
  • uc與masterpage如何互動
 
如下圖,若二頁裡,都需要有一個區塊,呈現一筆記錄, 因此我們打算將右下角那塊,做成uc, 我們會遇到什麼問題呢?
 
QueryString不同, 一頁是idA=99, 一頁是 idB=99
 
兩個網頁裡,紅字的XXXXX是"目前網頁位置", XXXX 必需呈現這文章的標題, 但文章資訊,其實是由uc去db擷取的, page其實不知道文章標題是什麼
 
我幾乎都用uc來組出網頁, 所以這類事,我常遇到,也都會處理,
 
相反地,若所有內容全寫在page裡,倒也沒難度了,只是相同程式需要寫很多次, 日後也許不好維護
 

      

使用UserControl可簡化邏輯

 
如果您要開發一個維護 ”最新公告” 的後台網頁,您需要呈現記錄(簡稱Grid頁面),新增記錄,編輯記錄。
 
如下圖所示, 如果您拆開成三頁aspx來開發,
 
那麼在 Grid頁面切換到page 5,並按下 “編輯” , 跳到編輯頁,完成後再回到 Grid 頁面後, 它又變回第一頁了,
 
對使用者來說並不恰當
             
如果改用uc, 您可以在同一頁裡同時插入grid, Insert 表單, Edit 表單, 只需要控制它們三個uc的顯示, 隱藏即可,
 
grid 區塊的頁碼可以輕鬆地就被保留住,而 insert, edit 表單也不再需要重覆撰寫 
 
Response.Redirect(“xxx.aspx”);   這類的程式碼了, 因為它們全在同一頁面裡,
 
如下圖所示。
 

 

      

如果您學會了如何在 "同一頁" 裡面 應用Grid, Insert, Edit 三個uc來編輯記錄,

您可以更進一步地用相同的方式來編輯 master/detail 記錄, 但複雜度卻沒有差別哦!

 

                  

 

 

為UserControl加入樣板

      

通常uc被插入到不同網頁後, 多半仍具備相同或相似的外觀, 但如上圖所示, 如果您在不同網頁都需要呈現會員個人基本資料但呈現外觀截然不同,

其實仍然可以用一支uc來達到目的, 如此一來您只需要在 *.ascx.cs裡寫一次程式碼, 然後在不同網頁裡為uc指定不同樣板即可。

在aspx裡為 uc指定樣板 <ItemTemplate>的寫法大致如上, 看起來是不是與GridView, Repater, ListView, FormView 很相像呢!

 

UserControl + 樣板的其他應用時機

若您開發企業形象網站或購物網站, 大多會需要在不同頁面用不同版面呈現產品資訊, 請您參考下圖,

其實綠色框都是用來呈現一個商品資訊, 所以三張圖裡的綠框部份,只需要一支 uc 就可以共用囉。

您可以直接在 page 裡插入 uc來呈現商品資訊, 也可以在 GridView, ListView等控制項裡插入同一支 uc, 來呈現多筆商品資訊。

      

撰寫具備樣板的自訂控制項

在學會如何為uc加入樣板功能之後, 接著就可以嘗試自己開發一個具備樣板的自訂控制項,
 
它不難學, 但學會後要做出上述呈現商品資訊區塊的功能就很快(通常在幾分鐘,或半小時內),
 
等您學會, 日後若公司持續為不同客戶開發購物網站, 部落格網站, 新聞網站….,
 
只要是整個網站裡有很多頁都需要呈現相同資訊但版型卻不同時, 產能就會飛快。
 
如下圖所示, 標註1~5 的部份其實都是單一商品資訊, 如果能共用一支uc或自訂控制項就完成, 是不是簡便多了呢!
 
      

 

如何動態更換GridView的TemplateField
 
在稍早我們提及了可以在網頁裡 "動態" 決定要插入哪一個uc  以便達到 "動態" 變換表單的功能
      
您當然也可以在 GridView 事件插入一個TemplateField, 然後在RowCreated 事件裡動態地在 TemplateField 裡插入uc。
 
但是如果您page裡連GridView都沒有,需要動態建立一個GridView並將它插入page時, 您如何為這個 GridView 建立一個TemplateField 呢? 
 
相同地, 如果page裡連Repeater都沒有,需要動態建立一個 Repeater並將它插入page時, 您如何為這個 Repeater 建立一個ItemTemplate 呢?
 
會在這裡提及, 當然也與uc 有關囉。
 

...........................................................................................................................................................................................

 

密技大公開,兩天課程讓您功力升級

點選圖片,報名課程

 

 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 140hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課