在Linux平台上，微軟比較專注在Ubuntu的合作，密切到有市場傳聞微軟在WIndows 10之後不再推出新的Windows版本，直接擁抱Ubuntu，如果這個傳聞成真，可以說是微軟多年前想靠Xenix 踏入Unix平台的美夢終於成功，還真是望相隨、有夢最美。
無論如何，ASP.NET Core給多年使用.NET技術的程式設計者們，有機會跳脫Windows的框框，開始擁抱更廣泛的開源大千世界，
現在，你己經有點.NET Core的基礎，接下來，是更多的練習，學習更多的.NET Core程式設計技巧，不論你是想走比較傳統的.NET/C#路線，或是想走新潮的.NET Core/Vue.js整合專案路線，都有很好的發展機會。
對了，你應該知道Visual Studio Code可以和Git整合，進行版本管理的吧？能夠和Git整合，除了版本控管，我們也能夠利用Git的開源特性來進行開源專案的開發，我在這次鐵人賽留下一個專案只完成初步的成果，鐵人賽後，我會再接再厲，把這個薪資計算應用程式專案開源並發展成我心目中完整的專案。
此外，微軟買下Github的新聞你應該聽說的吧？買下Github展現微軟在支援開源專案方面的野心，雖然有不少開源專案的大神在微軟買下Github時，紛紛把專案遷離Github，但後嬻的發展可以說是比較和平的大家共存。
.NET Core是個還在一不斷持續更新中的台，建議各位有空常去.NET Core網站關注一下.NET Core的發展。
看看有沒有新的版本推出，更重要的是有更多的學習資源。如果有可能，加入Github，並開始寫自己的開源專案，寫多了程式碼，熟能生巧，就會有更多的創意，也有更多的能力寫出群的應用程式。
我個人一直覺得台灣的程式設計族群一直像盤散沙，大神們各立山頭，也各互不相讓，自立門戶，就有了門戶之見，而有人就有江湖的各方勢力紛爭，讓台灣的開源軟體界一直不能獲得良性發展，變成江山代有新人出，長江後浪推前浪。技術一直不能生根，隨著大神的沒落，大神的技術就跟著流失了，沒有很好的流傳下來，實在很可惜。國外很多大神的技術都有很好的保存下來，後繼有人，才能生生不息，薪火相傳，才有穩定成長的技術樹，最後開花結果。
在此期待新人們能夠放開心胸擁抱前輩們的心血，承先啟後，讓開源專案能持續進步，自創新門派雖然有成就，但是，後繼無人，成就也只是一時。
一點點個人觀察台灣開源環境的感想，藉這個場合一吐為快。
既然學了.NET Core，也有了開源平台，何不就此更進一步，邁入開源專案的天地之中，邁向開源的終極旅程。
在完賽這一天，正好在高雄參加MOPCON 2018，
多多參加開源社群活動，也是邁向開源終極旅程的必經之路，如有可能，多和同好分享你的專案，好的專案會引起共鳴，也會為你的開源專案帶來意想不到的幫助。
保持開放的心胸，和別人分享你的技術，分享你的想法，要有勇者鬥惡龍的氣魄，也要比氣長，開源的道路講的是長久計劃，而且不怕別人潑你冷水。很多時候，開源專案是個有些孤獨的旅程，多參加社群活動，尋找志同道合者共同在開源的旅途上奮戰，這條開源之路會走得比較快樂。
還有MacOS的部份沒談，這是因為對MacOS真的不熟，遇到堆操作上的問，只好留待更熟MacOS時再來發文說明，如果有邦友期待看到這部份文，只能說聲抱歉，日後再來談。
終於完成這次鐵人賽，面對打字不順利的苦惱，總算完賽，真的要給自己一個掌聲，也對文章中層出不窮的錯別字、遺漏字，感到十分抱歉。
我們明年見。
]]>首先我們把專案和...]]>
首先我們把專案和資料庫移到Ubuntu環境下，我只是籍由一台NAS為中介，把檔案由WIndows平台複製到NAS，再由NAS複製到Ubuntu中，如下圖：
HRApp資料夾是薪資計算應用程式資料夾，HRDB.Bak是資料庫份檔案，我先把資料庫還原到Ubuntu上的SQL Server中。
執行Azure Data Studio，打開Ubuntu的炵端機，下達指令azuredatastudio，就可以看到Azure Data Studio的畫面：
點一下左上角的[Server]圖示，
然後把連線昨天建的本機SQL Server連線啟動起來，就在連線字串上點兩下就行了，連上SQL Server是這樣子，游標指到Server上按右鍵：
然後叫出Manage視窗，可以看到有個Restore功能，
點下Restore功能，出現還原功能對話窗：
把用來還原的備份檔完路徑和檔名打上去，然後按下[OK]，
接下來還原資料庫的確認對話窗，按下[Restore]，
最後出現"Restore Database Succced."還原成功了。
然後在下圖指示"Refresh"的地方點一下"Refresh"，
就會看到HRDB出現在資料庫清單中。點選[New Query]，出現執行SQL指令視窗，輸入"Select * from Emp_Base;"，再按下"Run"，就會看到之前輸人的一筆測試員工資料。
接下來，我們來看看怎麼把薪資計算應用程式專案移過來。
我們在Ubuntu終端機輸入"Code"指令，沒多久，Visual Studio Code視窗就出現了：
像之前那樣利用"OPen Folder"的方式打開薪資訊算應用程式專案資料夾，最後下圖所示：
我們有兩個地方要修改：
- 資料庫連線，因為Server Name改變了。如之前說明，這是在appsettings.json中，ubuntu安裝預設的主機名稱就是ubuntu，另外，連線資訊也不能用Windows整合式驗證了，要改成這個樣子：
"Data Source=ubuntu;Initial Catalog=HRDB;User ID=sa;Password=***********" <-- 注意把星號換成正式的密碼。
2. 我們想法預設的連線埠5000/5001改其他埠號，例如8000，查找了一下，這個設定是在Properties資料夾下的launchSettings.json檔案內設置：
程式碼如下：
"HRApp": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:8001;http://localhost:8000"
}
}
或許你會懷疑ASP.NET Core是不是內建有網站服務器，不然怎麼能當作網站運作，在WIndows下Visual Studio會叫用一個IIS Express的克難版IIS來建置IIS運行環境。在Linux下，.NET Core則是使用一個名為KESTREL的微型Web Server來作為ASP.NET Core網站運作的基石，有興趣瞭解Kestrel的邦友可以參考這篇文：Kestrel web server implementation in ASP.NET Core。
我們執行dotnet run指令時，就會啟動Kestrel並建構出一個微型網站。在正式上線的網站，建議還是使用IIS(Windows)、Apache(Linux)、Node.js(Linux)來當做正式Web Server，然後讓Kestrel和IIS、Apache、Node合作。
前述關於移植要修改的地方修改好以後，記得存好檔案，再離開Visual Studio Code。
打開ubuntu終端機，cd到薪資計算程式專案所在資料夾。
執行指令：
dotnet restore
dotnet run
注意連線資訊己變8000及8001埠，
打開瀏覽器，輸入連結URL： http://localhost:8000/ ，然後操作到員工基本資料維護畫面，可以看到：
這樣，我們就完成移植ASP.NET Core專案到Linux環境了。
談到這裏，技術層面的討論到此告一段落了，明天，來個Happy Ending，
而這些程式碼，建構出今天資源無限的開源世界，也讓後繼的IT職人有眾多低成本的技術資源及支援可引用。這些大神是在作慈善的嗎？不是這樣的，是在貢獻自己的心力，讓這世界更形美好。
嗯，我們回過頭來看看微軟為開源的貢獻吧，微軟把ASP.NET Core移植到Linux，同時把SQL Server也開源到Linux，附帶的弄了個兩個工具，Visual Studio Cod，用來寫ASP.NET Core網站的程式設計文字編輯工具，和Azure Data Studio，這是個算是在Linux環境下的SSMS工具。在網站建設方面基本全員到齊，只差IIS沒有移植了，但是Linux環境下有強大的Apache和Node.js網頁伺服器，這就已經可以讓IIS可以不用考慮移植到Linux環境了。
昨天，我們完成了SQL Server on Linux及其SQL指令工具Azure Data Studio的安裝，這可以說是後台的服務部份，今天，我們來安裝ASP.NET Core 2.0和Visual Studio Code。
我們先去.NET Core下載網站注意選擇Linux，
然後，點選中間那個Install .NET Core SDK，出現下圖網頁，在紅框中下接選單可以看到.NET Core現在支援的Linux發行套件，Ubuntu 18.04也在支援之列了。
我們點選Ububtu 16.04選項，就出現如何在Ubuntu 16.04中安裝.NET Core SDK的說明與指令步驟，不想一步一步點的邦友，這裏是傳送門。依續執行下列指令就可以完成.NET Core 2.1 SDK在Ubuntu 16.04裏的安裝：
wget -q https://packages.microsoft.com/config/ubuntu/16.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.1
實際安裝過程如下圖示：
想要閱讀更多.NET Core技術細節的邦友可以到這裏https://aka.ms/dotnet-cli-telemetry，或是這份文件詳述了.NET Core SDK的指令集https://aka.ms/dotnet-cli-docs。
是不是安裝好了呢？可以直接打下指令
dotnet
或
dotnet --version
如果反應如下圖示，則安裝正常完成。
我們可以直接延用前兩天在Windows環境下說明的命令列指令來實驗。
我們下達dotnet new --help來看有那些專案範本可使用，如下圖：
建一個資料夾，然後到資料夾中建新專案，再執行這個新專案，指令請參考第24天的文(Day 24) 在Windws 環境下，用Command Line方式開發ASP.NET Core專案https://ithelp.ithome.com.tw/articles/10206429 。
執行結果如下圖：
然後，我們打開Firefox，再輸入 https;//localhost:5001/ 再強制Firefox接受這個不安全站網站，就會出現如下網頁，足證.NET Core SDK的安裝完成了。
接下來，我們來完成Visual Studio Code的安裝。到安裝網頁https://code.visualstudio.com/download，
下載deb套件，下載完成後，在終端機執行下列指令：
sudo dpkg -i code_1.28.2-1539735992_amd64.deb
安裝好了，輸入指令Code。Visual Studio Code安裝就完成了。如下圖：
是不是容易又快捷呢？微軟這幾年真的很用心在開源，雖然以往微軟惡名昭彰，但現在看來是另一一番新氣象。
從ASP.NET Core開始開源到Linux環境，...]]>
從ASP.NET Core開始開源到Linux環境，SQL Server也開源到Linux環境了。微軟似乎想通了，開始在Linux領域，攻城略地。
Visual Studio因為有太多東西移植不易，只先把Visual Studio Code由Windows移植到Linux和Mac。
微軟在移植到Linux時，也有些挑選，基本上是RedHat、Ubuntu、SuSE、Docker這四種環境，比較受到支援。
以我個人的經驗，其中Ubuntu 16.04是和微軟移植的軟體套件相容度最好的Linux平台，建議想在Linux平台使用ASP.NET Core開發網站的程式設計師優先考慮使用Ununtu 16.04。
嗯，但是現在ubuntu已經是18.04版了，是的，但微軟還沒完全支援到18.04，所以，先下載16.04來安裝就好了。
而且，安裝Ubuntu 16.04後，系統會說已有新版本，建議你升級，請先拒絕掉升級的建議，否則升級完就是18.04版了，安裝微軟的套件就會發現有些困難度，不是少了這個套件就是多了那個套件。看來，微軟還需要多學習新版Linux對套件管理的方式，才不會老是吃悶虧。
鐵人賽結尾這幾天就讓我來介紹一下如何在Linux下建置ASP.NET Core的開發環境。
基本上，我認為在Linux平台上完整的ASP.NET Core開發平台，至少要安裝下列套件：
* .Net Core 2.1
* SQL Server 2017，我知道一定有不少人會質疑為什麼不用MySQL、PostgreSQL、MariaDB，我只是熟悉SQL Server而已，其他RDBMS系統不熟。
* SQL Operation Studio，微軟的SQL Server Management Studio一直是管理SQL Server的好幫手，到了Linux環境，微軟推出了SQL Operation Studio，這是在Linux環境下的圖形化SQL操作工具，我們裝起來看看吧。
* Visual Studio Code
我們今天就來把Ubuntu 16.04環境安裝成ASP.NET Core的開發環境。
首先來安裝SQL Server on Ubuntu，請參考[這篇文章]((https://docs.microsoft.com/en-us/sql/linux/quickstart-install-connect-ubuntu?view=sql-server-2017) 依序執行下列指令：
先匯入Public GPG金鑰：
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
現在有SQL Server 2017正式版本和SQL Server 2019預覽版本可選擇案裝，這個是SQL Server 2017版本的安裝套件：
sudo add-apt-repository "$(wget -qO- https://packages.microsoft.com/config/ubuntu/16.04/mssql-server-2017.list)"
這個是SQL Server 2019預覽版安裝套件：
sudo add-apt-repository "$(wget -qO- https://packages.microsoft.com/config/ubuntu/16.04/mssql-server-preview.list)"
雨個套件擇一安裝即可，別貪多嚼不爛。然後執行下以下指今安裝
SQL Server：sudo apt-get updatesudo apt-get install -y mssql-server
以上指令行狀況如下列圖示。
最後，會醒你執行下列指令完成SQL Server COnfiguration的處理。
要完成Configuration才能讓SQL Server正式運作。
sudo /opt/mssql/bin/mssql-conf setup
首先選擇版本，如果是評估或用在開發環境，不做商業正式環境用途，建議選1或2，不然就選擇4到8，不建議Express免費版本。
然後會問你是否接受授權，接受就輸入Yes，然後繼續輸入SA帳號的密碼。
整個Configuration過程如下圖：
執行下列指令確定SQL Server有在運作中。
systemctl status mssql-server
如果要開放遠端連線，記得要在防火牆把1433埠打開。
接下來，我們來安裝Azure Data Studio以為SQL Server的管理工具，因為SSMS沒有Linux版本，也不知何時微軟才會推出Linux版本的SSMS。
我們由Ubuntu中執行Firefox，連線網頁，你會看到Azure Data Studio，這個是SQL Operstion Studio正式版本的名稱，
因為Ubuntu是Debian的衍生Linux，所以選擇Linux安裝套件的DEB下載安裝套件比較能夠完整安裝。下載完成時，在Ubuntu端機上，輸入下列指令：
sudo dpkg -i /Downloads/azuredatastudio-linux-1.1.4.deb
安裝完成行執行指令
azuredatastudio
來啟動Azure Data Studio，Azure data Studio算得上是微軟推出的跨平台的SSMS，但其功能並非SQL Command Interpreter那麼簡單，想進一步瞭解Azure Data Studio，可以參考什麼是Azure Data Studio？
啟動Azure Data Studio後，我們連線剛才安裝好的SQL Serevr on Linux。如下圖輸入
這樣，我們就安裝完成SQL Server on Linux，也安裝了一套類SSMS的SQL指令工具Azur Data Studio。
讓我們來測試一下吧。記得之前在介紹VIsual Studio開發環境時寫的半個薪資計算應用程式專案嗎？我們就拿這個專案來測試吧。
打開Vsual Studio Code，然後在[File]-->[Open Folder]功能，打開薪資計算應用程式專案資料夾：再打主版頁面_Layout.cshtml。
確定專案都穩穩妥妥沒問題，打開PowerShell，再用cd指令改變資料夾到薪資計算專案資料夾。記得要cd到startup.cs檔案所在的資料夾。
如上圖，用指令確認所指資料夾己有startup.cs檔案，然後執行dotnet restore指令，確定還原 .NET 專案中指定的相依性。
還原完成，再執行dotnet run指令把網站啟動起來。像下圖，有https和http的連指引就算是完成啟動了。
我們打開chrome，再輸入網址 https://localhost:5001/ ，我使用SSL協定，以免Chrome老是跳出不安全的警示網頁。但因為SSL憑證是不合法的，所以Chrome還是很盡責的告訴你這網站不安全。主焹站主頁面如下圖：
再打開員工基本資料維護網頁，如下圖：
到這裏，我們可以確認在Visual Studio下開發的ASP.NET Core專案是可以在命令列環境下繼續維護與運作的。
那這樣，各位或許會認為：那麼我們還需要那麼肥胖的VIsual Studio環境嗎？這答案端賴你是什麼樣的程式設計師而定，如果你是講究凡事自己動手作的碼農神人，那麼你可以考慮暫時離開Visual Studio IDE工具，但還是不要拋棄比較好。如果你想保留一些喝咖啡閒暇時光，還是保留Visual Studio IDE工具吧，讓Visual Studio協助你產生Model程式，應用精靈幫你完成View的創建。這樣可以事半功倍。
要不要抛棄Visual Studio IDE工具，全然看你個人的決定，不管如何決定，ASP.NET Core都會是你開發網站系統的好幫手。
我是會保留Visual Studio為主力來開與維護ASP.NET Core專案的，畢竟這環境有太多輔肋工具來幫助我們開發系統，可以讓我們不用太照顧程式細節，可以提升程式設計師的生產力。或許有人抱持著不同看法，認為Visual Studio的精靈反而是為害程式效能的主要原因，但對我來講，對一個大型ASP.NET Core專案，我還是會依賴並善用精靈來輔助系統開發的。
此外，還有一些開發行動裝置應用程式的工具，目前只支援在Visual Studio IDE開發環境下使用，有須要開發行動裝買應用程式者，勢必還要擁抱Visual Studio IDE很久一段時間。
所以，我認為如果不是真的有必要，例如硬碟空間不足，保留 Visual Studio IDE環境還是有必要的。 ]]>
這是下載點請自行下載安裝。我就不再說明安裝程序了。
總之，安裝後桌面上會有下圖所示的圖像。
執行VIsual Studio Code，其畫面如下：
Visual Studio Code個純文字的程式編輯器，有些像Notepad++、Sublime Text這些純文字編輯器，但Code既然是微軟推出來配合ASP.NET Core，自然對C#、ASP.NET Core有些特別的支援，像是自動語法辨識及Intellisense的功能，這對編寫ASP.NET Core專案程式碼，有很大的幫助。
所以，通常，我會建議不太想使用肥胖的Visual Studio來開發ASP.NET Core的開發者，使用Visual Studio Code吧。畢竟，VIsual Studio Code也有了跨平台版本，可以在Linux、Mac環境下使用。
昨天，我們完成了用命令列方式在Powershell下建立一個ASP.NET Core專案，我們可以在Powershell視窗下查看有那些檔案與資料夾：
接下來，我們用Visual Studio Code來打開這個新的ASP.NET Core專案，如果己經打開PowerShell命令視窗，可以直接輸入Code就會啟動Visual Studio Code了。
在Visual Studio Code畫面左邊上方有個資料夾展開出(Exploerer)的選項，如下圖所指，
點一下Explorer，就會出現Folder引導視窗，但目前還沒有打開任何資料夾，我們來打開昨天新建的ASP.NET Core專案TestMVC01，
點一下上圖中藍底的[Open Folder]，就會跳出像是檔案總管的資料夾選擇視窗，指到C:\ASPNETCore\TestMVC01資料夾，如下圖：
按下[選擇資料夾]後，就會在Visual Studio Code的左方出現專案檔案管理視窗，方便我們對專案中有那些檔案有個全覽式的視角：
讓我們打開TestMVC01專案的主版頁面，做點修改，也看看Visual Studio Code有些什麼功能：
在上圖右上方，有個檔案內容全覽小視窗，右下方顯示了一個對話窗，問你是否要增加Ｃ＃語言的擴充能力？點選[Yes]增添Code對C#語言語法的Intellisense功能。
一旦開啟新的語言類型檔案，Code就會問你要不要載入該語言的Intellisense的語法支援擴充能力，請務必要增添，以讓Code幫助你完成程式設計。
為了讓繼續後續的操作，我大致修改一下主版頁面_layout.cshtml如下圖所示：
然後在[File]功能表中點選[Save All]把己經進行的修改儲存起來。
然後進入Powershell視窗，執行下列指令：
cd C:\ASPNETCore\TestMVC01
dotnet restoredotnet run
以上指令執行情況如下圖，出現中控台：
有兩個主要訊息：
* 可以在瀏覽器裏用 http://localhost:5000/ 或 https://localhost:5001/ 連結查看網站運行的情況。
* 按[CTRL]+[C]中止網站運行。
我們打開Chrome，輸入連結 http://localhost:5000/ 其結果如下圖：
要注意的是因為不是https連結，所以Chrome會提醒你不安全，我們強制Chrome不理會非https連線的不安全限制，就會出現ASP.NET Core專案的範例網站。
或者，你可以使用 https://localhost:5001/ 使用SSL協定連線，這樣chrome就不會抱怨了。
而剛才特意進行的一點修改也出現在網頁中。
談到這裏，除了如何部署外，都談的差不多了，以命列令列方式開發與測試ASP.NET Core專案是相當容易的過程，不會很複雜，在安裝Visual Studio的同時，ASP.NET Core的命令列環境也都安裝完成了，不用另外再處理。
至於部署，我想在介紹Linux環境時再一併介紹，現在就先不談了。
至於中ASP.NET Core中控台，當有前端瀏覽器連線網頁時，中控台會出現後端運作的程記錄，如下圖所示，
這其實就是log，有興趣研究的人，可以實作後再一點一點看看中控台中的訊息，如果網站執行過程中有問題、報錯，中控台都會出現，可以用來瞭解網站執行狀況。
到了視窗時代，DOS指令還是...]]>
到了視窗時代，DOS指令還是一直存在著，還多了個Windows Powershell的進階式指令視窗，可以比DOS(現在叫[命令提示字元])執行更多的管理工作。
在第三天的卜文章中，我提到ASP.NET Core專案有兩種開發模式，第一種我們己經談過好久了，就使用Vosual Studio整合式開發工具為開發環境，另外一種方式是用命令列下達專案管理指令，搭配VIsual Studio Code為編程工具的方式來開發。我這幾天就會來討論如何用命令列方式來進行ASP.NET Core的專案開發。
在Windows環境下的兩種命令列環境，一個是[命令提示字元]，另一個是[Powershell ISE]。
這個是[命令提示字元]
這個是[PowerShell]
[命令提示字元]是MS-DOS的Windows版本，從WIndows 3.1到今天的Windows 10，微軟一宜直維持著[命令提示字元]在WIndows環境中運作，[命令提示字元]中可以使用的命令不多，實務上，很多命令都可用Windows的基本操作來完成，像是查找檔案、檔案與資料夾的管理等等，都可用檔案總管來完成。
2006年，微軟終於在WIndows XP上推出新的Shell Script Interpreter(命令直譯器)並命名為Powershell，從命名就可以瞭解微軟對Powershell是存在一定程度的野心的，Unix環境下一直有個成熟而能強大的Shell命令直譯器，可以完成Unix作業系統下全部的系統管理任務，微軟一直想在Windows環境推出類似的功能，最終PowerShell出現了，其實，PowerShell是以.Net Framework 為基底的命令直譯器，微軟另外還弄了個PowerShell Core，PowerShell Core最新版本是6.0，是以.NET Core 2.0為基底的命令直譯器。想要更進一步研究PowerShell Core 6.0可以從這個連結 開始，讓我們從這裏下載與安裝Power Shell 6.0，就下載、安裝，就行了。
安裝完成的Powershell執行起來是這個樣子。下圖是我用ls指令的部份畫面截圖。
我們可以到這裏來看PowerShell Core的相關文件。或者在Powershell Core裏打入help指令來查看線上文件，因為.Net Core是跨Windows、Linux、MacOS平台，所以，PowerShell Core 6.0也是可以跨越WIndows、Linux、MacOS，由下圖的Powershell安裝套件下載點顯示，PowerShell 6.0可以在各種主流作業系統上使用。
基本上，如果你熟悉Unix Shell Command，不熟的人可以先看看這份文件Basic UNIX commands，但我並不是說可以直接把這些Unix命令拿來使用，你可以嚐試，如果遇到沒有支援的指令，Powershell會跳出下圖顯示的警告訊息，
建議還是用help來一步一步進階Powershell。
現在，讓我們著重在ASP.NET Core專案，使用命令列的方式開發ASP.NET Core專案，基本上是下列田四大步驟：
* 使用.NET Core指令創建ASP.NET Core專案
* 使用Visual Studio Code編輯ASP.NET Core專案
* 使用.NET Core指令執行ASP.NET Core專案
* 使用瀏覽器瀏覽專案執行結果的網站，如有問題，關掉執行中的ASP.NET Core專案使用Visual Studio Code編輯與除錯。
* 重覆以上動作，完成ASP.NET Core專案的開發
* 最後是部署ASP.NET Core網站
以上步驟也就是我這接下來幾天要說明的事項。
今天讓我先說明怎麼創建新的ASP.NET Core專案。
我們在PowerShell中打下指令：
dotnet --helpPowerShell反應如下所示：
所有dotnet指令的參數就列在上圖中。我們看到"建立新的 .NET 專案或檔案"，我們再試：
dotnet new -help
結果如下圖，我們可以看到j專案範本清單，ASP.NET Core Web App (Model-View-Controller)專案就是我們前些日子一直在Visual Studio裏採用的專案範本，我們再試下列指令：
C: -- 切換到C槽
mkdir ASPNETCore -- 建立專案主控資料夾
cd ASPNETCore -- 切換到專案主控資料夾
mkdir TestMVC01 -- 建立專案資料夾
cd TestMVC01 -- 切換到專案資料夾
dotnet new mvc -- 建立ASP.NET Core專案(Web MVC應用)
或者可以這樣寫
C: -- 切換到C槽
mkdir ASPNETCore -- 建立專案主控資料夾
mkdir ASPNETCore\TestMVC01 -- 建立專案資料夾
dotnet new mvc -o C:\ASPNETCore\TestMVC01 -- 在-o參數指定資料夾中建立ASP.NET Core專案(Web MVC應用)
命今執行結果如下圖：
這樣，一個新的ASP.NET Core專案就完成建立了，明天我們再繼續其他步驟。
這個標題，大概...]]>
這個標題，大概會有不少邦友想來酸吧！
鐵人賽吧！在每天追文的過程中輕鬆一下而己。
今天一開始先讓我補充一下昨天忘記講的一件事，在把Vue.js專案建好時，Visual Stduio會提示一個黃底警示訊息，如下圖：
這個訊息講電腦上找不到node.js，請安裝Node.js並重新啟動Visual Studio或點一下[設定專案屬性]來設置node.exe的位置。
昨天我完成了Node.js的安裝，[設定專案屬性]的畫面如下兩圖：
這是[General]頁籤：
這是[TypeScript建置]頁籤：
如果你己經把黃底警告訊息條關閉，專案屬性的進入點是在方案總管下，游標指向專案名稱點右鍵，再點選[屬性]即可叫出[專案屬性]對話窗。
專案屬性沒有少要設置的，保持預設值就行了。
昨天，我們最後是卡在一個錯誤讓Vue.js專案無法運作。報錯息如下圖：
在上圖錯誤清單視窗中有個[T2688]的像是錯誤清單的連結，直接點一下這個連結，連到Bing，可是看了半天都和T2688這個錯訊息的處理無關啊，比較像是打廣告的搜尋結果。改用Google來查找同樣的搜尋字串"TS2688 TypeScript 找不到 node 的類型定義檔案。"，結果好多了，搜尋結果比較能看到和T2688錯誤訊息相關的條目，可是再看內文，感覺無厘頭，都是些討論TypeScript的文。在這個過程中，深深感受到Bing的一直不能普及是有原因的，微軟應該要對Bing的搜索引擎多花些心思吧。
實在沒辦法，只好自力救濟，自己探路，好歹也是個微不足道的小小神，也應該有點點"神力"吧。XDDDDD
再去研究方案總管，發現在NPM的子資料夾dev還有好幾個遺漏的套件。
再用[安裝遺漏的NPM套件]的方式去把遺漏的套件補齊。但在補齊的過程中，還會跳出一個訊息。
這是説因為在補齊遺漏套件的過程中，Visual Studio自動修補了己經開啟的檔案，我開啟的檔案有兩個，一個是Package.json，另一個是tsconfig.json。只要按下[全部皆是]全部重新載入就行了。但，為了讓安裝遺漏套件的過程能順利些，還是把開啟的檔案都關閉再進行。
確定遺漏的套件都安裝好了，
我們再次執行網站，還是一樣的報錯。完全一樣的報錯：T2688 找不到'node'的類型定義檔案。這次我注意到引起錯誤的檔案是tsconfig或jsconfig檔案。
我們打開tsconfig.json檔案，ts是TypeScript的簡稱，雖然是從javascript專案範本來，但Visual Studio實際上是以TypeScript為基礎建置專案。tsconfig.json內容如下圖，我看到其中一段
"types": [
"node"
],
猜測是這段Type定義有些狀況，把這三行註解掉再執行看看，這時tsconfig.json檔案看起來如下：
我們再執行網站，結果沒有報錯了，跳出一個Windows防火牆的警告訊息。
點選[允許存取]後沒多久，跳出一個Node.js的中控台視窗。
根摢Node.js的中控台說明，我們可以用 http://localhost:1337/ 來連線Node.js網站，用瀏覽器觀看如下：
這個1337連線埠號，是在專案屬性[General]頁籤中設定的，我們可以根據自己環境需要修改。
確實，Vue.js專案也可以順利運行了。要注意的是，網頁上說Single Page Application，以Vue.js和TypeScript來開發的。
一頁書式的網站，這確實是很多討論Vue.js的文章論述提到的主要應用。
我不會進行更多的Vue.js的討論，雖然Vue.js是現在JavaSript的顯學，每個自認是JavaScript大師人物多少都要來段Vue.js Me too!式的文章。我真的對JavaScript不熟，也不想一頭栽進JavaScript這個無底深淵，所以就淺嚐為而止，談到這邊結束。實在是，為了鐵人賽文，我最早構思似乎有些不成熟，把Vue.js看得簡單了，等開始寫鐵人文，看多了大神們的Vue.js文，才發現Vue.js沒有那麼容易專精，因為各大神以自己的角度闡釋Vue.js，旁徵博引，看起來就非常辛苦，這就是我這幾天對JavaScript有些尖酸刻薄的言詞的原因。
所以對ASP.NET Core與Vue.js的整合應用，就談到這裏了。
]]>如果免不了要使用JavaScript，就盡量使用Google能找到的範例來使用，會比較自行刻代碼來的省事。
當然，如果你立志做JavaScript大師，那麼這兩句話就當廢話來看可以。
為什麼我要下這個標題，因為JavaScript經過這些年的發展，Node.js的興起和各JavaScript門派的大神們的刻苦創新招式，JavaScript己經成為百花齊放，各種套件、框架、控件層出不窮的大千世界。你開始學習其中一個招式，馬上就有大神文告訴你，還要學會這個，那個，如果會這個，要不要在學一學這個的那(ㄋㄟ)個和那(ㄋㄚ)個。
啊，扯遠了，就當我在抱怨吧。
今天我們要再來談談Vue.js和ASP.NET Core的整合。
一開始，我們打開Visual Studio的新增專案對話窗，然後注意對話窗左邊中門下方一點點有一串藍色字連結：
[開啟Visual Studio安裝程式]，找到了就點下去，打開Visual Studio的安裝程式。
Visual Studio安裝程式啟動以後，找一下Node.js開發，勾選這個安裝選項，然後點[修改]，這是說要修改Visual Studio的環境的意思。因Visual Studio還啟動著，所以跳出下列訊息。
去把Visual Studio關閉，點[重試]就會完成安裝程序。為什麼要安裝Node.js，因為Vue.js。但接下來，大神們不滿足於你只會Node.js，你還要會NPM，要會GULP，如果可以，去看看什麼是TypeScript吧。等一下，還沒出門就把門檻加高到無法跨出去，是沒必要的吧。
安裝好Node.js，VIsual Studio安裝程式顥示如下，
唉，到底裝好了沒？先直接關掉這個安裝程式，然後打開Visual Studio，再次執行新建專案，然後在新增專案視窗左邊的範本集裏，可以看到JavaScript和TypeScript兩者下都有Node.js的範本集。如下兩圖所示，有看到Vue.js Web應用程式範本吧？
我們先選用JsvaScript裏的[基本Vue.js Web應用程式]範本(其實TypeScript裏的Vue.js專案範本也是一樣的)，指派好專案名稱和資料夾後，就按下[確定]把專案建起來吧。
建好的Vue.js專案，其方案總管中有看起來如下圖的資料夾及檔案。
好吧，看起來又是另外一回事了，似乎也沒了MVC架構，其實不是這樣子，因為這是[基本]的Vue.js專案，[基本]，再強調一次，[基本]，也就是說，請你開始自行刻MVC程式囉。
沒問題的話，就從NPM開始吧。打開npm資料夾，可以發現三個npm套件都有驚嘆號的標示，
也被註記(遺漏)字眼，請先由Vue套件開始，游標指向Vue套件，按右鍵然後選擇[安裝遺漏的NPM套件]。
但是，報錯了。
這是因為Node.js還沒安裝啟動，或者是環境沒指派到Node.js在資料夾，Visual Studio沒法自動啟動Node.js。所以，接下來，我們來安裝Node.js資料夾。
在繼續下去之前，我們先看一下main.ts，這是TypeScript檔案，也是專案的啟始檔案。檔案的內容，如下圖，
你可以看見[找不到模組Vue]的訊息，這是因為NPM裏，還沒有Vue模組的完整下載。
現在，讓我們來完成安裝Node.js，奇怪那剛才執行的Visual Studio安裝動作，在裝什麼？喔，那只是安裝專案範本而己。在Visual Studio的功能表下，可以看到一行黃底警告，說是沒找不到Node.js的執行階段，我們點一下右邊的[下載Node.js]，Node.js的官網下載頁面被打開，我的電腦是WIndows 10 64位元版本，所以選擇Windows Installer 64bits。
然後問你要如何處理下載檔案，我選擇[執行]
下載完成時，就自動啟動安裝程序：
（咚、咚、咚)
安裝過程我就不再詳細截圖了，總之就是接受版權限制，下一步下一步就行了。最後，出現Node.js安裝精靈完成，就行了。
Node.js安裝完成後，回到Visual Studio，再次執行Vue的[安裝遺漏的NPM套件]的動作，這回沒有報錯，靜止幾秒鐘，Visual Studio的輸出視窗顥示下列訊息，表示Vue套件安裝完成了，
我們再去看方案總管，可以看到vue@2.5.17的驚嘆號消失，變成可用的套件，
而main.ts檔中的vue也不再是找不到的模組了。
接下來，我們再去把方案綏總管中，另外,兩個遺漏失的NPM套件安裝起來。
現在，我們來執行網站看看，如下圖所指點選[網頁伺服器]；
結果還是報錯，
說是找不到Node類型定義檔案，如下圖錯誤清單所示。
我今天先談到這裏，明天再來告訴各位怎麼排除這個問題。意思就是欲知後事如何，請看下回分解。 ]]>
例如這篇，
例如這篇，
但是，我們要注意的是，今天的JavaScript己經不是剛開始創造出來時的JavaScript，隨著網際網路興起盛行，網站不斷的開發與更新，JavaScript不斷的被注入新的生命，更不要說還有Node.js，這個專門配合JavaScript的網站伺服器的問世，更壯大了JavaScriopt陣營的聲勢。這些年以來，各種討探討程式語言生命週期與熱門度的網站，都一致把JavaScript列在十大熱門語言範圍內，看在那些看壞JavaScript的衛道人士眼裏，就像小強一樣越打越活的幹勁，實在可恨吶。
還有，一大堆框架應用都是以JavaScript為基底來開發，現在常聽到的AngularJS、React.js、Vue.js、Angular2，都是以JavaScript為基礎。確實，JavaScript有它的缺點，但是在網頁開發方面，這些缺點反而成了能進行更有彈性的網頁應用的開發，於是，缺點反而成了優點。
曾經，微軟也是反JavaScript陣營的一員大將，Google一下Microsoft Hate JavaScript可以看到不少微軟陣營的大神在詆毀JavaScript的文，但熟悉ASP網頁開發歷史的程式設計師，應該能認同當年可是微軟的ASP把JavaScript的應用發揮到極致的程式語言，JavaScript能夠渡過風飄搖的草創時代，邁向成長茁壯，ASP環境的灌溉是最大功臣，那麼，微軟為何對JavaScript曾經勢同水火，因為C#，回頭去看第一天和第二天的歷史文，就可以知道微軟為了把C#鑄造成ASP.NET的主要腳本語言，用心良苦，自然對JavaScript這種早期的野草語言，大加撻伐。
可是，PHP的興起，適時的給了JavaScript一片沃土，得以持續成長茁壯成今日的大樹。各種框架應用如雨後春荀，也像海浪前撲後繼般不斷對JavaScript加持與更新。
時至今日，ASP.NET Core出現快兩年了，微軟費了好大的勁把.NET Framework改造成ASP.NET Core這樣輕巧的平台，除了解除.NET Framework笨重不適合跨平台之外，更重要的是能引進JavaScript的助力，讓ASP.NET Core能夠取代PHP成為網站開發的新星。也因此，ASP.NET Core的專案範本裏，就有了Angular和React的應用範本，不需要額外的處理，ASP.NET Core把開源帶到你面前任你取用。
我不會再介紹如何在ASP.NET Core裏如何創建Angular和React的專案，這也己經有很多文在介紹了，我想談談ASP.NET Core如何和目前最熱門的框架Vue.js合作。
Vue.js的創造者尤雨溪，還相當年輕，Vue的發音就像View，可以理解是以前端開發為主的JavaScript框架，而且，Vue.js相當輕量，相較於Angular，可以說是羽量級的對手，但Vue.js能夠發揮的地方，可不是羽量級的應用。和Angular比較起來，提供和Angular類似的功能，但Vue.js卻輕巧很多，而且有React的快速的優點，此外，簡單好用，是受到很多畏惧於JavaScript框架程式複雜度的程式設計師歡迎的主因。
不再廢話，讓我們一步步來建立整合ASP.NET Core和Vue.js的專案吧。
先創建一個新的ASP.NET Core專案。
先處理主版頁面_Layout.cshtml，因為這是ASP.NET Core網站開始載入網頁元件的進入點，我們把Bootstrap及jQuery的載入點都刪掉，處理後的_Layout.cshtml的內容如下圖：
現在_Layout.cshtml看起來就像是隻被剃毛的寵物。
然後我們再添加Vue.js的載入點，最後_Layout.cshtml的全部程式是這個樣子：
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - TestVue</title>
<environment include="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
@RenderBody()
<environment include="Development">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
接下來，我們修改HomeController.cs，刪掉About和Contact的進入點，修改過的HomeController.cs看起來是這樣子：
然後我們刪掉在Home資料夾下的About.cshtml及Contact.cshtml兩個View檔案。
接著，我們修改Index.cshtml，用Bue.js來執行網站，刪掉Index.cshtml原來全部的程式碼，然後添加下圖的程式碼：
這時，方案總管看起來如下圖：
我們執行網站，因為拿掉了主版頁面_Layout.cshtml中由Bootstrap.js支持的功能表，所以，現在主版頁面等於是空的，只有Vue.js的載體存在。
也因為主版頁面沒了Menu部份，網站就直接按照startup.cs類別檔中Route的預設部份，直接載入Home資料夾中的Index.cshtml網頁來顯示，結果如下圖：
那麼，我們怎麼知道網站有引用Vue.js呢？
我們改變一下Visual Studio使用的預設瀏覽器為Chrome，如下圖方式選用：([IIS Express]->[網頁瀏覽器]->[Google Chrome])
執行網站，在Chrome裏，按[CTRL]+[Shift]+[i]叫出Chrome的Console：
可以看到You are running Vue in Development mode.的字串，證明現在 網頁是有Vue.js在運作。
你也會看到可以下載Vue DevTools的Chrome擴充功能，請先登入Google帳號，照網頁指示下載安裝Vue DevTools擴充功能，這樣在日後開發Vue.js網站時，會有很大的幫助。
Chrome中安裝了Vue Devtools後，再執行網站，然後在Chrome中按下[CTRL]+[SHIFT}+{i]，會顯示如下圖：
今天先淺淺品嚐一下Vue.js和ASP.NET Core整合的基本功，明天我們再來詳談更深入的Vue.js應用，也要討論要一點Node.js的事情了。
今天讓我們來實作一下網頁如何配合驗證和角...]]>
今天讓我們來實作一下網頁如何配合驗證和角色，提供有權限控管機制的網站。
我們先建個新的控制器。如下圖：
選擇空白控制器。
輸入控制器的名稱，例如AdminController：
建好控制器後，來建個簡單的網頁，也就是檢視網頁，就用預設的Index來建新的View吧。如下圖在Controller檔案中，游標指向Index上按右鍵：
然後在[新建MVC檢視]對話窗中，直接按下[新增]把檢視建好，這時[方案總管]看來如下圖：
接下來，先修改主版頁面，在功能表上添加新的Controller的進入點，如下修改_Layout.cshtml的程式碼：
最後修改Index.cshtml檢視網頁的程式如下：
(是原來的樣子)
(這是修改後的樣子)
改完後，我們執行網站。如下圖，功能表上出現了Admin Page。
先不登入，點選Admin Page，Admin Page網頁出現，如下圖：
可是，怎麼沒登入也能看到Admin Page，這網站豈不門戶大開？
先把網站關閉，打開AdminController.cs，然後在其中添加Role的控制，如果使用者屬於"Admin"角色才能執行Index.cshtml檢視網頁：
很簡單的一行指令。程式碼打好後，再執行網站，然後點選Admin Page，這回直接跳到登入網頁去了。可見，系統會自動判斷使用者是否屬於角色Admin，如果還沒有登入，會自動導向登入頁面。
那麼，我們可以控制功能表上的表單選項，按照使用者所屬角色來控制出現與否嗎？也就是Admin Page這個功能表，在使用者屬於Admin角色才會顯示出來？
當然可以，我們在主版頁面中如下圖修改：
再次執行網站，可以看到Admin Page的功能表消失了，這是因為尚未登入，一旦登入完成，Admin Page的功能表就出現了。
談到這裏，各位應該可以學了自行在系統中添加Role和指定使用者所的Role，以及寫些控制程式碼來控制網站功能配合Role來進行權限制管。 ]]>
我知道有些大神乾脆自已造一個類似網站管理工具的網站來用，Google一下可以找到很多文章說明，但我要談的不是這些如何自已建管理工具網站，我想簡單談談如何控制登入機制，以及如何用簡單的程式來添加Role，和如何指派使用者的Role等方面的程式控制。
我們怎麼控制使用者的登入行為？例如，密碼輸入錯誤次數，密碼的複雜度等的控制。
ASP.NET Core是利用IdentityOptios這個組件來實現對登入行為的控制。由於登入行為控制必須在焹站一開始啟動時就載入監控，所以，我們要寫在Startup.cs類別檔案中，這個類別檔是用來安排網站啟動時的一些網站初始化參數及網站環境參數配置的檔案。startup.cs類別檔中的service.configure<>程式碼段，則是這些網站初始化參數及網站環境參數配置的區段。如下圖，是我用來控制登入行為的參數設定：（其實也是Google微軟官網來的程式碼，因為程式碼有點長，所以我切成兩張圖）
程式碼本文附在這裏：
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
//從下面一行開始
//Password Strength Setting
services.Configure<IdentityOptions>(options =>
{
// Password settings
options.Password.RequireDigit = true; //密碼要有數字
options.Password.RequiredLength = 8; //密碼至少要8個字元長
options.Password.RequireNonAlphanumeric = false; //不需要符號字元
options.Password.RequireUppercase = true; //要有大寫英文字母
options.Password.RequireLowercase = false; //不一定要有小寫英文字母
options.Password.RequiredUniqueChars = 6; //至少要有個字元不一樣
// Lockout settings
options.Lockout.DefaultLockoutTimeSpan = TimeSpan.FromMinutes(5); //5分鐘沒有動靜就自動鎖住定網站，預設5分鐘
options.Lockout.MaxFailedAccessAttempts = 3; //三次密碼誤就鎖定網站, 預設5次
options.Lockout.AllowedForNewUsers = true; //新增的使用者也會被鎖定，就是犯規沒有新人優待
// User settings
options.User.RequireUniqueEmail = true; //郵箱不能重覆使用
});
//Seting the Account Login page
services.ConfigureApplicationCookie(options =>
{
// Cookie settings
options.Cookie.HttpOnly = true;
options.ExpireTimeSpan = TimeSpan.FromMinutes(5);
options.LoginPath = "/Account/Login"; // If the LoginPath is not set here, ASP.NET Core will default to /Account/Login
options.LogoutPath = "/Account/Logout"; // If the LogoutPath is not set here, ASP.NET Core will default to /Account/Logout
options.AccessDeniedPath = "/Account/AccessDenied"; // If the AccessDeniedPath is not set here, ASP.NET Core will default to /Account/AccessDenied
options.SlidingExpiration = true;
});
//複製到這邊
// Add application services.
services.AddTransient<IEmailSender, EmailSender>();
services.AddMvc();
至於設定的意義，我也註記在程式裏了。各位可以實際操作看看效果如何。
接下來，我們來談談怎麼新增角色及設定使用者的角色。
我們先在SSMS裏查詢一下使用者及角色資料表，如下圖，可以看到有使用者，但沒有角色，使用者也沒有指派角色。
然後，我還是在startup.cs程式中添加設置角色及指派使用者的程式碼段，這樣可以在網站初始階段就把角色和使用者所屬角色設定完成。
我們先在ConfigureServices程式碼段後，添加一個Private程式段CreateUserRoles，如下圖：
請注意上圖紅框的部份程式碼，這是在指定使用者來指派角色。相關程式碼如下：
services.AddTransient<IEmailSender, EmailSender>();
services.AddMvc();
}
//從這裏複製
private async Task CreateUserRoles(IServiceProvider serviceProvider)
{
var RoleManager = serviceProvider.GetRequiredService<RoleManager<IdentityRole>>();
var UserManager = serviceProvider.GetRequiredService<UserManager<ApplicationUser>>();
IdentityResult roleResult;
//Adding Addmin Role
var roleCheck = await RoleManager.RoleExistsAsync("Admin");
if (!roleCheck)
{
//create the roles and seed them to the database
roleResult = await RoleManager.CreateAsync(new IdentityRole("Admin"));
}
//Assign Admin role to the main User here we have given our newly loregistered login id for Admin management
ApplicationUser user = await UserManager.FindByEmailAsync("simon581923@gmail.com");
var User = new ApplicationUser();
await UserManager.AddToRoleAsync(user, "Admin");
}
//以上是要複製的程式碼
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider Services)
{
if (env.IsDevelopment())
然後在startup.cs的末尾呼叫執行CreateUserRoles，如下圖。
把角色建好，並指派使用者的角色。程式碼如下：
....
....
});
//複製這段最後的程式碼即可
CreateUserRoles(Services).Wait();
}
}
程式碼都擺好以後，執行網站。如果沒有報錯，我們再到SSMS查詢一下，如果如下圖：
從上圖可以看到已經建好Role，也把使用者和Role的關聯建起來了，那麼，我們怎麼利用Role來控制使用者在網站中的權限呢？這部份明天再來討論。
昨天我們談到主版頁面時有講，最好是能夠在網站一啟動時，就判斷是否完成登入的動作，如果完成登入再顯示網諳其餘網頁功能，如果...]]>
昨天我們談到主版頁面時有講，最好是能夠在網站一啟動時，就判斷是否完成登入的動作，如果完成登入再顯示網諳其餘網頁功能，如果沒有完成登入，就跳出登入網頁，要求使用者完成登入，否則顯示一個錯誤網頁。
讓我們來實作看看ASP.NET Core的驗證機制，也就是Identity。
新增一個網站專案，就命名為Identity，選擇ASP.NET Core專案。
選擇MVC範本。
驗證機制選擇[儲存應用程式內的使用者帳戶]。
等專案建好，我們來看看方案總管，如下圖：
可以看到比之前建立的薪資計算專案，多了好多個資料夾，各位一一打開這些新增加的資料夾，會看到有Model，有Model也有Controller，值得注意的是那個Migration資料夾，由之前的討論，這個是Model到Database間整合的中介模組，在這裏，就是要用來在資枓庫建置出存放驗證資料的相關資料表的模組。
總之，專案建好了。我們可以執行看看效果如何。執行結果如下圖：
在網頁右上角多了[login]和[Register]兩個功能出來，因為還沒有任何帳號，先從[Register]開始：
這個簡單的登入頁面，是ASP.NET Core的內建登入頁面，讓我們輸入帳號和密碼後，按下[Register]，結果出現錯誤訊息：
從這個錯誤訊息，可以瞭解需要做Migration的處理把儲存驗證資訊的資料表建置完成。
注意中間那個粉藍底的[Apply Migration]，這是用來在資料庫中建立驗證機制使用的資料表的功能。但是，等一下，好像還沒讓這個專案知道要使用那個資料庫。
根據第９天文章描述，資料庫連線字串是要在appsettings.json檔案內設置，我們打開appsetings.json檔案，如下圖：
可以看到已經設置了一個本地資料庫檔案做為這個專案的資料庫，如果執行[Apply Migration]就會建立這個資料庫，同時建置ASP.NET Core驗證機置制所需要的資料表。
在這裏，我想使用SQL Server上的資料庫，來替換掉ASP.NET Core預設的資料庫。
讓我們在SSMS裏添加一個資料庫來進行測試。
首先添加資料連接，我只是用這個方式取得正式的資料庫連線字串。如果有能力直接Code，就直接建Code吧。
然後從資料連接的屬性頁，取得資料庫連線字串如下：
Data Source=SMNVM;Initial Catalog=MyDB;Integrated Security=True接下來，根據第９天文章描述，資料庫連線字串是要在appsettings.json檔案內設置，我們打開appsetings.json檔案，把剛才做的資料庫連線字串替代進去，如下圖：
然後執行專案，完成[Register]出現下圖網頁：
點一下網頁中的[Apply Migration]，網頁變成下圖：
注意，要求你刷新網頁。按下[F5]鍵刷新網頁，可以看到現在已經是登入的狀態了。網頁右上角可以看到登入帳號名稱。
點一下帳號名稱，可以看到[Manage your account]的網頁。
這些都是ASP.NET Core專案範本建好的登入驗證機制，我們到SSMS裏看下資料庫，如下圖，可以看到ASP.NET Core建了好幾個新的資料表。
AspNetUsers是保存帳號的資料表：
如果熟悉．.Net Framework的Web Form開發的程式設計師，應該能理解這就像是之前的MemberShip的做法，是的，沒有錯，Identity是MemberShip的進化版本。
但是，也有些不同的改進：
- 首先是密碼的存放方式，.Net Framework Web Form的MemberShip，密碼是用本文方式存放，只要會用SQL指令就能查出使用者的密碼，相當沒保障。ASP.NET Core使用Hash Code保存密碼，明顯比較安全。
- 帳號管理網頁更為豐富，這可以實際操作網頁得知。
- 提供雙因驗證機制。只是，我們需要指定雙因驗證機制的驗證器應用程式來完成雙因驗證。
- 之前在IIS環境提供一個Membership/Role Manager的網站，現在取消了，取而代之的是要自已在專案中實作。我猜，因為原來的MemberShip/Role Manager的規劃方式不太能夠區分出不同網站間的不同角色規劃要求，所以終止了，改由ASP.NET Core範本來提供各別專案角色設置的能力。
有興趣實作雙因認證的邦友可以參考這篇文章使用 ASP.NET Core 中的 SMS 的雙因素驗證來試看看。我就不再廢話了。
我...]]>
我們已經知道ASP.NET Core的主版網頁是_Layer.cshtml這個檔案，而且是在_ViewStart.cshtml檔案中指定主版網頁檔案是那一個。
第一個問題是，我們可以自行指定主版網頁嗎？當然可以。
第二個問題是，我們可以在專案中同時有多個主版網頁給不同目的的網頁使用嗎？當然可以。
怎麼做？
我們先在檔案總管裏，把_layout.cshtml複製一個新的檔案,姑且命名為_HRlayout.cshtml。如下圖，這個檔案要放在[Shared]資料夾下面。
然後在Visual Studio的方案總管中，把_HRLayout.cshtml檔案拉到[Shared]資料夾中，這樣才算完成在專案中添加檔案的動作，不是只要在檔案總管中複製完就成了。
後來發現，只要在檔案總管中複製就行了，不需要到Visual Studio裏再加入了。
我們打開_HRLayout.cshtml，先看到之前提到的功能表的修改的部份，然後可以看到@Renderbody()這個指令，Renderbody的意思是說，把網頁主體的控制權重導到後續網頁，而後續網頁就是預設網頁，也就是Home\Index.cshtml檔案，這是因為在startup.cs中指定的預設網站的route的原因。
我們再來看看Index.cshtml，如下圖，我們看到的黃色框的部份程式(即第一個區塊部份)，就是網頁上圖形的部份，還可以動態捲動的那塊區域。
我們把Index.cshtml檔中第一個區塊註解後，如下圖：
再執行專案，就變得感覺沒那麼富有內容的網頁。如下圖：
從這裏的說明，我們可以嚐試兩件事，首先改變首頁為員工基本資料頁，這個要修改startup.cs裏，有關預設Route的設定，我們改成如下圖黃色框裏的程式碼來試看看：
果然，一進入網頁就到了員工基本資料網頁。
但是這樣也太公開了吧！是的，嚴格來說，應該還要有個登入網頁，如果還沒正式登入網站，應該先秀出一個登入網頁，完成登入且有正式授權，才能進入員工基本資料網頁，這部份，我們以後來討論證時再來實作。現在只要知道怎麼改變主版網頁的顯示網站網頁的流程的方法就行了。
但是，我們可以先來變化一下，把先前新增的主版頁面_HRLayout.cshtml做些改變，然後，試著改變各View檔的預設主版頁面，只稍微修一下中文就行了。
另外，首頁另外做一個，既然現在不做登入功能，至少，不要一下子進入首頁就把員工資料看光光。複製Home資料夾下的index.cshtml修改一下，變成如下程式碼。
執行後，網站變成這樣子，看起來比較不會有一大堆微軟的東西，也比較像是自己公司的網站了。
另外還要注意，主版頁變了，_ViewStart.cshtml裏指向的主版頁面檔案也要改一改。
或者是在Index.cshtml裏，加一行：
兩者選擇一項來改就行了。所以，聰明如你應該猜到如何應用多個主版頁面的方法了。
就是在View中指定Layout變數指向的主版頁面檔案。
今天我們談到這裏，明天再續。 ]]>
『知道啊！以前在軟件公司帶專案時，還曾經找顧問來帶我們團隊Run敏捷開發。』
『喔，那主任想不想引用敏捷開發在專案上？』...]]>
『知道啊！以前在軟件公司帶專案時，還曾經找顧問來帶我們團隊Run敏捷開發。』
『喔，那主任想不想引用敏捷開發在專案上？』
『為什麼會這樣想？』
『上課時，講師提到可以採用敏捷開發的方法來加速專案開發進度。』
『嗯，還有什麼？』
『沒了，然後就談到MVC架構的關注點分離(Separation of Concern,SOC)。也談到關注點分離有助於大型軟體專案的分工開發工作，然後用敏捷開發來改善大型軟體專案，因專案開發組織的龐大，導致開發工作進度不易掌握的問題。』
『關注點分離，是MVC架構的特色之一，但並不是只有MVC架構才有關注點分離，這是一種概念，如果我們用Delphi來開發，也是可以做關注點分離的開發方式，只要我們能夠把系統規劃成彼此間關聯度很小的模組或函數庫，這也就是耦合度微弱的意思，耦合度是種判斷軟體系統各模組間關聯性強弱的一種方式，高耦合度模組的系統會比較難以維護，因為，修改其中一個模組就會連動到其他模組。』
『這耦合度是軟體工程的一種理論，我們在規劃系統時，會儘量規劃成低耦合度的模組，實在緊密耦合的模組就合併成一個模組來設計，這也是大型軟體系統開發時常用的手法。不僅僅敏捷開發而己。』
『MVC架構的關注點分離，也是一種低耦合度的開發方式，Model、View、Controller三者之間，有些關聯，但我們不用對其間如何關聯作處理，只要把正確的程式碼放到適當的位置，其他就靠背後的平台幫我們來完成系統運作。我們只要關注在怎麼把Model設計好，其他，基本上就靠ASP.NET Core來完成了。這樣我們可以用比較少的人力來完成比較多的開發任務。』
『主任講慢點，我要消化一下。那，敏捷開發為什麼那麼多人在談。MVC，若不是要學ASP.NET Core，還真沒聽到人在說。』
『其實，MVC己經成為很多PHP程式開發的基礎，己經是通識，不需要再強調了。很多PHP的程式人員，在使用Laravel這些框架時，就自然的使用了MVC架構，很平常的，只是微軟的Visual Studio的ASP.NET發展到今天才開始主打ASP.NET Core，雖然有一段時間在發展ASP.NET MVC，但大多數開發者還是在走.NET Framework WebForm的老路線，所以，對使用.NET Framework WebForm為主要框架的開發者，MVC就變得很新奇了。而其實，MVC的理論架構在大約40年前被提出了。 』我在Google上查找了MVC的Wiki文章，把MVC理論的出現年度那一段指給小魏看。
『這麼久，為什到現在又會再提出來呢？』
『這個，我猜是因為網站開發成為今天軟體系統開發的主流。』
『怎麼說？』
『前後端開發的模式呀！你沒聽過前端工程師、後端工程師和全端工程師的職務名稱嗎？』
『聽過，這又有什麼關聯呢？』
『其實，在軟體設計的領域，很早以來就有區分前端與後端，前端是和使用者互動的部份，後端控制資料的輸入、處理和輸出，從大型主機時代的終端機開始，前端後端就一直是軟體架構的基礎，到了Client/Server架構，前端後端架構比較明顯一些些，到了網際網路時代，前端後端的分際又有些模糊，所以才會出現全端工程師這種職務。』
『那，這些和敏捷開發有什麼關係？』
『沒有關係。』我給小魏一個大大的笑容。『只是在講一下發展歷程。』
『嚴格來說，敏捷開發也是在這個過程中發展出來的思維。從軟體工程的角度來看，能夠把軟體規劃成低耦合度的模組來開發，就能夠在開發過程中，減少開發團隊間的干擾，對大型軟體專案來講，就能減少開發時間，每個程式設計人員獨立專注開發自己負責的模組，編寫程式碼，進行單元測試，然後交給負責整合的系統人員，整合出完全的系統，這樣子開發大型系統是比較理想的。』
『嗯，那問題是什麼？』
『開發品質一致的程式設人員不好找，不好培養。人都有自己的想法，你忘了昨天你和葉經理的衝突？所謂不想用精靈，要自己刻程式，就是一種程式品質不一致的行為。你刻出來的程式和我刻出來的程式，一定不一樣。所以大型軟體專案一定會引進所謂模版(Template)來做為程式設計人員的指引，大家用模版來開發，減少程式設計人員的個人風格造成的程式品質問題。如果再考慮萬一模組間耦合度太過於緊密時，程式品質引發的互相干擾的問題就會更嚴重，於是大型軟體專案就面臨程式設計人員間的溝通問題及協調問題，當每個模組負責程式編碼的人都說自己是對的，這時，你想想這個軟體專案會變成什麼樣子？』
『一片混亂吧，而且專案成員間的信任度會降低，最後形成壁壘，政治問題日益嚴重。』小魏說。
『是啊！所以，敏捷開發就出現了，這樣你瞭解敏捷開發是為什麼了嗎？』
『大概有點概念，但是，根本在軟體規劃有問題，對吧！主任是這個意思吧？』小魏還滿聰明的，我想這是老闆想留他的主要原因吧，有腦袋的工作者，比較有用。
『對的，如果軟體結構設計不好，模組規劃出來，耦合度高，再怎麼敏捷開發，最後都不敏捷了。所以，你有聽過重構吧？』
『有，講師一直在講重構。』
『好吧，重構其實是指打掉原有模組，重新設計系統模組，為的是規劃出低耦合度的模組結構，用這樣的方式來改善程式人員間的合作關係。』
『講師說的重構是指程式碼的重構，不是主任講的模組重構。』
『嗯，但這樣子的重構是指優化程式碼，不是指對整個軟體專案開發的重構，而敏捷開發的敏捷，並不是指程式碼優化，應該是指軟體專案開發變得敏捷，快速完成。這是兩種不同的意思，我個人以為，台灣現在一些大師級人物，賣弄自己的程式設計能力，各大師自以為是的建構自己的程式風格，形成各門各派的開發方式，其實不是好事，軟體專案就成了各門派較勁的的華山派，你知道六大門派在華山爭的結果是什麼嗎？』
『知道，互相殘殺，以致魔教興起。』
『對囉，也就是這樣子。敏捷開發，並不是解決軟體專案開發進度緩慢的萬靈丹，用的不好，反而會讓軟體專案走向失敗的旅程上。』
『嗯，我大致瞭解了，那主任會怎麼進行？』
『精靈囉，我不是說大型軟體專案多半會發展一套自己的模版來作為程式設計人員的標準，精靈正好就是我們的模版。微軟的神人們弄出來的模版，沒理由不用來加速我們開發系統的進度吧？』
『主任說的是。』
『好吧，今天到這裏，我們該開始正式的工作了。』
『可以請主任指導一下, ASP.NET Core的精靈如何使用嗎？』小魏涎著臉，一付討饒的模樣。
『好吧，我們從如何由SQL Server Database來建造Model的Database first方法來談起吧。』說著, 小魏拉了張子坐到我旁邊，看著我操作的步驟，依樣畫葫蘆地在他筆電上實作。 ]]>
『早，早，我們來討論葉經理要的人資系統怎麼開發吧。』
『可以等一下嗎？我先完成上課費用報帳程序，不然將近三萬元費月用卡在那裏...]]>
『早，早，我們來討論葉經理要的人資系統怎麼開發吧。』
『可以等一下嗎？我先完成上課費用報帳程序，不然將近三萬元費月用卡在那裏，也很肉痛的。』
『好吧。整理一下要討論的內容，你先忙。』
『謝謝主任。』小魏回到坐位去忙他的費用申報單了。又過了好一陣子，他和葉經理一起走到的辦公桌。
『賽門要開始開發那個薪資發放系統了嗎？』葉經理過來就問。
『對，小魏上過課了，趁他記憶猶新，就快點進行吧。』
『嗯，只是想聽聽看你們怎麼開發。』
『好，正好我們來?需討論會議。把範疇界定一下。』於是，小魏領頭，我們三人找了一間會議室坐下來討論。
『這是我規劃的系統功能架構圖。』我把之前畫的功能表再秀出來給葉經理看。
『基本上，我們就著重薪資發放作業必須要有的基本資料建到系統中，像是員工基本資料、薪資資料、考勤資料等等基本資料。這裏，我己經做好了員工基本資料維護功能，你們可以先看看。』我把Visual Studio打開來，叫出專案，執行己經完成的第一個員工基本資料的Controller，然後把專案執行，不一會兒就出現做好的網頁。
『主任是用精靈來開發的嗎？上課時，講師有提到，不要用精靈開發，因為會有很多限制。』
『對也不對，用精靈雖然編碼必須遵照微軟工具中既定程式範本來產生程式碼，但，基本上，我們都不算是通精程式碼的人，遵照精靈產生的程式範本來開發，可以事半功倍。等你很精通了，再來談自己的程式風格還得及。』
『可是講的意思是用精靈的話，精靈產生的程式不最佳化的程式碼，不如自己直接編寫來的更能控制程式的效果。』感覺小魏有心擺。
『我不知道你的講師是誰，我想，我們的重點現在要在三個月內把葉經理要的系統做好。應用精靈來產生程式，可以大幅縮我們開發系統的時程，由這個觀點，我們應用精靈來開發，應該不是問題。該不會講師沒介紹精靈怎麼用？
『有啦，講師有講，很快就帶過精靈功能，沒有詳細介紹，然後就講說最好不要用精靈來開發正式系統。』
『OK，當然，如果你有多年的經驗，有把握自己完整寫出一支可運作的程式，那就不要用精靈。否則，我為用精靈來生成程式，沒有什麼不好月用，更何況，時間有限，不容我們慢慢刻程式。』
『對，』葉經理悶了好一陣子才抓住話頭切進來，『我技術有限，你們講什麼精靈我是不太瞭解，但是你們有完成專案的時限，總經理面前，你們打包票的。所以就我來看，採用能夠在最短時間內完成工作任務的方法，應該是你們的主要考量。』
『哎，葉經理，我可沒答應要寫個什麼系統的呀！是你們講講講就弄出這個案子。』我看著小魏，有點看不懂他這麼反骨是為什麼，只好看葉經理的反應，因為葉經理己經漲紅了臉，一付快爆發的樣子。
『小魏，要不要把你的申請上課的簽呈拿出來唸唸？』葉經理音量有些高，惹得正好路過會議室的老闆探頭進來看。
『老闆，我們在討論薪資系統怎麼開發的事，大家正在討論細節。』我看老闆一臉問號，就順口作了個狀況說明。
『嗯，好，我也想瞭解你們的進展。』老闆說著就自顧自個兒找個座位坐下。我把投影機打開來，然後把剛才對葉經理講的和展示的初步系統說了個大概，也把小魏和葉經理的爭執點，具體說了一些。
『這系統，目前看起來還很初步，不怎麼完整，但方向是對的，你們花點心思，早些完工，我不要求要完整功能，只要夠用就好，將來想修改容易，就行了。』
『所以，小魏，你的想法對我們來說，持有風險太高，萬一你不能繼續這個工作了，接手的人能不能理解你寫的程式，並進行修改，還是要砍掉重練。』
『我不懂如何寫程式，只是對技術評估有些心得而己。主任講的精靈，就我這個外人看來，就是一種標準化的生產方式，既然標準化了，就代表我們不會因為人事上的異動就找丕列合適的人來維護。這也只是我一廂情願的想法。終究，我們還是要靠大家一起合作來完成工作任務。』
『葉經理也不要急，他們搞電腦講的是邏輯，理性分析一下，他們會聽懂的。好了，我還有些事，這個系統就拜託你們完成了。三個月，這是你們的考驗，著到時我們再來看。』講完，老闆就起身走出門，放在桌上的一疊公文也沒拿。
『你們看著辦。』葉經理拿起公文，丟下一句，就跟著老闆走出門了。
『好吧，我們來分配一下工作，MVC架構的好處就是我們可以獨立開發，最後再合併就行了。這就是所謂分離。』
『嗯，主任怎麼分配，我怎麼配合就是了。』小魏神情有些落寞，
『你是不是擔心寫不出來？』
『有一些，不瞞你說，第二階段的課程，幾乎是沒聽懂，以沒信心了。』
『我瞭解，我們一起來寫，我會教你。總之，三個月，用精靈來開發還算很容易的。』
『好的，我不會就問主任。』畢竟年輕，小魏一下子又充滿幹勁的樣子。
行百里者半九十，是一句成語，意思是要走一百里，結果只走九十里，不管這九十里有多困難才走完，沒走到百里，就什麼都不是，連目標都不算達成。
今天是鐵人賽第十五日，正好一半賽，用這句成語來鼓勵自己。
我們要發揮碼農的刻苦耐勞精神，自己刻程式來補救，我不是在說與個程...]]>
我們要發揮碼農的刻苦耐勞精神，自己刻程式來補救，我不是在說與個程式來彌補Entity Framework Core缺少的功能，我是在說，如何以修改Model與Database，以人工來補足Model和Database一致間的缺失漏洞。
例如，在員工基本資料表(Emp_Base Table)中缺少了一個性別欄(gender)，怎麼補足？
首先，我們在資料庫中添加缺少的欄位，在SSMS裏，在[物件總管]視窗中，找到資料表Emp_Base，然後游標指向Emp_Base時按右鍵叫出快選單，如下圖：
點選[設計]功能，然後游標指在到職日期(OnBoardDate)欄位上按右鍵叫出快選單：
再點選[插入資料行]，在姓名(Name)和到職日期(OnBoardDate)欄位間插入新的資料行，此時輸入性別(Gender)欄位，如下圖：
然後我們儲存修改完成的Emp_Base資料表，有可能你會還到下圖所示的錯誤。
這是因為SSMS現在預設會阻擋對資料庫修改的操作，以避免不合法的操作吧。我猜啦，因為只要改變SSMS的設定就能儲存改變了。
，到[工具]-->[選項]叫出下圖的對話，到[設計師]-->[資料表和資料庫設計工具]對話窗中，把[防上儲存需要資料表重建的變更]這一項取消勾選，然後按下[確定]，再重新儲存Emp_Base資料表，就完成了。
我覺得這個真的是沒必要的阻擋功能，多此一舉。
資料庫中修改好了，接下來，我們到Visual Studio下，打開HRApp專案，進入EmpBase.cs類別Model檔案，如下圖黃色框所示加入[gender]欄位的程式碼。
然後，我們修改Index.cshtml、Edit.cshtl兩個View檔案，讓網頁上顯示出性別欄位。
Index.cshtml的修改有兩個地方，如下兩張圖，修改Index.cshtml是要能顯示出性別欄位資料：
上圖是在表頭顯示欄位名稱地方添加性別欄。
上圖則是在資料顯示區添加性別欄資料顯示。
Edit.cshtml的修改只要修改一個地方即可，如下圖黃色框所指，修改Edit.cshtml是要能編輯性別欄位資料：
改好以後，我們執行看看結果如何，可以進行修改的動作，但是性別欄的資料似乎沒儲存起來，都是空白，就算在Edit.cshtml網頁中有輸入資料，還是沒有正式儲存。
我修改了工號和性別，儲存後是這樣：
工號是改變了，但是性別欄還是沒變。
在MVC架構中，處理網頁上資料存到資料庫的動作是在Controllers中處理的，所以我們打開EmpBaseController.cs，找到Edit網頁處理Post的動作的部份程式碼：
可以看到在Bind的地方沒有繫結性別(gender)欄位，繫結是在指定Controller中要處理的欄位，所以，在繫結Bind後列出的欄位就是會進行處理的欄位，性別(gender)欄位沒有在清單中，因此，輸入的資料沒有處理存檔，是可以理解的。
我們在上圖中把性別(gender)欄位添加到繫結列中，如下圖：
現在再執行一下修改員工基本資料的動作，就可以看到性別(gender)欄位的異動都有被儲存起來。如下列圖示表現。
改了工號和性別再儲存。
這樣就能完成資料維護了。
從以上描述，我們可以瞭解到，目前Enrity Framework Core雖然不支援Model和Database間的一致動化維護，我們還是可以手動方式來維護。只是對如何應用SSMS維護SQL資料庫要有些操作概念。
對以ASP.NET Core為開發平台的專案來說, 勢必要設置一位資料庫管理師DBA來確保Model與Database間的一致，免得專案開發過程中，因資料庫和Model間的不相容，導致專案執行發生問題。
而且，我們也要注意當Model改變時，相關Controller對應的繫結(Bind)是否有確實與Model相符，否則，網站執行時，資料沒有隨操作更新，問題就大了。 ]]>
在ASP.NET Core中，把這個Entity Framework Co...]]>
在ASP.NET Core中，把這個Entity Framework Core Model和Database同步的動作，稱之為Migration。在開發ASP.NET Core專案的過程中，我們會隔一段時間就做一次Migration，以維持Model和Database間的同步與一致，以免因不同步、不一致造成一些誤解。
Migration的指令主要有四個：
* Add-Migration ：在進行Migration前，先新增一個Model快照檔，然後再執行Migration。請注意快照的順序不要搞錯了，所以在中採用時間註記命名的方式是比較好的方式。
* Remove-Migration：這個指令不需要何參數，就是在刪除最近一次的Migration快照檔案。
* Update-Database：可以指定Migration快照檔為參數，也可不指定任何參數。 不指定任何參數時，就使用最後一次建置的Migration快照檔來更新資料庫。如果指定了MIgration快照檔，就會把資料庫還原到指定快照檔的狀態。指定還原到早期的Migration快照檔是很危險的動作，萬一指派錯誤，資料庫就毁了，只能重建。重建就是把資料庫刪除，把己有的Migratiuon快照檔完全Remove，再重新生成一個第一次的Migration快照檔，然後再用Upgrade-Database指令來創建資料庫，這樣，你或許瞭解Model First是怎麼進行把Model同步到資料庫的作法了。
* Script-Migration：把全部的Migration快照檔的內容，轉成SQL腳本檔案，這樣，我們可以用SSMS來重現Migration的過程，找出資料庫毁損的原因。
在介紹我的實作前，各位先考慮一下，今天的實作其實是失敗的，各位不用照著作完才發現失敗。
那我幹嘛還要講，畢竟這是鐵人賽，忠實記錄我的文章。
好了，理論講的差不多了，我們現在來實作看看。首先我們在SSMS裏把Table Emp_Base的EmployeeCode欄位的屬性視窗打開，功能表路徑如下圖：
EmployeeCode欄位屬性視窗如下：
這樣，我們有個可供參照比較的基準點可以比對了。
現在到Visual Studio來實作Migration，我們到[工具]-->[NuGet套件管理員]-->[套件管理器主控台]：
打開[套件管理器主控台]的命令視窗：
然後先執行Add-Migration合令，命令及執行狀況如下圖：
除了命令執行外，我們還可以注意到專案方案總管視窗內多了一個Migration資料夾，和一個HRDBContextModelSnapshot.cs的C#程式檔案，這個檔案內容有興趣再看，基本上是一個現在Model的描述類別檔案。
然後，我們用Update-Migration命令開始進行Migration，命令執行狀況如下圖：
好吧！錯誤了，這按照官網的文件來做也是報錯，去查官方論壇，原來，在現在的Entity Framework Core版本，這是一個不支援的處理，要到更新版本(有傳聞說是Entity Framework 7)才會解決並支援。
有興趣瞭解的邦友可以參考這篇：Migrations: Improve existing database support #2167
以及這篇Update-Database command is not working in ASP.Net Core / Entity Framework 6 because object in database already exists，只是其中提到，目前不支援。
沒有解決的方法談了幹嘛？等能夠支援時就有用了，不是嗎？我想，應該有些解決方案，只是我沒找到捷徑。明天，我會來介紹我的土法煉鋼的方法。
總之，要維持Model和Database間的一致是必然的，日後部署才不會出狀況。 ]]>
我們先來看看怎麼樣把欄位名稱由英文換成中文顥示，昨天完成的網頁：
那些英文欄位名稱，以及網頁上的Index和Create New等英文，似是否可以改成中文顥示，這樣比較符合台灣地區的操作習性。
首先，從比較容易的來著手，Index和Create New能否改成中文？
我們先打開Index.cshtml：
這是開頭的地方，可以看到Index和Create New，我們改成中文如下圖：
捲動到Index.cshtml的結尾，可以看到Edit、Details、Delete，如下圖：
這是出現在清單畫面中，員工資料右邊的功能選項，我們也把它們改成中文，如下圖：
然後執行網站，我們來看看有些什麼變化：
可以看到網頁中預期的地方都變成中文，網頁的抬頭也改變中文了，除了欄位名稱還是英文外，看起來有些中文的模樣了，接下來，我們來看看員工基本資料的Model別檔案EmpBase.cs：
看來實在簡單到不行。現在我們來加一些花樣，像是顥示中文欄位名稱，以及一些資枓驗證條件，像是長度限制或字元限制、數字限制等等。
驗證條件後的Model看起來就有些像個商業應用的樣子了：
驗證條件說明如下：
[DisplayName()]：設定顯示在頁上的欄位名稱。
[RegularExpression()]：限定在欄位內可輸入的字元，例如大小寫英文或數字。
[StringLength(6)]：限定欄位輸入長度。
[Required]：限定必須輸入，不得空值。
[DataType()]：限定輸入日期，日期格式是隨著網站伺服器的地區設定而定的。
另外要說明的是，設在Model裏的驗證修條件，都是Server端驗證機制。如果要進行Client端驗證，就得寫Javascript來處理了。因為我們的網頁功能簡單，Server端驗證機制也就夠用了。
接下來，我們執行網站，看看驗證機制怎麼進行。如下圖。首先，欄位名稱也變成中文了。
然後，我們點新增員工資料，看到下個網頁：
還沒完全中文化。沒關係，我們先來試看看驗證機制有沒有啟用，在"工號"欄位故意輪入12345678，結果跳出輸入格式不符的錯誤訊息，因為我們限定第一字為大寫英文字母。
改成輸入A12345678出現長度不得出6的錯誤訊息。
可惜都是英文訊息，但，可以確定驗證機制是啟用的，現在，我們來改變錯誤訊息顯示中文。
改好以執行網站來測試看看。
確實，錯誤訊息也都中文化了。
尸另外就是日期欄位，ASP.NET Core直接把日期選擇窗做進去了，是不是很方便呢？
由於Model中的驗證是屬於Server端驗證，所以，只要在Model建好驗證機制，整個網站中引用該Model的網頁都會一併採用設在Model上的驗證條件。
另外，各位或許有注意到一個欄位Id，這個椚位只有在Model中有，在View上都沒有呈現，這是因為ASP.NET Core的Entity Framework把Id當成識別值來使用，每筆記錄都會有惟一的識別值。所以在ASP.NET Core環境中開進行開發，編寫Model時，一定要注意寫入這個欄位。採用Database First為開發方式時，設計資料表第一個欄位一定是Id，並設成識別值。用Model First為開發方式時，就務必在編寫Model時，把Id欄位放在第一個。這是檴配Entity Framework機制的必要措施，或許大神們有能加去改變，但現在才剛開始，就遵照規則玩，畢竟把系統寫好才是重點。
到寫到這邊，今天討論驗證機制的事也該告一段落了。 ]]>
讓我們回顧...]]>
讓我們回顧一下，之前我畫了一個薪資系統的功能架構圖：
現在網站執行出來的面如下圖：
在網頁頂上有個黑底橫條的功能表區，我們要做的就是要把網頁上的功能表區修改一下，表現出這個薪資系統的功能表。
怎麼做，首先找到現在功能表的程式碼所在。
我們打開主版頁面程式檔：在Shared資料夾下的_layout.cshtml，如下圖，
可以看到黃色框中程式正好和網頁黑底功能表上的Home、About、Contact相對應，而且，熟悉Bootstrap椢架的程式人員，應該很熟悉這段Menu的程式碼。
那我們怎麼修改？遵照Bootstrap建議的下拉選單編程規則，我把上圖黃色框中的程式修改如下圖黃色框中的樣子：
為了讓大家省事，相關程式碼如下，請自行使用。版權無有，翻印不究。引用，也不用註明出處了，這個Google一下'bootstrap dropdown menu'有幾萬篇文章在討論的事啊。
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">基本資料建檔</a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="EmpBases" asp-action="Index">員工基本資料</a></li>
<li><a asp-area="" asp-controller="EmpSalary" asp-action="Index">員工薪資資料</a></li>
<li><a asp-area="" asp-controller="Labor" asp-action="Index">勞保級距</a></li>
<li><a asp-area="" asp-controller="Health" asp-action="Index">健保級距</a></li>
<li><a asp-area="" asp-controller="Tax" asp-action="Index">所得稅稅率</a></li>
</ul>
</li>
<li><a asp-area="" asp-controller="#" asp-action="">月份薪資計算</a></li>
<li><a asp-area="" asp-controller="#" asp-action="">薪資申報處理</a></li>
</ul>
</div>
至於月份薪資訊計算及薪資申報處理的子功能怎麼寫，就請各位邦友自行練習。如有問題，可以在這篇或另開發問討論串來討論。
讓我們執行看看現在網站的效果如何？如下圖：
功能表看起來都正常的，讓我們點進[員工基本資料]，看看能不能叫出員工基本資料的維護網頁，很不幸的，報出錯誤訊息，如下圖：
拉里拉雜的錯誤訊息，實在有看沒有懂。基本上，看到HRDBContext這邊出錯誤，於是，我們到HRDBCOntext.cs檔案中看看有什麼狀況：
圖中紅框裏有段#Warning的字串，看起來問題就出在這裏，我把#Warning的完整字串抄錄於下：
#warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.
大意是，去看看網站說明吧，你這樣寫程式太危險了吧？
網站內容如下圖：
基本上我們看ASP.NET Core部份的說明也就可以了。即上圖綠框中所示的那段。
它的意思是：
- 不要把Database Connecttion String設定放在DB Context檔中，即下圖HRDBContect.cs檔案中紅框中的程式碼。
- 放在Appsettings.json檔案中會比安全，可以避免SQL Injection攻擊的困擾。Appsettings.json的作用就是.NET Framework的Web.COnfig檔案一樣。如下圖綠框中的程式增添。
同樣的，我把關相關程式碼複製在這裏給各位使用，但不要原文照抄啊，至少Data Source什麼的改成自己環境中的名稱吧。
"ConnectionStrings": {
"HRDBDatabase": "Data Source=SMNVM;Initial Catalog=HRDB;Integrated Security=True;"
}
- 另外，把DBContext.cs檔中那段#Warning和其下的optionsBuilder.UseSqlServer刪掉吧，除了製造錯誤之外是沒有用的。如下圖，我慣習慣把不要用的程式碼註解掉就可以了。
- 那麼Database Connection String要寫在那裏呢？寫在Startup.cs中，指定在專案Configure中就行了，如下圖黃框中的程式碼段，注意命名空間的使用：
相關程式碼貼在這裏供各位省時使用，記得改一下Connection String符合你的環境設置。
using HRApp.Models;
using Microsoft.EntityFrameworkCore;
...
services.AddDbContext<HRDBContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("HRDBDatabase")));
改完以後，我們再次執行網站，再次點進"員工基本資料"網頁，如下三圖所示的操作，沒有再報錯了。
新增員工基本資料沒問題，基本上，我們會希望能夠中文化，讓畫面上看起來更像個商業資料維護網頁。
另外就是驗證規則了，這些我們明天再討論。
讓我們中Controls來...]]>
讓我們中Controls來引用Models建立Views吧！為什麼是從Controllers進入建立Views，而不是從ModelsViews或Models呢？
這是因為我們由Controllers開始，可以利用Visual Studio的View Wizard來自動完成一個Model的CRUD全部四個Views及閞聯這些Views的Controllers檔案，這樣就能替Model建出具備完整CRUD功能的網頁出來，相當方便。
直接進入主題，打開Visual Studio，到HRApp專案，游標指向[方案總管]視窗的[Controllers]資料夾按右鍵叫出功能快選單。
在快選單裏點選[加入]->[控制器]，出現[新增Scaffold]對話窗：
我們選擇[使用Entity Framework執行檢視的MVC控制器]項目，然後按下[新增]
在這裏，我們使用ENtity Framework及Model來建CRUD檢視及相對應的Controllers，在[新增使用Entity Framework執行檢視的MVC控制器]對話窗中，選擇要用來建CRUD功能的Model及對應的Context類別檔案，這是給Entity Framework參考來建立CRUD用的，給錯了就建錯了。最後注意一下控制器名稱，如果想換個名稱現在就重新輪入，但是，最好只改變Controller字串前EmpBases的部份，Controller的部份保持原樣，這昃MVC的Controll的基本規則。
我保留系統自動給的名稱，按下[新增]。
有個方要注意的是，我們可以指定其他不同版面的主版頁面，不是只能用一個主版頁面檔案。
過一段時間，快慢看你的電腦效能。就可以在[方案總管]裏看到Controllers資料夾下出現一個新的EmpBasesController.cs控制器類別檔，以及在Views資料夾中新增了一個EmpBases的子資料夾，然後，這個資料夾中提供CRUD的View檔案都齊全了。
我們來看一下index.cshtml檔案的內容，可以看到和Model一樣的欄位呈現。看來是可以用View Wizard產生的View來滿足CRUD的作業需求。
CRUD是Create、Read、Update、Delete的簡稱，也就是資料維護的基本動作，由於這些基本資料維護都完成了，我們就少了很多程式開發的工作要進行。
談到這裏，各位應該會有個問題，怎麼利用網站把這View叫出來實際操作資料維護的工作呢？
這部份是要修改主版頁面的功能選單，讓網站有個入口點把EmpBases的CRUD網頁叫出來用，這個就留待明天來解決了。 ]]>
昨天，我們做了三個Table的結構設計，在SQL Server的SSMS裏，利用新增資料表把這三個資料表建好。要注意設置Id欄位為Primary Key。
建好資料表SSMS如下圖。
回到ASP.NET Core的環境，先建一個資料庫連線，如下圖在[伺服器總管]的[資料連接]選[加入連接...]
然後在[選擇資料來源]視窗選擇Microsoft SQL Server，可別選了Microsoft SQL Serevr資料庫檔案，這是兩碼子事。
按下[繼續]就出現[加入連接]的視窗，在這裏輸入要連結的資料庫伺服名稱和選擇資料庫名稱，我們就把剛才建好的資料庫拿來用。
要注意的是驗證是選擇Windwos驗證，這也是所謂整合式驗證的一部份，我們點開驗證的下拉選單還可以看到其他三種不同驗證方式：
- SQL Server驗證，這個我以前常見都是把sa拿來用，這真是怎麼死都不知道的做法。
- Active Directory密碼驗證，意思是要輸入Active Directory的密碼。
- Active Directory整合式驗證，如果進入網站時就已經驗證過Active Directory，就直接引用相同的驗證資訊來進行登入了。
如果沒有使用Active Directory，使用Windows驗證也就可以了。只是要注意，這裏的Windows驗證帳號是指SQL Server所在Windows伺服器上的帳號。
因為現在SQL Server和Visual Studio都在同一台電腦上，也就直接用Windows驗證就行了，不用想太多，部署時，只要把環境整理一下就行了。
接下來，我們點一下[測試連線]來驗證資料庫連線正常。
最後，我們看一下[進階屬性]，比較重要的是下面的連線字串，下圖紅框內的字串，這就是ConnectionString，在ASP.NET裏是資料庫處理的重要參數值。
接下來，我們到Visual Studio，把打開HRApp專案。再到[工具]功能表下，選擇[NuGet套件管理員]下的[套件管理器主控台]功能。
於是在Visual Studio裏跳出新的[套件管理器主控台]視窗。
在[套件管理器主控台]中輸入以下命令：
Scaffold-DbContext "DBConnectionString" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
DBConnectionString可以從下面的指示方式取得：
打開[伺服器總管]，在[資料連接]中找出剛才建好的連接點上按滑鼠右鍵叫出快選單，如下圖：
在快選單中點選[屬性]，在Visual Studio的右邊出現[屬性]視窗，在[連接字串]中可以看到ConnectionString的值，如下：
Data Source=SMNVM;Initial Catalog=HRDB;Integrated Security=True
複製替換掉命令中雙引號裏的DBConnectionString，即成為如下完整指今令；
Scaffold-DbContext "Data Source=SMNVM;Initial Catalog=HRDB;Integrated Security=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
按下[Enter]執行這個指令。完成會出現如下圖：
有個要升級的警告訊息，說是有新版EF Core Tools，先不管它。同時我們可以看到方案總管裏，Model資料夾下多出幾個類別檔案，正好對應我們在SSMS裏建的三個新的資料表。
還有一個HEDBContext.cs的資料庫Schema類別檔案，以前在ASP.NET MVC時，這是edmx檔案，但到了ASP.NET Core，就只留下了類別檔，沒有提供edmx檔案。這是因為edmx檔案配合了一個資料庫關聯的圖型管理工具，大概長得像這個樣子。
這不就像是SSMS的資枓庫圖表工具嗎？上圖是用Google查找出來的圖案，如有不當之處，請通知，我會刪圖。
建立關聯圖表，還是到SQL Server環境下運用專門的SSMS工具來製作吧！
談到這裏，Database First也就談的差不多了，接下來是如何利用Model來製作View，以及如果在資料庫修改了資料庫物件時，如何讓ASP.NET Core的專案的Model保持同步，這只能透過主控台工具來進行同步。
今天就介紹到這裏，明天再續。
『知道，微軟最近把ASP.NET的技術推進到跨平台的主要技術，所以你們老師是教這個。』
『知道，微軟最近把ASP.NET的技術推進到跨平台的主要技術，所以你們老師是教這個。』
『嗯，他說本來是ASP.NET MVC，但現在版本演進，變成是ASP.NET Core MVC。』
『喔，你是去上ASP.NET Core的課，我還以為是ASP.NET MVC。』
『MVC的課滿人了，所以跟經理爭取了一下，請公假去上白天的.NET Core課程，這個星期上了第一階段的課，下個星期要上第二階段的課，總共費用將近三萬，又省了幾千元，謝謝主任的金卡。』小魏有些得意表情。
『好，那今天我們先來談談人資部要的薪資計算系統怎麼進行。』
『批出來了嗎？要進行了？』
『是的，前天總經理找我們去開會就決定了。這個系統做好上線，我們就獨立成資訊室的單位，還要再補兩個新人。』我順便抛一個震憾彈。
『哦？之前有向葉經理建議，資訊獨立出來，不要掛在人資部下，這樣大家都好辦事。沒想到是主任促成了這件事。』小魏又一付酸樣，大概沒坐上寶位吧。
『先把系統做好再說吧。系統沒弄好，一場空。』我把我的電腦開機，一邊說。
『是啊。』
『好吧，你坐我我這邊，我把我這兩天構思的系統架構跟你討論一下。功能架構圖是這個樣子。』我調出一張圖給小魏看。
『嗯，看起比較完整，比做的Excel檔案更能符合葉經理的想法。』小魏大致看了一下，發表他的看法。
『接下來還有畫面設計，和資料庫設計。對了，你會用SQL Server吧？』
『有學了些，之前到X逸上過課，沒有實作的經驗。』
『沒關係，SQL Server很簡單的，我打算在SQL Server裏建好資料庫再給系統用。』
『我上課時，講師提到Code First的做法，聽不太懂。似乎主任要用Database first的作法？』
『對，我還是比較喜歡先用資料庫正規化的方法把資料庫結構建好，以後也是用SQL Server的SSMS來進行維護修改Schema的工作。』
『等一下，如果資料庫裏的Table增加或修改了欄位，比方說資料型態改變了，程式裏的Model怎麼辦？也要手動修改嗎？』小魏反應很快的找出問題點。
『不會的，有Entity Framework可以輔助我們在ASP.NET Core的環境下持Model與資料庫元件間的一致性，只是要會在Visual Studio中執行Colsole指令，驅動Entity Framework更新Model的結構，與資料庫一致。』
『嗯，講師有講到點指令，也有實作，只是看不懂。』小魏說著還搖搖碩，似乎氣餒的樣子。
『你不是下星期要去上第二階段的課，順便再請講師教一遍看看。』
『Database First和Model First差別，只在於由那邊主動管理應用桯式的資料庫結構，如果是Model First，就是在ASP.NET Core的環境下編寫Model類別，然後呼叫Entity Framework的指令連到SQL Server把資料庫建起來。兩種方法都一樣，只是資料庫同步的方向不同而己。』
『講師說，Model First就是Code First，用Code First就能在ASP.NET Core的環境下直接維護資料庫，不同再用SSMS來管理資料庫。』小魏又開始抬摃起來。
『都一樣的，你再想想，最終是不是需要兩邊的物件一致，系統才能執行不會有問題？不是有講嗎？管他黑貓白貓，能抓老鼠的就是好貓。管他Database First Model First Code First，能讓我們能儘快完成系統開發的，就是好工具。』
『嗯，可以這麼說。那這樣，我是不是可以選用我比較合意的方式來進行開發？』
『當然可以，沒問題的。只是，我們分工一下，系統規劃與資料庫建立由我來執行，你負責程式編寫的部份，可以嗎？』
『好的，看主任怎麼安排，我全力配合。只是，該不會全都我編碼吧？』
『不會，我也會負責一部份。基本上，我想基本資料維護的部份由你來完成，我來完成計算的部份。反正下星期你還要上課，我先把資料庫建好，等你回來就可以動工了。』
『薪資計算的部份，我會用T-SQL寫成Stored Proedure，不寫在ASP.NET Core程式內。』
『哦，主任為什麼這樣規劃？』
『一方面，基本上我有一個原則，能在資料庫處理的事，就讓資料庫來處理。二方面，我不太會用Controller來做計算。』我對小魏哈哈乾笑兩聲。『所以用Stored Procedure來寫，然後在月份薪資計算功能裏，呼叫這個STored Procedure就能完成薪資計算了，方便又省事。』
『嗯，主任有把握完成就行。』
『一起努力吧！今天就談到這裏，我再繼續把資料庫規劃好，你繼續完成課程，下下個星期你回來時，就正好開始閇發基本資料維護功能。』
『好，我先去巡一下各單位，看看有沒有電腦方面的問題。』
『嗯，有你空時再溫習一下SQL Server的SSMS操作，尤其SQL指令的應用要熟練一些，講師有講到怎麼利用資料庫建Model嗎？』我問小魏。
『有，只是聽不太懂，看講師操作，東點一下，西點一下，幾下就弄完了，自己來實作時，根本找不到該點那些地方。』小魏也乾笑兩聲。
『嗯，沒關係，還有時間學習。』
『我先去會計室看一下電腦，有一台不能印表。』
『好，就先這樣子了。』
小魏離開後我抽出幾張A4空白紙，開始畫下資料庫結構：
一下子完成三個表，看看時間也差不多該去各部門串串門子了。
從下圖中，我們可以看到COntroller只有一個：HomeController.cs，然後在View...]]>
從下圖中，我們可以看到COntroller只有一個：HomeController.cs，然後在View資料夾中有個Home子資料夾，還有個Shared子資料夾。
或許你已經猜到，HomeComtroller.cs的Home開頭名稱和Home子資料夾間有些關係。
在startup.cs程式中有一段程式碼是在控制Conrollers和View間對應關係的：
由這段程式碼可以瞭解預設會啟動Home資料夾下的Index網頁，如果想改變預設網頁，就是要改這段對應關係的程式。
在這裏，我們發現ASP.NET Core的Routings設置方式和ASP.NET MVC不一樣。
在ASP.NET MVC環境，是在Global.asax檔案中或另外可開個RouteConfig.cs檔案來設定RouteMap。
但在ASP.NET Core裏，則是放在Startup.cs檔案的Configure方法中，我想，更熟悉了ASP.NET Core的環境架構，這個設定MapRoute的指令，應可寫在獨立的地方才是。
簡單來說，這個網站在 http://XXX.XXX.XX.XX/ 連進來時，會自動以預設的路徑叫出網頁 http://XXX.XXX.XX.XX/home/Index/Id=? ，但因為Index網頁沒有接收Id參數的地方，所以，傳了也沒有用。
現在，讓我們更進一步研究HomeController.cs程式。
IActionResult是一個共用接收容器，把網頁回傳的內容，放到IActionResult容器裏供下階段使用。
各位可以看到ASP.NET Core大多在用IActionResult做為網頁的回傳內容接收容器。
接下來，可以看到ViewData["Message"]這個指令，這ViewData是個儲存網頁間傳遞變數的方法，在ASP.NET Core裏還有ViewBag和TempData兩種方法可以在網頁間傳遞變數。
這個有點像以前.NET Framework時的Session[]方法，只是ViewData的傳遞方向是Controller到View，不是View到View，以前的Session則是網頁間在傳遞。
而其中Message可以解讀為變數名稱。
稍後在View裏，我們就可以看到ViewData的具體的用途了。
但是談到這裏，我們可以建立一個看法，在ASP.NET Core下，網頁間傳遞資料是透過Controller來處理的，不像以前宣告Session就能在網頁間傳遞訊息或變數內容。
Controller的最後一個步驟是return View();這是要把網頁內容送出來傳到覽器上的意思。
接下來，我們來看View，View資料夾結構如下：
正好有Index.cshtml、Contact.cshtml、About.cshtml、Privacy.cshtml等四個檔案，與HomeController.cs裏的四個IActionResult對應，cshtml、vbhtml網頁檔案是是ASP.NET MVC/Core MVC的Razor View Engine主要支持的網頁語言格式，其中有套新的Razor網頁程式語言是微軟在ASP.NET MVC/Core MVC裏建立的一套網頁程式發語言，搭配了cshtml、vbhtml網頁檔案。是ASP.NET MVC/Core MVC的Razor View Engine主要支持的網頁程式語言，Razor語法，就是之前的Code Inline的方式編寫網頁程式，坦白說到目前仍是褒貶各半，沒有特別贊揚的地方，其實我看Razor就像是改良後的C#Script和VBScript語言，在某種程度上把HTML和Script語言更形整合成像是單一語言體系，編碼更為流暢。
讓我們來看Index.cshtml的程內容，一開始的部份如下圖：
可以看到一開始就是ViewData["Ttle"]="Home Page";的指令，這和前面談Controller時談到的ViewData是一樣的功用。稍後我們在討論主版網頁時會談到。
另外就是@{.....}的結構，這就是Razor語法的部份，簡單來說，Razor語法就是讓C#程式能夠在HTML環境下發揮作用，提供更有彈性的網頁應用。
接下來，我們來談談主版頁面的設計，在View資料夾裏有個_ViewStart.cshtml檔案，如下圖：
其程式很簡單，就是指定Layout系統參數為_layout。然後我們可以在Views/Shared子資料夾裏看到一個_Layout.cshtml檔案，這個就是主版頁面的網頁檔案。
網站啟動時，Razor View Engine就是先找到_ViewStart.cshtml檔案，把主版頁載入，其後的網頁就會在主版網頁規劃的版型下運作，這裏的版型就是_Layout.cshtml網頁檔案。是否只有一個主版網頁可月用呢？當然你可以規劃多個主版網頁使用，也就是要在_ViewStart.cshtml檔案裏編寫程式來參照Route來決定引用的主版網頁，只是目前討論這個太早了些，我們以後再回來談這個主題。
_Layout.cshtml程式碼如下圖：
你可以看到一開始有段@ViewData["Title"] - HRAPP ，這個ViewData["Title"]還記得嗎？剛才談到的Index.cshtml程式裏一開始就設置其值為"Home Page"，於是我們可以看到執行中的網頁抬頭就是"Home-Page - HRApp" ，Layout.cshtml接下來的程式碼就是在安排網頁最上端黑色那一排的主功能表，請參見下圖：
寫到這裏，基本的要素都談的差不多了，在結束今天的文章前，再提示一點小技巧，在Visual Studio的編輯視窗中間可以看到一下圖紅框中所示的程式鳥瞰視窗，讓你清楚瞭解目前編輯視窗中的程式碼落在在整個程式碼的地理位置。然後，滑鼠游標移到點黑底區域內時，游標左邊會出現游所在位置的區塊程式碼的放大鏡，放便檢閱程式，我個人以為這種方式可以輔助我們編寫大型程式。
好了，今天我們就談到這裏，明天我會再回到微小說裏，討論一下系統開發時的資料庫規劃與的相關工作。
在前幾天討論Visual Studio的發展歷史時，談到MVC的發展。
MVC是在1980...]]>
在前幾天討論Visual Studio的發展歷史時，談到MVC的發展。
MVC是在1980年代一套命名為SmallTalk的程式語言中出現的系統架構。
早期，MVC的理論興起主要是因為大型軟體專案的需要一套更為嚴格的分工規劃，於是讓畫面(View)留給處理畫面的團隊，讓資料庫(Model)留給資料庫管理團隊，讓資料控制(Control)留給控制器編寫團隊, 大家分工一起完成軟體專案。在歷史上，第一套能支援MVC架構的軟體開發的Framework，是微軟的MFC，可是MFC只支援了一半，Control有一半在VIew中，一部份在Model中，還一獨立的一小部份，比較嚴謹的說法是CView, CDocument兩大塊構成的MFC，Document就相當於Model。但MFC還不是真正的MVC架構，只是很像。
接下來就是Java的興起，Java本身就是具備MVC架構雛型旳程式語言，在Java發的歷史中，有個叫Swing的Java程式整合式開發工具出現，Swing就是完全的MVC架構，以Java語言為基礎實現MVC架構的開發模式，可惜Swing有如曇花一現，並沒有在市場中造成多大的風波與影響，因為PHP和如雨後春荀群出的Javascript Library/Framework，讓系統開發人員目不暇給，到今天，PHP開發環境還是會經常聽到Laravel、Vue.js、Angular學那一套或是那一套比較有前途的討論，而每年都還會選出十大常用PHP Framework的文章出現，只有一點要講的，PHP和那一大堆Framework，大多數都是以MVC架構為開發模式。
如果硬是要談拉個親戚，ASP.NET也算是有MVC架構影子的開發語言，只是View和Control是混在一起不可分離，Model的部份其實只能做Database First的Model設計，一直到ASP.NET MVC的出現，才真正擺脫了之前的混沌時代, 正式邁入MVC架構的開發模式。
ASP.NET Core繼承ASP.NET MVC，原生就有了MVC的架構。
6.2 ASP.NET Core的MVC架構
我們從下圖開始來看，這是在前天我們用Visual Studio創建的一個新專案，在右手邊的[方案總管]小視窗，可以看到己經建建好的一個專案資料夾。
從資料夾結構就可以明顯看到Model，View，Controller的架構，我把這三個資料夾點開來，放大如下圖，各位可以看到更多的檔案在其中。
6.3 Model
我們先從Model談起因為View和Controller的關係比較密切，所以我先介紹Model這個第三者，明天再以完整篇幅來介紹View和Controller這對情人。
ASP.NET Core的Model是建立在一套所謂Entity Framework的框架下的機制，Entity Framework是基於ADO.NET的一套開源的Object-Relational Mapping(ORM)的框架，也就是說，它是用來把ADO.NET轉型為Model架構的一套框架Entity Framework是ASP.NET Core專案裏的基本元件之一，建好專案，就可以使用了，我們可以在專案的[方案總管]小視窗裏的相依性下找到Microsoft.EntityFrameworkCore.Analyzers，這個就是Entity Framework的C#語法分析器。
談到Entity Framework，我們就一定要談到Database First或Model First的資料庫開發方式，Database First就是說先在資料庫中把資料表等元件建好，讓Model叫用建立專案中的Model檔案，Model First的意思是在專案中先把Model寫好，再利用Entity Framework連到資料庫把資料表等元件建起來。
於是，你也知道，大家就選邊站了。有人擁護Database First，有人擁護Model First。然後為了那種方法比較優，在各Visual Studio論壇吵過一陣子。然後，微軟工程師們不甘寂寞，在Entity Framework 4.1時又提出了個Code First的名稱，於是兩大陣營又分列出支持Code First的碼農族群，就我所見，喜歡刻程式的多半使用Code First，喜歡傳統開發方式的，會使用Database FIrst先在資料庫中把元件建好，再到專案中用Entity Framework的功能把Model檔案建好。至於我，我是比較傾向於使用Database First。不為什麼，我是老一輩的傳統IT人，如而己。XD
可是，市場傳聞，Entity Framework7.0版以後，將只會有Code First的方式，Database First和Model First都會消失，其實這是以訛傳訛，真正的驅勢是Code-Based Modeling，不管Database First或Model First，都還是會存在，真正消失的是中間產物EDMX這個用來建立資料庫模型的中間檔案。而Code First，其實一直是Database First和Model First共有一部份，Code First從來就不是它字面上的意思，但，造成誤解多年，微軟的工程師終於想到正名了。有興趣的邦友可以參考這篇文：EF7 – What Does “Code First Only” Really Mean。
寫到這裏，今天就先談到這裏，抱歉技術成份目前還不多。
]]>『喔！』才剛接這個工作兩天，就被老闆召見，是好事？還是壞事？
匆匆忙忙把電腦上寫了一...]]>
『喔！』才剛接這個工作兩天，就被老闆召見，是好事？還是壞事？
匆匆忙忙把電腦上寫了一半的程式儲存起來，拿了筆和記事本就往老闆辦公室去。
『鄭主任，來兩天了還習慣嗎？』老闆一貫客氣的說著，如果把他的客氣當真就隨便起來，等下就吃不了兜著走了。
『還可以，技術上都是己經熟練的，這個星期就能接手完成了。』拉開辦公桌前椅子坐下時，順便把工作狀態說了個大概。
『好好，剛才人資經理講說你有開發系統的經驗，你能寫個小系統給人資使用嗎？』
『可以，簡單的系統還可以磨一磨，要寫什麼樣的系統呢？』
『細節要找葉經理談談，我希望三個月能看到初步系統上線使用，就這樣。』
『是，我先回坐位了。』起身，彎著腰有點在躹躬的樣子。把椅子收好，老問闆揮揮手，意思是不用再收了。
『等一下，你去叫葉經理和小魏，你們一起進來一下。』小魏是我還沒進這家公司前兼管電腦的工程師。
『是。』
『葉經理，你先講一下你要的系統是什麼？』老闆見我們都在他辦公桌前坐定，就交待葉經理。
『好的，我初步的想法是要請鄭主任開發一套薪資計算與發放的小系統，功能簡單，替代現在會計手工計算薪資及寫薪資條的工作。』
『這個，我不是用Excel寫了個小系統給會計使用，有什麼問題嗎？』小魏聽了就率先反對。
『是的，小魏，但是你也道，今年公司接單不少，現場人員大幅增加了三倍，用Excel來處理，會計還是要花相當大的功夫剪貼與檢查詳細數字，簡單來說，只有省掉人工編寫薪資條的人力與工時。』葉經理耐著性子解釋。
『嗯，這個之前不就談過了，上個星期不也找了ＸＸ公司來簡報他們的人事薪資系統？當時經理不是也同意系統功能很符合公司的需求？』小魏不太想讓步。
『這部份，葉經理有找我談過，我們決定暫不考慮，等鄭主任到職後再評估，另一方面，我覺得，系統還是自己開發比較好。』老闆和氣的出面打圓場。
『是的，我贊成總經理想要自行開發的想法。由於鄭主任之前有開發系統的經驗，更加深我在這方面的想法，所以就沒再和ＸＸ公司接洽。』葉經理加強了總經理話中的意願，同時看著我，希望我發表一下看法。
『請問ＸＸ公司報價如何？』我先避開火線，從實務面來談。
『五萬元的授權費，二次開發部份，報了２０人天的顧問費，總共是十五萬元，未稅。』小鄭立刻報起價來。
『幾個使用者？』
『五人。』
『還算合理，沒有抬價。』
『那，鄭主任有什麼想法？』
『請問現在有多少員工？處理薪資的會計人員有幾位？』我用迂迴戰術，老闆一付看好戲的樣子。
『直接員工１２０個，間接１８個。會計部門三人，似乎每個人月底都會加班處理薪資帳目。』小魏先報數了。
『還要再考慮到年底預計現場會增加到２５０人，新蓋的廠房快完成了，各單位都在擴充人力。會計部門會增編到五人。』
『是的，所以我們要快點把薪資計算與發放作業自動化，不要等到人力不足難以應付時才想辦法處理。』老闆提出了方向。
『我瞭解了，雖然Excel萬能簡單好用，但是，要處理的資料變多，表格變大時，就會產生某些複雜度，讓原本簡單的應用變成需要花時間整理的工作。所以，我比較傾向於使用資料庫和應用系統來執行這種重覆性的大量數據處理的業務。就我以往的經驗，寫個簡單的系統來處理這個問題，三個月內應可以完成。如果可以的話，小魏也能幫忙開發一部份功能，這樣就可以有兩個人力來維護系統。』我順著自己的思路講著。
『請等一下，鄭主任，小魏的是否參與，我們再討論看看。』葉經理看著老闆說，但老闆輕輕搖頭，看來有些內幕在進行，小魏坐在一旁，表情五味雜陳。
『好吧！鄭主任和葉經理再討論系統開發怎麼進行，三個月，這個就算是鄭主任的期末考試吧。至於小魏，你就跟著鄭主任一起進行開發工作，三個月後再來評估成效，然後一併檢討。』老闆講完就擺出送客的姿態。
『是。鄭主任、小魏，你們先去三號會議室等我，我們再進一步討論。』葉經理先站起身, 吩咐我和小魏，我們兩人就一前一後走出老闆辦公室。
『小魏，聽起來，他們有意思要調動你的職務？』走去會議室的途中，我問小魏。
『對，本來是你到職後，看我的意願，可能去模具課任NC工程師，這算是我本行，但最近招了個工程師，職缺沒有了，可現在又不同了，得跟著師父學程式囉。』小魏有些自我解嘲的說著。
『別這麼說，對了，你對程式設計有概念？有興趣嗎？VBA有用過？』
『就是剛才講的Excel檔案，我寫了不少VBA程式來幫忙處理薪資。』
『嗯，你可以調出那個薪資Excel檔案我們來看看嗎？』我問。
『這個, 等葉經理來吧！』小魏行事小心。
『好的。』
『小魏，你把薪資計算的Excel檔調出來，我們一起來討論一下。』葉經理一進會議室就叫小魏，小魏沖著我笑了笑。
『好，我把空的表格叫出來。』葉經理點點頭沒說什麼。
小魏一下子忙著開電腦和投影機，一下子在電腦面前找檔案，不一會兒，投影機打出了一個Excel表格，就是很常見的薪資條的模樣，進項、扣項等等名目。
『好，賽門，這就是現在薪資計算的樣子。』葉經理指著投影機打出的表格，看著我說。
『嗯，都是很常見的項目。獎金計算有什麼比較特別的嗎？』我問。
『這裏有公式，每個月公司會提成列為業績獎金，不冋職級有不同百分比的獎金。』小魏搶著說, 手裏也沒停下來，滑鼠點來點去，解釋著每個儲存格的公式。
『所以是把用剪貼方式從另個Excel表格中，把所有員工薪資進項部份複製到那個"薪資資料表"表格內，再去獎金表格輸入獎金總額，然後點那個薪資計算的按鈕進行薪資計算，最後到薪資條去做列印的動作。』我邊講，邊操作表格。小魏在一旁指指點點教我移動滑鼠。
『對的，基本是這樣。但是勞健保的申報和薪資轉帳方面也要能處理...賽門怎麼評估，能自己開發嗎？』
『可以的，這都是很基本的應用，複雜度不會很高。』
『三個月，有把握嗎？』
『我是可以的，只是不知道小魏在技術方面的配合度如何？』
『這個可以學的，小魏，你和鄭主任討論一下，看需要安排什麼訓練，我來想辦法讓你去受訓。』葉經理一付開支票的樣子。
『我是打算用ASP.NET C#程式來開發。』我看著小魏說。
『網站？鄭主任想作成網站？』
『對，做成網站維護比較容易，只是開放內網使用，比較沒那麼多資安顧慮。』
『嗯，那~~經理可以安排我去Ｘ逸受訓嗎？就是鄭主任提到的開發技術，之前我有申請，上課費用大約是4萬多。』小魏趁機爭取機會。
『我有金卡資格，三萬多就可以了。』我插嘴。
『好吧，寫個簽呈讓主任審過給我批。』葉經理講完就自顧自個兒走出會議室了。
『嘿嘿，謝謝鄭主任的提拔，這課想去上好久了。』
『嗯，師父領進門，修行在個人。』說完我笑了笑。
『那麼，主任接下來要怎麼進行？』回座位時，小魏問。
『我先寫個簡要的規格書，弄個簽呈給葉經理和總經理批，這樣比較名正言順，也成立專案來執行。我們就在這個專案裏了。你趕快提簽呈去上課，好像這兩個星期正好有開一班ASP.NET MVC的課程。』
『嗯，每週六日的課，下個星期開課，不知道還有沒有空位。』
『沒空位我也會給你生一個出來。』小魏聽了有點不相信的表情，但還是回坐位去打他的簽呈去了。
軟體專案就這麼開始的，一定有個發起人，在這個故事裏，葉經理是專案發起人，因為這個薪資系統開發案是由葉經理起的頭。
當然，還有贊助人，總經理，公司老闆多是贊助人的角色，贊助人多半是經費與時程的贊助者。
專案章程，就是我的系統開發專案簽呈。
專案成員，除了我和小魏是必然成員外，葉經理就成了專案經理，我其實是助理專案經理角色。
當然，還有現在處理薪資計算的會計人員也是專案成員，因為系統功能，以及系統設計好後最後能不能上線，關鍵都是葉經理和會計人員。
這些，也就是PMP裏談的專案初始階段。
今天我用微小說的方式來寫鐵人文，也是對iT邦另一位大神級人物--太陽大--致敬。
希望大家多多看太陽大的工程師系列文章，對IT人的生涯會有更深一層的認識。
我這樣說，一定會受到擁護命令列開發者的抱怨甚至酸文，請注意，我是說初學者，對己經有經驗的資深人士，就不要浪費時間來找我戰了吧，你都己經會了，何必浪費時間呢？
讓我們開啟Visual Studio。
然後在「檔案」功能下點選「新增]->[專案」。
就會看到下圖的專案選擇畫面。
可以看到傳統的asp.net web 應用程式(.NET Frame)和我們現在的重點ASP.NET Core Web應用程式兩種專案範本存在。
此外，上圖左方的Visual C#及其下方的清單是選擇不同範圍的範本篩選，所以隨著選擇的範圍不同，Visual Studio展示的專案範本也不同，可別來問我怎麼不一樣。
讓我們先點選ASP.NET Core Web應用程式專案，然後在名稱欄輸入專案名稱，再點選位置欄旁邊的[瀏覽]，選擇專案放置的資料夾。
再按下[確定]，進入方案範本選擇畫面。
在方案範本選擇視窗中，可以看到好幾毎個不同的ASP.NET Core Web應用程式範本，個別介紹如下：
- 空白，這是為很有經驗的ASP.NET Core應用程式開發人員使用的範本，只有空的架構專案，細節部份都要自行加上。
- API，這是RestFUL的應用專案範本，不懂就算了。我也沒什麼研究...XD
- Web應用程式，這是基本的ASP.NET Core專案範本，基本上比空白專案範本多了些架構，比較不用什麼都從頭來過。
- Web應用程式(模型，檢視，控制器)，這是最完整的ASP.NET Core Web專應用程式專案範本，初學者最好從這裏開始。這個專案範本基本上就是ASP.NET MVC專案的.NET Core版本。
- Razor類別庫，顧名思意，建置Razor使用的類別庫用的專案範本。
- Angular、React.js、React.js與Redux專案範本，這是三個使用不同開源Javascript Library的ASP.NET Core專案範本。由此可見ASP.NET Core在架構上比以前的.NET Framework更為開放，可以和不同的開源Web應用程式庫或FRamework整合。我會在適當時機介紹ASP.NET Core和Vue.js的整合專案的建置。
我們從Web應用程式(模型，檢視，控制器)開始。
再點下[確定]前，我們先看一下驗證。
[變更驗證]這部份，分別有：- 無驗證：就是進入網站不需要任何驗證的機制。
- 個別使用者帳戶：如果是有經驗的ASP.NET開發人員，這個就是以前的Membership，或者Forms驗證，但，現在微軟為了整合帳戶不同驗證機制，現在己經改為ASP.NET Identity，Identiry有什麼好用呢？簡單來說，如果想整合Facebook、Twitter、Microsoft帳戶、Google帳戶等來做登入驗證，Identity可以幫你實踐這個願望。在下圖，你可以看到還有兩個選項，儲存應用程式內的使用者帳戶，這個就是之前的Forms驗證機制。另一個是，連到雲端中現有使用者存放區，這個應該不難猜到吧？就是指Facebook、Twitter、Microsoft帳戶、Google帳戶等等雲端應用的帳戶。
- 工作或學校帳號，這是和Active Directory，Azure Active Directory，Office 365帳戶整合驗證機制。
- Windows驗證，用於組織內部的驗證機制。組織內如果建置了Active Directory，就可以使用來做驗證機制。
基本上，ASP.NET Core的驗證機制發展相當成熟，所謂雙因素驗證機制，也是可以實現的。
我們先從無驗證入門開始，沒事不要搞的太複雜，把自己搞得迷糊了，喪失學習信心就不是學習的要領了。熟悉iT邦動態的邦友大概會瞭解我在講的是...XD
選好［無驗證］後，按下［確定］，等個幾分鐘，等候Visual Studio把專案檔案建置完成。
使用VIsual Studio為開發工具，電腦基本不能太慢，否則會發現動輒得咎，不斷在等候Visual Studio的過程中慢慢完成Coding。這對開發人員是很嚴重的影響，因為靈感稍縱即逝，等Visual Studio跑完應該執行的工作時，要寫什麼Code也可能忘記了。我個人建議，i7、16GB記憶體、500GB SSD是基本要有的配備。
專案建置完成，Visual Studio畫面的右手邊會出現個[方案總管]的小視窗，可以看到三個主要的資料夾：Models、Views、Controllers，MVC的基本標準架構出現了。
然後，我們可以試著執行專案。等一下，還沒Coding，執行什麼？這，你就太小看Visual Studio的專案範本了。Visual Studio的龐大，原因就在這裏，它幫程式設計師完成了很多初階工作。
我們點選下圖中的[IIS Express]。
這是叫用個人簡易版本的IIS來執行專案網站，然後會看到SSL的憑證訊息。
就勾一下不要再問我，然後[是]自動完成SSL憑證的處理。
可是因為Windows 10的安全機制，所以還是出現了憑證安裝的安全問題，點[是]繼續下去，最後跳出一個如下的網站。
這個就是ASP.NET Core Web應用程式式(模型、檢視、控制器)專案範本的基本示範網頁，我們之後會逐步介紹如何修改範本成為自己想要的網站。
在今天結束之前，再介紹個Visual Studio的小工具，當測試執行網站時，Visual Studio的視窗右邊會出現一個名為[診斷工具]的小視窗，如下圖：
這個小工具在診斷網站耗用資源的判斷上很有幫助，各位將來在開發網站時，可以多多利用這個小工具輔助判斷網站對資源的耗用情形，從而決定網站功能的取捨。
今天就先介紹到這裏，各位可以先去MVC三個資料夾下看看有什麼檔案，明天我會暫時離開ASP.NET Core的主題，先來談談我們想用ASP.NET Core開發什麼應用程式，以及軟體專案開發的一些概念。
3.1 方法何其多，只要有用就好
基本上，要開發ASP....]]>
3.1 方法何其多，只要有用就好
基本上，要開發ASP.NET Core平台的網站，可以用Visual Studio或命令列(CLI)加一般文字編輯器(像是NotePad++)的方式這兩種方法。
如果打算開發ASP.NET Core平台的網站，首先我們要考慮在什麼環境下開發，Windows、Linux，還是MacOS X？
首先，選擇作業系統平台，Windows 或MacOS X平台都可以使用Visual Studio社群版來開發，如果不想使用體積龐大的Visual Studio，也可以使用命令提示字元視窗和一般的文字編輯器來開發ASP.NET Core網頁
如果是Linux作業系統環境，就只能採用終端機命令視窗和VIM、gedit這些文字編輯器來進行。但微軟很好心的開發了個免費的程式編輯器Visual Studio Code，提供給想用命令列及文字編輯器來開發ASP.NET Core的網頁程式設計師來使用。
綜合上述，我們歸納如下：
1. 使用Windows平台
1.1 Visual Studio 社群版
1.2 命令列(命令提示字元視窗)及文字編輯器，建議使用Visual Studio Code
2. 使用Linux平台
2.1 命令列(終端機)及文字編輯器，可用VI, gedit等，但建議使用Visual Studio Code
3. 使用MacOS X平台
3.1 VIsual Studio 社群版
3.2 命令列(終端機)及文字編輯器，建議使用Visual Studio Code
如果喜歡用文字編輯器來編寫程式，建議多多使用微軟的Visual Studio Code，因為有IntelliSence功能，可以協助更快更精確的完成程式設計工作，不用一直查找文件或Google，尋找相關屬性或函數的拼寫方法或參數。
3-2 在Windows平台，安裝及採用Visual Studio為開發工具
這是傳統的標準開發方式，微軟建議最好是使用Windows 10 專業版(版號要在1507之後的版本)來安裝Visual Studio 2017社群版。
如何查詢Windows 10的版號？在Windows 10的桌面上，左下方的開始圖示上按滑鼠右鍵，在快速選單中挑選設定，叫出設定視對話窗，然後到設定的關於頁籤，如下圖：
找到[Windwos 規格]資訊區塊，就可以看到版本1709，這就是Windows 10版號，只要大於1507就可以安裝VIsual Studio2017社群版。Visual Studio的下載網址如下圖：
最左邊的是社群版本，可以免費下載使用，可別免費就看不上眼，微軟很大方的把專業版所有功能都加上去了。最右邊的是Visual Studio Code，就是文字編輯器形式的開發工具，現在我們先不談這個Visual Studio Code，擺到鐵人賽後期再來回顧。
點選下載社群版，其實是下載網路安裝工具包，大約1MB左右大小的可執行檔。先是個問你怎麼處理下載的話窗，我選先儲存檔案。
下載完成畫面如下圖所示，直接點選執行開始安裝Visual Studio 2017社群版本。
Windows 10會問你要不要安裝，因為偵測到有軟體要變動系統區檔案，如下圖：
然後Visual Studio2017安裝程式會先下載及安裝Visual Studio2017的安裝工具包，如下圖：
安裝工具下載及安裝完成，Visual Studio 2017安裝程式會問你要安裝那些開發工具。從前兩天討論Visual Studio的發展史時，我們不斷強調Visual Studio是一個非常肥胖的開發工具，這也是開源社群垢病微軟著墨最多的地方。Visual Studio 2017安裝程式顯示有下列開發工具可安裝：
我一般選擇：
1. ASP.NET與網頁程式開發：
2. .NET桌面開發，這是應用.NET Framework來開發桌面應用程式
3. 通用Windows平台開發，會安裝C#、C++、Basic語言來建立通用WIndows平台。
選擇完畢如下圖，要注意下圖的右下方還有選用元件選擇項，像是.NET Framework 4.6、4.7，.NET Core 1.0、2.0等各個版本的平台選用，我是全部選擇來安裝，現在硬碟空間很便宜，一次先裝好，以後要用到就比較省時。
這樣選一選，就要佔用23GB之多的硬碟空間。這麼肥開發工具，使用的電腦效能勢必不能太差，否則開個專案等到地老天荒，等出一肚子氣，想開發什麼系統的的靈感都抛到九霄雲外去了。或許你會問，那只選擇第1項預設安裝就行了，反正也只會用Visual Studio來開發網頁，當然可以，只是，也有8GB的容量要安裝。
但是，微軟也不是故意要把Visual Studio變成這樣肥胖，畢竟想要在一套開發工具中塞下最多的開發工具，以支應各種需求，還能在一起運作和諧不會老是發脾氣當機，微軟對Visual Studio真是費盡苦心去扶持。
安裝的過程有兩種安裝方式，下載套件同時安裝，邊下載邊安裝，如果你不想守在電腦旁，可以使用這種方式。另一種是先把套件全部下載，然後再安裝，這樣就要守在電腦前等下載進度條跑完，然後再完成全部安裝程序。如下圖右下方選項所示。
我多半使用邊下載邊安裝的方式，這樣我就不用在電腦旁等下載完成，一旦確定安裝，就開始跑進度條。
安裝完成後，如果有系統檔案被覆寫，Visual Studio安裝程式會要求重新啟動電腦，再執行Visual Studio。
先選擇重新啟動電腦。再執行Visual Studio。
第一次啟用Visual Studio，會要要求你登入微軟帳號，雖說是社群版免費使用，但，微軟還是弄了啟用機制，怎麼啟用，就是用微軟帳號來啟用。沒有帳號沒關係，可以立即建一個，最好用自己常用的郵箱來來當成微軟帳號。像gmail的免費郵箱或公司郵箱都可以拿來用，建好微軟帳號以後登入完成，啟用Visual Studio完成。
登入完成是像這樣。
上圖出現稍等一段時間，接下來出現Visual Studio的工作畫面，右上角出現你在微軟帳號上使用的名字。
我知道很多人喜歡使用暱名方式，但，建議使用真實名字，建立自己在網際網路上的名聲與聲望，讓大家把網路上的你和真實世界的你能串連起來，這才是網路公民與道德的基本標準。
到這裏，Visual Studio安裝好也啟動完成了。整個安程序應該可以在個小時內完成，這要看你的網路頻寬和電腦效能而決定。如果耗用的時間更長，而且確定頻寬是足夠的(我是用中華電信100MB/60MB的方案)，如果安裝過程還是很慢，建議你考慮一下升級電腦，或是改用Visual Studio Code文字編輯方式來進行，我也會建議，改用Linux吧！Visual Studio和Windows太肥了，你的電腦吃不消。
今天就先談到這裏，明天就讓我們用Visual Studio完成第一個ASP.NET Core的專案吧。
微軟產品的另一個為人詬病的地方，即在於軟體產品通常很肥胖，效能很糟糕。在Windows 95/98和ME這幾...]]>
微軟產品的另一個為人詬病的地方，即在於軟體產品通常很肥胖，效能很糟糕。在Windows 95/98和ME這幾個Windows後續版本就可以看到這個現象。
但，由於Windwos 3.1太成功而賺飽錢的微軟，在一連串新版Windows的產品失敗後，雖然元氣大傷，但還是有餘力推出Windows NT 3.51及隨後的NT 4.0。Windows NT其實是一個由OS/2為藍本的來開發的作業系統，這裏有一些暗歷史可談談，其實OS/2是微軟和IBM共有的作業系統，只是微軟最後以自行開發的Windows 3.0面向市場，而IBM則直接以OS/2來面向市場，最後誰輸誰贏，歷史給了明確的答案。微軟在與IBM合作破局後，還是一直在OS/2下做新版本的研發，這就是Windows NT系列的根本。
Windows NT系列，一直在微軟的視窗作業系統產品線上發展著，在Windows 3.1推出時，本來也有WIndows NT 3.1這個產品，只是沒有大張旗鼓在銷售。在Windwos 95、98、ME一連串的失敗之後，微軟把Windows NT 3.51推向市場，並隨後推出NT 4.0。
NT系列是分為工作站及伺服器版本在銷售的，而"惡名照彰"的IIS(Internet Information Service)，也是由NT 4.0伺服器版本開始面向市場。隨著IIS開始伴隨NT 4.0 伺服器版本流通，微軟的網際網路大業終於有了個基礎可以開花結果，因為IIS有著一套新的網頁伺服器腳本語言ASP(Active Server Page)做為網站開發的基礎，這真是連名字也要和JSP互別苗頭。
到這個階段，網頁開發技術還是集中在後端，不論JSP或ASP，都是以伺服器端為主的網頁應用環境。但，由ASP的發展史，可以看出微軟其實對ASP是抱著試看看再說的策略，前面我們講到微軟對網際網路發展的失策，IIS/ASP雖然是微軟進軍網際網路Web伺服器端的產品，但微軟一直沒有給它一個正式產品的版本編號及產品行銷策略，直到Windwos 2000推出的時候，IIS 3.0版才把ASP冠上ASP 1.0的版號。而且在Windows 2000以前，連IIS也不是正式附隨在NT作業系統下的組件，一直到IIS 5.0版才是隨著Windows 2000的正式組件推出，之前IIS 1.0到4.0都是以Option Pack或Service Pack的補充組件發行。
當ASP隨著IIS而逐漸為市場接受，使用ASP來開發網站的網頁開發人員變多起起來，微軟開始推出Visual Studio 97這套軟體開發工具。
早期開發ASP網站，是用簡單的文字編輯器，像是筆記本來編寫，然後放到IIS的虛擬資料夾下執行網站來測試效果。也有些開發者會用一套名為Microsoft Frontpage的工具來開發ASP網頁，但是Forntpage真的是很爛的一套網頁開發工具，初學者還覺得好用，但是用久了，想進階時會發現Frontpage不但無助於開發，反而是網頁開發的絆腳石，因為會把寫好的ASP程式碼段搞成亂碼，所以大多數資深的ASP網頁開發人員，多半還是使用基本的文字編輯器來編程，而這也間接促成比Windows的筆記本功能更強的文字編輯軟體的出現。
Visual Studio 97是一套相當肥胖的開發工具，一方面，它包括了Java、C++、Basic、InterDev(用來開發ASP網頁的工具)，還有一套Visual Foxpro，整套都裝起來至少吃掉15GB的硬碟空間，相較之下，開發JSP或PHP只要一套只佔幾十MB的文件編輯器就搞定的情形，Visual Studio 97被第三方陣營猛烈攻擊是不在話下。
當然，你可以選擇要安裝的語言，但龐大的整合式開發環境，真的基本安裝就至少５到１０GB的空間使用。而動輒十來萬台幣的授權費，更是開源者的話題之一。
微軟還弄了個MSDN Library訂閱，訂閱中除了Visual Studio開發工具，還有一大堆微軟各種產品的Knowledge Base，提供開發者更完整的技術服務。而MSDN訂閱費用也是相當高昂。此外，早期MSDN訂閱就是拿到一大堆的光碟片，一年下來，累積數百張的光碟片，也是需要空間來保存與管理，網際網路和Google的興起，真是資訊工作者的福音，可以擺脫那一大拖拉庫的光碟庫。
在微軟還著重在WIndows平台的開發工具時，曾經推出一套名為MFC(Microsoft Foundaion Class Library)的程式庫，讓Windows應用軟體開發人員，可以透過呼叫MFC程式庫來控制視窗。MFC是一套用Microsoft C/C++ 7.0語言叫用的CLass Framework，一開始是隨附在Visual Studio裏一起銷售，貴森森的Visual Studio，讓MFC幾乎成了貴族才能使用的程序庫，這裏有個問題是微軟為什麼不讓開發者叫用Windows API就行了，為何要另外弄一套Framework - MFC？這問題的答案也很簡單，表面上是讓開發者更容易進行視窗應用軟體開發，骨子裏，我個人認為是商業機密的考量而己，微軟不想讓視窗作業系統太開放了。
隨著時間的推演，MFC漸漸出現三個大問題：
1. 只有C++語言能夠叫用，但當時，Visual Basic的語言使用者數量明顯高過Visual C++的使用者
2. 微軟在推動C#語言成為主要程式語言，C#是微軟自己研究開發的程式語言，其目的是在想大一統程式語言環境。
3. 網際網路的興起，有很多應用是MFC無法支援的。
C#語言帶進一個新觀念，CLR(Common Language Runtime)，CLR是一個中間語言的執行環境，意思是，不論你用C++, C#, Basic語言開發，只要能編譯成CLR可執行的中間碼，就能順利執行，而C#是第一個支援CLR的程式語言。唉呀！這下糟了，MFC怎麼辦？好不容易養出一大票的MFC追隨者，不就一下子只能琵琶別抱, 轉投敵方陣營？於是，微軟又宣佈了.NET Framework這個龐大的程式庫(Library)，向MFC追隨者畫出一個流著奶與蜜的美好天堂。於是.NET Framework就如同救世主般降臨微軟大地。
好玩的是，微軟當初推銷.NET Framework的基本行銷術語是...跨平台的利器，其實這個利器指的是CLR，能夠跨不同程式語言。並不是指跨作業系統平台。雖然當初微軟的雄心壯志是打算把.NET Framework打造成能跨不同作業系統的網站平台，可是.NET Framework承襲了MFC的肥胖，再怎麼減肥也還是達不到能跨平台的輕盈。
但是在視窗作業系統及IIS的獨門生意的照顧下，.NET Frameworky還是取得了一定的市場佔有。隨著.NET Framework的推行，微軟在2002年推出Visual Studio .NET，明顯衝著支持.NET Framework的開發環境，而Visual Studio .NET的另一個明顯改變是以往的InterDev變身成為ASP.NET。ASP.NET的出現，讓ASP網頁開發者面臨兩難，是繼續投靠微軟陣營呢？還是倒戈投靠PHP陣營。因為PHP己經是成熟網頁開發程式語言，而ASP.NET則是以初生之犢不畏虎的態勢，挾視窗作業系統及IIS的強力背景支持，卻也爭取到不少ASP網頁開發者的全力支持，而ASP.NET的語法結構和ASP相當類似，也減輕ASP開發者轉型的陣痛期。
ASP.NET語法和ASP最主要的差別在原來混合在ASP語法裏的JavaScript或VBScript的腳本語言部份，到了ASP.NET時，變成Code Behind的方式存在，雖然ASP.NET存在Code Behid及Code inline兩種模式，但微軟宣稱Code Behind的方式可以讓網頁部份的控制程式單純化，不致於全放在一起，我泥中有你，你泥中有我，對網頁維護修改能起到一定程度的簡化作用。這樣說，雖然有道理，但原來簡單的JavaScript腳本部份, 卻變成複雜的Code Behide控制，就算是用Code Inline模式，也是有一定複雜程度的編程工作要進行，等於還要學習另一套完整的語言結構，端看是用C#或Visual Basic語言。有些ASP網頁開發人員，卡在新的C#或VB語言複雜度的關卡上，最後還是轉投PHP陣營，因為PHP相對來說，對習慣ASP為開發環境的網頁開發者來說，更為親和。
2.1 真的是Happy Endding嗎？
這段歷史裏，開源者迎戰微軟.NET Framework怪獸，推出開源的Mono及DotGNU等輕量型的相容.NET Framework，讓ASP.NET能移殖到Linux作業環境下，真正實現.NET Framework跨不同作業系統平台的理想，可惜，歷史再一次的展現了不同的發展方向，網頁開發技術轉向發展分成三個主流:
1. 各種開源Framework, 像是Laravel、Code Igniter 、CakePHP、Phalcon等等的發展，讓PHP漸漸成為網頁開發的主要語言。
2. MVC、RestFUL等站開發技術理論的興起。
3. Ruby on Rails, Python, Go Lang等程式語言的公開發展。
至於Mono、DotGNU，反而是ASP.NET開發人員在尋找部署到Linux平台的解決方案時會去嚐試。那麼Mono可以跨到那些平台上進行ASP.NET網站的部署呢？根據Mono官網的說明，Mono可以成功在Linux、macOS、Sun Solaris、IBM AIX、BSD系列包括OpenBSD、FreeBSD、NetBSD和遊戲主機PlayStation 4及XboxOne等等平台上運作，真正跨平台的一套開源網站framework。
讓我們再回頭來看看ASP.NET，這在這段時間裏，微軟不斷在改進ASP.NET，將MVC的觀念也納入ASP.NET的範圍，我們可以運用ASP.NET開發符合MVC架構的網站，這就是是ASP.NET MVC，ASP.NET MVC可說是ASP.NET Core的前身。
從最早的MFC及Windows Forms，和ASP網頁開發，到.NET Framework及ASP.NET出現的Web Forms開發，再演進到ASP.NET MVC架構的MVC網頁開發，最終，微軟發展出ASP.NET Core，這才是真正的能夠跨平台的.NET技術。ASP.NET Core能夠在Linux及MacOS X平台上安裝與執行，雖然沒有Mono那麼廣泛，但畢竟是微軟原生的.NET平台，支持度會比較完整與充分些。
ASP.NET Core是個開放軟體，依照MIT及Apache 2.0的授權規範提供開源支援，因此，用ASP.NET Core開發的網站，及建置.NET Core 網站，都要遵照MIT及Apace 2.0的授權規範來部署，而簡單來說，MIT及Apache 2.0 License是相當寬容的授權方式，也因此，ASP.NET Core可以巳是開源軟體無誤。
現在ASP.NET Core的最新版本是2.1版，從Preview版本推出到1.0版再到2.1版，只有短短的兩年多時光，這其間，Visual Studio也推出有條件開放的社群版本，而ASP.NET Core是其中的正式組件，只要安裝Visual Studio社群版本，就可以選擇安裝ASP.NET Core，以及開發ASP.NET Core的網站。
如我們提到的，ASP.NET Core是由ASP.NET MVC演進而來的，可想而知ASP.NET Core也是屬於MVC的網頁架構，而事實上，ASP.NET Core的全名應該是ASP.NET Core MVC，由全名我們就可以瞭解ASP.NET Core的根源了。
ASP.NET Core還在不斷演進中，微軟在過去兩年內不斷的改進ASP.NET Core的功能而持續推出新的版本，而且版本更新得非常快，我個人比較擔心這個情況會給人一種還不是穩定的技術的印象，而減降低採用ASP.NET Core為網站技術的意願。
ASP.NET Core的版本更新則是透過Visual Studio的更新機制來自動完成。
花了不少篇幅來說明ASP.NET Core的來源及歷史背景，其實也是在為後續文章鋪路，接下來我會先在視窗環境下，以傳統標準的方式進行ASP.NET Core專案開發演練，即以Visual Studio為開發工具來說明ASP.NET Core的特色，並嚐試寫一個完整應用的網站來介如何利用ASP.NET Core來建置網站。
整個鐵人賽的文章內容規畫會先著重在Windows平台下應用Visual Studio來開發ASP.NET Core網站的實作，同時也花些篇幅來講講網站開發專案怎麼規劃的方法。
然後我會在鐵人賽最後幾天再回到跨平台的議題，介紹如何在Linux、MacOS X環境下使用ASP.NET Core開發網站。
今天，我們文章就在此告一段落了，明天再見。
在遠古時代，在那個際網路還沒有興起的時代，大型主機還在橫行霸道時代，一切都是那麼的單純與美好。
...]]>
在遠古時代，在那個際網路還沒有興起的時代，大型主機還在橫行霸道時代，一切都是那麼的單純與美好。
後來迷你電腦興起，有一叫DEC的電腦公司推出的迷你電腦大賣，還有一家叫SunMicroSystems的公司的迷你電腦也不斷侵蝕大型主機的市場。
在那個時候，美國AT&T公司的貝爾實驗室有個電腦科學研究中心的團隊開發了個名為Research Unix的作業系統，這套作業系統出現在DEC公司好幾個系列的迷你電腦上，而貝爾實驗室也沒有藏私，把這套Research Unix的原始碼分享給加州大學柏克萊分校的電腦科學研究團隊。而柏古萊的團隊把做了些改業，推出自己的一套Unix，命名為BSD (Berkeley Software Distribution)， 同時貝爾實驗實室也沒有閒下來，繼續發展新版本，而為我們所熟知的是System V Release 4，今天很多Unix作業系的分枝，都和System V Release 4有關係。
讓我們來看看Unix族譜圖，今天我們可以看到的IBM AIX，HP-UX，SunMicroSystem Solaris(SunOS的另一個英文名稱)，都是AT&T Unix System V Release 4的衍生子孫。
而BSD，則衍生出NeXTSTEP(賈伯斯離開蘋菓電腦的時候開創的電腦公司)，後來賈伯斯又回到蘋菓電腦時，把NeXTSTEP帶回蘋菓電腦，並以其為基礎開發出MacOS X作業系統。
在這段歷史裏面，有個組織一定要拿出來講，Open Software Foundation(OSF，開放軟體基金會)，基金會的宗旨就是想打破大型電腦的封閉系統，以Unix作業系統為基礎，建構一個美好的電腦大同世界，軟體可以共用，硬體可以共享。而這個理想的實踐者, 其實是稍後登場的個人電腦。迷你電腦在個人電腦浪潮下，反而先失去市場基礎而淘汰在歷史洪流中。DEC電腦己經消失，SunMicroSystems公司若不是被Oracle買下，大概也消失了。
可是，好玩的是，當初誓言打破大型電腦攏斷資訊的迷你電腦，被個人電腦侵蝕市場而消失時，大型電腦非旦沒有消失，反而在大數據、人工智慧等新興議題出現時，彷彿找回昔日的王者風範，君臨天下。歷史似乎開了開放軟體基金會一次大玩笑。
1.1 塞翁失馬
講這些古，主要是在說明開源的發展歷程，今天開源軟體盛行，是在好多位資訊科技的前輩們的努力下才發展出來的局面。而由開源的發展歷程，可以瞭解微軟為何會把Visual Studio和ASP.NET一步步帶到ASP.NET CORE的方向上。
喔！我還沒提到網際網路的興起，對開源的影響哩。這部份就簡單說一下，由於個人電腦，網際網路的流行，給了開源軟體發展的溫床，於是我們今天才能看到雨後春荀般出現的各式各樣開源軟體，以及在GitHUB和各種社群上的開源。
在UNix作業系統扮演著屠龍武士的同時，微軟公司慢慢地藉由個人電腦作業系統Windows及殺手級應用軟體Office成功搶佔個人電腦桌面，逐步成為資訊業的大魔王，幾乎毎個熱衷開源的有志之士，群起在各社群貼文討伐，數落微軟的不是。
從歷史的發展軌跡來看，微軟的興起，其實也是一連串的好運氣演進的發展，和微軟Windows同時期發展的IBM OS/2在架構上是比Windows更先進的作業系統，可惜IBM的行銷策略錯誤，把OS/2當成大型電腦的終端設備來推廣，而不是把OS/2當成主角來攻城略地，終於在個人電腦桌面市場節節敗退，以Warp 7(註1)的超光速消失在電腦演進史中。
拜IBM行銷策略的錯誤，微軟在一開始就以幾乎是獨家的方式推廣視窗作業系統，而獲致非常巨大的成功。那麼，問題來了，怎麼在視窗環境裏開發應用程式？
早期是用Borland公司的Delphi，和微軟公司的以長青程式語言Basic為基礎的Visual Basic來開發視窗應用軟體，Windows推出市場時，網際網路正值方興未艾之際，那時候WWW還是很很新鮮的科技，連微軟都還沒有怎麼重視這個市場，IIS都還看不到影子。
其實微軟並不是很看重在視窗環境的開發工具如何和Borland公司的Delphi競爭這件事上，只是把重心放在Visual Basic和Visual C++這兩套視窗應用軟體開發工具上。Visual Basic是在MS-DOS時代就出名的開發工具，是由Turbo系列衍生出來的，到了視窗時代，微軟把Visual Basic打造成視窗應用體的主力開發工具，而且獲得相當的成功，吸引不少原來用Delphi的開發者轉投入Visual Basic陣營。
相較於視窗作業系統的成功，微軟對網際網路的發展趨勢，還是也總是沒有抓住重點，這也是沒有辦法的事，因為微軟一直到NT 4.0才有了伺服器級的作業系統公開上市。而此時，拜網際網路發展及WWW的網頁開發技術的拓展，程式語言及軟體開發工具的發展方向也有了相當大的變化，而且，同時UNIX-Like(即Linux等)作業系統己然成為網際網路世代的新興霸主，Linux作業系統以開源之姿，趁網際網路興起及微軟對這塊市場的發展趨勢掉以輕心之際，趁勢興起，Java、Javascript、JSP(Java Server Page)等語言，以及因應網頁開發技術而發展的PHP程式語言，這些語言伴隨著網際網路的掘起，被大量應用在WWW網頁開發上，微軟明顥的落後一大截。也因為落後市場趨勢一大截，微軟很多市場行銷策略就被有心人解讀為封閉、保守與反潮流，再加上，視窗作業系統的後續版本，諸如Windows 95、98及Millennium Edition(ME)的產品失敗，更讓推崇Linux的人士有了攻擊微軟產品的藉口。
這個真的是微軟的產品失敗造成的現象，沒什麼好辯解的。
寫到這裏，今天文章就先告一段落了，我們明天再繼續。
我理解這文中應該有很多漏洞，要在兩天內把近30年的電腦發展史講個大概，只能節略著講古了。
註1: Warp是在電影Star Trek(星際爭霸戰，這是描述Kirk艦長和克林貢人間恩怨情仇的那一系列電影，不是尤達大師與絕地武士和共和國間的戰爭電影)裏的一種太空船艦的速度單位，比光速還快的速度單位, 如此人類才能在浩瀚宇宙的各星球間旅行。IBM把OS/2正式上市的作業系統命名為OS/2 Warp，來彰顯其速度之快，一開始也獲致相當程度成功，但隨后產品定位錯誤，及行銷策略失敗，讓OS/2很快的從市場消失，我打趣以Warp之速落後微軟視窗作業系統。(笑)
]]>paypal.me/twcctz50
http://blog.sina.com.tw/window/feed.php?ver=rss&type=entry&blog_id=48997
https://paypal.me/twcctz50?country.x=TW&locale.x=zh_TW
使用 PayPal.Me 連結付款給我： https://paypal.me/twcctz50?country.x=TW&locale.x=zh_TW
健康是最好的禮物蛋黃油https://www.facebook.com/eggsoil
在生寶妹之前，寶妹媽，就食用蛋黃油調養車禍後造成的心律不整等後遺症狀將近兩年，配合復健、整復治療和游泳運動等，逐漸恢復正常的心律。
直到懷寶妹後至今，感謝蛋黃油讓寶妹媽能恢復健康，給這意外來的祝福一個健康的生長環境。寶妹雖是家中最小的孩子，但也是最健康、幸福的孩子！惟有她是媽媽有豐富的母乳可供親餵。
至今，恭喜寶妹已經滿兩歲了！每天還是喜歡找媽媽喝餒餒睡覺，出生至今，身體健康，沒有感冒和生病的紀錄。祝福寶妹，能一直健康、快樂的成長、學習，成為眾人的祝福！
代工生產製造需一千斤
需用者請提早預約安排
每天補充蛋黃油可降低罹癌風險？！是的！！
昨晚，十多年老案主的弟弟周大哥說，二哥鼻咽癌治療恢復後的後遺症，又發作了！需配合醫師開的抗生素和補充細胞再生的營養素，又訂了10瓶50ml，補充瓶。
據了解個案案主，罹癌前的工作是從事印刷業。坦白說，有點醫學常識的人多半知道化學油墨對身體的傷害為何？
本科所學為設計的我，也曾在相關產業待過十幾年的時間，等到研究所和醫院合作完成論文後，才知道自己的工作：設計和教職，其實，都隱含著很高的罹癌風險！
我們都曾因此賠上過健康，但慶幸自己和案主們，都是有福之人！
感謝蛋黃油豐富的卵磷脂營養成份，除了維生素C之外，幾乎涵蓋了所有！在103學年間，我曾因超鐘點一週上課時數33小時，忙碌於家庭和工作間，哪時老二剛出生半年，做好月子後，馬上就恢復忙碌的教職工作，不出一個月，就為卵巢炎、併發盆腔炎，抗生素吃了半年，還是不見恢復的病痛所苦！
期間，幾乎每兩週跑醫院兩三趟，署基的婦科主任醫師，也建議我要跟校長請辭，調養身體為重！感謝校長體諒，讓我減課到16堂，撐到合約到期，沒有違約金的困擾，離職後，就回家照顧老二和調養自己的身體。
卵巢炎超痛的！併發盆腔炎更痛！從早痛到晚！醫師說，抗生素吃半年了，就不能再吃了！感謝醫師沒讓我繼續吃下去！
而是勸我調整工作、生活和飲食！於是，我又開始大量食用蛋黃油和自己料理三餐，就這樣子，吃了半年，某天，突然驚覺：卵巢不痛了耶！
感謝神！在恢復前的每一時刻，我被疼痛纏身，影響情緒和睡眠，每天都不知要多久，才會好？！只是一直做該做的事，好好吃飯、休息，調養身心！直到恢復時，才發覺：哇！幸好，半年就好了！
這是蛋黃油在我近十年的健康危機中，第二次救了我！感謝神創造各樣美好食物，保守、祝福我們能有機會恢復祂起初創造我們的美好！
感謝近十幾年來，因著每一次的健康危機，即時食用蛋黃油排毒、調養身體、恢復正常的心律，讓我能在身體得滋養後再懷孕生下健康的孩子們，也讓我們的生命得到延續。
為此，我才投入後來的時間、金錢、精神在服務和我一樣有需要的案主們身上。感謝大家一起陪我攜手走過已過的十幾年。祝福每個人都能有機會認知到維護健康的身體，其奧秘就在於養成正確的日常飲食習慣！
筆者：蛋黃油男
電話:02-24978169
手機:0989-422508
為資深個案自主健康管理設計師，
目前服務於品蔚養生設計事務所。
https://liker.social/invite/pRwYGraC
https://www.facebook.com/eggsoil
https://www.facebook.com/nectw721
https://www.instagram.com/0989422508mdc
https://www.pinterest.com/twcctz500
https://www.linkedin.com/in/twcctz500
https://www.twitter.com/twcctz500
https://currents.google.com/117454133619976175486
https://www.youtube.com/shorts/o8Jaud7px4w
https://www.youtube.com/channel/UC5E4_uNgGl_omnUVfL7fUyA
https://fitness-center-727.business.site/
https://g.page/r/CUt-sGCWmpP2EBM/review
https://matters.news/@twcctz500
https://pastebin.com/NgugYMZP 來自 @pastebin
https://hardbin.com/ipfs/QmSmgLoGrr4dcJ4EFmszDXJAGbXW2oZU5nNgksdjG7bb3P/
https://zerobin.net/?b4e43b1d09b3dcbe#C4rH4SwtqM4v4BsehLtwVf2DSEhto1JRx8PzKIsmrYo=
https://zerobin.net/?4fdb0ea46d78f4a6#z7E38he/vzywjsvzxBwTBm5dvCaKc5Pei8nDkUflgOs=
https://privatebin.net/?8abe23c5b0253b66#7Vq3VyzThWp2ga7tvVBQ4om6aiYdqvma4bpfWYNKMCgG
https://medium.com/@twcctz50
https://about.me/twcctz500
paypal.me/twcctz50
接下來還要覆寫 LoadPostData 方法，取得 __EVENTARGUMENT 這個 HiddenField 的值，並判斷與原 SelectedIndex 屬性值是...]]>
接下來還要覆寫 LoadPostData 方法，取得 __EVENTARGUMENT 這個 HiddenField 的值，並判斷與原 SelectedIndex 屬性值是否不同，不同的話傳回 True，使其產生 SelectedIndexChanged 事件。
Protected Overrides Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As NameValueCollection) As Boolean
Dim values As String()
Dim iSelectedIndex As Integer
Me.EnsureDataBound()
values = postCollection.GetValues(postDataKey)
If (Not values Is Nothing) Then
iSelectedIndex = CInt(Me.Page.Request.Form("__EVENTARGUMENT"))
If (Me.SelectedIndex <> iSelectedIndex) Then
MyBase.SetPostDataSelection(iSelectedIndex)
Return True
End If
End If
Return False
End Function
四、測試程式
在 TBDropDownList 的 SelectedIndexChanged 事件撰寫如下測試程式碼。
Protected Sub DropDownList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList2.SelectedIndexChanged
Dim sText As String
sText = String.Format("TBDropDownList: Index={0} Value={1}", DropDownList2.SelectedIndex, DropDownList2.SelectedValue)
Me.Response.Write(sText)
End Sub
執行程式，在 TBDropDownList 選取 "王五" 這個選項時，會正常顯示該成員的 SelectedIndex 及 SelectedValue 屬性值。
接下選取 Value 值相同的 "陳六" 這個選項，也會正常引發 SelectedIndexChanged ，並顯示該成員的 SelectedIndex 及 SelectedValue 屬性值。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/30/5830.aspx
程式碼下載：ASP.NET Server Control - Day29.rar
一、DropDownList 的成員 Value 值相同產生的問題
我們先寫個測試程式來描述問題，在頁面上放置一個 DropDownList 控制項，設定 AutoPostBack=True，並加入四個 ListItem，其中 "王五" 及 "陳六" 二個 ListItem 的 Value 值相同。
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Value="0">張三</asp:ListItem>
<asp:ListItem Value="1">李四</asp:ListItem>
<asp:ListItem Value="2">王五</asp:ListItem>
<asp:ListItem Value="2">陳六</asp:ListItem>
</asp:DropDownList>
在 DropDownList 的 SelectedIndexChanged 事件，輸出 DropDownList 的 SelectedIndex 及 SelectedValue 屬性值。
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
Dim sText As String
sText = String.Format("DropDownList: Index={0} Value={1}", DropDownList1.SelectedIndex, DropDownList1.SelectedValue)
Me.Response.Write(sText)
End Sub
執行程式，在 DropDownList 選取 "李四" 這個選項時，會正常顯示該成員的 SelectedIndex 及 SelectedValue 屬性值。
接下來選取 "陳六" 這個選項時，竟然發生奇怪的現象，DorpDownList 竟然顯示相同 Value 值的 "王五" 這個成員的 SelectedIndex 及 SelectedValue 屬性值。
二、問題發生的原因
我們先看一下 DropDownList 輸出到用戶端的 HTML 原始碼。
<select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1">
<option selected="selected" value="0">張三</option>
<option value="1">李四</option>
<option value="2">王五</option>
<option value="2">陳六</option>
</select>
DropDownList 是呼叫 __doPostBack 函式，只傳入 eventTarget參數 (對應到 __EVENTTARGET 這個 HiddenField) 為 DropDownList 的 ClientID；當 PostBack 回伺服端時，在 DropDownList 的 LoadPostData 方法中，會取得用戶端選取的 SelectedValue 值，並去尋找對應的成員的 SelectedIndex 值。可是問題來了，因為 "王五" 與 "陳六" 的 Value 是相同的值，當在尋找符合 Value 值的成員時，前面的選項 "王五" 會先符合條件而傳回該 Index 值，所以先造成取得錯誤的 SelectedIndex 。
Protected Overridable Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As NameValueCollection) As Boolean
Dim values As String() = postCollection.GetValues(postDataKey)
Me.EnsureDataBound
If (Not values Is Nothing) Then
MyBase.ValidateEvent(postDataKey, values(0))
Dim selectedIndex As Integer = Me.Items.FindByValueInternal(values(0), False)
If (Me.SelectedIndex <> selectedIndex) Then
MyBase.SetPostDataSelection(selectedIndex)
Return True
End If
End If
Return False
End Function
三、修改 DropDownList 控制項來解決問題
要解決這個問題最好的方式就是直接修改 DropDownList 控制項，自行處理前端呼叫 __doPostBack 的動作，將用戶端 DropDownList 選擇 SelectedIndex 一併傳回伺服端。所以我們繼承 DropDownList 命名為 TBDropDownList，覆寫 AddAttributesToRender 來自行輸出 PostBack 的用戶端指令碼，我們會用一個變數記錄 AutoPostBack 屬性，並強制將 AutoPostBack 屬性值設為 False，這是為了不要 MyBase 產生 PostBack 的指令碼；然後再自行輸出 AutoPostBack 用戶端指令碼，其中 __doPostBack 的 eventArgument 參數 (對應到 __EVENTARGUMENT 這個 HiddenField) 傳入 this.selectedIndex。
Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter)
Dim bAutoPostBack As Boolean
Dim sScript As String
'記錄 AutoPostBack 值，並將 AutoPostBack 設為 False，不要讓 MyBase 產生 PostBack 的指令碼
bAutoPostBack = Me.AutoPostBack
Me.AutoPostBack = False
MyBase.AddAttributesToRender(writer)
If bAutoPostBack Then
MyBase.Attributes.Remove("onchange")
sScript = String.Format("__doPostBack('{0}',{1})", Me.ClientID, "this.selectedIndex")
writer.AddAttribute(HtmlTextWriterAttribute.Onchange, sScript)
Me.AutoPostBack = True
End If
End Sub
在頁面上放置一個 TBDropDownList 控制項，設定與上述案例相同的成員清單。
<bee:TBDropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
<asp:ListItem Value="0">張三</asp:ListItem>
<asp:ListItem Value="1">李四</asp:ListItem>
<asp:ListItem Value="2">王五</asp:ListItem>
<asp:ListItem Value="2">陳六</asp:ListItem>
</bee:TBDropDownList>
執行程式查看 TBDropDownList 控制項的 HTML 原始碼，呼叫 __doPostBack 函式的參數已經被修改，eventArgument 參數會傳入該控制項的 selectedIndex。
<select name="DropDownList2" id="DropDownList2" onchange="__doPostBack('DropDownList2',this.selectedIndex)">
<option selected="selected" value="0">張三</option>
<option value="1">李四</option>
<option value="2">王五</option>
<option value="2">陳六</option>
</select>
[超過字數限制，下一篇接續本文]
]]>二、實作圖形驗證碼控制項
雖然我們可以使用 Image 控制項來呈現 ValidateCode.aspx 頁面產生的驗證碼圖...]]>
二、實作圖形驗證碼控制項
雖然我們可以使用 Image 控制項來呈現 ValidateCode.aspx 頁面產生的驗證碼圖形，可是這樣只處理一半的動作，因為沒有處理「使用者輸入的驗證碼」是否與「圖形驗證碼」相符，所以我們將實作一個圖形驗證碼控制項，來處理掉所有相關動作。
即然上面的示範使用 Image 控制項來呈現驗證碼，所以圖形驗證碼控制項就繼承 Image 命名為 TBValidateCode。
< _
Description("圖形驗證碼控制項"), _
ToolboxData("<{0}:TBValidateCode runat=server></{0}:TBValidateCode>") _
> _
Public Class TBValidateCode
Inherits System.Web.UI.WebControls.Image
End
新增 ValidateCodeUrl 屬性，設定圖形驗證碼產生頁面的網址。
''' <summary>
''' 圖形驗證碼產生頁面網址。
''' </summary>
< _
Description("圖形驗證碼產生頁面網址"), _
DefaultValue("") _
> _
Public Property ValidateCodeUrl() As String
Get
Return FValidateCodeUrl
End Get
Set(ByVal value As String)
FValidateCodeUrl = value
End Set
End Property
覆寫 Render 方法，若未設定 ValidateCodeUrl 屬性，則預設為 ~/Page/ValidateCode.aspx 這個頁面。另外我們在圖形的 ondbclick 加上一段用戶端指令碼，其作用是讓用戶可以滑鼠二下來重新產生一個驗證碼圖形。
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim sUrl As String
Dim sScript As String
sUrl = Me.ValidateCodeUrl
If String.IsNullOrEmpty(sUrl) Then
sUrl = "~/Page/ValidateCode.aspx"
End If
If Me.BorderWidth = Unit.Empty Then
Me.BorderWidth = Unit.Pixel(1)
End If
If Me.AlternateText = String.Empty Then
Me.AlternateText = "圖形驗證碼"
End If
Me.ToolTip = "滑鼠點二下可重新產生驗證碼"
Me.ImageUrl = sUrl
If Not Me.DesignMode Then
sScript = String.Format("this.src='{0}?flag='+Math.random();", Me.Page.ResolveClientUrl(sUrl))
Me.Attributes("ondblclick") = sScript
End If
Me.Style(HtmlTextWriterStyle.Cursor) = "pointer"
MyBase.Render(writer)
End Sub
另外新增一個 ValidateCode 方法，用來檢查輸入驗證碼是否正確。還記得我們在產生驗證碼圖形時，同時把該驗證碼的值寫入 Session("_ValidateCode") 中吧，所以這個方法只是把用戶輸入的值與 Seesion 中的值做比對。
''' <summary>
''' 檢查輸入驗證碼是否正確。
''' </summary>
''' <param name="Code">輸入驗證碼。</param>
''' <returns>驗證成功傳回 True，反之傳回 False。</returns>
Public Function ValidateCode(ByVal Code As String) As Boolean
If Me.Page.Session(SessionKey) Is Nothing Then Return False
If SameText(CCStr(Me.Page.Session(SessionKey)), Code) Then
Return True
Else
Return False
End If
End Function
三、測試程式
在頁面放置一個 TBValidateCode 控制項，另外加一個文字框及按鈕，供使用者輸入驗證碼後按下「確定」鈕後到伺服端做輸入值比對的動作。
<bee:TBValidateCode ID="TBValidateCode1" runat="server" />
<bee:TBTextBox ID="txtCode" runat="server"></bee:TBTextBox>
<bee:TBButton ID="TBButton1" runat="server" Text="確定" />
在「確定」鈕的 Click 事件中，我們使用 TBValidateCode 控制項的 ValidateCode 方法判斷驗證碼輸入的正確性。
Protected Sub TBButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TBButton1.Click
If TBValidateCode1.ValidateCode(txtCode.Text) Then
Me.Response.Write("驗證碼輸入正確")
Else
Me.Response.Write("驗證碼輸入錯誤!")
End If
End Sub
執行程式，頁面就會隨機產生一個驗證碼圖形。
輸入正確的值按「確定」鈕，就會顯示「驗證碼輸入正確」的訊息。因為我們在同一頁面測試的關係，你會發現 PostBack 後驗證碼圖形又會重新產生，一般正常的做法是驗證正確後就導向另一個頁面。
當我們輸入錯誤的值，就會顯示「驗證碼輸入錯誤!」的訊息。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/29/5818.aspx
程式碼下載：ASP.NET Server Control - Day28.rar
一、產生圖形驗證碼
我們先準備一個產生圖形驗證碼的頁面 (ValidateCode.aspx)，這個頁面主要是繪製驗證碼圖形，並將其寫入記憶體資料流，最後使用 Response.BinaryWrite 將圖形輸出傳遞到用戶端。當我們輸出此驗證碼圖形的同時，會使用 Session("_ValidateCode") 來記錄驗證碼的值，以便後續與使用者輸入驗證碼做比對之用。
Partial Class ValidateCode
Inherits System.Web.UI.Page
''' <summary>
''' 產生圖形驗證碼。
''' </summary>
Public Function CreateValidateCodeImage(ByRef Code As String, ByVal CodeLength As Integer, _
ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer) As Bitmap
Dim sCode As String = String.Empty
'顏色列表，用於驗證碼、噪線、噪點
Dim oColors As Color() = { _
Drawing.Color.Black, Drawing.Color.Red, Drawing.Color.Blue, Drawing.Color.Green, _
Drawing.Color.Orange, Drawing.Color.Brown, Drawing.Color.Brown, Drawing.Color.DarkBlue}
'字體列表，用於驗證碼
Dim oFontNames As String() = {"Times New Roman", "MS Mincho", "Book Antiqua", _
"Gungsuh", "PMingLiU", "Impact"}
'驗證碼的字元集，去掉了一些容易混淆的字元
Dim oCharacter As Char() = {"2"c, "3"c, "4"c, "5"c, "6"c, "8"c, _
"9"c, "A"c, "B"c, "C"c, "D"c, "E"c, _
"F"c, "G"c, "H"c, "J"c, "K"c, "L"c, _
"M"c, "N"c, "P"c, "R"c, "S"c, "T"c, _
"W"c, "X"c, "Y"c}
Dim oRnd As New Random()
Dim oBmp As Bitmap
Dim oGraphics As Graphics
Dim N1 As Integer
Dim oPoint1 As Drawing.Point
Dim oPoint2 As Drawing.Point
Dim sFontName As String
Dim oFont As Font
Dim oColor As Color
'生成驗證碼字串
For N1 = 0 To CodeLength - 1
sCode += oCharacter(oRnd.Next(oCharacter.Length))
Next
oBmp = New Bitmap(Width, Height)
oGraphics = Graphics.FromImage(oBmp)
oGraphics.Clear(Drawing.Color.White)
Try
For N1 = 0 To 4
'畫噪線
oPoint1.X = oRnd.Next(Width)
oPoint1.Y = oRnd.Next(Height)
oPoint2.X = oRnd.Next(Width)
oPoint2.Y = oRnd.Next(Height)
oColor = oColors(oRnd.Next(oColors.Length))
oGraphics.DrawLine(New Pen(oColor), oPoint1, oPoint2)
Next
For N1 = 0 To sCode.Length - 1
'畫驗證碼字串
sFontName = oFontNames(oRnd.Next(oFontNames.Length))
oFont = New Font(sFontName, FontSize, FontStyle.Italic)
oColor = oColors(oRnd.Next(oColors.Length))
oGraphics.DrawString(sCode(N1).ToString(), oFont, New SolidBrush(oColor), CSng(N1) * FontSize + 10, CSng(8))
Next
For i As Integer = 0 To 30
'畫噪點
Dim x As Integer = oRnd.Next(oBmp.Width)
Dim y As Integer = oRnd.Next(oBmp.Height)
Dim clr As Color = oColors(oRnd.Next(oColors.Length))
oBmp.SetPixel(x, y, clr)
Next
Code = sCode
Return oBmp
Finally
oGraphics.Dispose()
End Try
End Function
''' <summary>
''' 產生圖形驗證碼。
''' </summary>
Public Sub CreateValidateCodeImage(ByRef MemoryStream As MemoryStream, _
ByRef Code As String, ByVal CodeLength As Integer, _
ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer)
Dim oBmp As Bitmap
oBmp = CreateValidateCodeImage(Code, CodeLength, Width, Height, FontSize)
Try
oBmp.Save(MemoryStream, ImageFormat.Png)
Finally
oBmp.Dispose()
End Try
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim sCode As String = String.Empty
'清除該頁輸出緩存，設置該頁無緩存
Response.Buffer = True
Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0)
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AppendHeader("Pragma", "No-Cache")
'將驗證碼圖片寫入記憶體流，並將其以 "image/Png" 格式輸出
Dim oStream As New MemoryStream()
Try
CreateValidateCodeImage(oStream, sCode, 4, 100, 40, 18)
Me.Session("_ValidateCode") = sCode
Response.ClearContent()
Response.ContentType = "image/Png"
Response.BinaryWrite(oStream.ToArray())
Finally
'釋放資源
oStream.Dispose()
End Try
End Sub
End Class
我們將此頁面置於 ~/Page/ValidateCode.aspx，當要使用此頁面的圖形驗證碼，只需要在使用 Image 控制項，設定 ImageUrl 為此頁面即可。
<asp:Image ID="imgValidateCode" runat="server" ImageUrl="~/Page/ValidateCode.aspx" />
[超過字數限制，下一篇接續本文]
]]>接下來設定做為新增、編輯使用的 TBFormView 控制項，我們只使用 EditItemTemplate 來同時處理新增、刪除，所以 EditItemTemplate ...]]>
接下來設定做為新增、編輯使用的 TBFormView 控制項，我們只使用 EditItemTemplate 來同時處理新增、刪除，所以 EditItemTemplate 需要同時具有「新增」、「更新」、「取消」三個按鈕。其中 ProductID 為主索引欄位，所以我們使用 TBTextBox 來繫結 ProductID 欄位，設定 FormViewModeState.InsertMode="Enable" 使控制項在新增模式時為可編輯，設定 FormViewModeState.EditMode="Disable" 使控制項在修改模式是唯讀的。
<bee:TBFormView ID="TBFormView1" runat="server" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
DefaultMode="Edit" SingleTemplate="EditItemTemplate" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Both" Visible="False">
<FooterStyle BackColor="White" ForeColor="#000066" />
<RowStyle ForeColor="#000066" />
<EditItemTemplate>
ProductID:
<bee:TBTextBox ID="TextBox1" runat="server" Text='<%# Bind("ProductID") %>'>
<FormViewModeState EditMode="Disable" InsertMode="Enable">
</FormViewModeState>
</bee:TBTextBox>
'省略
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Insert"
Text="新增" />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="更新" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="取消" />
</EditItemTemplate>
</bee:TBFormView>
2. 測試新增模式
接下來執行程式，一開始為瀏覽模式，以 TBGridView 來呈現資料。
按下 Header 的「新增」鈕，就會隱藏 TBGridView，而切換到 TBFormView 的新增模式。其中繫結 ProductID 欄位的 TBTextBox 為可編輯模式，而下方的按鈕只會顯示「新增」及「取消」鈕。
在新增模式輸入完畢後，按下「新增」鈕，資料錄就會被寫入資料庫。
3. 測試修改模式
接下來測試修改模式，按下「編輯」鈕，就會隱藏 TBGridView，而切換到 TBFormView 的修改模式。其中繫結 ProductID 欄位的 TBTextBox 為唯讀模式，而下方的按鈕只會顯示「更新」及「取消」鈕。
在修改模式輸入完畢後，按下「更新」鈕，資料錄就會被寫入資料庫。
4. 頁面程式碼
示範了上述的操作後，接下來我們回頭看一下頁面的程式碼。你沒看錯，筆者也沒貼錯，真的是一行程式碼都沒有，因為所有相關動作都由控制項處理掉了。
Partial Class Day27
Inherits System.Web.UI.Page
End Class
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx
二、讓 TextBox 控制項可自行維護狀態
接下來擴展 TextBox 控制項，繼承 TextBox 命名為 TBText...]]>
二、讓 TextBox 控制項可自行維護狀態
接下來擴展 TextBox 控制項，繼承 TextBox 命名為 TBTextBox。新增 FormViewModeState 屬性 (TBFormViewModeState 型別)，依 FormView Mode 來設定控制項狀。並覆寫 PreRender 方法，在此方法中呼叫 DoFormViewModeStatus 私有方法，依 FormView 的模式來處理控制項狀態。
''' <summary>
''' 文字框控制項。
''' </summary>
< _
Description("文字框控制項。"), _
ToolboxData("<{0}:TBTextBox runat=server></{0}:TBTextBox>") _
> _
Public Class TBTextBox
Inherits TextBox
Private FFormViewModeState As TBFormViewModeState
''' <summary>
''' 依 FormViewMode 來設定控制項狀態。
''' </summary>
< _
Category(WebCommon.Category.Behavior), _
NotifyParentProperty(True), _
DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _
PersistenceMode(PersistenceMode.InnerProperty), _
DefaultValue("") _
> _
Public ReadOnly Property FormViewModeState() As TBFormViewModeState
Get
If FFormViewModeState Is Nothing Then
FFormViewModeState = New TBFormViewModeState
End If
Return FFormViewModeState
End Get
End Property
''' <summary>
''' 處理控制項狀態。
''' </summary>
Private Sub DoControlStatus(ByVal ControlStatus As EControlState)
Select Case ControlStatus
Case EControlState.Enable
Me.Enabled = True
Case EControlState.Disable
Me.Enabled = False
Case EControlState.Hide
Me.Visible = False
End Select
End Sub
''' <summary>
''' 依 FormView 的模式來處理控制項狀態。
''' </summary>
Private Sub DoFormViewModeStatus()
Dim oFormView As FormView
'若控制項置於 FormView 中，則依 FormView 的模式來處理控制項狀態
If TypeOf Me.BindingContainer Is FormView Then
oFormView = DirectCast(Me.BindingContainer, FormView)
Select Case oFormView.CurrentMode
Case FormViewMode.Insert
DoControlStatus(Me.FormViewModeState.InsertMode)
Case FormViewMode.Edit
DoControlStatus(Me.FormViewModeState.EditMode)
Case FormViewMode.ReadOnly
DoControlStatus(Me.FormViewModeState.BrowseMode)
End Select
End If
End Sub
''' <summary>
''' 覆寫。引發 PreRender 事件。
''' </summary>
Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
MyBase.OnPreRender(e)
'依 FormView 的模式來處理控制項狀態
DoFormViewModeStatus()
End Sub
End Class
三、測試程式
1. 設定控制項相關屬性
我們使用 Northwnd 資料庫的 Products資料表為例，以 GridView+FormView 示範資料「新增/修改/刪除」的操作。在頁面拖曳 SqlDataSource 控制項後，在頁面上的使用 TBGridView 來顯示瀏覽資料。TBGridView 的 FormViewID 設為關連的 TBFormVIew 控制項；另外有使用到 TBCommandField，設定 ShowHeaderNewButton=True，讓命令列具有「新增」鈕。
<bee:TBGridView ID="TBGridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="SqlDataSource1" FormViewID="TBFormView1">
<Columns>
<bee:TBCommandField ShowDeleteButton="True" ShowEditButton="True"
ShowHeaderNewButton="True" >
</bee:TBCommandField>
'省略
</Columns>
</bee:TBGridView>
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx
程式碼下載：ASP.NET Server Control - Day27.rar
Northwnd 資料庫下載：NORTHWND.rar
一、TBFormViewModeState 類別
我們先定義 EControlState (控制項狀態) 列舉，描述控制項在特定模式的狀態為何。
''' <summary>
''' 控制項狀態列舉。
''' </summary>
Public Enum EControlState
''' <summary>
''' 不設定。
''' </summary>
NotSet = 0
''' <summary>
''' 啟用。
''' </summary>
Enable = 1
''' <summary>
''' 不啟用。
''' </summary>
Disable = 2
''' <summary>
''' 隱藏。
''' </summary>
Hide = 3
End Enum
再來定義 TBFormViewModeState 類別，用來設定控制項在各種 FormView 模式 (瀏覽、新增、修改) 中的控制項狀態。
''' <summary>
''' 依 FormViewMode 來設定控制項狀態。
''' </summary>
< _
Serializable(), _
TypeConverter(GetType(ExpandableObjectConverter)) _
> _
Public Class TBFormViewModeState
Private FInsertMode As EControlState = EControlState.NotSet
Private FEditMode As EControlState = EControlState.NotSet
Private FBrowseMode As EControlState = EControlState.NotSet
''' <summary>
''' 在新增模式(FormViewMode=Insert)的控制項狀態。
''' </summary>
< _
NotifyParentProperty(True), _
DefaultValue(GetType(EControlState), "NotSet") _
> _
Public Property InsertMode() As EControlState
Get
Return FInsertMode
End Get
Set(ByVal value As EControlState)
FInsertMode = value
End Set
End Property
''' <summary>
''' 在編輯模式(FormViewMode=Edit)的控制項狀態。
''' </summary>
< _
NotifyParentProperty(True), _
DefaultValue(GetType(EControlState), "NotSet") _
> _
Public Property EditMode() As EControlState
Get
Return FEditMode
End Get
Set(ByVal value As EControlState)
FEditMode = value
End Set
End Property
''' <summary>
''' 在瀏覽模式(FormViewMode=ReadOnly)的控制項狀態。
''' </summary>
< _
NotifyParentProperty(True), _
DefaultValue(GetType(EControlState), "NotSet") _
> _
Public Property BrowseMode() As EControlState
Get
Return FBrowseMode
End Get
Set(ByVal value As EControlState)
FBrowseMode = value
End Set
End Property
End Class
定義為 TBFormViewModeState 型別的屬性是屬於複雜屬性，要套用 TypeConverter(GetType(ExpandableObjectConverter))，讓該屬性可在屬性視窗 (PropertyGrid) 擴展以便設定屬性值，如下圖所示。
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx
1. 擴展 GridView 控制項 - 無資料時顯示標題列
摘要：當 GridView 繫結的 DataSource 資料筆數為 0 時，會依 EmptyDataTemplate 及 EmptyDataText 的設定來顯示無資料的狀態。若我們希望 GridView 在無資料時，可以顯示欄位標題，有一種作法是在 EmptyDataTemplate 中手動在設定一個標題列，不過這種作法很麻煩。本文擴展 GridView 控制項，直接透過屬性設定就可以在無資料顯示欄位標題。
2. 擴展 GridView 控制項 - 支援 Excel 及 Word 匯出
摘要：GridView 匯出 Excel 及 Word 文件是蠻常使用的需求，此篇文章將擴展 GridView 控制項提供匯出 Excel 及 Word 文件的方法。一般在 GridView 匯出的常見下列問題也會在此一併被解決。
3. GridView+FormView 示範資料 新增/修改/刪除(進階篇：伺服器控制項)
摘要：擴展 GridView 及 FormView 控制項，在 GridView 控制項中新增 FormViewID 屬性，關連至指定的 FormView 控制項 ID，就可以讓 GridView 結合 FormView 來做資料異動的動作。
4. 擴展 CommandField 類別 - 刪除提示訊息
摘要：新增 DeleteConfirmMessage 屬性，設定刪除提示確認訊息。
5. 擴展 CommandField 類別 - 刪除提示訊息含欄位值
摘要：設定刪除提示確認訊息中可包含指定 DataField 欄位值，明確提示要刪除的資料列。
6. 讓 CheckBoxField 繫結非布林值(0 或 1)欄位
摘要：CheckBoxField 若繫結的欄位值為 0 或 1 時 (非布林值) 會發生錯誤，本文擴展 CheckBoxField 類別，讓 CheckBoxField 有辨法繫結 0 或 1 的欄位值。
7. 擴展 CheckBoxField 類別 - 支援非布林值的雙向繫結
摘要：CheckBoxField 繫結的欄位值並無法直接使用 CBool 轉型為布林值，例如 "T/F"、"是/否" 之類的資料，若希望使用 CheckBoxField 來顯示就比較麻煩，一般的作法都是轉為 TemplateField，自行撰寫資料繫結的函式，而且只能支援單向繫結。在本文直接改寫 CheckBoxField 類別，讓 CheckBoxField 可以直接雙向繫結 "T/F" 或 "是/否" 之類的資料。
8. 擴展 CommandField 類別 - Header 加入新增鈕
摘要：支援在 CommandField 的 Header 的部分加入「新增」鈕，執行新增鈕會引發 RowCommand 事件。
9. GridView 自動編號欄位 - TBSerialNumberField
摘要：繼承 DataControlField 來撰寫自動編號欄位，若 GridView 需要自動編號欄位時只需加入欄位即可。
10. 自訂 GridVie 欄位類別 - 實作 TBDropDownField 欄位類別
摘要：支援在 GridView 中顯示下拉清單的欄位類別。
11. 自訂 GridView 欄位 - 日期欄位
摘要：支援在 GridView 中顯示日期下拉選單編輯的欄位類別。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/27/5793.aspx
四、覆寫 ExtractValuesFromCell 方法 - 擷取儲存格的欄位值
當用戶端使用 GridView 編輯後執...]]>
四、覆寫 ExtractValuesFromCell 方法 - 擷取儲存格的欄位值
當用戶端使用 GridView 編輯後執行更新動作時，會呼叫 ExtractValuesFromCell 方法，來取得儲存格的欄位值，以便寫入資料來源。所以我們要覆寫 ExtractValuesFromCell 方法，將 Cell 或 TDateEdit 控制項的值取出填入具 IOrderedDictionary 介面的物件。
''' <summary>
''' 使用指定 DataControlFieldCell 的值填入指定的 IDictionary 物件。
''' </summary>
''' <param name="Dictionary">用於儲存指定儲存格的值。</param>
''' <param name="Cell">包含要擷取值的儲存格。</param>
''' <param name="RowState">資料列的狀態。</param>
''' <param name="IncludeReadOnly">true 表示包含唯讀欄位的值，否則為 false。</param>
Public Overrides Sub ExtractValuesFromCell( _
ByVal Dictionary As IOrderedDictionary, _
ByVal Cell As DataControlFieldCell, _
ByVal RowState As DataControlRowState, _
ByVal IncludeReadOnly As Boolean)
Dim oControl As Control = Nothing
Dim sDataField As String = Me.DataField
Dim oValue As Object = Nothing
Dim sNullDisplayText As String = Me.NullDisplayText
Dim oDateEdit As TBDateEdit
If (((RowState And DataControlRowState.Insert) = DataControlRowState.Normal) OrElse Me.InsertVisible) Then
If (Cell.Controls.Count > 0) Then
oControl = Cell.Controls.Item(0)
oDateEdit = TryCast(oControl, TBDateEdit)
If (Not oDateEdit Is Nothing) Then
oValue = oDateEdit.Text
End If
ElseIf IncludeReadOnly Then
Dim s As String = Cell.Text
If (s = " ") Then
oValue = String.Empty
ElseIf (Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) Then
oValue = HttpUtility.HtmlDecode(s)
Else
oValue = s
End If
End If
If (Not oValue Is Nothing) Then
If TypeOf oValue Is String Then
If (CStr(oValue).Length = 0) AndAlso Me.ConvertEmptyStringToNull Then
oValue = Nothing
ElseIf (CStr(oValue) = sNullDisplayText) AndAlso (sNullDisplayText.Length > 0) Then
oValue = Nothing
End If
End If
If Dictionary.Contains(sDataField) Then
Dictionary.Item(sDataField) = oValue
Else
Dictionary.Add(sDataField, oValue)
End If
End If
End If
End Sub
五、測試程式
我們使用 Northwnd 資料庫的 Employees 資料表為例，在 GridView 加入自訂的 TBDateField 欄位繫結 BirthDate 欄位，另外加入另一個 BoundField 的唯讀欄位，也同樣繫結 BirthDate 欄位來做比較。
<bee:TBDateField DataField="BirthDate" HeaderText="BirthDate"
SortExpression="BirthDate" DataFormatString="{0:d}"
ApplyFormatInEditMode="True" CalendarStyle="Winter" />
<asp:BoundField DataField="BirthDate" HeaderText="BirthDate"
SortExpression="BirthDate" DataFormatString="{0:d}"
ApplyFormatInEditMode="True" ReadOnly="true" />
執行程式，在編輯資料列時，TBDateField 就會以 TDateEdit 控制項來進行編輯。
使用 TDateEdit 編輯欄位值後，按「更新」鈕，資料就會被寫回資料庫。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/26/5777.aspx
程式碼下載：ASP.NET Server Control - Day25.rar
Northwnd 資料庫下載：NORTHWND.rar
一、繼承 TBBaseBoundField 實作 TDateField
GridView 的日期欄位需要繫結資料，一般的作法是由 BoundField 繼承下來改寫；不過我們之前已經有繼承 BoundField 製作一個 TBBaseBoundField 的自訂欄位基底類別 (詳見「 [ASP.NET 控制項實作 Day23] 自訂 GridVie 欄位類別 - 實作 TBDropDownField 欄位類別」 一文)，所以我們要實作的日期欄位直接繼承 TBBaseBoundField 命名為 TDateField，並覆寫 CreateField 方法，傳回 TDateField 物件。
''' <summary>
''' 日期欄位。
''' </summary>
Public Class TBDateField
Inherits TBBaseBoundField
Protected Overrides Function CreateField() As DataControlField
Return New TBDateField()
End Function
End Class
自訂欄位類別主要是要覆寫 InitializeDataCell 方法做資料儲存格初始化、覆寫 OnDataBindField 方法將欄位值繫結至 BoundField 物件、覆寫 ExtractValuesFromCell 方法來擷取儲存格的欄位值，下面我們將針對這幾個需要覆寫的方法做一說明。
二、覆寫 InitializeDataCell 方法 - 資料儲存格初始化
首先覆寫 InitializeDataCell 方法處理資料儲存格初始化，當唯讀狀態時使用 Cell 來呈現資料；若為編輯狀態時，則在 Cell 中加入 TBDateEdit 控制項，並將 TBDateField 的屬性設定給 TBDateEdit 控制項的相關屬性。然後將儲存格 (DataControlFieldCell) 或日期控制項 (TDateEdit) 的 DataBinding 事件導向 OnDataBindField 事件處理方法。
''' <summary>
''' 資料儲存格初始化。
''' </summary>
''' <param name="Cell">要初始化的儲存格。</param>
''' <param name="RowState">資料列狀態。</param>
Protected Overrides Sub InitializeDataCell(ByVal Cell As DataControlFieldCell, ByVal RowState As DataControlRowState)
Dim oDateEdit As TBDateEdit
Dim oControl As Control
If Me.CellIsEdit(RowState) Then
'編輯狀態在儲存格加入 TBDateEdit 控制項
oDateEdit = New TBDateEdit()
oDateEdit.FirstDayOfWeek = Me.FirstDayOfWeek
oDateEdit.ShowWeekNumbers = Me.ShowWeekNumbers
oDateEdit.CalendarStyle = Me.CalendarStyle
oDateEdit.Lang = Me.Lang
oDateEdit.ShowTime = Me.ShowTime
oControl = oDateEdit
Cell.Controls.Add(oControl)
Else
oControl = Cell
End If
If (oControl IsNot Nothing) AndAlso MyBase.Visible Then
AddHandler oControl.DataBinding, New EventHandler(AddressOf Me.OnDataBindField)
End If
End Sub
TDateEdit 控制項為筆者自行撰寫的日期控制項，TDateEdit 控制項的相關細節可以參考筆者部落格下面幾篇文章有進一步說明。
日期控制項實作教學(1) - 結合 JavaScript
日期控制項實作教學(2) - PostBack 與 事件
TBDateEdit 日期控制項 - 1.0.0.0 版 (Open Source)
三、覆寫 OnDataBindField 方法 - 將欄位值繫結至 BoundField 物件
當 GridView 執行 DataBind 時，每個儲存格的 DataBinding 事件都會被導向 OnDataBindField 方法，此方法中我們會由資料來源取得指定欄位值，處理此欄位值的格式化時，將欄位值呈現在 Cell 或 TDateEdit 控制項上。
''' <summary>
''' 將欄位值繫結至 BoundField 物件。
''' </summary>
Protected Overrides Sub OnDataBindField(ByVal sender As Object, ByVal e As EventArgs)
Dim oControl As Control
Dim oDateEdit As TBDateEdit
Dim oNamingContainer As Control
Dim oDataValue As Object '欄位值
Dim bEncode As Boolean '是否編碼
Dim sText As String '格式化字串
oControl = DirectCast(sender, Control)
oNamingContainer = oControl.NamingContainer
oDataValue = Me.GetValue(oNamingContainer)
bEncode = ((Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) AndAlso TypeOf oControl Is TableCell)
sText = Me.FormatDataValue(oDataValue, bEncode)
If TypeOf oControl Is TableCell Then
If (sText.Length = 0) Then
sText = " "
End If
DirectCast(oControl, TableCell).Text = sText
Else
If Not TypeOf oControl Is TBDateEdit Then
Throw New HttpException(String.Format("{0}: Wrong Control Type", Me.DataField))
End If
oDateEdit = DirectCast(oControl, TBDateEdit)
If Me.ApplyFormatInEditMode Then
oDateEdit.Text = sText
ElseIf (Not oDataValue Is Nothing) Then
oDateEdit.Text = oDataValue.ToString
End If
End If
End Sub
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx
三、由關連的資料來源擷取資料
再來就是重點就是要處理 PerformSelecrt 私有方法，來取得 Items 屬性的成員...]]>
三、由關連的資料來源擷取資料
再來就是重點就是要處理 PerformSelecrt 私有方法，來取得 Items 屬性的成員清單內容。PerformSelect 方法的作用是去尋找頁面上的具 IDataSource 介面的控制項，並執行此資料來源的 Select 方法，以取得資料來設定 Items 的清單內容。
step1. 尋找資料來源控制項
PerformSelect 方法中有使用 FindControlEx 方法，它是自訂援尋控制項的多載方法，是取代 FindControl 進階方法。程式碼中使用 FindControlEx 去是頁面中以遞迴方式尋找具有 IDataSource 介面的控制項，且 ID 屬性值為 TBDropDownList.ID 的屬性值。
step2. 執行資料來源控制項的 Select 方法
當找到資料來源控制項後 (如 SqlDataSource、ObjectDataSource ...等等)，執行其 DataSourceView.Select 方法，此方法需入一個 DataSourceViewSelectCallback 函式當作參數，當資料來源控制項取得資料後回呼我們指定的 OnDataSourceViewSelectCallback 函式中做後序處理。
step3. 將取得的資料來設定生 Items 的清單內容
在 OnDataSourceViewSelectCallback 函式中接到回傳的具 IEnumerable 介面的資料，有可能是 DataView、DataTable ...等型別的資料。利用 DataBinder.GetPropertyValue 來取得 DataTextField 及 DataValueField 設定的欄位值，逐一建立 ListItem 項目，並加入 Items 集合屬性中。
''' <summary>
''' 從關聯的資料來源擷取資料。
''' </summary>
Private Sub PerformSelect()
Dim oControl As Control
Dim oDataSource As IDataSource
Dim oDataSourceView As DataSourceView
'若未設定 DataSourceID 屬性則離開
If StrIsEmpty(Me.DataSourceID) Then Exit Sub
'找到具 IDataSource 介面的控制項
oControl = FindControlEx(Me.Control.Page, GetType(IDataSource), "ID", Me.DataSourceID)
If oControl Is Nothing Then Exit Sub
oDataSource = DirectCast(oControl, IDataSource)
oDataSourceView = oDataSource.GetView(String.Empty)
oDataSourceView.Select(DataSourceSelectArguments.Empty, _
New DataSourceViewSelectCallback(AddressOf Me.OnDataSourceViewSelectCallback))
End Sub
''' <summary>
''' 擷取資料的回呼函式。
''' </summary>
''' <param name="data">取得的資料。</param>
Private Sub OnDataSourceViewSelectCallback(ByVal data As IEnumerable)
Dim oCollection As ICollection
Dim oValue As Object
Dim oItem As ListItem
Me.Items.Clear()
If data Is Nothing Then Exit Sub
oCollection = TryCast(data, ICollection)
Me.Items.Capacity = oCollection.Count
For Each oValue In data
oItem = New ListItem()
If StrIsNotEmpty(Me.DataTextField) Then
oItem.Text = DataBinder.GetPropertyValue(oValue, DataTextField, Nothing)
End If
If StrIsNotEmpty(Me.DataValueField) Then
oItem.Value = DataBinder.GetPropertyValue(oValue, DataValueField, Nothing)
End If
Me.Items.Add(oItem)
Next
End Sub
四、測試程式
使用上篇中同一個案例做測試，同樣以 Northwnd 資料庫的 Products 資料表為例。在 GridView 加入自訂的 TBDropDownField 欄位繫結 CategoryID 欄位，並設定 DataSourceID、DataTextField、DataValueField 屬性；另外加入另一個 BoundField 的唯讀欄位，也同樣繫結 CategoryID 欄位來做比較。
<bee:TBDropDownField HeaderText="CategoryID"
SortExpression="CategoryID" DataField="CategoryID"
DataTextField="CategoryName" DataValueField="CategoryID"
DataSourceID="SqlDataSource2">
</bee:TBDropDownField>
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
SortExpression="CategoryID" ReadOnly="true" />
執行程式，在 GridView 瀏覽的模式時，TBDropDownField 的儲存格已經會呈現 Items 對應成員的顯示文字。
執行資料列編輯時，也可以正常顯示下拉清單的內容。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx
程式碼下載：ASP.NET Server Control - Day24.rar
Northwnd 資料庫下載：NORTHWND.rar
一、Items 屬性的問題
我們重新看一次原本 TBDropDownField 類別在處理 Items 屬性的資料繫結取得清單內容的程式碼，在覆寫 InitializeDataCell 方法中，當儲存格為編輯模式時，會呈現 TBDropDownList 控制項並設定取得 Items 清單內容的相關屬性，讓 TBDropDownList 自行去處理它的 Items 屬性的清單內容。
'由資料來源控制項取得清單項目
oDropDownList.DataSourceID = Me.DataSourceID
oDropDownList.DataTextField = Me.DataTextField
oDropDownList.DataValueField = Me.DataValueField
不知你有沒有發覺，我們無論在 InitializeDataCell 及 OnDataBindField 方法中，都沒有針對 TBDropDownList 控制項做任何 DataBind 動作，那它是怎麼從 DataSourceID 關聯的資料來源擷取資料呢？因為 GridView 在執行 DataBind 時，就會要求所有的子控制項做 DataBind，所以我們只要設定好 BDropDownList 控制項相關屬性後，當 TBDropDownList 自動被要求資料繫結時就會取得 Items 的清單內容。
當然使用 TBDropDownList 控制項去處理 Items 的資料繫結動作最簡單，可是這樣唯讀的儲存格只能顯示原始欄位值，無法呈現 Items 中對應成員的文字；除非無論唯讀或編輯狀態，都要建立 TBDropDownList 控制項去取得 Items 清單內容，而唯讀欄位使用 TBDropDownList.Items 去找到對應成員的顯示文字，不過這樣的作法會怪怪的，而且沒有執行效能率。所以比較好的辨法，就是由 TBDropDownField 類別自行處理 Items 的資料繫結，同時提供給唯讀狀態的
DataControlFieldCell 及編輯狀態的 TBDropDownList 使用。
二、由 TBDropDownField 類別處理 Items 屬性的資料繫結
我們要自行處理 Items 屬性來取得成員清單，在 InitializeDataCell 方法中無須處理 Items 屬性，只需產生儲存格需要的子控制項，未來在執行子控制項的 DataBinding 時的 OnDataBindField 方法中再來處理 Items 屬性。
Protected Overrides Sub InitializeDataCell( _
ByVal Cell As DataControlFieldCell, _
ByVal RowState As DataControlRowState)
Dim oDropDownList As TBDropDownList
Dim oControl As Control
If Me.CellIsEdit(RowState) Then
oDropDownList = New TBDropDownList()
oControl = oDropDownList
Cell.Controls.Add(oControl)
Else
oControl = Cell
End If
If (oControl IsNot Nothing) AndAlso MyBase.Visible Then
AddHandler oControl.DataBinding, New EventHandler(AddressOf Me.OnDataBindField)
End If
End Sub
在 OnDataBindField 方法中，我們加上一段處理 Items 屬性的程式碼如下，會利用 PerformSelecrt 私有方法，由關聯的資料來源 (即 DataSrouceID 指定的資料來源控制項) 擷取資料並產生 Items 的成員清單，在後面會詳細講解 PerformSelecrt 方法處理擷取資料的細節。因為 TBDropDownField 每個資料儲存格都會執行 OnDataBindField 方法，但 Items 取得成員清單的動作只需做一次即可，所以會以 FIsPerformSelect 區域變數來判斷是否已取得 Items 的成員清單，若已取過就不重新取得，這樣比較有執行效能。
If Not Me.DesignMode Then
If Not FIsPerformSelect Then
'從關聯的資料來源擷取資料
PerformSelect()
FIsPerformSelect = True
End If
End If
當取得儲存儲的對應的欄位值時，依此欄位值由 Items 集合去取得對應的 ListItem 成員，並以此 ListItem.Text 的文字內容來做顯示。
'由 Items 去取得對應成員的顯示內容
oListItem = Me.Items.FindByValue(CCStr(sText))
If oListItem IsNot Nothing Then
sText = oListItem.Text
End If
若是由 TBDropDownList 所引發的 OnDataBindField 方法時，使用 SetItems 私有方法將 TBDropDownField.Items 屬性複製給 TBDropDownList.Item 屬性。
ODropDownList = DirectCast(oControl, TBDropDownList)
SetItems(ODropDownList)
SetItems 私有方法的程式碼如下。
Private Sub SetItems(ByVal DropDownList As TBDropDownList)
Dim oItems() As ListItem
If Not Me.DesignMode Then
ReDim oItems(Me.Items.Count - 1)
Me.Items.CopyTo(oItems, 0)
DropDownList.Items.AddRange(oItems)
End If
End Sub
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx
四、測試程式
辛苦寫好 TBDropDownField 欄位類別時，接下來就是驗收成果的時候。我們以 Northwnd 資料...]]>
四、測試程式
辛苦寫好 TBDropDownField 欄位類別時，接下來就是驗收成果的時候。我們以 Northwnd 資料庫的 Products 資料表為例，將 TBDropDownList .DataField 設為 CategoryID 欄位來做測試。首先我們測試沒有 DataSoruceID 的情況，在 GridView 加入自訂的 TBDropDownField 欄位繫結 CategoryID 欄位，另外加入另一個 BoundField 的唯讀欄位，也同樣繫結 CategoryID 欄位來做比較。
<bee:TBDropDownField HeaderText="CategoryID"
SortExpression="CategoryID" DataField="CategoryID" >
<Items>
<asp:ListItem Value="">未對應</asp:ListItem>
<asp:ListItem Value="2">Condiments</asp:ListItem>
<asp:ListItem Value="3">Confections</asp:ListItem>
</Items>
</bee:TBDropDownField>
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
SortExpression="CategoryID" ReadOnly="true" />
執行程式，在 GridView 在唯讀模式，TBDropDownFIeld 可以正確的繫結 CategoryID 欄位值。
編輯某筆資料列進入編輯狀態，就會顯示 TBDropDownList 控制項，清單成員為我們在 Items 設定的內容。
使用 TBDropDownList 來做編輯欄位值，按下更新鈕，這時會執行 TBDropDownField.ExtractValuesFromCell 方法，取得儲存格中的值；最後由資料來源控制項將欄位值寫回資料庫。
接下來測試設定 TBDropDownField.DataSourceID 的情況，把 DataSourcID 指向含 Categories 資料表內容的 SqlDataSoruce 控制項。
<bee:TBDropDownField HeaderText="CategoryID"
SortExpression="CategoryID" DataField="CategoryID"
DataTextField="CategoryName" DataValueField="CategoryID" DataSourceID="SqlDataSource2">
</bee:TBDropDownField>
執行程式查看結果，可以發現 TBDropDownList 控制項的清單內容也可以正常顯示 SqlDataSoruce 控制項取得資料。
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx
step4. 處理資料繫結
當 GridView 控制項在執行資料繫結時，儲存格的控制項就會引發 DataBinding 事...]]>
step4. 處理資料繫結
當 GridView 控制項在執行資料繫結時，儲存格的控制項就會引發 DataBinding 事件，而這些事件會被導向 OnDataBindField 方法來統一處理儲存格中控制項的繫結動作。
''' <summary>
''' 將欄位值繫結至 BoundField 物件。
''' </summary>
''' <param name="sender">控制項。</param>
''' <param name="e">事件引數。</param>
Protected Overrides Sub OnDataBindField(ByVal sender As Object, ByVal e As EventArgs)
Dim oControl As Control
Dim ODropDownList As TBDropDownList
Dim oNamingContainer As Control
Dim oDataValue As Object '欄位值
Dim bEncode As Boolean '是否編碼
Dim sText As String '格式化字串
oControl = DirectCast(sender, Control)
oNamingContainer = oControl.NamingContainer
oDataValue = Me.GetValue(oNamingContainer)
bEncode = ((Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) AndAlso TypeOf oControl Is TableCell)
sText = Me.FormatDataValue(oDataValue, bEncode)
If TypeOf oControl Is TableCell Then
If (sText.Length = 0) Then
sText = " "
End If
DirectCast(oControl, TableCell).Text = sText
Else
If Not TypeOf oControl Is TBDropDownList Then
Throw New HttpException(String.Format("{0}: Wrong Control Type", Me.DataField))
End If
ODropDownList = DirectCast(oControl, TBDropDownList)
If Me.ApplyFormatInEditMode Then
ODropDownList.Text = sText
ElseIf (Not oDataValue Is Nothing) Then
ODropDownList.Text = oDataValue.ToString
End If
End If
End Sub
step5. 取得儲存格中的值
另外我們還需要覆寫 ExtractValuesFromCell 方法，取得儲存格中的值。這個方法是當 GridView 的編輯資料要準備寫入資料庫時，會經由 ExtractValuesFromCell 方法此來取得每個儲存格的值，並將這些欄位值加入 Dictionary 參數中，這個準備寫入的欄位值集合，可以在 DataSource 控制項的寫入資料庫的相關方法中取得使用。
''' <summary>
''' 使用指定 DataControlFieldCell 物件的值填入指定的 System.Collections.IDictionary 物件。
''' </summary>
''' <param name="Dictionary">用於儲存指定儲存格的值。</param>
''' <param name="Cell">包含要擷取值的儲存格。</param>
''' <param name="RowState">資料列的狀態。</param>
''' <param name="IncludeReadOnly">true 表示包含唯讀欄位的值，否則為 false。</param>
Public Overrides Sub ExtractValuesFromCell( _
ByVal Dictionary As IOrderedDictionary, _
ByVal Cell As DataControlFieldCell, _
ByVal RowState As DataControlRowState, _
ByVal IncludeReadOnly As Boolean)
Dim oControl As Control = Nothing
Dim sDataField As String = Me.DataField
Dim oValue As Object = Nothing
Dim sNullDisplayText As String = Me.NullDisplayText
Dim oDropDownList As TBDropDownList
If (((RowState And DataControlRowState.Insert) = DataControlRowState.Normal) OrElse Me.InsertVisible) Then
If (Cell.Controls.Count > 0) Then
oControl = Cell.Controls.Item(0)
oDropDownList = TryCast(oControl, TBDropDownList)
If (Not oDropDownList Is Nothing) Then
oValue = oDropDownList.Text
End If
ElseIf IncludeReadOnly Then
Dim s As String = Cell.Text
If (s = " ") Then
oValue = String.Empty
ElseIf (Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) Then
oValue = HttpUtility.HtmlDecode(s)
Else
oValue = s
End If
End If
If (Not oValue Is Nothing) Then
If TypeOf oValue Is String Then
If (CStr(oValue).Length = 0) AndAlso Me.ConvertEmptyStringToNull Then
oValue = Nothing
ElseIf (CStr(oValue) = sNullDisplayText) AndAlso (sNullDisplayText.Length > 0) Then
oValue = Nothing
End If
End If
If Dictionary.Contains(sDataField) Then
Dictionary.Item(sDataField) = oValue
Else
Dictionary.Add(sDataField, oValue)
End If
End If
End If
End Sub
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx
step2. 加入 TBBaseBoundField 的屬性
TBBaseBoundField 類別會內含 DropDown...]]>
step2. 加入 TBBaseBoundField 的屬性
TBBaseBoundField 類別會內含 DropDownList 控制項，所以加入設定 DropDownList 控制項的對應屬性；我們在 TBBaseBoundField 類別加入了 Items 、DataSourceID、DataTextField、DataValueField 屬性。其中 Items 屬性的型別與 DropDownList.Items 屬性相同，都是 ListItemCollection 集合類別，且 Items 屬性會儲存於 ViewState 中。
''' <summary>
''' 清單項目集合。
''' </summary>
< _
Description("清單項目集合。"), _
DefaultValue(CStr(Nothing)), _
PersistenceMode(PersistenceMode.InnerProperty), _
DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _
Editor(GetType(ListItemsCollectionEditor), GetType(UITypeEditor)), _
MergableProperty(False), _
Category("Default")> _
Public Overridable ReadOnly Property Items() As ListItemCollection
Get
If (FItems Is Nothing) Then
FItems = New ListItemCollection()
If MyBase.IsTrackingViewState Then
CType(FItems, IStateManager).TrackViewState()
End If
End If
Return FItems
End Get
End Property
''' <summary>
''' 資料來源控制項的 ID 屬性。
''' </summary>
Public Property DataSourceID() As String
Get
Return FDataSourceID
End Get
Set(ByVal value As String)
FDataSourceID = value
End Set
End Property
''' <summary>
''' 提供清單項目文字內容的資料來源的欄位。
''' </summary>
< _
Description("提供清單項目文字內容的資料來源的欄位。"), _
DefaultValue("") _
> _
Public Property DataTextField() As String
Get
Return FDataTextField
End Get
Set(ByVal value As String)
FDataTextField = value
End Set
End Property
''' <summary>
''' 提供清單項目值的資料來源的欄位。
''' </summary>
Public Property DataValueField() As String
Get
Return FDataValueField
End Get
Set(ByVal value As String)
FDataValueField = value
End Set
End Property
step3.建立儲存格內含的控制項
GridView 是以儲存格 (DataControlFieldCell) 為單位，我們要覆寫 InitializeDataCell 方法來建立儲存格中的控制項；當儲存格為可編輯狀態時，就建立 DropDownList 控制項並加入儲存格中，在此使用上篇文章提及的 TBDropDownList 控制項來取代，以解決清單成員不存在造成錯誤的問題。若未設定 DataSourceID 屬性時，則由 Items 屬性取得自訂的清單項目；若有設定 DataSourceID 屬性，則由資料來源控制項 (如 SqlDataSource、ObjectDataSource 控制項) 來取得清單項目。
當建立儲存格中的控制項後，需要以 AddHeadler 的方法，將此控制項的 DataBinding 事件導向 OnDataBindField 這個事件處理方法，我們要在 OnDataBindField 處理資料繫結的動作。
''' <summary>
''' 資料儲存格初始化。
''' </summary>
''' <param name="Cell">要初始化的儲存格。</param>
''' <param name="RowState">資料列狀態。</param>
Protected Overrides Sub InitializeDataCell( _
ByVal Cell As DataControlFieldCell, _
ByVal RowState As DataControlRowState)
Dim oDropDownList As TBDropDownList
Dim oItems() As ListItem
Dim oControl As Control
If Me.CellIsEdit(RowState) Then
oDropDownList = New TBDropDownList()
oControl = oDropDownList
Cell.Controls.Add(oControl)
If Not Me.DesignMode Then
If StrIsEmpty(Me.DataSourceID) Then
'自訂清單項目
ReDim oItems(Me.Items.Count - 1)
Me.Items.CopyTo(oItems, 0)
oDropDownList.Items.AddRange(oItems)
Else
'由資料來源控制項取得清單項目
oDropDownList.DataSourceID = Me.DataSourceID
oDropDownList.DataTextField = Me.DataTextField
oDropDownList.DataValueField = Me.DataValueField
End If
End If
Else
oControl = Cell
End If
If (oControl IsNot Nothing) AndAlso MyBase.Visible Then
AddHandler oControl.DataBinding, New EventHandler(AddressOf Me.OnDataBindField)
End If
End Sub
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx
程式碼下載：ASP.NET Server Control - Day23.rar
Northwnd 資料庫下載：NORTHWND.rar
一、選擇合適的父類別
一般自訂 GridView 的欄位類別時，大都是由 DataControlField 或 BoundField 繼承下來改寫。若是欄位不需繫結資料(如 CommandFIeld)，可以由 DataControlFIeld 繼承下來，若是欄位需要做資料繫結時(如 CheckBoxFIld，可以直接由 BoundField 繼承下來改寫比較方便。
DataControlField 類別是所有類型欄位的基底類別，BoundField 類別也是由 DataControlField 類別繼承下來擴展了資料繫結部分的功能，所以我們要實作含 DropDownList 的欄位，也是由 BoundField 繼承下來改寫。
二、自訂欄位基底類別
在此我們不直接繼承 BoundFIeld，而是先撰寫一個繼承 BoundField 命名為 TBBaseBoundField 的基底類別，此類別提供一些通用的屬性及方法，使我們更方便去撰寫自訂的欄位類別。
''' <summary>
''' 資料欄位基礎類別。
''' </summary>
Public MustInherit Class TBBaseBoundField
Inherits BoundField
Private FRowIndex As Integer = 0
''' <summary>
''' 資料列是否為編輯模式。
''' </summary>
''' <param name="RowState">資料列狀態。</param>
Public Function RowStateIsEdit(ByVal RowState As DataControlRowState) As Boolean
Return (RowState And DataControlRowState.Edit) <> DataControlRowState.Normal
End Function
''' <summary>
''' 資料列是否為新增模式。
''' </summary>
''' <param name="RowState">資料列狀態。</param>
Public Function RowStateIsInsert(ByVal RowState As DataControlRowState) As Boolean
Return (RowState And DataControlRowState.Insert) <> DataControlRowState.Normal
End Function
''' <summary>
''' 資料列是否為編輯或新增模式。
''' </summary>
''' <param name="RowState">資料列狀態。</param>
Public Function RowStateIsEditOrInsert(ByVal RowState As DataControlRowState) As Boolean
Return RowStateIsEdit(RowState) OrElse RowStateIsInsert(RowState)
End Function
''' <summary>
''' 判斷儲存格是否可編輯(新增/修改)。
''' </summary>
''' <param name="RowState">資料列狀態。</param>
Friend Function CellIsEdit(ByVal RowState As DataControlRowState) As Boolean
Return (Not Me.ReadOnly) AndAlso RowStateIsEditOrInsert(RowState)
End Function
''' <summary>
''' 資料列索引。
''' </summary>
Friend ReadOnly Property RowIndex() As Integer
Get
Return FRowIndex
End Get
End Property
''' <summary>
''' 儲存格初始化。
''' </summary>
''' <param name="Cell">要初始化的儲存格。</param>
''' <param name="CellType">儲存格類型。</param>
''' <param name="RowState">資料列狀態。</param>
''' <param name="RowIndex">資料列之以零起始的索引。</param>
Public Overrides Sub InitializeCell(ByVal Cell As DataControlFieldCell, ByVal CellType As DataControlCellType, _
ByVal RowState As DataControlRowState, ByVal RowIndex As Integer)
FRowIndex = RowIndex
MyBase.InitializeCell(Cell, CellType, RowState, RowIndex)
End Sub
''' <summary>
''' 是否需要執行資料繫結。
''' </summary>
''' <param name="RowState">資料列狀態。</param>
Friend Function RequiresDataBinding(ByVal RowState As DataControlRowState) As Boolean
If MyBase.Visible AndAlso StrIsNotEmpty(MyBase.DataField) AndAlso RowStateIsEdit(RowState) Then
Return True
Else
Return False
End If
End Function
End Class
三、實作 TBDropDownField 欄位類別
step1. 繼承 TBBaseBoundField 類別
首先新增一個類別，繼承 TBBaseBoundField 命名為 TBDropDownFIeld 類別，覆寫 CreateField 方法，傳回 TBDropDownFIeld 物件。
Public Class TBDropDownField
Inherits TBBaseBoundField
Protected Overrides Function CreateField() As System.Web.UI.WebControls.DataControlField
Return New TBDropDownField()
End Function
End Class
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx
三、解決 TBDropDownList 設定 DataSourceID 造成資料無法繫結的問題
要解決上述 TBDro...]]>
三、解決 TBDropDownList 設定 DataSourceID 造成資料無法繫結的問題
要解決上述 TBDropDownList 設定 DataSourceID 問題，需在設定 SelectedValue 屬性時，若 Items.Count=0 先用一個 FCachedSelectedValue 變數將正確的值先暫存下來，然後覆寫 PerformDataBinding 方法，當 DorpDownList 取得 DataSoruceID 所對應的項目清單內容後，因為這時 Items 的內容才會完整取回，再去設定一次 SelectedValue 屬性就可以正確的繫結資料。
Public Class TBDropDownList
Inherits DropDownList
Private FCachedSelectedValue As String
''' <summary>
''' 覆寫 SelectedValue 屬性。
''' </summary>
Public Overrides Property SelectedValue() As String
Get
Return MyBase.SelectedValue
End Get
Set(ByVal value As String)
If Me.Items.Count <> 0 Then
Dim oItem As ListItem = Me.Items.FindByValue(value)
If (oItem Is Nothing) Then
Me.SelectedIndex = -1 '當 Items 不存在時
Else
MyBase.SelectedValue = value
End If
Else
FCachedSelectedValue = value
End If
End Set
End Property
Protected Overrides Sub PerformDataBinding(ByVal data As System.Collections.IEnumerable)
MyBase.PerformDataBinding(data)
'DataSoruceID 資料繫結後再設定 SelectedValue 屬性值
If (Not FCachedSelectedValue Is Nothing) Then
Me.SelectedValue = FCachedSelectedValue
End If
End Sub
End Class
重新執行程式，切換到編輯模式時，TBDropDownList 就可以正確的繫結欄位值了。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx
程式碼下載：ASP.NET Server Control - Day22.rar
Northwnd 資料庫下載：NORTHWND.rar
一、覆寫 SelectedValue 屬性解決資料繫結的問題
DropDownList 控制項繫結錯誤的原因，可以由上圖的錯誤訊息可以大概得知是寫入 SelectedValue 屬性時發生的錯誤；所以我們繼承 DorpDownList 下來命名為 TBDropDownList，並覆寫 SelectedValue 屬性來解決這個問題。解決方式是在寫入 SelectedValue 屬性時，先判斷準備寫入的值是否存在項目清單中，存在的話才寫入 SelectedValue 屬性，若不存在則直接設定 SelectedIndex 屬性為 -1。
Public Class TBDropDownList
Inherits DropDownList
''' <summary>
''' 覆寫 SelectedValue 屬性。
''' </summary>
Public Overrides Property SelectedValue() As String
Get
Return MyBase.SelectedValue
End Get
Set(ByVal value As String)
Dim oItem As ListItem = Me.Items.FindByValue(value)
If (oItem Is Nothing) Then
Me.SelectedIndex = -1 '當 Items 不存在時
Exit Property
Else
MyBase.SelectedValue = value
End If
End Set
End Property
End Class
我們以 Northwnd 資料庫的 Products 資料表做為測試資料，事先定義 DropDownList 的 Items 內容，其中第一個加入 "未對應" 的項目，將 SelectedValue 屬性繫結至 CategoryID 欄位。
<bee:TBDropDownList ID="DropDownList1" runat="server"
SelectedValue='<%# Bind("CategoryID") %>'>
<asp:ListItem Value="">未對應</asp:ListItem>
<asp:ListItem Value="2">Condiments</asp:ListItem>
<asp:ListItem Value="3">Confections</asp:ListItem>
</bee:TBDropDownList>
當資料的 CategoryID 欄位值不存在於 DropDownList 的 Items 集合屬性中時，就會顯示第一個 "未對應" 的項目。
二、TBDropDownList 設定 DataSoruceID 產生的問題
上述的解決方法在筆者的「讓 DropDownList DataBind 不再發生錯誤」一文中已經有提及，不過有讀者發現另一個問題，就是當 DropDownList 設定 DataSourceID 時卻會發生資料無法正常繫結，以下就來解決這個問題。
我們設定 TBDropDownList 的 DataSoruceID 來取得項目清單的內容，將 DataSourceID 設定為另一個取得 Categories 資料表內容的 SqlDataSource 控制項。
<bee:TBDropDownList ID="DropDownList1" runat="server"
SelectedValue='<%# Bind("CategoryID") %>' DataSourceID="SqlDataSource2"
DataTextField="CategoryName" DataValueField="CategoryID">
</bee:TBDropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:Northwnd %>"
SelectCommand="SELECT CategoryID, CategoryName, Description, Picture FROM Categories"
ProviderName="<%$ ConnectionStrings:Northwnd.ProviderName %>" >
</asp:SqlDataSource>
當執行程式時，FormView 原本在瀏覽模式時的 CategoryID 欄位值為 7 (CategoryName 應為 Product)。
當按下「編輯」時切換到 EditItemTemplate 時，改用 TBDropDownList 繫結 CategoryID 欄位值，可以這時欲無法繫結正確的值。
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx
step2. 在智慧標籤面板加入屬性項目
DesignerA...]]>
step2. 在智慧標籤面板加入屬性項目
DesignerActionPropertyItem 類別是設定智慧標籤面上的屬性項目，DesignerActionPropertyItem 建構函式的第一個參數(memberName) 為屬性名稱，這個屬性指的是 TBDateEditActionList 類別中的屬性，所以要在 TBDateEditActionList 新增一個對應的屬性。
例如在智慧標籤中加入 AutoPostBack 屬性項目，則在 TBDateEditActionList 類別需有一個對應 AutoPostBack 屬性。
oItems.Add(New DesignerActionPropertyItem("AutoPostBack", _
"AutoPostBack", "Behavior", "是否引發 PostBack 動作。"))
TBDateEditActionList.AutoPostBack 屬性如下，其中 Me.Component 指的是目前的 TDateEdit 控制項，透過 GetPropertyValue 及 SetPropertyValue 方法來存取控制項的指定屬性。
''' <summary>
''' 是否引發 PostBack 動作。
''' </summary>
Public Property AutoPostBack() As Boolean
Get
Return CType(GetPropertyValue(Me.Component, "AutoPostBack"), Boolean)
End Get
Set(ByVal value As Boolean)
SetPropertyValue(Me.Component, "AutoPostBack", value)
End Set
End Property
''' <summary>
''' 設定物件的屬性值。
''' </summary>
''' <param name="Component">屬性值將要設定的物件。</param>
''' <param name="PropertyName">屬性名稱。</param>
''' <param name="Value">新值。</param>
Public Shared Sub SetPropertyValue(ByVal Component As Object, ByVal PropertyName As String, ByVal Value As Object)
Dim Prop As PropertyDescriptor = TypeDescriptor.GetProperties(Component).Item(PropertyName)
Prop.SetValue(Component, Value)
End Sub
''' <summary>
''' 取得物件的屬性值。
''' </summary>
''' <param name="Component">具有要擷取屬性的物件。</param>
''' <param name="PropertyName">屬性名稱。</param>
Public Shared Function GetPropertyValue(ByVal Component As Object, ByVal PropertyName As String) As Object
Dim Prop As PropertyDescriptor = TypeDescriptor.GetProperties(Component).Item(PropertyName)
Return Prop.GetValue(Component)
End Function
step3. 在智慧標籤面板加入方法項目
DesignerActionMethodItem 類別是設定智慧標籤面上的方法項目，DesignerActionPropertyItem 建構函式的第二個參數(memberName) 為方法名稱，這個方法指的是 TBDateEditActionList 類別中的方法，所以要在 TBDateEditActionList 新增一個對應的方法。
例如在智慧標籤中加入 About 方法項目，則在 TBDateEditActionList 類別需有一個對應 About 方法。
oItems.Add(New DesignerActionMethodItem(Me, "About", _
"關於 TDateEdit 控制項", "About", _
"關於 TDateEdit 控制項。", True))
TBDateEditActionList 的 About 方法只是單純顯示一個訊息視窗，一般你可以在這方法加入任何想在設計階段處理的動作。例如自動產生 GridView 的欄位、在 FormView 加入控制項並自動排版，這些都可以在此實現的。
Public Sub About()
MsgBox("TDateEdit 是結合 The Coolest DHTML Calendar 日期選擇器實作的控制項")
End Sub
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx
程式碼下載：ASP.NET Server Control - Day21.rar
一、TDateEdit 控制項介紹
TDateEdit 控制項是筆者之前在部落格中實作的一個日期控制項，如下圖所示。它是結合 JavaScript 的 The Coolest DHTML Calendar 日期選擇器實作的控制項，我已將 TDateEdit 控制項的相關程式碼含入 Bee.Web.dll 組件中。TDateEdit 控制項的相關細節可以參考筆者部落格下面幾篇文章有進一步說明，本文將以 TDateEdit 控制項為例，只針對實作智慧標籤的部分做進一步說明。
日期控制項實作教學(1) - 結合 JavaScript
日期控制項實作教學(2) - PostBack 與 事件
TBDateEdit 日期控制項 - 1.0.0.0 版 (Open Source)
二、控制項加入智慧標籤
控制項要加入智慧標籤要實作控制項的 Designer，我們繼承 ControlDesigner 命名為 TBDateEditDesigner，然後覆寫 ActionLists 屬性，此屬性即是傳回智慧標籤中所包含的項目清單集合。在 ActionLists 屬性中一般會先加入父類別的 ActionLists 屬性，再加入自訂的 ActionList 類別，這樣才可以保留原父類別中智慧標籤的項目清單。
''' <summary>
''' TBDateEdit 控制項的設計模式行為。
''' </summary>
Public Class TBDateEditDesigner
Inherits System.Web.UI.Design.ControlDesigner
''' <summary>
''' 取得控制項設計工具的動作清單集合。
''' </summary>
Public Overrides ReadOnly Property ActionLists() As DesignerActionListCollection
Get
Dim oActionLists As New DesignerActionListCollection()
oActionLists.AddRange(MyBase.ActionLists)
oActionLists.Add(New TBDateEditActionList(Me))
Return oActionLists
End Get
End Property
End Class
我們自訂的 ActionList 為 TBDateEditActionList 類別，它在智慧標籤呈現的項目清單如下圖所示，接下去我們會說明 TBDateEditActionList 類別的內容。
三、自訂智慧標籤面板的項目清單集合
DesignerActionList 類別定義用於建立智慧標籤面板的項目清單的基底類別，所以我們首先繼承 DesignerActionList 命名為 TBDateEditActionList。
''' <summary>
''' 定義 TBDateEdit 控制項智慧標籤面板的項目清單集合。
''' </summary>
Public Class TBDateEditActionList
Inherits DesignerActionList
''' <summary>
''' 建構函式。
''' </summary>
Public Sub New(ByVal owner As ControlDesigner)
MyBase.New(owner.Component)
End Sub
End Class
接下來要覆寫 GetSortedActionItems 方法，它會回傳 DesignerActionItemCollection 集合型別，此集合中會傳回要顯示在智慧標籤面板的項目清單集合，所以我們要在 DesignerActionItemCollection 集合中加入我們要呈現的項目清單內容。
''' <summary>
''' 傳回要顯示在智慧標籤面板的項目清單集合。
''' </summary>
Public Overrides Function GetSortedActionItems() As System.ComponentModel.Design.DesignerActionItemCollection
Dim oItems As New DesignerActionItemCollection()
'在此加入智慧標籤面板的項目清單
Return oItems
End Function
step1. 在智慧標籤面板加入靜態標題項目
首先介紹 DesignerActionHeaderItem 類別，它是設定靜態標題項目，例如我們在 TDateEdit 的智慧標籤中加入「行為」、「外觀」二個標題項目，其中 DesignerActionHeaderItem 建構函式的 category 參數是群組名稱，我們可以將相關的項目歸類到同一個群組。
Dim oItems As New DesignerActionItemCollection()
oItems.Add(New DesignerActionHeaderItem("行為", "Behavior"))
oItems.Add(New DesignerActionHeaderItem("外觀", "Appearance"))
[超過字數限制，下一篇接續本文]
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx
一、設計階段程式碼的錯誤
如果撰寫 Designer、Editor、ActionList 等設計階段的程式碼，當這些設計階段的程式碼發生錯誤，可能會發生設計頁面中控制項的錯誤情形，如下圖所示。因為控制項專案本身非啟動專案，在測試網站的設計頁面若控制項發生異常時會直接釋出錯誤，無法偵錯設計階段的程式碼；若真得要偵錯誤設計階段的問題，就要使用另一個 VS2008 來偵錯。
二、設定起始外部程式
要偵錯控制項設計階段的程式碼，要先將控制項專案(Bee.Web)設定為啟時專案。然後設定控制項專案的「屬性」，在「偵錯」頁籤中的起始動作選擇「起始外部程式」，選擇 VS2008 的執行檔位置，預設為 C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe。
三、開始偵錯設計階段程式碼
step1. 控制項專案開始偵錯
在設計階要偵錯的程式碼下中斷點，在控制項專案按下 F5 開始偵錯，這時會啟動另一個新的 VS2008 執行檔。
step2. 在新的 VS2008 的工具箱加入控制項
在新的 VS2008 中新增一個測試網站，在工具箱按右鍵執行「選擇項目」開啟「選擇工具箱項目」視窗，然後按「瀏覽」鈕按選擇控制項組件(Bee.Web.dll)，將要偵錯的控制項加入工具箱中。
step3. 將控制項拖曳至頁面做設計動作
在新的 VS2008 中，將控制項拖曳至頁面，就會開始執行設計階段的程式碼，特定的設計動作就會執行到相對的設計階段程式碼，當執行到之前下的中斷點時就可以開始偵錯了。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/21/5741.aspx
程式碼下載：ASP.NET Server Control - Day19.rar
一、控制項設計階段的 HTML 碼
Web 伺服器控制項的設計模式行為都是透過 ControlDesigner 來處理，連設計階段時控制項的外觀也是如此；控制項在設計階段與執行執行時呈現的外觀不一定相同，當然大部分會儘量一致，使其能所見即所得。
控制項在設計階段的 HTML 碼是透 ControlDesigner.GetDesignTimeHtml 方法來處理，在 ControlDesigner.GetDesignTimeHtml 預設會執行控制項的 RenderControl 方法，所以大部分的情況下設計階段與執行階段輸出的 HTML 碼會相同。當控制項的 Visible=False 時，執行階段是完全不會輸出 HTML 碼，可是在設計階段時會特別將控制項設定 Visible=True，使控制項能完整呈現。
ControlDesigner.GetDesignTimeHtml 方法
Public Overridable Function GetDesignTimeHtml() As String
Dim writer As New StringWriter(CultureInfo.InvariantCulture)
Dim writer2 As New DesignTimeHtmlTextWriter(writer)
Dim errorDesignTimeHtml As String = Nothing
Dim flag As Boolean = False
Dim visible As Boolean = True
Dim viewControl As Control = Nothing
Try
viewControl = Me.ViewControl
visible = viewControl.Visible
If Not visible Then
viewControl.Visible = True
flag = Not Me.UsePreviewControl
End If
viewControl.RenderControl(writer2)
errorDesignTimeHtml = writer.ToString
Catch exception As Exception
errorDesignTimeHtml = Me.GetErrorDesignTimeHtml(exception)
Finally
If flag Then
viewControl.Visible = visible
End If
End Try
If ((Not errorDesignTimeHtml Is Nothing) AndAlso (errorDesignTimeHtml.Length <> 0)) Then
Return errorDesignTimeHtml
End If
Return Me.GetEmptyDesignTimeHtml
End Function
二、自訂控制項的 Designer
以 TBToolbar 為例，若我們在 RenderContents 方法未針對 Items.Count=0 做輸出 HTML 的處理，會發現未設定 Items 屬性時，在設計頁面上完全看不到 TBToolbar 控制項；像這種控制項設計階段的 HTML 碼，就可以自訂控制項的 Designer 來處理。
繼承 ControlDesigner 命名為 TBToolbarDesigner，這個類別是用來擴充 TBToolbar 控制項的設計模式行為。我們可以覆寫 GetDesignTimeHtml 方法，處理設計階段表示控制項的 HTML 標記，此方法回傳的 HTML 原始碼就是控制項呈現在設計頁面的外觀。所以我們可以在 TBToolbar.Items.Count=0 時，輸出一段提示的 HTML 碼，這樣當 TBToolbar 未設定 Items 屬性時一樣可以在設計頁面上呈現控制項。
''' <summary>
''' 擴充 TBToolbar 控制項的設計模式行為。
''' </summary>
Public Class TBToolbarDesigner
Inherits System.Web.UI.Design.ControlDesigner
''' <summary>
''' 用來在設計階段表示控制項的 HTML 標記。
''' </summary>
Public Overrides Function GetDesignTimeHtml() As String
Dim sHTML As String
Dim oControl As TBToolbar
oControl = CType(ViewControl, TBToolbar)
If oControl.Items.Count = 0 Then
sHTML = "<div style=""background-color: #C0C0C0; border:solid 1px; width:200px"">請設定 Items 屬性</div>"
Else
sHTML = MyBase.GetDesignTimeHtml()
End If
Return sHTML
End Function
End Class
在 TBToolbar 控制項套用 DesignerAttribute 設定自訂的 TBToolbarDesigner 類別。
<Designer(GetType(TBToolbarDesigner))> _
Public Class TBToolbar
Inherits WebControl
End Class
重建控制項組件，切換到設計頁面上的看 TBToolbar 控制項未設定 Items 屬性時的外觀，就是我們在 TBToolbarDesigner.GetDesignTimeHtml 方法回傳的 HTML 碼。
如果你覺得上述設計階段的控制項有點太陽春，我們也可以輸出類似 SqlDataSource 控制項的外觀，將未設定 Items 屬性時輸出 HTML 改呼叫 CreatePlaceHolderDesignTimeHtml 方法。
If oControl.Items.Count = 0 Then
sHTML = MyBase.CreatePlaceHolderDesignTimeHtml("請設定 Items 屬性")
Else
sHTML = MyBase.GetDesignTimeHtml()
End If
來看一下這樣修改後的結果，是不是比較專業一點了呢。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/20/5726.aspx
程式碼下載：ASP.NET Server Control - Day18.rar
一、自訂集合屬性編輯器
我們先看一下 TBToolbar.Items 屬性套用的 EditorAttribute，它是使用 CollectionEditor 類別來當作屬性編輯器，所以我們就是要繼承 CollectionEditor 類別下來修改成自訂的屬性編輯器。
< _
Editor(GetType(CollectionEditor), GetType(UITypeEditor)) _
> _
Public ReadOnly Property Items() As TBToolbarItemCollection
新增一個繼承 CollectionEditor 的 TBToolbarItemCollectionEditor 類別，並加入建構函式。此類別屬於 Bee.WebControls.Design 命名空間，通常我們會把設計階段使用的類別歸類到特別的命名空間便於管理及使用。
Namespace WebControls.Design
Public Class TBToolbarItemCollectionEditor
Inherits CollectionEditor
''' <summary>
''' 建構函式。
''' </summary>
''' <param name="Type">型別。</param>
Public Sub New(ByVal Type As Type)
MyBase.New(Type)
End Sub
End Class
End Namespace
我們可以先修改 Items 屬性的 EditorAttribute，看看我們自訂的 TBToolbarItemCollectionEditor 是否能正常運作。不過這個屬性編輯器跟原本的沒什麼差異，因為我們只是單純繼承下來沒做任何異動，接下去我們就要開始來修改這個屬性編輯器。
< _
Editor(GetType(TBToolbarItemCollectionEditor), GetType(UITypeEditor)) _
> _
Public ReadOnly Property Items() As TBToolbarItemCollection
二、加入不同型別的集合成員
再來我們就要著手修改集合屬性編輯器，讓它可以加入不同型別的集合成員。覆寫 CollectionEditor 的 CanSelectMultipleInstances 方法傳回 True，這個方法是設定 CollectionEditor 是否允許加入多種不同型別的集合成員。
Protected Overrides Function CanSelectMultipleInstances() As Boolean
Return True
End Function
再來覆寫 CreateNewItemTypes 方法，這個方法是取得這個集合編輯器可包含的資料型別，將集合可包含的資料型別以陣列傳回。
''' <summary>
''' 取得這個集合編輯器可包含的資料型別。
''' </summary>
''' <returns>這個集合可包含的資料型別陣列。</returns>
Protected Overrides Function CreateNewItemTypes() As System.Type()
Dim ItemTypes(2) As System.Type
ItemTypes(0) = GetType(TBToolbarButton)
ItemTypes(1) = GetType(TBToolbarTextbox)
ItemTypes(2) = GetType(TBToolbarLabel)
Return ItemTypes
End Function
重建控制項組件，使用 Items 的集合屬性編輯器，就可以發現「加入」鈕的下拉清單就會出現我們所定義的三種型別的集合成員，如此可以加入不同型別的成員了。
三、設定清單項目的顯示文字
在成員清單項目中預設會顯示成員含命名空間的型別，若我們要修改成比較有識別的顯示文字，例如 TBToolbarButton(Key=Add) 可以顯示「按鈕-Add」，這時可以覆寫 GetDisplayText 方法來設定清單項目的顯示文字。
''' <summary>
''' 取出指定清單項目的顯示文字。
''' </summary>
Protected Overrides Function GetDisplayText(ByVal value As Object) As String
If TypeOf value Is TBToolbarButton Then
Return String.Format("按鈕 - {0}", CType(value, TBToolbarButton).Key)
ElseIf TypeOf value Is TBToolbarTextbox Then
Return "文字框"
ElseIf TypeOf value Is TBToolbarLabel Then
Return String.Format("標籤 - {0}", CType(value, TBToolbarLabel).Text)
Else
Return value.GetType.Name
End If
End Function
四、集合編輯器的屬性視窗的屬性描述
一般屬性視窗下面都會有屬性描述，可以集合屬性編輯器中的屬性視窗下面竟沒有屬性描述。若我們要讓它的屬性描述可以顯示，可以覆寫 CreateCollectionForm 方法，取得集合屬性編輯表單，再去設定表單上的 PropertyGrid.HelpVisible
= True 即可。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/19/5721.aspx
程式碼下載：ASP.NET Server Control - Day17.rar
一、不同型別的集合成員
我們的需求是讓工具列可以加入 Button、TextBox、Label 三種子控制項，所以繼承原來的 TBToolbarItem (只保留 Enabled 屬性)，新增了 TBToolbarButton、TBToolbarTextbox、TBToolbarLabel 三個類別。
這些新增的成員類別都是繼承至 TBToolbarItem，所以在 aspx 程式碼中，手動輸入 Items 的成員時，就會列出這幾種定義的成員型別。
二、建立不同型別集合成員的子控制項
因為 Items 屬性的成員具不同型別，所以我們要改寫 RenderContents 方法，判斷成員型別來建立對應類型的子控制項。若為 TBToolbarButton 型別建立 Button 控制項、若為 TBToolbarTextbox 型別則建立 TextBox 控制項、若為 TBToolbarLabel 型別則建立 Label 控制項。其中 TBToolbarButton 建立的控制項為 TBButton，這個控制項是我們在「 [ASP.NET 控制項實作 Day3] 擴展現有伺服器控制項功能」一文中實作的具詢問訊息的按鈕控制項。
''' <summary>
''' 覆寫 RenderContents 方法。
''' </summary>
Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim oItem As TBToolbarItem
Dim oControl As Control
For Each oItem In Me.Items
If TypeOf oItem Is TBToolbarButton Then
'建立 Button 控制項
oControl = CreateToolbarButton(CType(oItem, TBToolbarButton))
ElseIf TypeOf oItem Is TBToolbarTextbox Then
'建立 Textbox 控制項
oControl = CreateToolbarTextbox(CType(oItem, TBToolbarTextbox))
Else
'建立 Label 控制項
oControl = CreateToolbarLabel(CType(oItem, TBToolbarLabel))
End If
Me.Controls.Add(oControl)
Next
MyBase.RenderContents(writer)
End Sub
''' <summary>
''' 建立工具列按鈕。
''' </summary>
Private Function CreateToolbarButton(ByVal Item As TBToolbarButton) As Control
Dim oButton As TBButton
Dim sScript As String
oButton = New TBButton()
oButton.Text = Item.Text
oButton.Enabled = Item.Enabled
oButton.ID = Item.Key
oButton.ConfirmMessage = Item.ConfirmMessage
sScript = Me.Page.ClientScript.GetPostBackEventReference(Me, Item.Key)
oButton.OnClientClick = sScript
Return oButton
End Function
''' <summary>
''' 建立工具列文字框。
''' </summary>
Private Function CreateToolbarTextbox(ByVal Item As TBToolbarTextbox) As Control
Dim oTextBox As TextBox
oTextBox = New TextBox
Return oTextBox
End Function
''' <summary>
''' 建立工具列標籤。
''' </summary>
Private Function CreateToolbarLabel(ByVal Item As TBToolbarLabel) As Control
Dim oLabel As Label
oLabel = New Label()
oLabel.Text = Item.Text
Return oLabel
End Function
我們手動在 aspx 程式碼中輸入不同型別的成員，TBToolbar 控制項就會呈現對應的子控制項。
三、執行程式
執行程式，就可以在瀏覽器看到呈現的工具列，當按下「刪除」時也會出現我們定義的詢問訊息。
輸出的 HTML 碼如下
<span id="TBToolbar1">
<input type="submit" name="TBToolbar1$Add" value="新增" onclick="__doPostBack('TBToolbar1','Add');" id="TBToolbar1_Add" />
<input type="submit" name="TBToolbar1$Edit" value="修改" onclick="__doPostBack('TBToolbar1','Edit');" id="TBToolbar1_Edit" />
<input type="submit" name="TBToolbar1$Delete" value="刪除" onclick="if (confirm('確定刪除嗎？')==false) {return false;}__doPostBack('TBToolbar1','Delete');" id="TBToolbar1_Delete" />
<span>關鍵字</span>
<input name="TBToolbar1$ctl01" type="text" />
<input type="submit" name="TBToolbar1$Search" value="搜尋" onclick="__doPostBack('TBToolbar1','Search');" id="TBToolbar1_Search" />
</span>
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/18/5718.aspx
程式碼下載：ASP.NET Server Control - Day16.rar
一、繼承 WebControl 實作 TBToolbar 控制項
step1. 新增繼承 WebControl 的 TBToolbar 控制項
新增繼承 WebControl 的 TBToolbar 控制項，你也可以直接原修改原 TBToolbar 控制項，繼承對象由 CompositeControl 更改為 WebControl即可。跟之前一樣在 TBToolbar 控制項加入 Items 屬性及 Click 事件。
另外 TBToolbar 控制項需實作 INamingContainer 界面，此界面很特殊沒有任何屬性或方法，INamingContainer 界面的作用是子控制項的 ClientID 會在前面加上父控制項的 ClickID，使每個子控制項有唯一的 ClientID。
step2. 建立工具列按鈕集合
覆寫 RenderContents 方法，將原本 TBToolbar (複合控制項) 的 CreateChildControls 方法中建立工具列按鈕程式碼，搬移至 RenderContents 方法即可。
Private Sub ButtonClickEventHandler(ByVal sender As Object, ByVal e As EventArgs)
Dim oButton As Button
Dim oEventArgs As ClickEventArgs
oButton = CType(sender, Button)
oEventArgs = New ClickEventArgs()
oEventArgs.Key = oButton.ID
OnClick(oEventArgs)
End Sub
''' <summary>
''' 覆寫 RenderContents 方法。
''' </summary>
Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim oItem As TBToolbarItem
Dim oButton As Button
For Each oItem In Me.Items
oButton = New Button()
oButton.Text = oItem.Text
oButton.Enabled = oItem.Enabled
oButton.ID = oItem.Key
AddHandler oButton.Click, AddressOf ButtonClickEventHandler
Me.Controls.Add(oButton)
Next
If Me.Items.Count = 0 AndAlso Me.DesignMode Then
oButton = New Button()
oButton.Text = "請設定 Items 屬性。"
Me.Controls.Add(oButton)
End If
MyBase.RenderContents(writer)
End Sub
上述的直接搬移過來的程式碼還有個問題，就是原來的使用 AddHandler 來處理按鈕事件的方式變成沒有作用了？因為現在不是複合式控制項，當前端的按鈕 PostBack 傳回伺服端時，TBToolbar 不會事先建立子控制槓，所以機制會找不到原來產生的按鈕，也就無法使用 AddHandler 來處理事件了。
AddHandler oButton.Click, AddressOf ButtonClickEventHandler
step3. 處理 Click 事件
因為不能使用 AddHandler 來處理按鈕事件，所以我們就自行使用 Page.ClientScript.GetPostBackEventReference 方法來產生 PostBack 動作的用戶端指令碼，按鈕的 OnClientClick 去執行 PostBack 的動作。
For Each oItem In Me.Items
oButton = New Button()
oButton.Text = oItem.Text
oButton.Enabled = oItem.Enabled
oButton.ID = oItem.Key
sScript = Me.Page.ClientScript.GetPostBackEventReference(Me, oItem.Key)
oButton.OnClientClick = sScript
Me.Controls.Add(oButton)
Next
TBToolar 控制項輸出的 HTML 碼如下
<span id="TBToolbar1">
<input type="submit" name="TBToolbar1$Add" value="新增" onclick="__doPostBack('TBToolbar1','Add');"
id="TBToolbar1_Add" />
<input type="submit" name="TBToolbar1$Edit" value="修改" onclick="__doPostBack('TBToolbar1','Edit');"
id="TBToolbar1_Edit" />
<input type="submit" name="TBToolbar1$Delete" value="刪除" onclick="__doPostBack('TBToolbar1','Delete');"
id="TBToolbar1_Delete" />
</span>
要自行處理 PostBack 的事件，需實作 IPostBackEventHandler 介面，在 RaisePostBackEvent 方法來引發 TBToolbar 的 Click 事件。
Public Class TBToolbar
Inherits WebControl
Implements INamingContainer
Implements IPostBackEventHandler
Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements
System.Web.UI.IPostBackEventHandler.RaisePostBackEvent
Dim oEventArgs As ClickEventArgs
oEventArgs = New ClickEventArgs()
oEventArgs.Key = eventArgument
Me.OnClick(oEventArgs)
End Sub
End Class
二、測試程式
在測試頁面上放置 TBToolbar 控制項，在 Click 事件撰寫測試程式碼。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/17/5706.aspx
程...]]>
程式碼下載：ASP.NET Server Control - Day15.rar
一、複合控制項建立子控制項的時機
還記得我們之前介紹複合控制項時有談到 CompositeControl 類別會確保我們存取子控制項時，它的子控制項一定會事先建立；也就是當我們使用 Controls 屬性去存取子控制項時，一定會執行 CreateChildControls 方法，以確保子控制項事先被建立。我們看一下 CompositeControl 類別的 Controls 屬性的寫法就可以了解其中的原由，在存取 CompositeControl.Controls 屬性時，它會先執行 Control.EnsureChildControls 方法；而 EnsureChildControls 方法會去判斷子控制項是否已建立，若未建立會去執行 CreateChildControls 方法，這也就是為什麼 CompositeControl 有辨法確保子控制項事先被建立的原因。
CompositeControl.Controls 屬性如下
Public Overrides ReadOnly Property Controls As ControlCollection
Get
Me.EnsureChildControls
Return MyBase.Controls
End Get
End Property
Control.EnsureChildControls 方法如下
Protected Overridable Sub EnsureChildControls()
If (Not Me.ChildControlsCreated AndAlso Not Me.flags.Item(&H100)) Then
Me.flags.Set(&H100)
Try
Me.ResolveAdapter
If (Not Me._adapter Is Nothing) Then
Me._adapter.CreateChildControls
Else
Me.CreateChildControls
End If
Me.ChildControlsCreated = True
Finally
Me.flags.Clear(&H100)
End Try
End If
End Sub
二、複合控制項隱藏的問題
我們以上篇的 TBToolbar 控制項為例，撰寫一些測試案例來說明複合控制項的問題。在撰寫測試案例之前，我們先修改一下 TBToolbar 控制項，覆寫 LoadViewState 及 SaveViewState 方法，將 Items 屬性儲存於 ViewState 中以維持狀態。
在測試頁面上放置「測試一」、「測試二」、「PostBack」三個按鈕，這三個按鈕的動作如下。
「測試一」按鈕：在工具列直接新增一個按鈕。
「測試二」按鈕：先使用 FindControl 取得工具列的按鈕，然後在在工具列再新增一個按鈕。
「PostBack」按鈕：單純執行 PostBack，不撰寫程式碼。
三個按鈕的程式碼如下所示。
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
Button1.Click
Dim oItem As TBToolbarItem
'加入新按鈕
oItem = New TBToolbarItem()
oItem.Text = "新按鈕"
oItem.Key = "NewButton"
TBToolbar1.Items.Add(oItem)
Me.Response.Write("「測試一」按鈕")
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
Button2.Click
Dim oItem As TBToolbarItem
Dim oButton As Button
'先執行 FindControl 去取得 ID="Add" 的按鈕
oButton = TBToolbar1.FindControl("Add")
'再加入新按鈕
oItem = New TBToolbarItem()
oItem.Text = "新按鈕"
oItem.Key = "NewButton"
TBToolbar1.Items.Add(oItem)
Me.Response.Write("「測試二」按鈕")
End Sub
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
Button3.Click
'單純 PostBack，無程式碼
Me.Response.Write("「PostBack」按鈕")
End Sub
案例一：執行「測試一」按鈕，在工具列直接新增一個按鈕。
當按下「測試一」按鈕時，工具列可以正常加入我們新增的按鈕。
案例二：執行「測試二」按鈕，先使用 FindControl 取得工具列的按鈕，然後在在工具列再新增一個按鈕。
重新執行程式，當按下「測試二」按鈕時，你會發現奇怪的現象，工具列竟然沒有加入我們新增的按鈕？
此時再按下「PostBack」按鈕，工具列才會出現我們剛剛加入的按鈕。
為什麼會發生這種怪現象呢？其實原因很簡單，因為 FindControl 時會去存取 Controls 屬性，而這時子控制項已經被建立了；而之前再用 Items 屬性加入新按鈕，它已經不會在重建子控制項，導致第一時間沒有加入新按鈕。不過 Items 屬性會被存在 ViewState 中，所以當執行「PostBack」按鈕時，就會出現我們剛剛新增的按鈕。
三、解決方式
要解決上述「測試二」的問題，只要覆寫 TBToolbar 控制項的 Render 方法，在 Render 前執行 RecreateChildControls 方法，強制重建子控制項。
''' <summary>
''' 覆寫 Render 方法。
''' </summary>
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Me.RecreateChildControls()
MyBase.Render(writer)
End Sub
再一次執行「測試二」的動作，就會發現執行結果就會正常了。
四、結語
在複合控制項的 Render 前執行 RecreateChildControls 方法可以強制重建子控制項，可是這樣又會引發另一個問題，那就是當直接存取子控制項去修改子控制項的屬性後，一旦在 Render 又重建子控制項，那之前設定子控制項狀態又被全部重建了，所以需特別注意有這樣的情形。另外複合控制項有可能重覆執行建立子控制的動作，在執行效能上也比較不佳。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/16/5695.aspx
程式碼下載：ASP.NET Server Control - Day14.rar
一、工具列項目集合類別
工具列包含多個按鈕，新增 TBToolbarItem 類別來描述工具列項目，TBToolbarItem 類別包含 Key、Text、Enabled 三個屬性；而 TBToolbarItemCollection 為 TBToolbarItem 的集合類別來描述工具列按鈕集合。
二、實作 TBToolbar 控制項
step1. 新增繼承 CompositeControl 的 TBToolbar 控制項
< _
Description("工具列控制項。"), _
ParseChildren(True, "Items"), _
ToolboxData("<{0}:TBToolbar runat=server ></{0}:TBToolbar>") _
> _
Public Class TBToolbar
Inherits CompositeControl
End Class
step2. 新增 Items 屬性，描述工具列項目集合
''' <summary>
''' 工具列項目集合。
''' </summary>
< _
Description("工具列項目集合。"), _
PersistenceMode(PersistenceMode.InnerProperty), _
DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _
Editor(GetType(CollectionEditor), GetType(UITypeEditor)) _
> _
Public ReadOnly Property Items() As TBToolbarItemCollection
Get
If FItems Is Nothing Then
FItems = New TBToolbarItemCollection()
End If
Return FItems
End Get
End Property
step3. 新增 Click 事件
TBToolbar 類別新增 Click 事件，當按下按鈕時會引發 Click 事件，由 Click 的事件引數 e.Key 可以得知使用者按了那個按鈕。
''' <summary>
''' Click 事件引數。
''' </summary>
Public Class ClickEventArgs
Inherits System.EventArgs
Private FKey As String = String.Empty
''' <summary>
''' 項目鍵值。
''' </summary>
Public Property Key() As String
Get
Return FKey
End Get
Set(ByVal value As String)
FKey = value
End Set
End Property
End Class
''' <summary>
''' 按下工具列按鈕所引發的事件。
''' </summary>
< _
Description("按下工具列按鈕所引發的事件。") _
> _
Public Event Click(ByVal sender As Object, ByVal e As ClickEventArgs)
''' <summary>
''' 引發 Click 事件。
''' </summary>
Protected Overridable Sub OnClick(ByVal e As ClickEventArgs)
RaiseEvent Click(Me, e)
End Sub
step4. 建立工具列按鈕集合
覆寫 CreateChildControls 方法，依 Items 屬性的設定，來建立工具列中的按鈕集合。每個按鈕的 Click 事件都導向 ButtonClickEventHandler 方法，來處理所有按鈕的 Click 動作，並引發 TBToolbar 的 Click 事件。
Private Sub ButtonClickEventHandler(ByVal sender As Object, ByVal e As EventArgs)
Dim oButton As Button
Dim oEventArgs As ClickEventArgs
oButton = CType(sender, Button)
oEventArgs = New ClickEventArgs()
oEventArgs.Key = oButton.ID
OnClick(oEventArgs)
End Sub
''' <summary>
''' 建立子控制項。
''' </summary>
Protected Overrides Sub CreateChildControls()
Dim oItem As TBToolbarItem
Dim oButton As Button
For Each oItem In Me.Items
oButton = New Button()
oButton.Text = oItem.Text
oButton.Enabled = oItem.Enabled
oButton.ID = oItem.Key
AddHandler oButton.Click, AddressOf ButtonClickEventHandler
Me.Controls.Add(oButton)
Next
MyBase.CreateChildControls()
End Sub
三、測試程式
在頁面拖曳 TBToolbar 控制項，並設定 Items 屬性，如入新增、修改、刪除三個按鈕。
在 TBToolbar 控制項的 Click 事件加入測試程式碼，輸出引發 Click 事件的 e.Key。
Protected Sub TBToolbar1_Click(ByVal sender As Object, ByVal e As Bee.Web.WebControls.TBToolbar.ClickEventArgs) Handles TBToolbar1.Click
Me.Response.Write(String.Format("您按了 {0}", e.Key))
End Sub
執行程式，當按了工具列上的按鈕時，就會引發 Click 事件，並輸出該按鈕對應的 Key。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/15/5687.aspx
程式碼下...]]>
程式碼下載：ASP.NET Server Control - Day13.rar
一、網頁 Flash 的原始 HTML 碼
我們先觀查在網頁中套用 Flash 插件的原始 HTML 碼，以點部落首頁抬頭的 Flash 原始碼為例如下，其中 <object> tag 的 codebase attribute 是指 Flash 插件的下載位置及版本。
<object id="ShockwaveFlash2" height="90" width="728"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://files.dotblogs.com.tw/dotjum/ad/debug.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="#000000" name="bgcolor"/>
<embed height="90" width="728" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high"
src="http://files.dotblogs.com.tw/dotjum/ad/debug.swf"/>
</object>
在 <object> tag 中必要的 attribute 為 classid、codebase、movie、width、height，而 <embed> tag 的必要 attribute 為 src、pluginspage、width、height，其他選擇性的 attribute 可參閱以下網頁。
Flash OBJECT and EMBED tag attributes
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn\_12701
二、實作 TFlash 控制項
了解 Flash 的原始 HTML 碼後，我們就可以開始著手撰寫 TBFlash 控制項，想辨法來輸出所需要的 HTML 碼。
step1. 新增 TBFlash 控制項繼承至 TBActiveX
我們先在 TBActiveX 控制項新增一個 CodeBase 屬性，用來設定 ActiveX 插入的下載位置及版本，然後新增 TBFlash 控制項繼承至 TBActiveX，並在建構函式中設定 MyBase.ClassId 及 MyBase.CodeBase 屬性。
Public Class TBFlash
Inherits TBActiveX
''' <summary>
''' 建構函式。
''' </summary>
Sub New()
MyBase.ClassId = "D27CDB6E-AE6D-11CF-96B8-444553540000"
MyBase.CodeBase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
End Sub
End Class
step2. 加入相關屬性
在 TBFlash 加入 MovieUrl 及 Quality 屬性，MovieUrl 為 Flash 檔案來源，Quality 為影音品質。
step3. 輸出 Flash 相關參數
覆寫 CreateChildControls 方法，輸出 MovieUrl 及 Quality 屬性對應的參數，以及在 Params 集合屬性設定的參數。
''' <summary>
''' 加入 MediaPlayer 參數。
''' </summary>
''' <param name="Name">參數名稱。</param>
''' <param name="Value">參數值。</param>
Private Sub AddParam(ByVal Name As String, ByVal Value As String)
Dim oParam As TBActiveXParam
oParam = New TBActiveXParam(Name, Value)
Me.Params.Add(oParam)
End Sub
''' <summary>
''' 建立 Embed 標記。
''' </summary>
Private Function CreateEmbed() As HtmlControls.HtmlGenericControl
Dim oEmbed As HtmlControls.HtmlGenericControl
Dim oParam As TBActiveXParam
oEmbed = New HtmlControls.HtmlGenericControl()
oEmbed.TagName = "embed"
oEmbed.Attributes("src") = Me.ResolveClientUrl(Me.MovieUrl)
oEmbed.Attributes("pluginspage") = "http://www.macromedia.com/go/getflashplayer"
oEmbed.Attributes("height") = Me.Height.ToString
oEmbed.Attributes("width") = Me.Width.ToString
'Embed 的 Attributes 加入 Params 集合屬性的設定
For Each oParam In Me.Params
If oParam.Name <> "movie" Then
oEmbed.Attributes(oParam.Name) = oParam.Value
End If
Next
Return oEmbed
End Function
''' <summary>
''' 建立子控制項。
''' </summary>
Protected Overrides Sub CreateChildControls()
Dim oEmbed As HtmlControls.HtmlGenericControl
'加入 movie 參數
AddParam("movie", Me.ResolveClientUrl(Me.MovieUrl))
'加入 quality 參數
If Me.Quality <> EQuality.NotSet Then
AddParam("quality", Me.Quality.ToString.ToLower)
End If
MyBase.CreateChildControls()
oEmbed = CreateEmbed()
Me.Controls.Add(oEmbed)
End Sub
三、測試程式
在頁面拖曳 TBFlash 控制項，設定 MovieUrl 及 Quality 屬性，若有需要加入其他參數，可自行設定 Params 集合屬性。執行程式就可以在頁面上看到呈現出來的 Flash。
<bee:TBFlash ID="TBFlash1" runat="server" Height="90px"
MovieUrl="http://files.dotblogs.com.tw/dotjum/ad/debug.swf" Quality="High"
Width="728px">
</bee:TBFlash>
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/14/5674.aspx
程式碼下載：ASP.NET Server Control - Day12.rar
一、改寫 TBMediaPlayer 控制項
TBMediaPlayer 控制項原本是繼承 WebControl，現改繼承對象為 TBActiveX，來重新改寫 TBMediaPlayer 控制項。
step1. TBMediaPlayer 繼承至 TBActiveX
新增 TBMediaPlayer 控制項，繼承至 TBActiveX，並在建構函式設定 Media Player ActiveX 的 ClassId。
Public Class TBMediaPlayer
Inherits TBActiveX
''' <summary>
''' 建構函式。
''' </summary>
Sub New()
MyBase.ClassId = "6BF52A52-394A-11D3-B153-00C04F79FAA6"
End Sub
End Class
step2. 加入相關屬性
跟原來的 TBMediaPlayer 控制項一樣，加入 Url、AutoStart、UIMode 三個屬性，可視情形加入需要設定的屬性。
step3. 加入 Media Player 參數
覆寫 CreateChildControls 方法，動態依屬性設定在 Params 集合屬性加入參數。雖然 TBMediaPlayer 控制項目前只有 Url、AutoStart、UIMode 三個屬性，但是父類別 TBActiveX 具有 Params 集合屬性，所以開發人員可以視需求加入其他未定義的參數。
''' <summary>
''' 加入 MediaPlayer 參數。
''' </summary>
''' <param name="Name">參數名稱。</param>
''' <param name="Value">參數值。</param>
Private Sub AddParam(ByVal Name As String, ByVal Value As String)
Dim oParam As TBActiveXParam
oParam = New TBActiveXParam(Name, Value)
Me.Params.Add(oParam)
End Sub
''' <summary>
''' 覆寫 CreateChildControls 方法。
''' </summary>
Protected Overrides Sub CreateChildControls()
'加入 Url 參數
If Me.Url <> String.Empty Then
AddParam("URL", Me.ResolveClientUrl(Me.Url))
End If
'加入 autoStart 參數
If Me.AutoStart Then
AddParam("autoStart", "true")
End If
'加入 uiMode 參數
If Me.UIMode <> EUIMode.NotSet Then
AddParam("uiMode", Me.UIMode.ToString)
End If
MyBase.CreateChildControls()
End Sub
二、執行程式
在頁面拖曳 TBMediaPlayer 控制項，設定 Url、AutoStart、UIMode 屬性，若有需要加入其他參數，可自行設定 Params 集合屬性。執行程式就可以在頁面上看到呈現出來的 Media Player。
<bee:TBMediaPlayer ID="TBMediaPlayer1" runat="server" AutoStart="True"
Height="249px" Url="D:\Movie_01.wmv" Width="250px">
</bee:TBMediaPlayer>
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/13/5663.aspx
程式碼下載：ASP.NET Server Control - Day11.rar
一、集合屬性
ActiveX 的 Param 參數是集合屬性，所以我們定義了 TBActiveParam 類別描述 ActiveX 參數，包含 Name 及 Value 屬性；而 TBActiveXParamCollection 為 TBActiveParam 的集合類別，用來描述 ActiveX 參數集合。TBActiveXParamCollection 繼承 CollectionBase，加入操作集合的 Add、Insert、Remove、IndexOf、Contains 等方法，關於集合屬性的用法可以參閱筆者在部落格的「撰寫伺服器控制項的集合屬性 (CollectionBase)」一文中有詳細說明。
二、實作 ActiveX 伺服器控制項
step1. 新增繼承 WebControl 的 TBActiveX
step2. 覆寫 TagKey 屬性，傳回 object 的 Tag
Protected Overrides ReadOnly Property TagKey() As HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Object
End Get
End Property
step3. 新增 ClassId 屬性，描述 ActiveX 的 ClassId
定義 ClassId 屬性，並覆寫 AddAttributesToRender 來輸出此屬性。
''' <summary>
''' 覆寫 AddAttributesToRender 方法。
''' </summary>
Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter)
'加入 MediaPlayer ActiveX 元件的 classid
writer.AddAttribute("classid", String.Format("clsid:{0}", Me.ClassId))
MyBase.AddAttributesToRender(writer)
End Sub
step4. 新增 Params 屬性，描述 ActiveX 的參數集合
定義 Params 屬性，型別為 TBActiveXParamCollection 類別，套用 EditorAttribute 設定 CollectionEditor 為集合編輯器。
''' <summary>
''' ActiveX 控制項參數集合。
''' </summary>
< _
Description("控制項參數集合。"), _
PersistenceMode(PersistenceMode.InnerProperty), _
DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _
Editor(GetType(CollectionEditor), GetType(UITypeEditor)) _
> _
Public ReadOnly Property Params() As TBActiveXParamCollection
Get
If FParams Is Nothing Then
FParams = New TBActiveXParamCollection()
End If
Return FParams
End Get
End Property
當編輯 Params 時，會使用的 CollectionEditor 集合編輯器。
step5. 輸出 ActiveX 參數
覆寫 CreateChildControls 方法，在此方法依 Params 集合屬性定義依序來輸出 ActiveX 的參數集合。
Private Sub AddParam(ByVal Name As String, ByVal Value As String)
Dim oParam As HtmlControls.HtmlGenericControl
oParam = New HtmlControls.HtmlGenericControl("param")
oParam.Attributes.Add("name", Name)
oParam.Attributes.Add("value", Value)
Me.Controls.Add(oParam)
End Sub
''' <summary>
''' 建立子控制項。
''' </summary>
Protected Overrides Sub CreateChildControls()
Dim oParam As TBActiveXParam
'加入 ActiveX 參數集合
For Each oParam In Me.Params
AddParam(oParam.Name, oParam.Value)
Next
MyBase.CreateChildControls()
End Sub
三、執行程式
上一篇我們使用 TBMediaPlayer 控制項來設定 Media Player，在此我們改用 TBActiveX 控制項來設定 Media Player，一樣可以呈現相同的結果。
<bee:TBActiveX ID="TBActiveX1" runat="server"
ClassId="6BF52A52-394A-11D3-B153-00C04F79FAA6" Height="250px" Width="250px">
<Params>
<bee:TBActiveXParam Name="URL" Value="d:/Movie_01.wmv" />
<bee:TBActiveXParam Name="autoStart" Value="true" />
</Params>
</bee:TBActiveX>
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/12/5659.aspx
程式碼下載：ASP.NET Server Control - Day10.rar
一、Media Player 原始 HTML 碼
在製作 Media Player 控制項之前，你需要先了解 Media Player 原本的 HTML 碼，控制項的作用就是想辨法把這些寫在 aspx 中的 HTML 碼交由控制項來輸出而已，以下為網頁中加入 Media Player 的 HTML 碼範例。
<OBJECT id="VIDEO" width="320" height="240"
style="position:absolute; left:0;top:0;"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<PARAM NAME="URL" VALUE="your file or url">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
<PARAM NAME="AutoStart" VALUE="True">
<PARAM name="uiMode" value="none">
<PARAM name="PlayCount" value="9999">
</OBJECT>
在下面的網頁有 Media Player 相關參數說明。
http://www.mioplanet.com/rsc/embed\_mediaplayer.htm
二、實作 Media Player 控制項
step1.首先新增由 WebControl 繼承下來的 TBMediaPlayer 類別。
Public Class TBMediaPlayer
Inherits WebControl
End Class
step2.覆寫 TagKey 屬性，傳回 object 的 Tag。
Protected Overrides ReadOnly Property TagKey() As System.Web.UI.HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Object
End Get
End Property
step3.輸出 HTML Tag 的 Attribute
在 object Tag 中包含 style、classid、type 二個 Attribute，WebControl 本身會處理 style，所以我們只需覆寫 AddAttributesToRender 方法，處理 classid 及 type 二個 Attribute，記得覆寫 AddAttributesToRender 方法時最後要加入 MyBase.AddAttributesToRender(writer)，才會執行父類別的 AddAttributesToRender 方法。
''' <summary>
''' 覆寫 AddAttributesToRender 方法。
''' </summary>
Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
'加入 MediaPlayer ActiveX 元件的 classid
writer.AddAttribute("classid", "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6")
writer.AddAttribute("type", "application/x-oleobject")
MyBase.AddAttributesToRender(writer)
End Sub
step4.加入 Url 屬性
加入指定播放檔案來源的 Url 屬性，其中套用 EditorAttribute 設定 UrlEditor，使用 Url 專用的編輯器來設定屬性。
''' <summary>
''' 播放檔案來源。
''' </summary>
< _
Description("播放檔案來源"), _
Bindable(True), _
Category("Appearance"), _
Editor(GetType(UrlEditor), GetType(UITypeEditor)), _
UrlProperty(), _
DefaultValue("") _
> _
Public Property Url() As String
Get
Return FUrl
End Get
Set(ByVal value As String)
FUrl = value
End Set
End Property
step5.輸出 Url 參數
接下來覆寫 CreateChildControls 方法，輸出 Url 參數。
''' <summary>
''' 加入參數。
''' </summary>
''' <param name="Name">參數名稱。</param>
''' <param name="Value">參數值。</param>
Private Sub AddParam(ByVal Name As String, ByVal Value As String)
Dim oParam As HtmlControls.HtmlGenericControl
oParam = New HtmlControls.HtmlGenericControl("param")
oParam.Attributes.Add("name", Name)
oParam.Attributes.Add("value", Value)
Me.Controls.Add(oParam)
End Sub
Protected Overrides Sub CreateChildControls()
'加入 Url 參數
AddParam("url", Me.ResolveClientUrl(Me.Url))
MyBase.CreateChildControls()
End Sub
step6.輸出 Media Player 其他參數
你可以將 Media Player 的參數設定皆使用相對應的屬性來設定，然後使用 step5 的方式來輸出所有設定的參數值。
三、Media Player 控制項程式碼
Media Player 控制項的完整程式碼如下，此控制項只加入 URL、AutoStart、UIMode 三個參數，你可以視需求情形將使用到的參數定義為屬性來做設定即可。
因為此處有字元數限制，完整的程式碼請參閱筆者部落格相同文章
http://www.dotblogs.com.tw/jeff377/archive/2008/10/11/5655.aspx
四、執行程式
把 TBMediaPlayer 控制項拖曳至頁面，設定好屬性後，執行程式就可以在頁面上看到呈現出來的 Media Player。
<bee:TBMediaPlayer ID="TBMediaPlayer1" runat="server" Height="250px"
Width="250px" Url="~/test.wmv" />
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/11/5655.aspx
六、ToolboxDataAttribute 類別<...]]>
六、ToolboxDataAttribute 類別
作用：指定當自訂控制項從工具箱拖曳到頁面時，為此自訂控制項產生的預設標記。
當我們新增一個伺服器控制項，它就會預設在控制項類別套用 ToolboxDataAttribute，定義在控制項在 aspx 程式碼中的標記。
<ToolboxData("<{0}:TBButton runat=server ></{0}:TBButton>")> _
Public Class TBButton
Inherits System.Web.UI.WebControls.Button
End Class
七、DefaultPropertyAttribute 類別
作用：指定類別的預設屬性。
下面的範例中，MyTextbox 類別套用 DefaultPropertyAttribute，設定 Text 屬性為預設屬性。
<DefaultProperty("Text")> _
Public Class MyTextbox
Inherits WebControl
Public Property Text() As String
Get
Return CType(Me.ViewState("Text"), String)
End Get
Set(ByVal value As String)
Me.ViewState("Text") = value
End Set
End Property
End Class
八、DefaultEventAttribute 類別
作用：指定控制項的預設事件。
下面的範例中，MyTextbox 類別套用 DefaultEventAttribute，設定 TextChanged 為預設屬性。
<DefaultEvent("TextChanged")> _
Public Class MyTextbox
Inherits WebControl
''' <summary>
''' TextChanged 事件。
''' </summary>
Public Event TextChanged As EventHandler
End Class
當設計階段在頁面上的 MyTextbox 控制項點二下時，就會產生預設事件的處理函式。
Protected Sub MyTextbox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyTextbox3.TextChanged
End Sub
九、LocalizableAttribute 類別
作用：指定屬性是否應該當地語系化。
當屬性套用設為為 true 的 LocalizableAttribute 時，其屬性值會儲存在資源檔中，未來不需修改程式碼就可以將這些資源檔當地語系化。
<Localizable(True)> _
Public Property Text() As String
Get
Return CType(Me.ViewState("Text"), String)
End Get
Set(ByVal value As String)
Me.ViewState("Text") = value
End Set
End Property
十、DesignerAttribute 類別
作用：設定控制項在設計階段服務的類別。
指定一個設計階段的服務類別，來管理控制項在設計階段的行為，例如控制項的設計階段外觀、智慧標籤內容。例如下面範例的 TBGridView 控制項就定義了 TBGridViewDesigner 來實作設計階段的行為，未來的章節中也會介紹如何實作控制項的 Designer。
< Designer(GetType(TBGridViewDesigner)) > _
Public Class TBGridView
Inherits GridView
End Class
十一、EditorAttribute 類別
作用：指定在屬性視窗中編輯屬性值的編輯器。
例如 ListBox 控制項的 Items 屬性，在屬性視窗編輯 Items 屬性時，會彈出 Items 集合屬性的編輯器。以下範例就是定義 Items 屬性的編輯器類別為 TBListItemsCollectionEditor，未來的章節中也會介紹如何實作屬性的 Editor。
<Editor(GetType(TBListItemsCollectionEditor), GetType(System.Drawing.Design.UITypeEditor))> _
Public Overrides ReadOnly Property Items() As ListItemCollection
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/10/5653.aspx
一、DescriptionAttribute 類別
作用：指定控制項或屬性的描述。
當 DescriptionAttribute 套用至控制項的類別時，設定的描述內容就會出現在工具箱中控制項的提示。
<Description("按鈕控制項")> _
Public Class TBButton
Inherits System.Web.UI.WebControls.Button
End Class
當 DescriptionAttribute 套用至控制項的屬性時，在屬性視窗下面就會出現設定的屬性描述內容。
<Description("詢問訊息")> _
Public Property ConfirmMessage() As String
二、DefaultValueAttribute 類別
作用：指定屬性的預設值。
使用 DefaultValueAttribute 設定屬性的預設值，若設定的屬性值與預設值相同時，此屬性值就不會出現在 aspx 程式碼中；筆者強烈建議屬性一定套用 DefaultValueAttribute，一來在 aspx 中的程式碼會比較少，另外一個重點是若因為某些因素需要修改屬性的預設值時，所有已開發頁面的控制項屬性值會一併變更；因為當初屬性值是預設值，沒有被寫入 aspx 程式碼中，所以一但控制項的屬性預設值變更，頁面已佈屬的控制項的屬性值就會全面適用。
Private FConfirmMessage As String = String.Empty
<DefaultValue("")> _
Public Property ConfirmMessage() As String
Get
Return FConfirmMessage
End Get
Set(ByVal value As String)
FConfirmMessage = value
End Set
End Property
三、CategoryAttribute 類別
作用：指定屬性或事件的分類名稱，當屬性視窗設定為 [分類] 模式時，以群組方式來顯示屬性或事件。
例如設定 ConfirmMessage 屬性在 "Behavior" 分類，則 ConfirmMessage 屬性會被歸類到「行為」分類。
<Category("Behavior")> _
Public Property ConfirmMessage() As String
四、BindableAttribute 類別
作用：指定成員是否通常使用於繫結。
在資料繫結設定視窗中中，指定屬性是否預設會出現在屬性清單中。
<Bindable(True)> _
Public Property ConfirmMessage() As String
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/09/5647.aspx
一、加入控制項圖示檔
首先要準備一個 16 x 16 的點陣圖(bmp)，如下所示。
將此圖檔加入至「伺服器控制項專案」中，可以如下圖所示，用一個特定的資料夾來儲存所有工具箱的圖示。
然後在圖檔的屬性視窗中，設定建置動作為「內嵌資源」。
二、設定控制項的圖示
首先定義一個 TBResource 類別，此為一個空的類別，其命名空間需與根命名空間相同，做為引用資源檔時使用。並加上控制項圖示的 WebResource 定義，因為根命名空間是 Bee.Web，而圖檔名稱為 TBButton.bmp，所以定義如下所示。
假設我們要設定 TBButton 的工具箱圖示，則在 TBButton 類別套用 ToolboxBitmapAttribute 如下，其中第一個參數為 GetType(TBResource)，第二個參數為圖檔檔名。
重新編輯伺服器控制項專案，再將 Bee.Web.dll 組件的控制項加入工具箱中，你就可以發現 TBButton 的圖示已經變成設定的圖示了。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/08/5624.aspx
一、IPostBackEventHandler 與 IPostBackDataHandler 介面
控制項要處理 PostBack 產生的事件，必須實作 IPostBackEventHandler 或 IPostBackDataHandler 介面，這二個介面有什麼差別呢？例如 Button 是實作IPostBackEventHandler 介面，由控制項產生的 PostBack 直接引發事件，如 Button 的 Click 事件。例如 TextBox 是實作 IPostBackDataHandler 介面，當頁面產生 PostBack 時，會傳用戶端輸入的新值給控制項，由控制項本身去決定是否引發該事件；以 TextBox 舉例來說，它會判斷新值與舊值不同時才會引發 TextChanged 事件。
二、IPostBackEventHandler 介面實作
首先介紹 IPostBackEventHandler 介面，它包含 RaisePostBackEvent 方法，控制項在此方法中需處理要引發那些事件。我們繼承 WebControl 撰寫 MyButton 類別來說明 IPostBackEventHandler 介面，我們簡化控制項程式碼直接在 Render 方法輸入按鈕的 HTML 原始碼，並定義一個 Click 事件。實作 IPostBackEventHandler 介面的 RaisePostBackEvent 方法，在此方法中直接引發 Click 事件。
Public Class MyButton
Inherits WebControl
Implements IPostBackEventHandler
''' <summary>
''' Click 事件。
''' </summary>
Public Event Click As EventHandler
''' <summary>
''' 引發 Click 事件。
''' </summary>
Private Sub OnClick(ByVal e As EventArgs)
RaiseEvent Click(Me, e)
End Sub
Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent
Dim e As New EventArgs()
OnClick(e) '引發 Click 事件
End Sub
''' <summary>
''' 覆寫 Render 方法。
''' </summary>
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim sHTML As String
sHTML = String.Format("<INPUT TYPE=Submit Name={0} Value = '按鈕'/>", Me.UniqueID)
writer.Write(sHTML)
End Sub
End Class
在頁面上拖曳 MyButton 控制項，在屬性視窗找到 Click 事件，點二下產生 Click 事件處理函式，並撰寫測試程式碼如下。
Protected Sub MyButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyButton1.Click
Me.Page.Response.Write("MyButton Click 事件")
End Sub
執行程式，當按下 MyButton 按鈕時，就會執行它的 RaisePostBackEvent 方法，進而引發 Click 事件，也就會執行 Click 事件處理函式的程式碼。
三、IPostBackDataHandler 介面實作
IPostBackDataHandler 介面包含 LoadPostData 及 RaisePostDataChangedEvent 方法，當頁面 PostBack 時，會尋找具 IPostBackDataHandler 介面的控制項，先執行LoadPostData 方法，控制項在 LoadPostData 方法中會判斷用戶端傳入值決定是否引發事件，若 LoadPostData 傳回 True 表示要引發事件，此時會執行RaisePostDataChangedEvent 方法去決定要引發那些事件，反之傳回 False 表示不引發事件。
我們繼承 WebControl 撰寫 MyText 類別來說明 IPostBackDataHandler 介面，我們簡化控制項程式碼直接在 Render 方法輸入文字框的 HTML 原始碼，並定義一個 TextChanged 事件。在 LoadPostData 方法中我們會判斷用戶端傳入值與目前的值是否不相同，不相同時才會傳回 True，此時才會執行 RaisePostDataChangedEvent 方法，進而引發 TextChanged 事件。
Public Class MyTextbox
Inherits WebControl
Implements IPostBackDataHandler
Public Property Text() As String
Get
Return CType(Me.ViewState("Text"), String)
End Get
Set(ByVal value As String)
Me.ViewState("Text") = value
End Set
End Property
''' <summary>
''' TextChanged 事件。
''' </summary>
Public Event TextChanged As EventHandler
''' <summary>
''' 引發 TextChanged 事件。
''' </summary>
Private Sub OnTextChanged(ByVal e As EventArgs)
RaiseEvent TextChanged(Me, e)
End Sub
Public Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As System.Collections.Specialized.NameValueCollection) As Boolean Implements System.Web.UI.IPostBackDataHandler.LoadPostData
'前端使用者輸入值
Dim oNewValue As String = postCollection.Item(postDataKey)
If oNewValue <> Me.Text Then
Me.Text = oNewValue
Return True
Else
Return False
End If
End Function
Public Sub RaisePostDataChangedEvent() Implements System.Web.UI.IPostBackDataHandler.RaisePostDataChangedEvent
Dim e As New EventArgs()
'引發 TextChanged 事件
OnTextChanged(e)
End Sub
''' <summary>
''' 覆寫 Render 方法。
''' </summary>
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim sHTML As String
sHTML = String.Format("<INPUT Type=text Name={0} Value={1} >", Me.UniqueID, Me.Text)
writer.Write(sHTML)
End Sub
End Class
在頁面上拖曳 MyTextbox 及 MyButton 控制項，在 MyButton 的 Click 及 MyTextbox 的 TextChanged 事件撰寫如下測試程式碼。
Protected Sub MyButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyButton1.Click
Me.Page.Response.Write("MyButton Click 事件")
Me.Page.Response.Write("<br/>")
End Sub
Protected Sub MyTextbox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyTextbox1.TextChanged
Me.Page.Response.Write("MyTextbox TextChanged 事件")
Me.Page.Response.Write("<br/>")
End Sub
執行程式，在 MyTextbox 輸入 "A"，再按下 MyButton，因為 MyTextbox 的值「空字串->"A"」，所以會引發 MyTextbox 的 TextChanged 事件及 MyButton 的 Click 事件。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
]]>當你加入一個「ASP.NET 伺服器控制項」時，類別中預設會有一個 Text 屬性寫法的範例如下所示，屬性的讀寫都是直接存取 ViewState，這是一般常見的控制項屬性寫法。可是這種屬性的寫法是沒有效率的，因為 ViewState 的成員是 Object 型別，每次讀取屬性時都是由 ViewState 取出指定鍵值的成員再轉型為屬性的型別，寫入屬性的動作也是直接寫入 ViewState 中。
Property Text() As String
Get
Dim s As String = CStr(ViewState("Text"))
If s Is Nothing Then
Return String.Empty
Else
Return s
End If
End Get
Set(ByVal Value As String)
ViewState("Text") = Value
End Set
End Property
比較好的方式應該是讀取 ViewState 成員只做一次型別轉換的動作，而寫入 ViewState 的動作可以在 Render 前做批次寫入的動作即可。為了達到這樣的需求，我們可以覆寫 LoadViewState 及 SaveViewState 方法來處理屬性與 ViewState 的存取動作；當控制項初始化後會執行 LoadViewState 方法，來載入 ViewState 還原的控制項狀態，當控制項 Render 之前，會執行 SaveViewState 方法，將控制項的最終狀態存入 ViewState 中，也就是在此方法之後對控制項所做的任何變更都將會被忽略。
我們改寫屬性的寫法，不直接用 ViewState 來存取屬性，而是改用「屬性區域變數」來存取屬性，在 LoadViewState 時載入 ViewState 到屬性區域變數，而 SaveViewState 時再將屬性區域變數寫入 ViewState 中。我們依此方式將 Text 屬性改寫如下。
Private FText As String
Property Text() As String
Get
Return FText
End Get
Set(ByVal Value As String)
FText = Value
End Set
End Property
''' <summary>
''' 載入 ViewState 還原控制項狀態。
''' </summary>
Protected Overrides Sub LoadViewState(ByVal savedState As Object)
If Not (savedState Is Nothing) Then
' Load State from the array of objects that was saved at vedViewState.
Dim myState As Object() = CType(savedState, Object())
If Not (myState(0) Is Nothing) Then
MyBase.LoadViewState(myState(0))
End If
If Not (myState(1) Is Nothing) Then
FText = CType(myState(1), String)
End If
End If
End Sub
''' <summary>
''' 將控制項狀態寫入 ViewState 中。
''' </summary>
Protected Overrides Function SaveViewState() As Object
Dim baseState As Object = MyBase.SaveViewState()
Dim myState(1) As Object
myState(0) = baseState
myState(1) = FText
Return myState
End Function
利用上述的方式，我們可以在 LoadViewState 批次載入所有屬性值，而在 SaveViewState 批次寫入屬性值，如此在讀取屬性就不用一直做型別轉換的動作以改善效率。
結語
雖然屬性一般都是儲存於 ViewState 中，不過若是一些無關緊要的屬性或是完全不會執行階段就變更的屬性，可以考慮不需要將這些屬性儲存於 ViewState 中；因為 ViewState 是個兩面刃，ViewState 可以很輕易幫我們維護屬性值，不過相對的也增加了面頁的傳輸量，所以可以視實際情形來決定屬性是否要儲存於 ViewState 中。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/07/5601.aspx
一、CompositeControl 類別的特性
CompositeControl 類別是抽象類別，它會實作 INamingContaner 介面，INamingContaner 介面會在子控制項的 ClinetID 加上父控制項的 ID，以確保頁面上控制項的 ClientID 是唯一的。繼承 CompositeControl 類別一般都是覆寫 CreateChildControls 方法，在此方法中將建立子控制項並加入 Controls 集合屬性中；當存取其子控制項時，若子控制項未建立，會執行 CreateChildControls 方法，以會確保所有子控制項皆已在存取 ControlCollection 之前建立。
二、日期下拉清單輸入器
我們繼承 CompositeControl 類別，命名為 TBDropDownDate。這個控制項會包含年月日三個下拉清單(DropDownList)，所以我們只要在 CreateChildControls 方法中依序建立年月日的 DropDownList 子控制項，並加入 Controls 集合屬性中即可。
''' <summary>
''' 日期下拉清單輸入器。
''' </summary>
< _
ToolboxData("<{0}:TBDropDownDate runat=server></{0}:TBDropDownDate>") _
> _
Public Class TBDropDownDate
Inherits System.Web.UI.WebControls.CompositeControl
Protected Overrides Sub CreateChildControls()
Dim oYear As DropDownList
Dim oMonth As DropDownList
Dim oDay As DropDownList
Dim N1 As Integer
'年下拉清單區間為 1950-2010 (年區間可以用屬性來設定)
oYear = New DropDownList
oYear.ID = "Year"
For N1 = 1950 To 2010
oYear.Items.Add(N1.ToString)
Next
Me.Controls.Add(oYear) '加入子控制項
Me.Controls.Add(New LiteralControl("年"))
'月下拉清單區間為 1-12
oMonth = New DropDownList
oMonth.ID = "Month"
For N1 = 1 To 12
oMonth.Items.Add(N1.ToString)
Next
Me.Controls.Add(oMonth) '加入子控制項
Me.Controls.Add(New LiteralControl("月"))
'日下拉清單區為為 1-31
oDay = New DropDownList
oDay.ID = "Day"
For N1 = 1 To 12
oDay.Items.Add(N1.ToString)
Next
Me.Controls.Add(oDay) '加入子控制項
Me.Controls.Add(New LiteralControl("日"))
End Sub
End Class
在設定階段拖曳 TBDropDownDate 到頁面上，就可以看到我們在 CreateChildControls 方法中所加入的子控制項。
執行程式，檢視它的 HTML 原始碼，會發現年月日的子控制項的 ClientID 都會在原 ID 前加上父控制項的 ID，這樣命名規則可以確保所有的控制項的 ClinetID 都是唯一值。
<span id="TBDropDownDate1">
<select name="TBDropDownDate1$Year" id="TBDropDownDate1_Year">
....省略
<select name="TBDropDownDate1$Month" id="TBDropDownDate1_Month">
....省略
<select name="TBDropDownDate1$Day" id="TBDropDownDate1_Day">
</span>
三、結語
我們已經看過三類伺服器控制項的簡單案例，不過這三個案例都只是簡單說明控制項 UI 的部分，一個完整的控制項需具備屬性、方法、事件、設計階段支援...等，在後面的文章中，我們將陸續針對這些部分做詳細的介紹。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/05/5583.aspx
一、擴展 Button 控制項：按鈕加上詢問訊息
按下按鈕執行某些動作前，有時會詢問使用者是否執行該動作；例如按下刪除鈕，會詢問使用者是否確定要執行刪除的動作。當然這只需要簡單的 JavaScript 就可以完成，不過相對於 .NET 的程式語言，JavaScript 是非常不易維護的用戶端指令碼，如果能讓開發人員完全用不到 JavaScript，那何樂不為呢？ 那就由 Button 控制項本身提供加上詢問訊息的功能就可以，相關的 JavaScript 由控制項去處理。
一般要在 Button 加上詢問訊息，只要在 OnClientClick 屬性設定如下的 JavaScript 即可。我們的目的只是讓開發人員連設定 OnClientClick 屬性的 JavaScript 都省略，直接設定要詢問的訊息即可，接下來我們就要開始實作這個控制項。
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="if (confirm('確定執行嗎？')==false) {return false;}" />
在 Bee.Web 專案中，加入「ASP.NET 伺服器控制項」，此控制項繼承 Button 下來命名為 TBButton (命名空間為 Bee.Web.WebControls)。在 TBButton 類別中加入 ConfirmMessage 屬性，用來設定詢問訊息的內容。然後在 Render 方法將詢問詢息的 JavaScript 設定到 OnClientClick 屬性即可。
Namespace WebControls
< _
Description("按鈕控制項"), _
ToolboxData("<{0}:TBButton runat=server></{0}:TBButton>") _
> _
Public Class TBButton
Inherits System.Web.UI.WebControls.Button
<Description("詢問訊息")> _
Public Property ConfirmMessage() As String
Get
Dim sConfirmMessage As String
sConfirmMessage = CStr(ViewState("ConfirmMessage"))
If sConfirmMessage Is Nothing Then
Return String.Empty
Else
Return sConfirmMessage
End If
End Get
Set(ByVal value As String)
ViewState("ConfirmMessage") = value
End Set
End Property
''' <summary>
''' 覆寫 Render 方法。
''' </summary>
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim sScript As String
Dim sConfirm As String
'若有設定 ConfirmMessage 屬性，則在 OnClientClick 加入詢問訊息的 JavaScript
If Me.ConfirmMessage <> String.Empty Then
sScript = Me.OnClientClick
'詢問訊息的 JavaScript
sConfirm = String.Format("if (confirm('{0}')==false) {{return false;}}", Me.ConfirmMessage)
If sScript = String.Empty Then
Me.OnClientClick = sConfirm
Else
Me.OnClientClick = sConfirm & sScript
End If
End If
MyBase.Render(writer)
End Sub
End Class
End Namespace
將 TBButton 拖曳到測試頁面，設定 ConfirmMessage 屬性。
<bee:TBButton ID="TBButton1" runat="server" ConfirmMessage="確定刪除此筆資料嗎？" Text="刪除" />
執行結果如下。
二、結語
筆者在開發 ASP.NET 的應用程式過程中，通常會習慣把所有現有控制項繼承下來，無論目前需不需要擴展控制項功能。這種方式對於開發大型系統是相當有幫助的，因為無法預期在系統開發的過程中會不會因為某些狀況，而臨時需要擴展控制項的功能，所以就先全部繼承下來以備不時之需，也為未來保留修改的彈性。
三、相關連結
擴展 CommandField 類別 - 刪除提示訊息
按鈕加上詢問訊息
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/04/5578.aspx
撰寫伺服器控制項大致分為下列三種方式
1.由無到有建立全新的控制項，一般...]]>
撰寫伺服器控制項大致分為下列三種方式
1.由無到有建立全新的控制項，一般會繼承至 System.Web.UI.Control 或 System.Web.UI.WebControls.WebControl 類別。
2.繼承現有控制項，擴展原有控制項的功能，如繼承原有 TextBox 來擴展功能。
3.複合式控制項，將多個現有的控制項組合成為一個新的控制項，例如 TextBox 右邊加個 Button 整合成一個控制項，一般會繼承至 System.Web.UI.WebControls.CompositeControl 類別。
本文將先介紹第1種方式，由無到有來建立控制項，後面的文章中會陸續介紹第2、3種方式的控制項。要建立全新的控制項會繼承至 Control 或 WebControl，沒有 UI 的控制項可由 Control 繼承下來 (如 SqlDataSource)，具 UI 的控制項會由 WebControl 繼承下來。接下來的範例中，我們將繼承 WebControl 來建立第一個 MyTextBox 控制項。
一、新增 MyTextBox 控制項
在 Bee.Web 專案按右鍵選單，執行「加入\新增項目」，選擇「ASP.NET 伺服器控制項」，在名稱文字框中輸入 MyTextbox，按下「確定」鈕，就會在專案中加入 MyTextbox 控制項類別。
新加入的控制項預設有一個 Text 屬性，以及覆寫 Render 方法。Render 方法是「將控制項呈現在指定的 HTML 寫入器中」，簡單的說就是在 Render 方法會將控制項對應的 HTML 碼輸出，用來呈現在用戶端的瀏覽器上。假設我們要撰寫一個網頁上的文字框，那就先去看一下文字框在網頁中對應的 HTML 碼，然後在 Render 方法中想辨法輸出這些 HTML 碼即可。
二、輸出控制項的 HTML 碼
你可以使用 FrontPage 之類的 HTML 編輯器，先編輯出控制項的呈現方式，進而去觀查它的 HTML 碼，再回頭去思考如何去撰寫這個伺服器控制項。假設 MyTextbox 控制項包含一個文字框及一個按鈕，那最終輸出的 HTML 碼應該如下。
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" />
我們在 MyTextbox 的 RenderContents 方法中輸出上述的 HTML 碼。
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
Dim sHTML As String
sHTML = "<input id=""Text1"" type=""text"" />" & _
"<input id=""Button1"" type=""button"" value=""button"" />"
writer.Write(sHTML)
End Sub
建置控制項專案，然後拖曳 MyTextbox 在測試頁面上，設計階段就會呈現出我們期望的結果。
執行程式，在瀏覽器看一下 MyTextbox 控制項輸出的結果，是不是跟我們預期的一樣呢。
三、屬性套用到控制項 HTML 碼
控制項不可能單純這樣輸出 HTML 碼而已，控制項的相關屬性設定，一般都影響到輸出的 HTML 碼。假設 MyTextbox 有 Text 及 ButtonText 二個屬性，分別對應到 文字框的內容及按鈕的文字，MyTextbox 本來就有 Text 屬性，依像畫蘆葫新增 ButtonText 屬性。
< _
Bindable(True), _
Category("Appearance"), _
DefaultValue(""), _
Localizable(True)> _
Property ButtonText() As String
Get
Dim s As String = CStr(ViewState("ButtonText"))
If s Is Nothing Then
Return String.Empty
Else
Return s
End If
End Get
Set(ByVal Value As String)
ViewState("ButtonText") = Value
End Set
End Property
RenderContents 方法改寫如下。
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
Dim sHTML As String
sHTML = "<input id=""Text1"" type=""text"" value=""{0}""/>" & _
"<input id=""Button1"" type=""button"" value=""{1}"" />"
sHTML = String.Format(sHTML, Me.Text, Me.ButtonText)
writer.Write(sHTML)
End Sub
重新建置控制項專案，在頁面上測試 MyTextbox 的 Text 及 ButtonText 屬性。
四、使 ClientID (HTML 原始碼控制項的 ID) 是唯一值
在頁面上放置二個 MyTextbox 控制項，執行程式，在瀏覽器中檢查 MyTextbox 的 HTML 原始碼。你會發現 MyTextbox 會以一個 span 包住控制項的內容，而每個控制項的輸出的 ClientID 是唯一的。不過 MyTextbox 內含的文字框及按鈕卻會重覆，所以一般子控制項的 ClientID 會在前面包含父控制項的 ID。
<span id="MyTextbox1">
<input id="Text1" type="text" value="這是文字"/>
<input id="Button1" type="button" value="這是按鈕" />
</span>
<br />
<span id="MyTextbox2">
<input id="Text1" type="text" value="這是文字"/>
<input id="Button1" type="button" value="這是按鈕" />
</span>
所以我們再次修改 RenderContents 方法的程式碼
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
Dim sHTML As String
sHTML = "<input id=""{0}_Text"" type=""text"" value=""{1}""/>" & _
"<input id=""{0}_Button"" type=""button"" value=""{2}"" />"
sHTML = String.Format(sHTML, Me.ID, Me.Text, Me.ButtonText)
writer.Write(sHTML)
End Sub
執行程式，再次檢視 HTML 原始碼，所有的 ClinetID 都會是唯一的。
<span id="MyTextbox1">
<input id="MyTextbox1_Text" type="text" value="這是文字"/>
<input id="MyTextbox1_Button" type="button" value="這是按鈕" />
</span>
<br />
<span id="MyTextbox2">
<input id="MyTextbox2_Text" type="text" value="這是文字"/>
<input id="MyTextbox2_Button" type="button" value="這是按鈕" />
</span>
五、控制項前置詞
自訂控制項的預設前置詞是 cc1，不過這是可以修改的，在專案中的 AssemblyInfo.vb 檔案中，加入如下定義即可。詳細的作法請參考筆者部落格中的「自訂伺服器控制項前置詞」一本有詳細介紹，在此不再累述。
'設定控制項的標記前置詞
<Assembly: TagPrefix("Bee.Web.WebControls", "bee")>
六、結語
本文中是用土法鍊鋼的方法在撰寫伺服器控制項，一般在實作控制項時會有更好的方式、更易維護的寫法，後續的文章中會陸續介紹相關作法。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/03/5573.aspx
一、建立「ASP.NET 伺服器控制項」專案
首先執行功能表「檔案\新增專案」，在專案類型中選擇 Visual Basic -> Web，選取「ASP.NET 伺服器控制項」範本，在名稱文字框中輸入專案名稱，也就是組件的檔案名稱，我們輸入 Bee.Web 為專案名稱，組件檔案為 Bee.Web.dll，按下「確定」鈕即會建立新的「ASP.NET 伺服器控制項」專案。
在新建立「ASP.NET 伺服器控制項」專案中，會預設加入一個伺服器控制項類別(ServerControl1.vb)，這個伺服器控制項已經事件幫我們加入一些控制項的程式碼。目前暫不做任何修改，直接使用此控制項來做測試說明。
接下來執行功能表「專案\Bee.Web 屬性」，設定此組件的根命名空間，一般慣用的根命名空間都會與組件名稱相同，以方便加入參考時可以快速找到相關組件。
我們先儲存這個「ASP.NET 伺服器控制項」專案，指定儲存位置，按下「儲存」鈕。整個專案相關檔案，會儲存在以專案名稱的資料夾中。
二、加入測試網站
不要關閉目前「ASP.NET 伺服器控制項」專案，執行功能表「檔案\加入\新網站」，選擇「ASP.NET 網站」，會在方案中加入一個網站，來測試開發階段的伺服器控制項使用。
在測試網站加入參考，選擇「專案」頁籤，此頁籤中會列出該方案中其他可加入參考的專案，選取 Bee.Web 專案，按下「確定」鈕。
先在 Bee.Web 專案中執行「建置」動作，然後切換到測試網站的頁面設計，工具箱中就會出現 ServerControl1 伺服器控制項。這個控制項就可以直接拖曳至頁面中使用，這個控制項只是單純 Render 出 Text 屬性值，你可以在控制項屬性視窗中，更改 Text 屬性值為 "測試文字"，就會看到這個控制項顯示 "測試文字"。將測試網站設為啟動專案，按下「F5」執行程式，就會看到該控制在執行階段的結果。
備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格
http://www.dotblogs.com.tw/jeff377/archive/2008/10/02/5562.aspx
<?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/"> <channel> <title>ASP.NET 伺服器控制項開發 :: 2008 iT 邦幫忙鐵人賽</title> <link>https://ithelp.ithome.com.tw/users/20007956/ironman</link> <description><![CDATA[ASP.NET 是目前相當熱門的網站開發程式語言，市面上也有一大卡車的書籍在介紹 ASP.NET，不過卻非常少介紹「ASP.NET 伺服器控制項」方面的書籍。在此將透過一系列...]]></description> <atom:link href="https://ithelp.ithome.com.tw/users/20007956/ironman" rel="self"></atom:link> <language>zh-TW</language> <lastBuildDate>Mon, 06 Jun 2022 20:19:06 +0800</lastBuildDate> <item> <title>[ASP.NET 控制項實作 Day29] 解決 DropDownList 成員 Value 值相同產生的問題(續)</title> <link>https://ithelp.ithome.com.tw/articles/10013458?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013458?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> 接下來還要覆寫 LoadPostData 方法，取得 __EVENTARGUMENT 這個 HiddenField 的值，並判斷與原 SelectedIndex 屬性值是...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> 接下來還要覆寫 LoadPostData 方法，取得 __EVENTARGUMENT 這個 HiddenField 的值，並判斷與原 SelectedIndex 屬性值是否不同，不同的話傳回 True，使其產生 SelectedIndexChanged 事件。</p> <pre><code> Protected Overrides Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As NameValueCollection) As Boolean Dim values As String() Dim iSelectedIndex As Integer Me.EnsureDataBound() values = postCollection.GetValues(postDataKey) If (Not values Is Nothing) Then iSelectedIndex = CInt(Me.Page.Request.Form("__EVENTARGUMENT")) If (Me.SelectedIndex <> iSelectedIndex) Then MyBase.SetPostDataSelection(iSelectedIndex) Return True End If End If Return False End Function </code></pre> <p><strong>四、測試程式</strong><br /> 在 TBDropDownList 的 SelectedIndexChanged 事件撰寫如下測試程式碼。</p> <pre><code> Protected Sub DropDownList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList2.SelectedIndexChanged Dim sText As String sText = String.Format("TBDropDownList: Index={0} Value={1}", DropDownList2.SelectedIndex, DropDownList2.SelectedValue) Me.Response.Write(sText) End Sub </code></pre> <p>執行程式，在 TBDropDownList 選取 "王五" 這個選項時，會正常顯示該成員的 SelectedIndex 及 SelectedValue 屬性值。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay29DropDownListValue_112DF/image_thumb_10.png" alt="" /></p> <p>接下選取 Value 值相同的 "陳六" 這個選項，也會正常引發 SelectedIndexChanged ，並顯示該成員的 SelectedIndex 及 SelectedValue 屬性值。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay29DropDownListValue_112DF/image_thumb_11.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/30/5830.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/30/5830.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-30 21:23:12</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day29] 解決 DropDownList 成員 Value 值相同產生的問題</title> <link>https://ithelp.ithome.com.tw/articles/10013457?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013457?sc=rss.iron</guid> <description><![CDATA[<p>DropDownList 控制頁的成員清單中，若有 ListItem 的 Value 值是相同的情形時，會造成 DropDownList 無法取得正確的 SelectedIndex 屬性值、且無...]]></description> <content:encoded><![CDATA[<p>DropDownList 控制頁的成員清單中，若有 ListItem 的 Value 值是相同的情形時，會造成 DropDownList 無法取得正確的 SelectedIndex 屬性值、且無法正確引發 SelectedIndexChanged 事件的問題；今天剛好在網路上看到有人在詢問此問題，所以本文將說明這個問題的源由，並修改 DropDownList 控制項來解決這個問題。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008103021737321.rar" target="_blank">ASP.NET Server Control - Day29.rar</a></p> <p><strong>一、DropDownList 的成員 Value 值相同產生的問題</strong><br /> 我們先寫個測試程式來描述問題，在頁面上放置一個 DropDownList 控制項，設定 AutoPostBack=True，並加入四個 ListItem，其中 "王五" 及 "陳六" 二個 ListItem 的 Value 值相同。</p> <pre><code> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"> <asp:ListItem Value="0">張三</asp:ListItem> <asp:ListItem Value="1">李四</asp:ListItem> <asp:ListItem Value="2">王五</asp:ListItem> <asp:ListItem Value="2">陳六</asp:ListItem> </asp:DropDownList> </code></pre> <p>在 DropDownList 的 SelectedIndexChanged 事件，輸出 DropDownList 的 SelectedIndex 及 SelectedValue 屬性值。</p> <pre><code> Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged Dim sText As String sText = String.Format("DropDownList: Index={0} Value={1}", DropDownList1.SelectedIndex, DropDownList1.SelectedValue) Me.Response.Write(sText) End Sub </code></pre> <p>執行程式，在 DropDownList 選取 "李四" 這個選項時，會正常顯示該成員的 SelectedIndex 及 SelectedValue 屬性值。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay29DropDownListValue_112DF/image_thumb.png" alt="" /></p> <p>接下來選取 "陳六" 這個選項時，竟然發生奇怪的現象，DorpDownList 竟然顯示相同 Value 值的 "王五" 這個成員的 SelectedIndex 及 SelectedValue 屬性值。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay29DropDownListValue_112DF/image_thumb_6.png" alt="" /><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay29DropDownListValue_112DF/image_thumb_7.png" alt="" /></p> <p><strong>二、問題發生的原因</strong><br /> 我們先看一下 DropDownList 輸出到用戶端的 HTML 原始碼。</p> <pre><code><select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1"> <option selected="selected" value="0">張三</option> <option value="1">李四</option> <option value="2">王五</option> <option value="2">陳六</option> </select> </code></pre> <p>DropDownList 是呼叫 __doPostBack 函式，只傳入 eventTarget參數 (對應到 __EVENTTARGET 這個 HiddenField) 為 DropDownList 的 ClientID；當 PostBack 回伺服端時，在 DropDownList 的 LoadPostData 方法中，會取得用戶端選取的 SelectedValue 值，並去尋找對應的成員的 SelectedIndex 值。可是問題來了，因為 "王五" 與 "陳六" 的 Value 是相同的值，當在尋找符合 Value 值的成員時，前面的選項 "王五" 會先符合條件而傳回該 Index 值，所以先造成取得錯誤的 SelectedIndex 。</p> <pre><code>Protected Overridable Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As NameValueCollection) As Boolean Dim values As String() = postCollection.GetValues(postDataKey) Me.EnsureDataBound If (Not values Is Nothing) Then MyBase.ValidateEvent(postDataKey, values(0)) Dim selectedIndex As Integer = Me.Items.FindByValueInternal(values(0), False) If (Me.SelectedIndex <> selectedIndex) Then MyBase.SetPostDataSelection(selectedIndex) Return True End If End If Return False End Function </code></pre> <p><strong>三、修改 DropDownList 控制項來解決問題</strong><br /> 要解決這個問題最好的方式就是直接修改 DropDownList 控制項，自行處理前端呼叫 __doPostBack 的動作，將用戶端 DropDownList 選擇 SelectedIndex 一併傳回伺服端。所以我們繼承 DropDownList 命名為 TBDropDownList，覆寫 AddAttributesToRender 來自行輸出 PostBack 的用戶端指令碼，我們會用一個變數記錄 AutoPostBack 屬性，並強制將 AutoPostBack 屬性值設為 False，這是為了不要 MyBase 產生 PostBack 的指令碼；然後再自行輸出 AutoPostBack 用戶端指令碼，其中 __doPostBack 的 eventArgument 參數 (對應到 __EVENTARGUMENT 這個 HiddenField) 傳入 this.selectedIndex。</p> <pre><code> Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter) Dim bAutoPostBack As Boolean Dim sScript As String '記錄 AutoPostBack 值，並將 AutoPostBack 設為 False，不要讓 MyBase 產生 PostBack 的指令碼 bAutoPostBack = Me.AutoPostBack Me.AutoPostBack = False MyBase.AddAttributesToRender(writer) If bAutoPostBack Then MyBase.Attributes.Remove("onchange") sScript = String.Format("__doPostBack('{0}',{1})", Me.ClientID, "this.selectedIndex") writer.AddAttribute(HtmlTextWriterAttribute.Onchange, sScript) Me.AutoPostBack = True End If End Sub </code></pre> <p>在頁面上放置一個 TBDropDownList 控制項，設定與上述案例相同的成員清單。</p> <pre><code> <bee:TBDropDownList ID="DropDownList2" runat="server" AutoPostBack="True"> <asp:ListItem Value="0">張三</asp:ListItem> <asp:ListItem Value="1">李四</asp:ListItem> <asp:ListItem Value="2">王五</asp:ListItem> <asp:ListItem Value="2">陳六</asp:ListItem> </bee:TBDropDownList> </code></pre> <p>執行程式查看 TBDropDownList 控制項的 HTML 原始碼，呼叫 __doPostBack 函式的參數已經被修改，eventArgument 參數會傳入該控制項的 selectedIndex。</p> <pre><code><select name="DropDownList2" id="DropDownList2" onchange="__doPostBack('DropDownList2',this.selectedIndex)"> <option selected="selected" value="0">張三</option> <option value="1">李四</option> <option value="2">王五</option> <option value="2">陳六</option> </select> </code></pre> <p>[超過字數限制，下一篇接續本文]</p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-30 21:15:23</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day28] 圖形驗證碼控制項(續)</title> <link>https://ithelp.ithome.com.tw/articles/10013365?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013365?sc=rss.iron</guid> <description><![CDATA[<p>接續一上文<br /> <strong>二、實作圖形驗證碼控制項</strong><br /> 雖然我們可以使用 Image 控制項來呈現 ValidateCode.aspx 頁面產生的驗證碼圖...]]></description> <content:encoded><![CDATA[<p>接續一上文<br /> <strong>二、實作圖形驗證碼控制項</strong><br /> 雖然我們可以使用 Image 控制項來呈現 ValidateCode.aspx 頁面產生的驗證碼圖形，可是這樣只處理一半的動作，因為沒有處理「使用者輸入的驗證碼」是否與「圖形驗證碼」相符，所以我們將實作一個圖形驗證碼控制項，來處理掉所有相關動作。<br /> 即然上面的示範使用 Image 控制項來呈現驗證碼，所以圖形驗證碼控制項就繼承 Image 命名為 TBValidateCode。</p> <pre><code> < _ Description("圖形驗證碼控制項"), _ ToolboxData("<{0}:TBValidateCode runat=server></{0}:TBValidateCode>") _ > _ Public Class TBValidateCode Inherits System.Web.UI.WebControls.Image End </code></pre> <p>新增 ValidateCodeUrl 屬性，設定圖形驗證碼產生頁面的網址。</p> <pre><code> ''' <summary> ''' 圖形驗證碼產生頁面網址。 ''' </summary> < _ Description("圖形驗證碼產生頁面網址"), _ DefaultValue("") _ > _ Public Property ValidateCodeUrl() As String Get Return FValidateCodeUrl End Get Set(ByVal value As String) FValidateCodeUrl = value End Set End Property </code></pre> <p>覆寫 Render 方法，若未設定 ValidateCodeUrl 屬性，則預設為 ~/Page/ValidateCode.aspx 這個頁面。另外我們在圖形的 ondbclick 加上一段用戶端指令碼，其作用是讓用戶可以滑鼠二下來重新產生一個驗證碼圖形。</p> <pre><code> Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) Dim sUrl As String Dim sScript As String sUrl = Me.ValidateCodeUrl If String.IsNullOrEmpty(sUrl) Then sUrl = "~/Page/ValidateCode.aspx" End If If Me.BorderWidth = Unit.Empty Then Me.BorderWidth = Unit.Pixel(1) End If If Me.AlternateText = String.Empty Then Me.AlternateText = "圖形驗證碼" End If Me.ToolTip = "滑鼠點二下可重新產生驗證碼" Me.ImageUrl = sUrl If Not Me.DesignMode Then sScript = String.Format("this.src='{0}?flag='+Math.random();", Me.Page.ResolveClientUrl(sUrl)) Me.Attributes("ondblclick") = sScript End If Me.Style(HtmlTextWriterStyle.Cursor) = "pointer" MyBase.Render(writer) End Sub </code></pre> <p>另外新增一個 ValidateCode 方法，用來檢查輸入驗證碼是否正確。還記得我們在產生驗證碼圖形時，同時把該驗證碼的值寫入 Session("_ValidateCode") 中吧，所以這個方法只是把用戶輸入的值與 Seesion 中的值做比對。</p> <pre><code> ''' <summary> ''' 檢查輸入驗證碼是否正確。 ''' </summary> ''' <param name="Code">輸入驗證碼。</param> ''' <returns>驗證成功傳回 True，反之傳回 False。</returns> Public Function ValidateCode(ByVal Code As String) As Boolean If Me.Page.Session(SessionKey) Is Nothing Then Return False If SameText(CCStr(Me.Page.Session(SessionKey)), Code) Then Return True Else Return False End If End Function </code></pre> <p><strong>三、測試程式</strong><br /> 在頁面放置一個 TBValidateCode 控制項，另外加一個文字框及按鈕，供使用者輸入驗證碼後按下「確定」鈕後到伺服端做輸入值比對的動作。</p> <pre><code> <bee:TBValidateCode ID="TBValidateCode1" runat="server" /> <bee:TBTextBox ID="txtCode" runat="server"></bee:TBTextBox> <bee:TBButton ID="TBButton1" runat="server" Text="確定" /> </code></pre> <p>在「確定」鈕的 Click 事件中，我們使用 TBValidateCode 控制項的 ValidateCode 方法判斷驗證碼輸入的正確性。</p> <pre><code> Protected Sub TBButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TBButton1.Click If TBValidateCode1.ValidateCode(txtCode.Text) Then Me.Response.Write("驗證碼輸入正確") Else Me.Response.Write("驗證碼輸入錯誤!") End If End Sub </code></pre> <p>執行程式，頁面就會隨機產生一個驗證碼圖形。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay28_1B7F/image_thumb.png" alt="" /></p> <p>輸入正確的值按「確定」鈕，就會顯示「驗證碼輸入正確」的訊息。因為我們在同一頁面測試的關係，你會發現 PostBack 後驗證碼圖形又會重新產生，一般正常的做法是驗證正確後就導向另一個頁面。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay28_1B7F/image_thumb_1.png" alt="" /></p> <p>當我們輸入錯誤的值，就會顯示「驗證碼輸入錯誤!」的訊息。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay28_1B7F/image_thumb_2.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/29/5818.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/29/5818.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-29 20:34:22</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day28] 圖形驗證碼控制項</title> <link>https://ithelp.ithome.com.tw/articles/10013361?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013361?sc=rss.iron</guid> <description><![CDATA[<p>在網頁上常把圖形驗證碼應用在登入或貼文的頁面中，因為圖形驗證碼具有機器不易識別的特性，可以防止機器人程式惡意的存取網頁。在本文中將實作一個圖形驗證碼的伺服器控制項，透過簡單的屬性設定就可以輕易地...]]></description> <content:encoded><![CDATA[<p>在網頁上常把圖形驗證碼應用在登入或貼文的頁面中，因為圖形驗證碼具有機器不易識別的特性，可以防止機器人程式惡意的存取網頁。在本文中將實作一個圖形驗證碼的伺服器控制項，透過簡單的屬性設定就可以輕易地在網頁上套用圖形驗證碼。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081029202355938.rar" target="_blank">ASP.NET Server Control - Day28.rar</a></p> <p><strong>一、產生圖形驗證碼</strong><br /> 我們先準備一個產生圖形驗證碼的頁面 (ValidateCode.aspx)，這個頁面主要是繪製驗證碼圖形，並將其寫入記憶體資料流，最後使用 Response.BinaryWrite 將圖形輸出傳遞到用戶端。當我們輸出此驗證碼圖形的同時，會使用 Session("_ValidateCode") 來記錄驗證碼的值，以便後續與使用者輸入驗證碼做比對之用。</p> <pre><code>Partial Class ValidateCode Inherits System.Web.UI.Page ''' <summary> ''' 產生圖形驗證碼。 ''' </summary> Public Function CreateValidateCodeImage(ByRef Code As String, ByVal CodeLength As Integer, _ ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer) As Bitmap Dim sCode As String = String.Empty '顏色列表，用於驗證碼、噪線、噪點 Dim oColors As Color() = { _ Drawing.Color.Black, Drawing.Color.Red, Drawing.Color.Blue, Drawing.Color.Green, _ Drawing.Color.Orange, Drawing.Color.Brown, Drawing.Color.Brown, Drawing.Color.DarkBlue} '字體列表，用於驗證碼 Dim oFontNames As String() = {"Times New Roman", "MS Mincho", "Book Antiqua", _ "Gungsuh", "PMingLiU", "Impact"} '驗證碼的字元集，去掉了一些容易混淆的字元 Dim oCharacter As Char() = {"2"c, "3"c, "4"c, "5"c, "6"c, "8"c, _ "9"c, "A"c, "B"c, "C"c, "D"c, "E"c, _ "F"c, "G"c, "H"c, "J"c, "K"c, "L"c, _ "M"c, "N"c, "P"c, "R"c, "S"c, "T"c, _ "W"c, "X"c, "Y"c} Dim oRnd As New Random() Dim oBmp As Bitmap Dim oGraphics As Graphics Dim N1 As Integer Dim oPoint1 As Drawing.Point Dim oPoint2 As Drawing.Point Dim sFontName As String Dim oFont As Font Dim oColor As Color '生成驗證碼字串 For N1 = 0 To CodeLength - 1 sCode += oCharacter(oRnd.Next(oCharacter.Length)) Next oBmp = New Bitmap(Width, Height) oGraphics = Graphics.FromImage(oBmp) oGraphics.Clear(Drawing.Color.White) Try For N1 = 0 To 4 '畫噪線 oPoint1.X = oRnd.Next(Width) oPoint1.Y = oRnd.Next(Height) oPoint2.X = oRnd.Next(Width) oPoint2.Y = oRnd.Next(Height) oColor = oColors(oRnd.Next(oColors.Length)) oGraphics.DrawLine(New Pen(oColor), oPoint1, oPoint2) Next For N1 = 0 To sCode.Length - 1 '畫驗證碼字串 sFontName = oFontNames(oRnd.Next(oFontNames.Length)) oFont = New Font(sFontName, FontSize, FontStyle.Italic) oColor = oColors(oRnd.Next(oColors.Length)) oGraphics.DrawString(sCode(N1).ToString(), oFont, New SolidBrush(oColor), CSng(N1) * FontSize + 10, CSng(8)) Next For i As Integer = 0 To 30 '畫噪點 Dim x As Integer = oRnd.Next(oBmp.Width) Dim y As Integer = oRnd.Next(oBmp.Height) Dim clr As Color = oColors(oRnd.Next(oColors.Length)) oBmp.SetPixel(x, y, clr) Next Code = sCode Return oBmp Finally oGraphics.Dispose() End Try End Function ''' <summary> ''' 產生圖形驗證碼。 ''' </summary> Public Sub CreateValidateCodeImage(ByRef MemoryStream As MemoryStream, _ ByRef Code As String, ByVal CodeLength As Integer, _ ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer) Dim oBmp As Bitmap oBmp = CreateValidateCodeImage(Code, CodeLength, Width, Height, FontSize) Try oBmp.Save(MemoryStream, ImageFormat.Png) Finally oBmp.Dispose() End Try End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim sCode As String = String.Empty '清除該頁輸出緩存，設置該頁無緩存 Response.Buffer = True Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0) Response.Expires = 0 Response.CacheControl = "no-cache" Response.AppendHeader("Pragma", "No-Cache") '將驗證碼圖片寫入記憶體流，並將其以 "image/Png" 格式輸出 Dim oStream As New MemoryStream() Try CreateValidateCodeImage(oStream, sCode, 4, 100, 40, 18) Me.Session("_ValidateCode") = sCode Response.ClearContent() Response.ContentType = "image/Png" Response.BinaryWrite(oStream.ToArray()) Finally '釋放資源 oStream.Dispose() End Try End Sub End Class </code></pre> <p>我們將此頁面置於 ~/Page/ValidateCode.aspx，當要使用此頁面的圖形驗證碼，只需要在使用 Image 控制項，設定 ImageUrl 為此頁面即可。</p> <pre><code><asp:Image ID="imgValidateCode" runat="server" ImageUrl="~/Page/ValidateCode.aspx" /> </code></pre> <p>[超過字數限制，下一篇接續本文]</p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-29 20:31:45</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day27] 控制項依 FormView CurrentMode 自行設定狀態(續2)</title> <link>https://ithelp.ithome.com.tw/articles/10013241?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013241?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> 接下來設定做為新增、編輯使用的 TBFormView 控制項，我們只使用 EditItemTemplate 來同時處理新增、刪除，所以 EditItemTemplate ...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> 接下來設定做為新增、編輯使用的 TBFormView 控制項，我們只使用 EditItemTemplate 來同時處理新增、刪除，所以 EditItemTemplate 需要同時具有「新增」、「更新」、「取消」三個按鈕。其中 ProductID 為主索引欄位，所以我們使用 TBTextBox 來繫結 ProductID 欄位，設定 FormViewModeState.InsertMode="Enable" 使控制項在新增模式時為可編輯，設定 FormViewModeState.EditMode="Disable" 使控制項在修改模式是唯讀的。</p> <pre><code> <bee:TBFormView ID="TBFormView1" runat="server" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" DefaultMode="Edit" SingleTemplate="EditItemTemplate" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Both" Visible="False"> <FooterStyle BackColor="White" ForeColor="#000066" /> <RowStyle ForeColor="#000066" /> <EditItemTemplate> ProductID: <bee:TBTextBox ID="TextBox1" runat="server" Text='<%# Bind("ProductID") %>'> <FormViewModeState EditMode="Disable" InsertMode="Enable"> </FormViewModeState> </bee:TBTextBox> '省略 <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Insert" Text="新增" /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" /> </EditItemTemplate> </bee:TBFormView> </code></pre> <p><strong>2. 測試新增模式</strong><br /> 接下來執行程式，一開始為瀏覽模式，以 TBGridView 來呈現資料。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb_2.png" alt="" /></p> <p>按下 Header 的「新增」鈕，就會隱藏 TBGridView，而切換到 TBFormView 的新增模式。其中繫結 ProductID 欄位的 TBTextBox 為可編輯模式，而下方的按鈕只會顯示「新增」及「取消」鈕。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb_3.png" alt="" /></p> <p>在新增模式輸入完畢後，按下「新增」鈕，資料錄就會被寫入資料庫。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb_4.png" alt="" /></p> <p><strong>3. 測試修改模式</strong><br /> 接下來測試修改模式，按下「編輯」鈕，就會隱藏 TBGridView，而切換到 TBFormView 的修改模式。其中繫結 ProductID 欄位的 TBTextBox 為唯讀模式，而下方的按鈕只會顯示「更新」及「取消」鈕。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb_5.png" alt="" /></p> <p>在修改模式輸入完畢後，按下「更新」鈕，資料錄就會被寫入資料庫。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb_6.png" alt="" /></p> <p><strong>4. 頁面程式碼</strong><br /> 示範了上述的操作後，接下來我們回頭看一下頁面的程式碼。你沒看錯，筆者也沒貼錯，真的是一行程式碼都沒有，因為所有相關動作都由控制項處理掉了。</p> <pre><code>Partial Class Day27 Inherits System.Web.UI.Page End Class </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-28 13:57:23</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day27] 控制項依 FormView CurrentMode 自行設定狀態(續1)</title> <link>https://ithelp.ithome.com.tw/articles/10013239?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013239?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> <strong>二、讓 TextBox 控制項可自行維護狀態</strong><br /> 接下來擴展 TextBox 控制項，繼承 TextBox 命名為 TBText...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> <strong>二、讓 TextBox 控制項可自行維護狀態</strong><br /> 接下來擴展 TextBox 控制項，繼承 TextBox 命名為 TBTextBox。新增 FormViewModeState 屬性 (TBFormViewModeState 型別)，依 FormView Mode 來設定控制項狀。並覆寫 PreRender 方法，在此方法中呼叫 DoFormViewModeStatus 私有方法，依 FormView 的模式來處理控制項狀態。</p> <pre><code> ''' <summary> ''' 文字框控制項。 ''' </summary> < _ Description("文字框控制項。"), _ ToolboxData("<{0}:TBTextBox runat=server></{0}:TBTextBox>") _ > _ Public Class TBTextBox Inherits TextBox Private FFormViewModeState As TBFormViewModeState ''' <summary> ''' 依 FormViewMode 來設定控制項狀態。 ''' </summary> < _ Category(WebCommon.Category.Behavior), _ NotifyParentProperty(True), _ DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _ PersistenceMode(PersistenceMode.InnerProperty), _ DefaultValue("") _ > _ Public ReadOnly Property FormViewModeState() As TBFormViewModeState Get If FFormViewModeState Is Nothing Then FFormViewModeState = New TBFormViewModeState End If Return FFormViewModeState End Get End Property ''' <summary> ''' 處理控制項狀態。 ''' </summary> Private Sub DoControlStatus(ByVal ControlStatus As EControlState) Select Case ControlStatus Case EControlState.Enable Me.Enabled = True Case EControlState.Disable Me.Enabled = False Case EControlState.Hide Me.Visible = False End Select End Sub ''' <summary> ''' 依 FormView 的模式來處理控制項狀態。 ''' </summary> Private Sub DoFormViewModeStatus() Dim oFormView As FormView '若控制項置於 FormView 中，則依 FormView 的模式來處理控制項狀態 If TypeOf Me.BindingContainer Is FormView Then oFormView = DirectCast(Me.BindingContainer, FormView) Select Case oFormView.CurrentMode Case FormViewMode.Insert DoControlStatus(Me.FormViewModeState.InsertMode) Case FormViewMode.Edit DoControlStatus(Me.FormViewModeState.EditMode) Case FormViewMode.ReadOnly DoControlStatus(Me.FormViewModeState.BrowseMode) End Select End If End Sub ''' <summary> ''' 覆寫。引發 PreRender 事件。 ''' </summary> Protected Overrides Sub OnPreRender(ByVal e As EventArgs) MyBase.OnPreRender(e) '依 FormView 的模式來處理控制項狀態 DoFormViewModeStatus() End Sub End Class </code></pre> <p><strong>三、測試程式</strong><br /> <strong>1. 設定控制項相關屬性</strong><br /> 我們使用 Northwnd 資料庫的 Products資料表為例，以 GridView+FormView 示範資料「新增/修改/刪除」的操作。在頁面拖曳 SqlDataSource 控制項後，在頁面上的使用 TBGridView 來顯示瀏覽資料。TBGridView 的 FormViewID 設為關連的 TBFormVIew 控制項；另外有使用到 TBCommandField，設定 ShowHeaderNewButton=True，讓命令列具有「新增」鈕。</p> <pre><code> <bee:TBGridView ID="TBGridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" FormViewID="TBFormView1"> <Columns> <bee:TBCommandField ShowDeleteButton="True" ShowEditButton="True" ShowHeaderNewButton="True" > </bee:TBCommandField> '省略 </Columns> </bee:TBGridView> </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-28 13:53:32</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day27] 控制項依 FormView CurrentMode 自行設定狀態</title> <link>https://ithelp.ithome.com.tw/articles/10013233?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013233?sc=rss.iron</guid> <description><![CDATA[<p>在 <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/12/3936.aspx" target="_blank">GridV...]]></description> <content:encoded><![CDATA[<p>在 <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/12/3936.aspx" target="_blank">GridView+FormView 示範資料 新增/修改/刪除(進階篇：伺服器控制項)</a> 一文中，示範了擴展 GridView 及 FormView 控制項，讓 GridView 可以透過屬性與 FormView 做關連來處理資料的「新增/修改/刪除」的動作。因為在該案例中，只使用 FormView 的 EditTemplate 同時處理「新增」及「修改」的動作，所以還需要自行撰寫部分程式碼去判斷控制項在新增或修改的啟用狀態，例如編號欄位在新增時為啟用，修改時就不啟用。在該文最後也提及其實有辨法讓這個案例達到零程式碼的目標，那就是讓控制項 (如 TextBox) 自行判斷所在的 FormView 的 CurrentMode，自行決定本身是否要「啟用/不啟用」、「顯示/隱藏」等狀態。本文以 TextBox 為例，說明如何修改 TextBox 讓它可以達到上述的需求。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081028133154164.rar" target="_blank">ASP.NET Server Control - Day27.rar</a><br /> Northwnd 資料庫下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102364857537.rar" target="_blank">NORTHWND.rar</a></p> <p><strong>一、TBFormViewModeState 類別</strong><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb.png" alt="" /><br /> 我們先定義 EControlState (控制項狀態) 列舉，描述控制項在特定模式的狀態為何。</p> <pre><code> ''' <summary> ''' 控制項狀態列舉。 ''' </summary> Public Enum EControlState ''' <summary> ''' 不設定。 ''' </summary> NotSet = 0 ''' <summary> ''' 啟用。 ''' </summary> Enable = 1 ''' <summary> ''' 不啟用。 ''' </summary> Disable = 2 ''' <summary> ''' 隱藏。 ''' </summary> Hide = 3 End Enum </code></pre> <p>再來定義 TBFormViewModeState 類別，用來設定控制項在各種 FormView 模式 (瀏覽、新增、修改) 中的控制項狀態。</p> <pre><code>''' <summary> ''' 依 FormViewMode 來設定控制項狀態。 ''' </summary> < _ Serializable(), _ TypeConverter(GetType(ExpandableObjectConverter)) _ > _ Public Class TBFormViewModeState Private FInsertMode As EControlState = EControlState.NotSet Private FEditMode As EControlState = EControlState.NotSet Private FBrowseMode As EControlState = EControlState.NotSet ''' <summary> ''' 在新增模式(FormViewMode=Insert)的控制項狀態。 ''' </summary> < _ NotifyParentProperty(True), _ DefaultValue(GetType(EControlState), "NotSet") _ > _ Public Property InsertMode() As EControlState Get Return FInsertMode End Get Set(ByVal value As EControlState) FInsertMode = value End Set End Property ''' <summary> ''' 在編輯模式(FormViewMode=Edit)的控制項狀態。 ''' </summary> < _ NotifyParentProperty(True), _ DefaultValue(GetType(EControlState), "NotSet") _ > _ Public Property EditMode() As EControlState Get Return FEditMode End Get Set(ByVal value As EControlState) FEditMode = value End Set End Property ''' <summary> ''' 在瀏覽模式(FormViewMode=ReadOnly)的控制項狀態。 ''' </summary> < _ NotifyParentProperty(True), _ DefaultValue(GetType(EControlState), "NotSet") _ > _ Public Property BrowseMode() As EControlState Get Return FBrowseMode End Get Set(ByVal value As EControlState) FBrowseMode = value End Set End Property End Class </code></pre> <p>定義為 TBFormViewModeState 型別的屬性是屬於複雜屬性，要套用 TypeConverter(GetType(ExpandableObjectConverter))，讓該屬性可在屬性視窗 (PropertyGrid) 擴展以便設定屬性值，如下圖所示。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay27FormViewCurrentMode_E5A/image_thumb_1.png" alt="" /></p> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/28/5806.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-28 13:45:43</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day26] 讓你的 GridView 與眾不同</title> <link>https://ithelp.ithome.com.tw/articles/10013209?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013209?sc=rss.iron</guid> <description><![CDATA[<p>在網路上可以找到相當多擴展 GridView 控制項功能的文章，在筆者的部落格中也有多篇提及擴展 GridView、DataControlField、BoundFIeld 功能的相關文章，在本文...]]></description> <content:encoded><![CDATA[<p>在網路上可以找到相當多擴展 GridView 控制項功能的文章，在筆者的部落格中也有多篇提及擴展 GridView、DataControlField、BoundFIeld 功能的相關文章，在本文將這些關於擴展 GridView 控制項功能及欄位類別的相關文章做一整理簡介，若需要擴展 GridView 相關功能時可以做為參考。<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/22/4105.aspx" target="_blank"><strong>1. 擴展 GridView 控制項 - 無資料時顯示標題列</strong></a><br /> 摘要：當 GridView 繫結的 DataSource 資料筆數為 0 時，會依 EmptyDataTemplate 及 EmptyDataText 的設定來顯示無資料的狀態。若我們希望 GridView 在無資料時，可以顯示欄位標題，有一種作法是在 EmptyDataTemplate 中手動在設定一個標題列，不過這種作法很麻煩。本文擴展 GridView 控制項，直接透過屬性設定就可以在無資料顯示欄位標題。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0805/GridView_DAA6/image_thumb.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/17/4028.aspx" target="_blank"><strong>2. 擴展 GridView 控制項 - 支援 Excel 及 Word 匯出</strong></a><br /> 摘要：GridView 匯出 Excel 及 Word 文件是蠻常使用的需求，此篇文章將擴展 GridView 控制項提供匯出 Excel 及 Word 文件的方法。一般在 GridView 匯出的常見下列問題也會在此一併被解決。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0805/GridViewExcelWord_14C22/image_thumb_1.png" alt="" /><br /> <img src="http://files.dotblogs.com.tw/jeff377/0805/GridViewExcelWord_14C22/image_thumb_2.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/12/3936.aspx" target="_blank"><strong>3. GridView+FormView 示範資料 新增/修改/刪除(進階篇：伺服器控制項)</strong></a><br /> 摘要：擴展 GridView 及 FormView 控制項，在 GridView 控制項中新增 FormViewID 屬性，關連至指定的 FormView 控制項 ID，就可以讓 GridView 結合 FormView 來做資料異動的動作。</p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1766.aspx" target="_blank"><strong>4. 擴展 CommandField 類別 - 刪除提示訊息</strong></a><br /> 摘要：新增 DeleteConfirmMessage 屬性，設定刪除提示確認訊息。<br /> <img src="http://blog.blueshop.com.tw/images/blog_blueshop_com_tw/jeff377/1525/r_Ex19.1.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1767.aspx" target="_blank"><strong>5. 擴展 CommandField 類別 - 刪除提示訊息含欄位值</strong></a><br /> 摘要：設定刪除提示確認訊息中可包含指定 DataField 欄位值，明確提示要刪除的資料列。<br /> <img src="http://blog.blueshop.com.tw/images/blog_blueshop_com_tw/jeff377/1525/r_Ex20.1.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1710.aspx" target="_blank"><strong>6. 讓 CheckBoxField 繫結非布林值(0 或 1)欄位</strong></a><br /> 摘要：CheckBoxField 若繫結的欄位值為 0 或 1 時 (非布林值) 會發生錯誤，本文擴展 CheckBoxField 類別，讓 CheckBoxField 有辨法繫結 0 或 1 的欄位值。</p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/21/4093.aspx" target="_blank"><strong>7. 擴展 CheckBoxField 類別 - 支援非布林值的雙向繫結</strong></a><br /> 摘要：CheckBoxField 繫結的欄位值並無法直接使用 CBool 轉型為布林值，例如 "T/F"、"是/否" 之類的資料，若希望使用 CheckBoxField 來顯示就比較麻煩，一般的作法都是轉為 TemplateField，自行撰寫資料繫結的函式，而且只能支援單向繫結。在本文直接改寫 CheckBoxField 類別，讓 CheckBoxField 可以直接雙向繫結 "T/F" 或 "是/否" 之類的資料。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0805/CheckBoxField_1471C/image_thumb.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/13/3969.aspx" target="_blank"><strong>8. 擴展 CommandField 類別 - Header 加入新增鈕</strong></a><br /> 摘要：支援在 CommandField 的 Header 的部分加入「新增」鈕，執行新增鈕會引發 RowCommand 事件。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0805/CommandFieldHeader_13B3E/image_4.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/05/29/4169.aspx" target="_blank"><strong>9. GridView 自動編號欄位 - TBSerialNumberField</strong></a><br /> 摘要：繼承 DataControlField 來撰寫自動編號欄位，若 GridView 需要自動編號欄位時只需加入欄位即可。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0805/GridViewTBSerialNumberField_13347/image_2.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx" target="_blank"><strong>10. 自訂 GridVie 欄位類別 - 實作 TBDropDownField 欄位類別</strong></a><br /> 摘要：支援在 GridView 中顯示下拉清單的欄位類別。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay23DataControlField_67E8/image_thumb_1.png" alt="" /></p> <p><a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/26/5777.aspx" target="_blank"><strong>11. 自訂 GridView 欄位 - 日期欄位</strong></a><br /> 摘要：支援在 GridView 中顯示日期下拉選單編輯的欄位類別。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay25TBDropDownFieldItems_6B94/image_thumb_2.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/27/5793.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/27/5793.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-27 22:37:14</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day25] 自訂 GridView 欄位 - 日期欄位(續)</title> <link>https://ithelp.ithome.com.tw/articles/10013091?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013091?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> <strong>四、覆寫 ExtractValuesFromCell 方法 - 擷取儲存格的欄位值</strong><br /> 當用戶端使用 GridView 編輯後執...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> <strong>四、覆寫 ExtractValuesFromCell 方法 - 擷取儲存格的欄位值</strong><br /> 當用戶端使用 GridView 編輯後執行更新動作時，會呼叫 ExtractValuesFromCell 方法，來取得儲存格的欄位值，以便寫入資料來源。所以我們要覆寫 ExtractValuesFromCell 方法，將 Cell 或 TDateEdit 控制項的值取出填入具 IOrderedDictionary 介面的物件。</p> <pre><code> ''' <summary> ''' 使用指定 DataControlFieldCell 的值填入指定的 IDictionary 物件。 ''' </summary> ''' <param name="Dictionary">用於儲存指定儲存格的值。</param> ''' <param name="Cell">包含要擷取值的儲存格。</param> ''' <param name="RowState">資料列的狀態。</param> ''' <param name="IncludeReadOnly">true 表示包含唯讀欄位的值，否則為 false。</param> Public Overrides Sub ExtractValuesFromCell( _ ByVal Dictionary As IOrderedDictionary, _ ByVal Cell As DataControlFieldCell, _ ByVal RowState As DataControlRowState, _ ByVal IncludeReadOnly As Boolean) Dim oControl As Control = Nothing Dim sDataField As String = Me.DataField Dim oValue As Object = Nothing Dim sNullDisplayText As String = Me.NullDisplayText Dim oDateEdit As TBDateEdit If (((RowState And DataControlRowState.Insert) = DataControlRowState.Normal) OrElse Me.InsertVisible) Then If (Cell.Controls.Count > 0) Then oControl = Cell.Controls.Item(0) oDateEdit = TryCast(oControl, TBDateEdit) If (Not oDateEdit Is Nothing) Then oValue = oDateEdit.Text End If ElseIf IncludeReadOnly Then Dim s As String = Cell.Text If (s = " ") Then oValue = String.Empty ElseIf (Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) Then oValue = HttpUtility.HtmlDecode(s) Else oValue = s End If End If If (Not oValue Is Nothing) Then If TypeOf oValue Is String Then If (CStr(oValue).Length = 0) AndAlso Me.ConvertEmptyStringToNull Then oValue = Nothing ElseIf (CStr(oValue) = sNullDisplayText) AndAlso (sNullDisplayText.Length > 0) Then oValue = Nothing End If End If If Dictionary.Contains(sDataField) Then Dictionary.Item(sDataField) = oValue Else Dictionary.Add(sDataField, oValue) End If End If End If End Sub </code></pre> <p><strong>五、測試程式</strong><br /> 我們使用 Northwnd 資料庫的 Employees 資料表為例，在 GridView 加入自訂的 TBDateField 欄位繫結 BirthDate 欄位，另外加入另一個 BoundField 的唯讀欄位，也同樣繫結 BirthDate 欄位來做比較。</p> <pre><code> <bee:TBDateField DataField="BirthDate" HeaderText="BirthDate" SortExpression="BirthDate" DataFormatString="{0:d}" ApplyFormatInEditMode="True" CalendarStyle="Winter" /> <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" SortExpression="BirthDate" DataFormatString="{0:d}" ApplyFormatInEditMode="True" ReadOnly="true" /> </code></pre> <p>執行程式，在編輯資料列時，TBDateField 就會以 TDateEdit 控制項來進行編輯。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay25TBDropDownFieldItems_6B94/image_thumb_2.png" alt="" /></p> <p>使用 TDateEdit 編輯欄位值後，按「更新」鈕，資料就會被寫回資料庫。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay25TBDropDownFieldItems_6B94/image_thumb_3.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/26/5777.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/26/5777.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-26 17:04:50</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day25] 自訂 GridView 欄位 - 日期欄位</title> <link>https://ithelp.ithome.com.tw/articles/10013083?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013083?sc=rss.iron</guid> <description><![CDATA[<p>前二篇文章介紹了自訂 GridView 使用的下拉清單欄位 (TBDropDownField)，對如何繼承 BoundField 類別下來改寫自訂欄位應該有進一步的了解。在 GridView 中...]]></description> <content:encoded><![CDATA[<p>前二篇文章介紹了自訂 GridView 使用的下拉清單欄位 (TBDropDownField)，對如何繼承 BoundField 類別下來改寫自訂欄位應該有進一步的了解。在 GridView 中輸入日期也常蠻常見的需求，在本文將再實作一個 GridView 使用的日期欄位，在欄位儲存格使用 TBDateEdit 控制項來編輯資料。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081026164615771.rar" target="_blank">ASP.NET Server Control - Day25.rar</a><br /> Northwnd 資料庫下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102364857537.rar" target="_blank">NORTHWND.rar</a></p> <p><strong>一、繼承 TBBaseBoundField 實作 TDateField</strong><br /> GridView 的日期欄位需要繫結資料，一般的作法是由 BoundField 繼承下來改寫；不過我們之前已經有繼承 BoundField 製作一個 TBBaseBoundField 的自訂欄位基底類別 (詳見「 <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx" target="_blank">[ASP.NET 控制項實作 Day23] 自訂 GridVie 欄位類別 - 實作 TBDropDownField 欄位類別</a>」 一文)，所以我們要實作的日期欄位直接繼承 TBBaseBoundField 命名為 TDateField，並覆寫 CreateField 方法，傳回 TDateField 物件。</p> <pre><code> ''' <summary> ''' 日期欄位。 ''' </summary> Public Class TBDateField Inherits TBBaseBoundField Protected Overrides Function CreateField() As DataControlField Return New TBDateField() End Function End Class </code></pre> <p>自訂欄位類別主要是要覆寫 InitializeDataCell 方法做資料儲存格初始化、覆寫 OnDataBindField 方法將欄位值繫結至 BoundField 物件、覆寫 ExtractValuesFromCell 方法來擷取儲存格的欄位值，下面我們將針對這幾個需要覆寫的方法做一說明。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay25TBDropDownFieldItems_6B94/image_thumb.png" alt="" /></p> <p><strong>二、覆寫 InitializeDataCell 方法 - 資料儲存格初始化</strong><br /> 首先覆寫 InitializeDataCell 方法處理資料儲存格初始化，當唯讀狀態時使用 Cell 來呈現資料；若為編輯狀態時，則在 Cell 中加入 TBDateEdit 控制項，並將 TBDateField 的屬性設定給 TBDateEdit 控制項的相關屬性。然後將儲存格 (DataControlFieldCell) 或日期控制項 (TDateEdit) 的 DataBinding 事件導向 OnDataBindField 事件處理方法。</p> <pre><code> ''' <summary> ''' 資料儲存格初始化。 ''' </summary> ''' <param name="Cell">要初始化的儲存格。</param> ''' <param name="RowState">資料列狀態。</param> Protected Overrides Sub InitializeDataCell(ByVal Cell As DataControlFieldCell, ByVal RowState As DataControlRowState) Dim oDateEdit As TBDateEdit Dim oControl As Control If Me.CellIsEdit(RowState) Then '編輯狀態在儲存格加入 TBDateEdit 控制項 oDateEdit = New TBDateEdit() oDateEdit.FirstDayOfWeek = Me.FirstDayOfWeek oDateEdit.ShowWeekNumbers = Me.ShowWeekNumbers oDateEdit.CalendarStyle = Me.CalendarStyle oDateEdit.Lang = Me.Lang oDateEdit.ShowTime = Me.ShowTime oControl = oDateEdit Cell.Controls.Add(oControl) Else oControl = Cell End If If (oControl IsNot Nothing) AndAlso MyBase.Visible Then AddHandler oControl.DataBinding, New EventHandler(AddressOf Me.OnDataBindField) End If End Sub </code></pre> <p>TDateEdit 控制項為筆者自行撰寫的日期控制項，TDateEdit 控制項的相關細節可以參考筆者部落格下面幾篇文章有進一步說明。<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1742.aspx" target="_blank">日期控制項實作教學(1) - 結合 JavaScript</a><br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1743.aspx" target="_blank">日期控制項實作教學(2) - PostBack 與 事件</a><br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1746.aspx" target="_blank">TBDateEdit 日期控制項 - 1.0.0.0 版 (Open Source)</a><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay21_6429/image_thumb_1.png" alt="" /></p> <p><strong>三、覆寫 OnDataBindField 方法 - 將欄位值繫結至 BoundField 物件</strong><br /> 當 GridView 執行 DataBind 時，每個儲存格的 DataBinding 事件都會被導向 OnDataBindField 方法，此方法中我們會由資料來源取得指定欄位值，處理此欄位值的格式化時，將欄位值呈現在 Cell 或 TDateEdit 控制項上。</p> <pre><code> ''' <summary> ''' 將欄位值繫結至 BoundField 物件。 ''' </summary> Protected Overrides Sub OnDataBindField(ByVal sender As Object, ByVal e As EventArgs) Dim oControl As Control Dim oDateEdit As TBDateEdit Dim oNamingContainer As Control Dim oDataValue As Object '欄位值 Dim bEncode As Boolean '是否編碼 Dim sText As String '格式化字串 oControl = DirectCast(sender, Control) oNamingContainer = oControl.NamingContainer oDataValue = Me.GetValue(oNamingContainer) bEncode = ((Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) AndAlso TypeOf oControl Is TableCell) sText = Me.FormatDataValue(oDataValue, bEncode) If TypeOf oControl Is TableCell Then If (sText.Length = 0) Then sText = " " End If DirectCast(oControl, TableCell).Text = sText Else If Not TypeOf oControl Is TBDateEdit Then Throw New HttpException(String.Format("{0}: Wrong Control Type", Me.DataField)) End If oDateEdit = DirectCast(oControl, TBDateEdit) If Me.ApplyFormatInEditMode Then oDateEdit.Text = sText ElseIf (Not oDataValue Is Nothing) Then oDateEdit.Text = oDataValue.ToString End If End If End Sub </code></pre> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-26 16:56:36</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day24] TBDropDownField 的 Items 屬性的資料繫結(續)</title> <link>https://ithelp.ithome.com.tw/articles/10013047?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013047?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> <strong>三、由關連的資料來源擷取資料</strong><br /> 再來就是重點就是要處理 PerformSelecrt 私有方法，來取得 Items 屬性的成員...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> <strong>三、由關連的資料來源擷取資料</strong><br /> 再來就是重點就是要處理 PerformSelecrt 私有方法，來取得 Items 屬性的成員清單內容。PerformSelect 方法的作用是去尋找頁面上的具 IDataSource 介面的控制項，並執行此資料來源的 Select 方法，以取得資料來設定 Items 的清單內容。<br /> <strong>step1. 尋找資料來源控制項</strong><br /> PerformSelect 方法中有使用 FindControlEx 方法，它是自訂援尋控制項的多載方法，是取代 FindControl 進階方法。程式碼中使用 FindControlEx 去是頁面中以遞迴方式尋找具有 IDataSource 介面的控制項，且 ID 屬性值為 TBDropDownList.ID 的屬性值。<br /> <strong>step2. 執行資料來源控制項的 Select 方法</strong><br /> 當找到資料來源控制項後 (如 SqlDataSource、ObjectDataSource ...等等)，執行其 DataSourceView.Select 方法，此方法需入一個 DataSourceViewSelectCallback 函式當作參數，當資料來源控制項取得資料後回呼我們指定的 OnDataSourceViewSelectCallback 函式中做後序處理。<br /> <strong>step3. 將取得的資料來設定生 Items 的清單內容</strong><br /> 在 OnDataSourceViewSelectCallback 函式中接到回傳的具 IEnumerable 介面的資料，有可能是 DataView、DataTable ...等型別的資料。利用 DataBinder.GetPropertyValue 來取得 DataTextField 及 DataValueField 設定的欄位值，逐一建立 ListItem 項目，並加入 Items 集合屬性中。</p> <pre><code> ''' <summary> ''' 從關聯的資料來源擷取資料。 ''' </summary> Private Sub PerformSelect() Dim oControl As Control Dim oDataSource As IDataSource Dim oDataSourceView As DataSourceView '若未設定 DataSourceID 屬性則離開 If StrIsEmpty(Me.DataSourceID) Then Exit Sub '找到具 IDataSource 介面的控制項 oControl = FindControlEx(Me.Control.Page, GetType(IDataSource), "ID", Me.DataSourceID) If oControl Is Nothing Then Exit Sub oDataSource = DirectCast(oControl, IDataSource) oDataSourceView = oDataSource.GetView(String.Empty) oDataSourceView.Select(DataSourceSelectArguments.Empty, _ New DataSourceViewSelectCallback(AddressOf Me.OnDataSourceViewSelectCallback)) End Sub ''' <summary> ''' 擷取資料的回呼函式。 ''' </summary> ''' <param name="data">取得的資料。</param> Private Sub OnDataSourceViewSelectCallback(ByVal data As IEnumerable) Dim oCollection As ICollection Dim oValue As Object Dim oItem As ListItem Me.Items.Clear() If data Is Nothing Then Exit Sub oCollection = TryCast(data, ICollection) Me.Items.Capacity = oCollection.Count For Each oValue In data oItem = New ListItem() If StrIsNotEmpty(Me.DataTextField) Then oItem.Text = DataBinder.GetPropertyValue(oValue, DataTextField, Nothing) End If If StrIsNotEmpty(Me.DataValueField) Then oItem.Value = DataBinder.GetPropertyValue(oValue, DataValueField, Nothing) End If Me.Items.Add(oItem) Next End Sub </code></pre> <p><strong>四、測試程式</strong><br /> 使用上篇中同一個案例做測試，同樣以 Northwnd 資料庫的 Products 資料表為例。在 GridView 加入自訂的 TBDropDownField 欄位繫結 CategoryID 欄位，並設定 DataSourceID、DataTextField、DataValueField 屬性；另外加入另一個 BoundField 的唯讀欄位，也同樣繫結 CategoryID 欄位來做比較。</p> <pre><code> <bee:TBDropDownField HeaderText="CategoryID" SortExpression="CategoryID" DataField="CategoryID" DataTextField="CategoryName" DataValueField="CategoryID" DataSourceID="SqlDataSource2"> </bee:TBDropDownField> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" ReadOnly="true" /> </code></pre> <p>執行程式，在 GridView 瀏覽的模式時，TBDropDownField 的儲存格已經會呈現 Items 對應成員的顯示文字。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay24TBDropDownField_73B8/image_thumb_1.png" alt="" /></p> <p>執行資料列編輯時，也可以正常顯示下拉清單的內容。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay24TBDropDownField_73B8/image_thumb_2.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-25 18:11:28</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day24] TBDropDownField 的 Items 屬性的資料繫結</title> <link>https://ithelp.ithome.com.tw/articles/10013041?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10013041?sc=rss.iron</guid> <description><![CDATA[<p>上篇中我們實作了 GridView 的 TBDropDownField 欄位類別，不過眼尖的讀者不知有沒有發覺我們並處理 Items 屬性取得成員清單的動作，而是直接設定儲存格內含的 TBDro...]]></description> <content:encoded><![CDATA[<p>上篇中我們實作了 GridView 的 TBDropDownField 欄位類別，不過眼尖的讀者不知有沒有發覺我們並處理 Items 屬性取得成員清單的動作，而是直接設定儲存格內含的 TBDropDownList 控制項相關屬性 (DataSourceID、DataTextField、DataValueField 屬性) 後，就由 TDropDownList 控制項自行處理 Items 屬性的資料繫結。當 GridView 的資料列是編輯狀態時，下拉清單會顯示出 Items 的文字內容；可是瀏覽狀態的資料列，卻是顯示欄位原始值，無法呈現 Items 的文字內容。本文將說明如何自行處理 TBDropDownField 的 Items 屬性的資料繫結動作，並使唯讀狀態的資料列也可以呈現 Items 的文字內容。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay24TBDropDownField_73B8/image_thumb.png" alt="" /><br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081025163920497.rar" target="_blank">ASP.NET Server Control - Day24.rar</a><br /> Northwnd 資料庫下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102364857537.rar" target="_blank">NORTHWND.rar</a></p> <p><strong>一、Items 屬性的問題</strong><br /> 我們重新看一次原本 TBDropDownField 類別在處理 Items 屬性的資料繫結取得清單內容的程式碼，在覆寫 InitializeDataCell 方法中，當儲存格為編輯模式時，會呈現 TBDropDownList 控制項並設定取得 Items 清單內容的相關屬性，讓 TBDropDownList 自行去處理它的 Items 屬性的清單內容。</p> <pre><code>'由資料來源控制項取得清單項目 oDropDownList.DataSourceID = Me.DataSourceID oDropDownList.DataTextField = Me.DataTextField oDropDownList.DataValueField = Me.DataValueField </code></pre> <p>不知你有沒有發覺，我們無論在 InitializeDataCell 及 OnDataBindField 方法中，都沒有針對 TBDropDownList 控制項做任何 DataBind 動作，那它是怎麼從 DataSourceID 關聯的資料來源擷取資料呢？因為 GridView 在執行 DataBind 時，就會要求所有的子控制項做 DataBind，所以我們只要設定好 BDropDownList 控制項相關屬性後，當 TBDropDownList 自動被要求資料繫結時就會取得 Items 的清單內容。<br /> 當然使用 TBDropDownList 控制項去處理 Items 的資料繫結動作最簡單，可是這樣唯讀的儲存格只能顯示原始欄位值，無法呈現 Items 中對應成員的文字；除非無論唯讀或編輯狀態，都要建立 TBDropDownList 控制項去取得 Items 清單內容，而唯讀欄位使用 TBDropDownList.Items 去找到對應成員的顯示文字，不過這樣的作法會怪怪的，而且沒有執行效能率。所以比較好的辨法，就是由 TBDropDownField 類別自行處理 Items 的資料繫結，同時提供給唯讀狀態的<br /> DataControlFieldCell 及編輯狀態的 TBDropDownList 使用。</p> <p><strong>二、由 TBDropDownField 類別處理 Items 屬性的資料繫結</strong><br /> 我們要自行處理 Items 屬性來取得成員清單，在 InitializeDataCell 方法中無須處理 Items 屬性，只需產生儲存格需要的子控制項，未來在執行子控制項的 DataBinding 時的 OnDataBindField 方法中再來處理 Items 屬性。</p> <pre><code> Protected Overrides Sub InitializeDataCell( _ ByVal Cell As DataControlFieldCell, _ ByVal RowState As DataControlRowState) Dim oDropDownList As TBDropDownList Dim oControl As Control If Me.CellIsEdit(RowState) Then oDropDownList = New TBDropDownList() oControl = oDropDownList Cell.Controls.Add(oControl) Else oControl = Cell End If If (oControl IsNot Nothing) AndAlso MyBase.Visible Then AddHandler oControl.DataBinding, New EventHandler(AddressOf Me.OnDataBindField) End If End Sub </code></pre> <p>在 OnDataBindField 方法中，我們加上一段處理 Items 屬性的程式碼如下，會利用 PerformSelecrt 私有方法，由關聯的資料來源 (即 DataSrouceID 指定的資料來源控制項) 擷取資料並產生 Items 的成員清單，在後面會詳細講解 PerformSelecrt 方法處理擷取資料的細節。因為 TBDropDownField 每個資料儲存格都會執行 OnDataBindField 方法，但 Items 取得成員清單的動作只需做一次即可，所以會以 FIsPerformSelect 區域變數來判斷是否已取得 Items 的成員清單，若已取過就不重新取得，這樣比較有執行效能。</p> <pre><code> If Not Me.DesignMode Then If Not FIsPerformSelect Then '從關聯的資料來源擷取資料 PerformSelect() FIsPerformSelect = True End If End If </code></pre> <p>當取得儲存儲的對應的欄位值時，依此欄位值由 Items 集合去取得對應的 ListItem 成員，並以此 ListItem.Text 的文字內容來做顯示。</p> <pre><code> '由 Items 去取得對應成員的顯示內容 oListItem = Me.Items.FindByValue(CCStr(sText)) If oListItem IsNot Nothing Then sText = oListItem.Text End If </code></pre> <p>若是由 TBDropDownList 所引發的 OnDataBindField 方法時，使用 SetItems 私有方法將 TBDropDownField.Items 屬性複製給 TBDropDownList.Item 屬性。</p> <pre><code> ODropDownList = DirectCast(oControl, TBDropDownList) SetItems(ODropDownList) </code></pre> <p>SetItems 私有方法的程式碼如下。</p> <pre><code> Private Sub SetItems(ByVal DropDownList As TBDropDownList) Dim oItems() As ListItem If Not Me.DesignMode Then ReDim oItems(Me.Items.Count - 1) Me.Items.CopyTo(oItems, 0) DropDownList.Items.AddRange(oItems) End If End Sub </code></pre> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/25/5772.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-25 18:09:12</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day23] 自訂GridVie欄位-實作TBDropDownField欄位(續3)</title> <link>https://ithelp.ithome.com.tw/articles/10012977?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012977?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> <strong>四、測試程式</strong><br /> 辛苦寫好 TBDropDownField 欄位類別時，接下來就是驗收成果的時候。我們以 Northwnd 資料...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> <strong>四、測試程式</strong><br /> 辛苦寫好 TBDropDownField 欄位類別時，接下來就是驗收成果的時候。我們以 Northwnd 資料庫的 Products 資料表為例，將 TBDropDownList .DataField 設為 CategoryID 欄位來做測試。首先我們測試沒有 DataSoruceID 的情況，在 GridView 加入自訂的 TBDropDownField 欄位繫結 CategoryID 欄位，另外加入另一個 BoundField 的唯讀欄位，也同樣繫結 CategoryID 欄位來做比較。</p> <pre><code> <bee:TBDropDownField HeaderText="CategoryID" SortExpression="CategoryID" DataField="CategoryID" > <Items> <asp:ListItem Value="">未對應</asp:ListItem> <asp:ListItem Value="2">Condiments</asp:ListItem> <asp:ListItem Value="3">Confections</asp:ListItem> </Items> </bee:TBDropDownField> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" ReadOnly="true" /> </code></pre> <p>執行程式，在 GridView 在唯讀模式，TBDropDownFIeld 可以正確的繫結 CategoryID 欄位值。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay23DataControlField_67E8/image_thumb.png" alt="" /></p> <p>編輯某筆資料列進入編輯狀態，就會顯示 TBDropDownList 控制項，清單成員為我們在 Items 設定的內容。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay23DataControlField_67E8/image_thumb_1.png" alt="" /></p> <p>使用 TBDropDownList 來做編輯欄位值，按下更新鈕，這時會執行 TBDropDownField.ExtractValuesFromCell 方法，取得儲存格中的值；最後由資料來源控制項將欄位值寫回資料庫。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay23DataControlField_67E8/image_thumb_2.png" alt="" /></p> <p>接下來測試設定 TBDropDownField.DataSourceID 的情況，把 DataSourcID 指向含 Categories 資料表內容的 SqlDataSoruce 控制項。</p> <pre><code> <bee:TBDropDownField HeaderText="CategoryID" SortExpression="CategoryID" DataField="CategoryID" DataTextField="CategoryName" DataValueField="CategoryID" DataSourceID="SqlDataSource2"> </bee:TBDropDownField> </code></pre> <p>執行程式查看結果，可以發現 TBDropDownList 控制項的清單內容也可以正常顯示 SqlDataSoruce 控制項取得資料。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay23DataControlField_67E8/image_thumb_3.png" alt="" /></p> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-24 00:32:30</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day23] 自訂GridVie欄位-實作TBDropDownField欄位(續2)</title> <link>https://ithelp.ithome.com.tw/articles/10012973?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012973?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> <strong>step4. 處理資料繫結</strong><br /> 當 GridView 控制項在執行資料繫結時，儲存格的控制項就會引發 DataBinding 事...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> <strong>step4. 處理資料繫結</strong><br /> 當 GridView 控制項在執行資料繫結時，儲存格的控制項就會引發 DataBinding 事件，而這些事件會被導向 OnDataBindField 方法來統一處理儲存格中控制項的繫結動作。</p> <pre><code> ''' <summary> ''' 將欄位值繫結至 BoundField 物件。 ''' </summary> ''' <param name="sender">控制項。</param> ''' <param name="e">事件引數。</param> Protected Overrides Sub OnDataBindField(ByVal sender As Object, ByVal e As EventArgs) Dim oControl As Control Dim ODropDownList As TBDropDownList Dim oNamingContainer As Control Dim oDataValue As Object '欄位值 Dim bEncode As Boolean '是否編碼 Dim sText As String '格式化字串 oControl = DirectCast(sender, Control) oNamingContainer = oControl.NamingContainer oDataValue = Me.GetValue(oNamingContainer) bEncode = ((Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) AndAlso TypeOf oControl Is TableCell) sText = Me.FormatDataValue(oDataValue, bEncode) If TypeOf oControl Is TableCell Then If (sText.Length = 0) Then sText = " " End If DirectCast(oControl, TableCell).Text = sText Else If Not TypeOf oControl Is TBDropDownList Then Throw New HttpException(String.Format("{0}: Wrong Control Type", Me.DataField)) End If ODropDownList = DirectCast(oControl, TBDropDownList) If Me.ApplyFormatInEditMode Then ODropDownList.Text = sText ElseIf (Not oDataValue Is Nothing) Then ODropDownList.Text = oDataValue.ToString End If End If End Sub </code></pre> <p><strong>step5. 取得儲存格中的值</strong><br /> 另外我們還需要覆寫 ExtractValuesFromCell 方法，取得儲存格中的值。這個方法是當 GridView 的編輯資料要準備寫入資料庫時，會經由 ExtractValuesFromCell 方法此來取得每個儲存格的值，並將這些欄位值加入 Dictionary 參數中，這個準備寫入的欄位值集合，可以在 DataSource 控制項的寫入資料庫的相關方法中取得使用。</p> <pre><code> ''' <summary> ''' 使用指定 DataControlFieldCell 物件的值填入指定的 System.Collections.IDictionary 物件。 ''' </summary> ''' <param name="Dictionary">用於儲存指定儲存格的值。</param> ''' <param name="Cell">包含要擷取值的儲存格。</param> ''' <param name="RowState">資料列的狀態。</param> ''' <param name="IncludeReadOnly">true 表示包含唯讀欄位的值，否則為 false。</param> Public Overrides Sub ExtractValuesFromCell( _ ByVal Dictionary As IOrderedDictionary, _ ByVal Cell As DataControlFieldCell, _ ByVal RowState As DataControlRowState, _ ByVal IncludeReadOnly As Boolean) Dim oControl As Control = Nothing Dim sDataField As String = Me.DataField Dim oValue As Object = Nothing Dim sNullDisplayText As String = Me.NullDisplayText Dim oDropDownList As TBDropDownList If (((RowState And DataControlRowState.Insert) = DataControlRowState.Normal) OrElse Me.InsertVisible) Then If (Cell.Controls.Count > 0) Then oControl = Cell.Controls.Item(0) oDropDownList = TryCast(oControl, TBDropDownList) If (Not oDropDownList Is Nothing) Then oValue = oDropDownList.Text End If ElseIf IncludeReadOnly Then Dim s As String = Cell.Text If (s = " ") Then oValue = String.Empty ElseIf (Me.SupportsHtmlEncode AndAlso Me.HtmlEncode) Then oValue = HttpUtility.HtmlDecode(s) Else oValue = s End If End If If (Not oValue Is Nothing) Then If TypeOf oValue Is String Then If (CStr(oValue).Length = 0) AndAlso Me.ConvertEmptyStringToNull Then oValue = Nothing ElseIf (CStr(oValue) = sNullDisplayText) AndAlso (sNullDisplayText.Length > 0) Then oValue = Nothing End If End If If Dictionary.Contains(sDataField) Then Dictionary.Item(sDataField) = oValue Else Dictionary.Add(sDataField, oValue) End If End If End If End Sub </code></pre> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-24 00:31:32</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day23] 自訂GridVie欄位-實作TBDropDownField欄位(續1)</title> <link>https://ithelp.ithome.com.tw/articles/10012971?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012971?sc=rss.iron</guid> <description><![CDATA[<p>接續上一文<br /> <strong>step2. 加入 TBBaseBoundField 的屬性</strong><br /> TBBaseBoundField 類別會內含 DropDown...]]></description> <content:encoded><![CDATA[<p>接續上一文<br /> <strong>step2. 加入 TBBaseBoundField 的屬性</strong><br /> TBBaseBoundField 類別會內含 DropDownList 控制項，所以加入設定 DropDownList 控制項的對應屬性；我們在 TBBaseBoundField 類別加入了 Items 、DataSourceID、DataTextField、DataValueField 屬性。其中 Items 屬性的型別與 DropDownList.Items 屬性相同，都是 ListItemCollection 集合類別，且 Items 屬性會儲存於 ViewState 中。</p> <pre><code> ''' <summary> ''' 清單項目集合。 ''' </summary> < _ Description("清單項目集合。"), _ DefaultValue(CStr(Nothing)), _ PersistenceMode(PersistenceMode.InnerProperty), _ DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _ Editor(GetType(ListItemsCollectionEditor), GetType(UITypeEditor)), _ MergableProperty(False), _ Category("Default")> _ Public Overridable ReadOnly Property Items() As ListItemCollection Get If (FItems Is Nothing) Then FItems = New ListItemCollection() If MyBase.IsTrackingViewState Then CType(FItems, IStateManager).TrackViewState() End If End If Return FItems End Get End Property ''' <summary> ''' 資料來源控制項的 ID 屬性。 ''' </summary> Public Property DataSourceID() As String Get Return FDataSourceID End Get Set(ByVal value As String) FDataSourceID = value End Set End Property ''' <summary> ''' 提供清單項目文字內容的資料來源的欄位。 ''' </summary> < _ Description("提供清單項目文字內容的資料來源的欄位。"), _ DefaultValue("") _ > _ Public Property DataTextField() As String Get Return FDataTextField End Get Set(ByVal value As String) FDataTextField = value End Set End Property ''' <summary> ''' 提供清單項目值的資料來源的欄位。 ''' </summary> Public Property DataValueField() As String Get Return FDataValueField End Get Set(ByVal value As String) FDataValueField = value End Set End Property </code></pre> <p><strong>step3.建立儲存格內含的控制項</strong><br /> GridView 是以儲存格 (DataControlFieldCell) 為單位，我們要覆寫 InitializeDataCell 方法來建立儲存格中的控制項；當儲存格為可編輯狀態時，就建立 DropDownList 控制項並加入儲存格中，在此使用上篇文章提及的 TBDropDownList 控制項來取代，以解決清單成員不存在造成錯誤的問題。若未設定 DataSourceID 屬性時，則由 Items 屬性取得自訂的清單項目；若有設定 DataSourceID 屬性，則由資料來源控制項 (如 SqlDataSource、ObjectDataSource 控制項) 來取得清單項目。<br /> 當建立儲存格中的控制項後，需要以 AddHeadler 的方法，將此控制項的 DataBinding 事件導向 OnDataBindField 這個事件處理方法，我們要在 OnDataBindField 處理資料繫結的動作。</p> <pre><code> ''' <summary> ''' 資料儲存格初始化。 ''' </summary> ''' <param name="Cell">要初始化的儲存格。</param> ''' <param name="RowState">資料列狀態。</param> Protected Overrides Sub InitializeDataCell( _ ByVal Cell As DataControlFieldCell, _ ByVal RowState As DataControlRowState) Dim oDropDownList As TBDropDownList Dim oItems() As ListItem Dim oControl As Control If Me.CellIsEdit(RowState) Then oDropDownList = New TBDropDownList() oControl = oDropDownList Cell.Controls.Add(oControl) If Not Me.DesignMode Then If StrIsEmpty(Me.DataSourceID) Then '自訂清單項目 ReDim oItems(Me.Items.Count - 1) Me.Items.CopyTo(oItems, 0) oDropDownList.Items.AddRange(oItems) Else '由資料來源控制項取得清單項目 oDropDownList.DataSourceID = Me.DataSourceID oDropDownList.DataTextField = Me.DataTextField oDropDownList.DataValueField = Me.DataValueField End If End If Else oControl = Cell End If If (oControl IsNot Nothing) AndAlso MyBase.Visible Then AddHandler oControl.DataBinding, New EventHandler(AddressOf Me.OnDataBindField) End If End Sub </code></pre> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-24 00:25:02</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day23] 自訂GridVie欄位-實作TBDropDownField欄位</title> <link>https://ithelp.ithome.com.tw/articles/10012965?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012965?sc=rss.iron</guid> <description><![CDATA[<p>GridView 是 ASP.NET 中一個相當常用的控制項，在 GridView 可加入 BoundField、CheckBoxField、CommandField、TemplateField...]]></description> <content:encoded><![CDATA[<p>GridView 是 ASP.NET 中一個相當常用的控制項，在 GridView 可加入 BoundField、CheckBoxField、CommandField、TemplateField ... 等不同型別的欄位，可是偏偏沒有提供在 GridView 中可呈現 DropDownList 的欄位型別；遇到這類需求時，一般的作法都是使用 TemplateField 來處理。雖然 TemplateField 具有相當好的設計彈性。可是在當 GridView 需要動態產生欄位的需求時，TemplateField 就相當麻煩，要寫一堆程式碼自行去處理資料繫結的動作。相互比較起來，BoundField、CheckBoxField ...等這類事先定義類型的欄位，在 GridView 要動態產生這些欄位就相當方便。如果我們可以把一些常用的 GridView 的欄位，都做成類似 BoundField 一樣，只要設定欄位的屬性就好，這樣使用上就會方便許多，所以在本文將以實作 DropDownList 欄位為例，讓大家了解如何去自訂 GridView 的欄位類別。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102321355642.rar" target="_blank">ASP.NET Server Control - Day23.rar </a><br /> Northwnd 資料庫下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102364857537.rar" target="_blank">NORTHWND.rar</a></p> <p><strong>一、選擇合適的父類別</strong><br /> 一般自訂 GridView 的欄位類別時，大都是由 DataControlField 或 BoundField 繼承下來改寫。若是欄位不需繫結資料(如 CommandFIeld)，可以由 DataControlFIeld 繼承下來，若是欄位需要做資料繫結時(如 CheckBoxFIld，可以直接由 BoundField 繼承下來改寫比較方便。<br /> DataControlField 類別是所有類型欄位的基底類別，BoundField 類別也是由 DataControlField 類別繼承下來擴展了資料繫結部分的功能，所以我們要實作含 DropDownList 的欄位，也是由 BoundField 繼承下來改寫。</p> <p><strong>二、自訂欄位基底類別</strong><br /> 在此我們不直接繼承 BoundFIeld，而是先撰寫一個繼承 BoundField 命名為 TBBaseBoundField 的基底類別，此類別提供一些通用的屬性及方法，使我們更方便去撰寫自訂的欄位類別。</p> <pre><code> ''' <summary> ''' 資料欄位基礎類別。 ''' </summary> Public MustInherit Class TBBaseBoundField Inherits BoundField Private FRowIndex As Integer = 0 ''' <summary> ''' 資料列是否為編輯模式。 ''' </summary> ''' <param name="RowState">資料列狀態。</param> Public Function RowStateIsEdit(ByVal RowState As DataControlRowState) As Boolean Return (RowState And DataControlRowState.Edit) <> DataControlRowState.Normal End Function ''' <summary> ''' 資料列是否為新增模式。 ''' </summary> ''' <param name="RowState">資料列狀態。</param> Public Function RowStateIsInsert(ByVal RowState As DataControlRowState) As Boolean Return (RowState And DataControlRowState.Insert) <> DataControlRowState.Normal End Function ''' <summary> ''' 資料列是否為編輯或新增模式。 ''' </summary> ''' <param name="RowState">資料列狀態。</param> Public Function RowStateIsEditOrInsert(ByVal RowState As DataControlRowState) As Boolean Return RowStateIsEdit(RowState) OrElse RowStateIsInsert(RowState) End Function ''' <summary> ''' 判斷儲存格是否可編輯(新增/修改)。 ''' </summary> ''' <param name="RowState">資料列狀態。</param> Friend Function CellIsEdit(ByVal RowState As DataControlRowState) As Boolean Return (Not Me.ReadOnly) AndAlso RowStateIsEditOrInsert(RowState) End Function ''' <summary> ''' 資料列索引。 ''' </summary> Friend ReadOnly Property RowIndex() As Integer Get Return FRowIndex End Get End Property ''' <summary> ''' 儲存格初始化。 ''' </summary> ''' <param name="Cell">要初始化的儲存格。</param> ''' <param name="CellType">儲存格類型。</param> ''' <param name="RowState">資料列狀態。</param> ''' <param name="RowIndex">資料列之以零起始的索引。</param> Public Overrides Sub InitializeCell(ByVal Cell As DataControlFieldCell, ByVal CellType As DataControlCellType, _ ByVal RowState As DataControlRowState, ByVal RowIndex As Integer) FRowIndex = RowIndex MyBase.InitializeCell(Cell, CellType, RowState, RowIndex) End Sub ''' <summary> ''' 是否需要執行資料繫結。 ''' </summary> ''' <param name="RowState">資料列狀態。</param> Friend Function RequiresDataBinding(ByVal RowState As DataControlRowState) As Boolean If MyBase.Visible AndAlso StrIsNotEmpty(MyBase.DataField) AndAlso RowStateIsEdit(RowState) Then Return True Else Return False End If End Function End Class </code></pre> <p><strong>三、實作 TBDropDownField 欄位類別</strong><br /> <strong>step1. 繼承 TBBaseBoundField 類別</strong><br /> 首先新增一個類別，繼承 TBBaseBoundField 命名為 TBDropDownFIeld 類別，覆寫 CreateField 方法，傳回 TBDropDownFIeld 物件。</p> <pre><code> Public Class TBDropDownField Inherits TBBaseBoundField Protected Overrides Function CreateField() As System.Web.UI.WebControls.DataControlField Return New TBDropDownField() End Function End Class </code></pre> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/24/5762.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-24 00:19:12</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day22] 讓 DropDownList 不再因項目清單不存在而造成錯誤(續)</title> <link>https://ithelp.ithome.com.tw/articles/10012915?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012915?sc=rss.iron</guid> <description><![CDATA[<p>接續上篇文章內容<br /> <strong>三、解決 TBDropDownList 設定 DataSourceID 造成資料無法繫結的問題</strong><br /> 要解決上述 TBDro...]]></description> <content:encoded><![CDATA[<p>接續上篇文章內容<br /> <strong>三、解決 TBDropDownList 設定 DataSourceID 造成資料無法繫結的問題</strong><br /> 要解決上述 TBDropDownList 設定 DataSourceID 問題，需在設定 SelectedValue 屬性時，若 Items.Count=0 先用一個 FCachedSelectedValue 變數將正確的值先暫存下來，然後覆寫 PerformDataBinding 方法，當 DorpDownList 取得 DataSoruceID 所對應的項目清單內容後，因為這時 Items 的內容才會完整取回，再去設定一次 SelectedValue 屬性就可以正確的繫結資料。</p> <pre><code> Public Class TBDropDownList Inherits DropDownList Private FCachedSelectedValue As String ''' <summary> ''' 覆寫 SelectedValue 屬性。 ''' </summary> Public Overrides Property SelectedValue() As String Get Return MyBase.SelectedValue End Get Set(ByVal value As String) If Me.Items.Count <> 0 Then Dim oItem As ListItem = Me.Items.FindByValue(value) If (oItem Is Nothing) Then Me.SelectedIndex = -1 '當 Items 不存在時 Else MyBase.SelectedValue = value End If Else FCachedSelectedValue = value End If End Set End Property Protected Overrides Sub PerformDataBinding(ByVal data As System.Collections.IEnumerable) MyBase.PerformDataBinding(data) 'DataSoruceID 資料繫結後再設定 SelectedValue 屬性值 If (Not FCachedSelectedValue Is Nothing) Then Me.SelectedValue = FCachedSelectedValue End If End Sub End Class </code></pre> <p>重新執行程式，切換到編輯模式時，TBDropDownList 就可以正確的繫結欄位值了。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay22DropDownList_14F78/image_thumb_5.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-23 07:03:54</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day22] 讓 DropDownList 不再因項目清單不存在而造成錯誤</title> <link>https://ithelp.ithome.com.tw/articles/10012909?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012909?sc=rss.iron</guid> <description><![CDATA[<p>DropDownList 控制項常常會因為項目清單中不存在繫結的欄位，而發生以下的錯誤訊息。因為繫結資料的不完整或異常就會造成這樣的異常錯誤，在設計上實在是相當困擾，而且最麻煩的是這個錯誤在頁面...]]></description> <content:encoded><![CDATA[<p>DropDownList 控制項常常會因為項目清單中不存在繫結的欄位，而發生以下的錯誤訊息。因為繫結資料的不完整或異常就會造成這樣的異常錯誤，在設計上實在是相當困擾，而且最麻煩的是這個錯誤在頁面的程式碼也無法使用 Try ... Catch 方式來略過錯誤。其實最簡單的方式就去直接去修改 DropDownList 控制項，讓 DropDownList 控制項繫結資料時，就算欄位值不存在清單項目中也不要釋出錯誤，本文就要說明如何繼承 DorpDownList 下來修改，來有效解決這個問題。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay22DropDownList_14F78/image_thumb.png" alt="" /><br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102365119295.rar" target="_blank">ASP.NET Server Control - Day22.rar</a><br /> Northwnd 資料庫下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102364857537.rar" target="_blank">NORTHWND.rar</a></p> <p><strong>一、覆寫 SelectedValue 屬性解決資料繫結的問題</strong><br /> DropDownList 控制項繫結錯誤的原因，可以由上圖的錯誤訊息可以大概得知是寫入 SelectedValue 屬性時發生的錯誤；所以我們繼承 DorpDownList 下來命名為 TBDropDownList，並覆寫 SelectedValue 屬性來解決這個問題。解決方式是在寫入 SelectedValue 屬性時，先判斷準備寫入的值是否存在項目清單中，存在的話才寫入 SelectedValue 屬性，若不存在則直接設定 SelectedIndex 屬性為 -1。</p> <pre><code> Public Class TBDropDownList Inherits DropDownList ''' <summary> ''' 覆寫 SelectedValue 屬性。 ''' </summary> Public Overrides Property SelectedValue() As String Get Return MyBase.SelectedValue End Get Set(ByVal value As String) Dim oItem As ListItem = Me.Items.FindByValue(value) If (oItem Is Nothing) Then Me.SelectedIndex = -1 '當 Items 不存在時 Exit Property Else MyBase.SelectedValue = value End If End Set End Property End Class </code></pre> <p>我們以 Northwnd 資料庫的 Products 資料表做為測試資料，事先定義 DropDownList 的 Items 內容，其中第一個加入 "未對應" 的項目，將 SelectedValue 屬性繫結至 CategoryID 欄位。</p> <pre><code> <bee:TBDropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("CategoryID") %>'> <asp:ListItem Value="">未對應</asp:ListItem> <asp:ListItem Value="2">Condiments</asp:ListItem> <asp:ListItem Value="3">Confections</asp:ListItem> </bee:TBDropDownList> </code></pre> <p>當資料的 CategoryID 欄位值不存在於 DropDownList 的 Items 集合屬性中時，就會顯示第一個 "未對應" 的項目。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay22DropDownList_14F78/image_thumb_1.png" alt="" /></p> <p><strong>二、TBDropDownList 設定 DataSoruceID 產生的問題</strong><br /> 上述的解決方法在筆者的「讓 DropDownList DataBind 不再發生錯誤」一文中已經有提及，不過有讀者發現另一個問題，就是當 DropDownList 設定 DataSourceID 時卻會發生資料無法正常繫結，以下就來解決這個問題。<br /> 我們設定 TBDropDownList 的 DataSoruceID 來取得項目清單的內容，將 DataSourceID 設定為另一個取得 Categories 資料表內容的 SqlDataSource 控制項。</p> <pre><code> <bee:TBDropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("CategoryID") %>' DataSourceID="SqlDataSource2" DataTextField="CategoryName" DataValueField="CategoryID"> </bee:TBDropDownList> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Northwnd %>" SelectCommand="SELECT CategoryID, CategoryName, Description, Picture FROM Categories" ProviderName="<%$ ConnectionStrings:Northwnd.ProviderName %>" > </asp:SqlDataSource> </code></pre> <p>當執行程式時，FormView 原本在瀏覽模式時的 CategoryID 欄位值為 7 (CategoryName 應為 Product)。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay22DropDownList_14F78/image_thumb_3.png" alt="" /><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay22DropDownList_14F78/image_thumb_2.png" alt="" /></p> <p>當按下「編輯」時切換到 EditItemTemplate 時，改用 TBDropDownList 繫結 CategoryID 欄位值，可以這時欲無法繫結正確的值。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay22DropDownList_14F78/image_thumb_4.png" alt="" /></p> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-23 06:59:56</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day21] 實作控制項智慧標籤(續)</title> <link>https://ithelp.ithome.com.tw/articles/10012897?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012897?sc=rss.iron</guid> <description><![CDATA[<p>接續 [ASP.NET 控制項實作 Day21] 實作控制項智慧標籤 一文<br /> <strong>step2. 在智慧標籤面板加入屬性項目</strong><br /> DesignerA...]]></description> <content:encoded><![CDATA[<p>接續 [ASP.NET 控制項實作 Day21] 實作控制項智慧標籤 一文<br /> <strong>step2. 在智慧標籤面板加入屬性項目</strong><br /> DesignerActionPropertyItem 類別是設定智慧標籤面上的屬性項目，DesignerActionPropertyItem 建構函式的第一個參數(memberName) 為屬性名稱，這個屬性指的是 TBDateEditActionList 類別中的屬性，所以要在 TBDateEditActionList 新增一個對應的屬性。<br /> 例如在智慧標籤中加入 AutoPostBack 屬性項目，則在 TBDateEditActionList 類別需有一個對應 AutoPostBack 屬性。</p> <pre><code> oItems.Add(New DesignerActionPropertyItem("AutoPostBack", _ "AutoPostBack", "Behavior", "是否引發 PostBack 動作。")) </code></pre> <p>TBDateEditActionList.AutoPostBack 屬性如下，其中 Me.Component 指的是目前的 TDateEdit 控制項，透過 GetPropertyValue 及 SetPropertyValue 方法來存取控制項的指定屬性。</p> <pre><code> ''' <summary> ''' 是否引發 PostBack 動作。 ''' </summary> Public Property AutoPostBack() As Boolean Get Return CType(GetPropertyValue(Me.Component, "AutoPostBack"), Boolean) End Get Set(ByVal value As Boolean) SetPropertyValue(Me.Component, "AutoPostBack", value) End Set End Property ''' <summary> ''' 設定物件的屬性值。 ''' </summary> ''' <param name="Component">屬性值將要設定的物件。</param> ''' <param name="PropertyName">屬性名稱。</param> ''' <param name="Value">新值。</param> Public Shared Sub SetPropertyValue(ByVal Component As Object, ByVal PropertyName As String, ByVal Value As Object) Dim Prop As PropertyDescriptor = TypeDescriptor.GetProperties(Component).Item(PropertyName) Prop.SetValue(Component, Value) End Sub ''' <summary> ''' 取得物件的屬性值。 ''' </summary> ''' <param name="Component">具有要擷取屬性的物件。</param> ''' <param name="PropertyName">屬性名稱。</param> Public Shared Function GetPropertyValue(ByVal Component As Object, ByVal PropertyName As String) As Object Dim Prop As PropertyDescriptor = TypeDescriptor.GetProperties(Component).Item(PropertyName) Return Prop.GetValue(Component) End Function </code></pre> <p><strong>step3. 在智慧標籤面板加入方法項目</strong><br /> DesignerActionMethodItem 類別是設定智慧標籤面上的方法項目，DesignerActionPropertyItem 建構函式的第二個參數(memberName) 為方法名稱，這個方法指的是 TBDateEditActionList 類別中的方法，所以要在 TBDateEditActionList 新增一個對應的方法。<br /> 例如在智慧標籤中加入 About 方法項目，則在 TBDateEditActionList 類別需有一個對應 About 方法。</p> <pre><code> oItems.Add(New DesignerActionMethodItem(Me, "About", _ "關於 TDateEdit 控制項", "About", _ "關於 TDateEdit 控制項。", True)) </code></pre> <p>TBDateEditActionList 的 About 方法只是單純顯示一個訊息視窗，一般你可以在這方法加入任何想在設計階段處理的動作。例如自動產生 GridView 的欄位、在 FormView 加入控制項並自動排版，這些都可以在此實現的。</p> <pre><code> Public Sub About() MsgBox("TDateEdit 是結合 The Coolest DHTML Calendar 日期選擇器實作的控制項") End Sub </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-22 18:02:28</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day21] 實作控制項智慧標籤</title> <link>https://ithelp.ithome.com.tw/articles/10012896?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012896?sc=rss.iron</guid> <description><![CDATA[<p>控制項通常會把常用屬性或功能顯示在智慧標籤中，提供使用者更簡便的快速設定，例如下圖為 GridView 的智慧。若要製作控制項的智慧標籤，需實作控制項的 ActionList 加入智慧標籤中要顯...]]></description> <content:encoded><![CDATA[<p>控制項通常會把常用屬性或功能顯示在智慧標籤中，提供使用者更簡便的快速設定，例如下圖為 GridView 的智慧。若要製作控制項的智慧標籤，需實作控制項的 ActionList 加入智慧標籤中要顯示的項目，在本文將以 TDateEdit 控制項為例，進一步說明控制項的智慧標籤的實作方式。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay21_6429/image_thumb.png" alt="" /><br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008102217453969.rar" target="_blank">ASP.NET Server Control - Day21.rar</a></p> <p><strong>一、TDateEdit 控制項介紹</strong><br /> TDateEdit 控制項是筆者之前在部落格中實作的一個日期控制項，如下圖所示。它是結合 JavaScript 的 The Coolest DHTML Calendar 日期選擇器實作的控制項，我已將 TDateEdit 控制項的相關程式碼含入 Bee.Web.dll 組件中。TDateEdit 控制項的相關細節可以參考筆者部落格下面幾篇文章有進一步說明，本文將以 TDateEdit 控制項為例，只針對實作智慧標籤的部分做進一步說明。<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1742.aspx" target="_blank">日期控制項實作教學(1) - 結合 JavaScript</a><br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1743.aspx" target="_blank">日期控制項實作教學(2) - PostBack 與 事件</a><br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1746.aspx" target="_blank">TBDateEdit 日期控制項 - 1.0.0.0 版 (Open Source)</a><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay21_6429/image_thumb_1.png" alt="" /></p> <p><strong>二、控制項加入智慧標籤</strong><br /> 控制項要加入智慧標籤要實作控制項的 Designer，我們繼承 ControlDesigner 命名為 TBDateEditDesigner，然後覆寫 ActionLists 屬性，此屬性即是傳回智慧標籤中所包含的項目清單集合。在 ActionLists 屬性中一般會先加入父類別的 ActionLists 屬性，再加入自訂的 ActionList 類別，這樣才可以保留原父類別中智慧標籤的項目清單。</p> <pre><code> ''' <summary> ''' TBDateEdit 控制項的設計模式行為。 ''' </summary> Public Class TBDateEditDesigner Inherits System.Web.UI.Design.ControlDesigner ''' <summary> ''' 取得控制項設計工具的動作清單集合。 ''' </summary> Public Overrides ReadOnly Property ActionLists() As DesignerActionListCollection Get Dim oActionLists As New DesignerActionListCollection() oActionLists.AddRange(MyBase.ActionLists) oActionLists.Add(New TBDateEditActionList(Me)) Return oActionLists End Get End Property End Class </code></pre> <p>我們自訂的 ActionList 為 TBDateEditActionList 類別，它在智慧標籤呈現的項目清單如下圖所示，接下去我們會說明 TBDateEditActionList 類別的內容。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay21_6429/image_thumb_2.png" alt="" /></p> <p><strong>三、自訂智慧標籤面板的項目清單集合</strong><br /> DesignerActionList 類別定義用於建立智慧標籤面板的項目清單的基底類別，所以我們首先繼承 DesignerActionList 命名為 TBDateEditActionList。</p> <pre><code> ''' <summary> ''' 定義 TBDateEdit 控制項智慧標籤面板的項目清單集合。 ''' </summary> Public Class TBDateEditActionList Inherits DesignerActionList ''' <summary> ''' 建構函式。 ''' </summary> Public Sub New(ByVal owner As ControlDesigner) MyBase.New(owner.Component) End Sub End Class </code></pre> <p>接下來要覆寫 GetSortedActionItems 方法，它會回傳 DesignerActionItemCollection 集合型別，此集合中會傳回要顯示在智慧標籤面板的項目清單集合，所以我們要在 DesignerActionItemCollection 集合中加入我們要呈現的項目清單內容。</p> <pre><code> ''' <summary> ''' 傳回要顯示在智慧標籤面板的項目清單集合。 ''' </summary> Public Overrides Function GetSortedActionItems() As System.ComponentModel.Design.DesignerActionItemCollection Dim oItems As New DesignerActionItemCollection() '在此加入智慧標籤面板的項目清單 Return oItems End Function </code></pre> <p><strong>step1. 在智慧標籤面板加入靜態標題項目</strong><br /> 首先介紹 DesignerActionHeaderItem 類別，它是設定靜態標題項目，例如我們在 TDateEdit 的智慧標籤中加入「行為」、「外觀」二個標題項目，其中 DesignerActionHeaderItem 建構函式的 category 參數是群組名稱，我們可以將相關的項目歸類到同一個群組。</p> <pre><code>Dim oItems As New DesignerActionItemCollection() oItems.Add(New DesignerActionHeaderItem("行為", "Behavior")) oItems.Add(New DesignerActionHeaderItem("外觀", "Appearance")) </code></pre> <p>[超過字數限制，下一篇接續本文]</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/22/5749.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-22 18:01:29</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day20] 偵錯設計階段的程式碼</title> <link>https://ithelp.ithome.com.tw/articles/10012807?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012807?sc=rss.iron</guid> <description><![CDATA[<p>上篇我們介紹了自訂 Designer 來輸出控制項設計階段的 HTML 碼，可是若你去對針 Designer 的程式碼下中斷點，你會發覺根本無法偵錯。因為程式在執行階段時期，根本不會執行 Des...]]></description> <content:encoded><![CDATA[<p>上篇我們介紹了自訂 Designer 來輸出控制項設計階段的 HTML 碼，可是若你去對針 Designer 的程式碼下中斷點，你會發覺根本無法偵錯。因為程式在執行階段時期，根本不會執行 Designer 相關類別，所以你在 Designer 類別中下的中斷點完全無效；當然不可能這樣寫程式碼而用感覺去偵錯，本文將告訴你如何去偵錯設計階段的程式碼。<br /> <strong>一、設計階段程式碼的錯誤</strong><br /> 如果撰寫 Designer、Editor、ActionList 等設計階段的程式碼，當這些設計階段的程式碼發生錯誤，可能會發生設計頁面中控制項的錯誤情形，如下圖所示。因為控制項專案本身非啟動專案，在測試網站的設計頁面若控制項發生異常時會直接釋出錯誤，無法偵錯設計階段的程式碼；若真得要偵錯誤設計階段的問題，就要使用另一個 VS2008 來偵錯。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb_1.png" alt="" /></p> <p><strong>二、設定起始外部程式</strong><br /> 要偵錯控制項設計階段的程式碼，要先將控制項專案(Bee.Web)設定為啟時專案。然後設定控制項專案的「屬性」，在「偵錯」頁籤中的起始動作選擇「起始外部程式」，選擇 VS2008 的執行檔位置，預設為 C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb.png" alt="" /></p> <p><strong>三、開始偵錯設計階段程式碼</strong><br /> <strong>step1. 控制項專案開始偵錯</strong><br /> 在設計階要偵錯的程式碼下中斷點，在控制項專案按下 F5 開始偵錯，這時會啟動另一個新的 VS2008 執行檔。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb_2.png" alt="" /></p> <p><strong>step2. 在新的 VS2008 的工具箱加入控制項</strong><br /> 在新的 VS2008 中新增一個測試網站，在工具箱按右鍵執行「選擇項目」開啟「選擇工具箱項目」視窗，然後按「瀏覽」鈕按選擇控制項組件(Bee.Web.dll)，將要偵錯的控制項加入工具箱中。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb_4.png" alt="" /><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb_5.png" alt="" /><br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb_6.png" alt="" /></p> <p><strong>step3. 將控制項拖曳至頁面做設計動作</strong><br /> 在新的 VS2008 中，將控制項拖曳至頁面，就會開始執行設計階段的程式碼，特定的設計動作就會執行到相對的設計階段程式碼，當執行到之前下的中斷點時就可以開始偵錯了。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay20_E7AA/image_thumb_7.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/21/5741.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/21/5741.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-21 00:28:45</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day19] 控制項設計階段的外觀</title> <link>https://ithelp.ithome.com.tw/articles/10012682?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012682?sc=rss.iron</guid> <description><![CDATA[<p>有一些控制項在執行階段是不會呈現，也就是說控制項本身在執行階段不會 Render 出 HTML 碼，例如 SqlDataSoruce、ScriptManager 這類控制項；那它們在設計階段的頁...]]></description> <content:encoded><![CDATA[<p>有一些控制項在執行階段是不會呈現，也就是說控制項本身在執行階段不會 Render 出 HTML 碼，例如 SqlDataSoruce、ScriptManager 這類控制項；那它們在設計階段的頁面是如何呈現出來呢？本文將針對控制項設計階段的外觀做進一步的說明。<br /> 程式碼下載：ASP.NET Server Control - Day19.rar<br /> <strong>一、控制項設計階段的 HTML 碼</strong><br /> Web 伺服器控制項的設計模式行為都是透過 ControlDesigner 來處理，連設計階段時控制項的外觀也是如此；控制項在設計階段與執行執行時呈現的外觀不一定相同，當然大部分會儘量一致，使其能所見即所得。<br /> 控制項在設計階段的 HTML 碼是透 ControlDesigner.GetDesignTimeHtml 方法來處理，在 ControlDesigner.GetDesignTimeHtml 預設會執行控制項的 RenderControl 方法，所以大部分的情況下設計階段與執行階段輸出的 HTML 碼會相同。當控制項的 Visible=False 時，執行階段是完全不會輸出 HTML 碼，可是在設計階段時會特別將控制項設定 Visible=True，使控制項能完整呈現。</p> <p>ControlDesigner.GetDesignTimeHtml 方法</p> <pre><code>Public Overridable Function GetDesignTimeHtml() As String Dim writer As New StringWriter(CultureInfo.InvariantCulture) Dim writer2 As New DesignTimeHtmlTextWriter(writer) Dim errorDesignTimeHtml As String = Nothing Dim flag As Boolean = False Dim visible As Boolean = True Dim viewControl As Control = Nothing Try viewControl = Me.ViewControl visible = viewControl.Visible If Not visible Then viewControl.Visible = True flag = Not Me.UsePreviewControl End If viewControl.RenderControl(writer2) errorDesignTimeHtml = writer.ToString Catch exception As Exception errorDesignTimeHtml = Me.GetErrorDesignTimeHtml(exception) Finally If flag Then viewControl.Visible = visible End If End Try If ((Not errorDesignTimeHtml Is Nothing) AndAlso (errorDesignTimeHtml.Length <> 0)) Then Return errorDesignTimeHtml End If Return Me.GetEmptyDesignTimeHtml End Function </code></pre> <p><strong>二、自訂控制項的 Designer</strong><br /> 以 TBToolbar 為例，若我們在 RenderContents 方法未針對 Items.Count=0 做輸出 HTML 的處理，會發現未設定 Items 屬性時，在設計頁面上完全看不到 TBToolbar 控制項；像這種控制項設計階段的 HTML 碼，就可以自訂控制項的 Designer 來處理。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay19_1ACC/image_thumb.png" alt="" /></p> <p>繼承 ControlDesigner 命名為 TBToolbarDesigner，這個類別是用來擴充 TBToolbar 控制項的設計模式行為。我們可以覆寫 GetDesignTimeHtml 方法，處理設計階段表示控制項的 HTML 標記，此方法回傳的 HTML 原始碼就是控制項呈現在設計頁面的外觀。所以我們可以在 TBToolbar.Items.Count=0 時，輸出一段提示的 HTML 碼，這樣當 TBToolbar 未設定 Items 屬性時一樣可以在設計頁面上呈現控制項。</p> <pre><code> ''' <summary> ''' 擴充 TBToolbar 控制項的設計模式行為。 ''' </summary> Public Class TBToolbarDesigner Inherits System.Web.UI.Design.ControlDesigner ''' <summary> ''' 用來在設計階段表示控制項的 HTML 標記。 ''' </summary> Public Overrides Function GetDesignTimeHtml() As String Dim sHTML As String Dim oControl As TBToolbar oControl = CType(ViewControl, TBToolbar) If oControl.Items.Count = 0 Then sHTML = "<div style=""background-color: #C0C0C0; border:solid 1px; width:200px"">請設定 Items 屬性</div>" Else sHTML = MyBase.GetDesignTimeHtml() End If Return sHTML End Function End Class </code></pre> <p>在 TBToolbar 控制項套用 DesignerAttribute 設定自訂的 TBToolbarDesigner 類別。</p> <pre><code> <Designer(GetType(TBToolbarDesigner))> _ Public Class TBToolbar Inherits WebControl End Class </code></pre> <p>重建控制項組件，切換到設計頁面上的看 TBToolbar 控制項未設定 Items 屬性時的外觀，就是我們在 TBToolbarDesigner.GetDesignTimeHtml 方法回傳的 HTML 碼。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay19_1ACC/image_thumb_1.png" alt="" /></p> <p>如果你覺得上述設計階段的控制項有點太陽春，我們也可以輸出類似 SqlDataSource 控制項的外觀，將未設定 Items 屬性時輸出 HTML 改呼叫 CreatePlaceHolderDesignTimeHtml 方法。</p> <pre><code> If oControl.Items.Count = 0 Then sHTML = MyBase.CreatePlaceHolderDesignTimeHtml("請設定 Items 屬性") Else sHTML = MyBase.GetDesignTimeHtml() End If </code></pre> <p>來看一下這樣修改後的結果，是不是比較專業一點了呢。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay19_1ACC/image_thumb_2.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/20/5726.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/20/5726.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-20 02:25:29</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day18] 修改集合屬性編輯器</title> <link>https://ithelp.ithome.com.tw/articles/10012636?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012636?sc=rss.iron</guid> <description><![CDATA[<p>上篇我們實作了「集合屬性包含不同型別的成員」，不過若有去使用屬性視窗編輯 TBToolbar 的 Items 屬性，你會發覺這個集合屬性編輯器無法加入我們定義不同型別的成員，只能加入最原始的集合...]]></description> <content:encoded><![CDATA[<p>上篇我們實作了「集合屬性包含不同型別的成員」，不過若有去使用屬性視窗編輯 TBToolbar 的 Items 屬性，你會發覺這個集合屬性編輯器無法加入我們定義不同型別的成員，只能加入最原始的集合成員。是不是只能在 aspx 程式碼中手動去輸入呢？當然不需要這樣人工作業，只要改掉集合屬性編輯器就可以達到我們的需求，本文將介紹修改集合屬性編輯器的相關作法。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/200810190138285.rar" target="_blank">ASP.NET Server Control - Day18.rar</a></p> <p><strong>一、自訂集合屬性編輯器</strong><br /> 我們先看一下 TBToolbar.Items 屬性套用的 EditorAttribute，它是使用 CollectionEditor 類別來當作屬性編輯器，所以我們就是要繼承 CollectionEditor 類別下來修改成自訂的屬性編輯器。</p> <pre><code>< _ Editor(GetType(CollectionEditor), GetType(UITypeEditor)) _ > _ Public ReadOnly Property Items() As TBToolbarItemCollection </code></pre> <p>新增一個繼承 CollectionEditor 的 TBToolbarItemCollectionEditor 類別，並加入建構函式。此類別屬於 Bee.WebControls.Design 命名空間，通常我們會把設計階段使用的類別歸類到特別的命名空間便於管理及使用。</p> <pre><code>Namespace WebControls.Design Public Class TBToolbarItemCollectionEditor Inherits CollectionEditor ''' <summary> ''' 建構函式。 ''' </summary> ''' <param name="Type">型別。</param> Public Sub New(ByVal Type As Type) MyBase.New(Type) End Sub End Class End Namespace </code></pre> <p>我們可以先修改 Items 屬性的 EditorAttribute，看看我們自訂的 TBToolbarItemCollectionEditor 是否能正常運作。不過這個屬性編輯器跟原本的沒什麼差異，因為我們只是單純繼承下來沒做任何異動，接下去我們就要開始來修改這個屬性編輯器。</p> <pre><code>< _ Editor(GetType(TBToolbarItemCollectionEditor), GetType(UITypeEditor)) _ > _ Public ReadOnly Property Items() As TBToolbarItemCollection </code></pre> <p><strong>二、加入不同型別的集合成員</strong><br /> 再來我們就要著手修改集合屬性編輯器，讓它可以加入不同型別的集合成員。覆寫 CollectionEditor 的 CanSelectMultipleInstances 方法傳回 True，這個方法是設定 CollectionEditor 是否允許加入多種不同型別的集合成員。</p> <pre><code> Protected Overrides Function CanSelectMultipleInstances() As Boolean Return True End Function </code></pre> <p>再來覆寫 CreateNewItemTypes 方法，這個方法是取得這個集合編輯器可包含的資料型別，將集合可包含的資料型別以陣列傳回。</p> <pre><code> ''' <summary> ''' 取得這個集合編輯器可包含的資料型別。 ''' </summary> ''' <returns>這個集合可包含的資料型別陣列。</returns> Protected Overrides Function CreateNewItemTypes() As System.Type() Dim ItemTypes(2) As System.Type ItemTypes(0) = GetType(TBToolbarButton) ItemTypes(1) = GetType(TBToolbarTextbox) ItemTypes(2) = GetType(TBToolbarLabel) Return ItemTypes End Function </code></pre> <p>重建控制項組件，使用 Items 的集合屬性編輯器，就可以發現「加入」鈕的下拉清單就會出現我們所定義的三種型別的集合成員，如此可以加入不同型別的成員了。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay18_6E6C/image_2.png" alt="" /></p> <p><strong>三、設定清單項目的顯示文字</strong><br /> 在成員清單項目中預設會顯示成員含命名空間的型別，若我們要修改成比較有識別的顯示文字，例如 TBToolbarButton(Key=Add) 可以顯示「按鈕-Add」，這時可以覆寫 GetDisplayText 方法來設定清單項目的顯示文字。</p> <pre><code> ''' <summary> ''' 取出指定清單項目的顯示文字。 ''' </summary> Protected Overrides Function GetDisplayText(ByVal value As Object) As String If TypeOf value Is TBToolbarButton Then Return String.Format("按鈕 - {0}", CType(value, TBToolbarButton).Key) ElseIf TypeOf value Is TBToolbarTextbox Then Return "文字框" ElseIf TypeOf value Is TBToolbarLabel Then Return String.Format("標籤 - {0}", CType(value, TBToolbarLabel).Text) Else Return value.GetType.Name End If End Function </code></pre> <p><img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay18_6E6C/image_4.png" alt="" /></p> <p><strong>四、集合編輯器的屬性視窗的屬性描述</strong><br /> 一般屬性視窗下面都會有屬性描述，可以集合屬性編輯器中的屬性視窗下面竟沒有屬性描述。若我們要讓它的屬性描述可以顯示，可以覆寫 CreateCollectionForm 方法，取得集合屬性編輯表單，再去設定表單上的 PropertyGrid.HelpVisible<br /> = True 即可。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay18_6E6C/image_6.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/19/5721.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/19/5721.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-19 00:13:21</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day17] 集合屬性包含不同型別的成員</title> <link>https://ithelp.ithome.com.tw/articles/10012600?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012600?sc=rss.iron</guid> <description><![CDATA[<p>我們知道在 GridView 的 Columns 集合屬性中，可以包含不同型別的欄位，如 BoundFIeld、CheckBoxField、HyperLinkField ...等不同型別的欄位。...]]></description> <content:encoded><![CDATA[<p>我們知道在 GridView 的 Columns 集合屬性中，可以包含不同型別的欄位，如 BoundFIeld、CheckBoxField、HyperLinkField ...等不同型別的欄位。如果我們希望工具列中不只包含按鈕，可以包含其他不同類型的子控制項，那該怎麼做呢？本文就以上篇中的 TBToolbar 控制項為案例，讓 Items 集合屬性可以加入 Button、TextBox、Label ...等不同的子控制項。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081017235034673.rar" target="_blank">ASP.NET Server Control - Day17.rar</a><br /> <strong>一、不同型別的集合成員</strong><br /> 我們的需求是讓工具列可以加入 Button、TextBox、Label 三種子控制項，所以繼承原來的 TBToolbarItem (只保留 Enabled 屬性)，新增了 TBToolbarButton、TBToolbarTextbox、TBToolbarLabel 三個類別。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay17_1430A/image_6.png" alt="" /></p> <p>這些新增的成員類別都是繼承至 TBToolbarItem，所以在 aspx 程式碼中，手動輸入 Items 的成員時，就會列出這幾種定義的成員型別。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay17_1430A/image_2.png" alt="" /></p> <p><strong>二、建立不同型別集合成員的子控制項</strong><br /> 因為 Items 屬性的成員具不同型別，所以我們要改寫 RenderContents 方法，判斷成員型別來建立對應類型的子控制項。若為 TBToolbarButton 型別建立 Button 控制項、若為 TBToolbarTextbox 型別則建立 TextBox 控制項、若為 TBToolbarLabel 型別則建立 Label 控制項。其中 TBToolbarButton 建立的控制項為 TBButton，這個控制項是我們在「 <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/04/5578.aspx" target="_blank">[ASP.NET 控制項實作 Day3] 擴展現有伺服器控制項功能</a>」一文中實作的具詢問訊息的按鈕控制項。</p> <pre><code> ''' <summary> ''' 覆寫 RenderContents 方法。 ''' </summary> Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter) Dim oItem As TBToolbarItem Dim oControl As Control For Each oItem In Me.Items If TypeOf oItem Is TBToolbarButton Then '建立 Button 控制項 oControl = CreateToolbarButton(CType(oItem, TBToolbarButton)) ElseIf TypeOf oItem Is TBToolbarTextbox Then '建立 Textbox 控制項 oControl = CreateToolbarTextbox(CType(oItem, TBToolbarTextbox)) Else '建立 Label 控制項 oControl = CreateToolbarLabel(CType(oItem, TBToolbarLabel)) End If Me.Controls.Add(oControl) Next MyBase.RenderContents(writer) End Sub ''' <summary> ''' 建立工具列按鈕。 ''' </summary> Private Function CreateToolbarButton(ByVal Item As TBToolbarButton) As Control Dim oButton As TBButton Dim sScript As String oButton = New TBButton() oButton.Text = Item.Text oButton.Enabled = Item.Enabled oButton.ID = Item.Key oButton.ConfirmMessage = Item.ConfirmMessage sScript = Me.Page.ClientScript.GetPostBackEventReference(Me, Item.Key) oButton.OnClientClick = sScript Return oButton End Function ''' <summary> ''' 建立工具列文字框。 ''' </summary> Private Function CreateToolbarTextbox(ByVal Item As TBToolbarTextbox) As Control Dim oTextBox As TextBox oTextBox = New TextBox Return oTextBox End Function ''' <summary> ''' 建立工具列標籤。 ''' </summary> Private Function CreateToolbarLabel(ByVal Item As TBToolbarLabel) As Control Dim oLabel As Label oLabel = New Label() oLabel.Text = Item.Text Return oLabel End Function </code></pre> <p>我們手動在 aspx 程式碼中輸入不同型別的成員，TBToolbar 控制項就會呈現對應的子控制項。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay17_1430A/image_8.png" alt="" /></p> <p><strong>三、執行程式</strong><br /> 執行程式，就可以在瀏覽器看到呈現的工具列，當按下「刪除」時也會出現我們定義的詢問訊息。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay17_1430A/image_4.png" alt="" /></p> <p>輸出的 HTML 碼如下</p> <pre><code><span id="TBToolbar1"> <input type="submit" name="TBToolbar1$Add" value="新增" onclick="__doPostBack('TBToolbar1','Add');" id="TBToolbar1_Add" /> <input type="submit" name="TBToolbar1$Edit" value="修改" onclick="__doPostBack('TBToolbar1','Edit');" id="TBToolbar1_Edit" /> <input type="submit" name="TBToolbar1$Delete" value="刪除" onclick="if (confirm('確定刪除嗎？')==false) {return false;}__doPostBack('TBToolbar1','Delete');" id="TBToolbar1_Delete" /> <span>關鍵字</span> <input name="TBToolbar1$ctl01" type="text" /> <input type="submit" name="TBToolbar1$Search" value="搜尋" onclick="__doPostBack('TBToolbar1','Search');" id="TBToolbar1_Search" /> </span> </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/18/5718.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/18/5718.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-18 00:05:57</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day16] 繼承 WebControl 實作 Toolbar 控制項</title> <link>https://ithelp.ithome.com.tw/articles/10012507?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012507?sc=rss.iron</guid> <description><![CDATA[<p>前面我們討論過「繼承 CompositeControl 實作 Toolbar 控制項」，本文將繼承 WebControl 來實作同樣功能的 Toolbar 控制項，用不同的方式來實作同一個控制項...]]></description> <content:encoded><![CDATA[<p>前面我們討論過「繼承 CompositeControl 實作 Toolbar 控制項」，本文將繼承 WebControl 來實作同樣功能的 Toolbar 控制項，用不同的方式來實作同一個控制項，進而比較二者之間的差異。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081016225639603.rar" target="_blank">ASP.NET Server Control - Day16.rar</a></p> <p><strong>一、繼承 WebControl 實作 TBToolbar 控制項</strong><br /> <strong>step1. 新增繼承 WebControl 的 TBToolbar 控制項</strong><br /> 新增繼承 WebControl 的 TBToolbar 控制項，你也可以直接原修改原 TBToolbar 控制項，繼承對象由 CompositeControl 更改為 WebControl即可。跟之前一樣在 TBToolbar 控制項加入 Items 屬性及 Click 事件。<br /> 另外 TBToolbar 控制項需實作 INamingContainer 界面，此界面很特殊沒有任何屬性或方法，INamingContainer 界面的作用是子控制項的 ClientID 會在前面加上父控制項的 ClickID，使每個子控制項有唯一的 ClientID。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15WebControlToolbar_12C6D/image_thumb_3.png" alt="" /></p> <p><strong>step2. 建立工具列按鈕集合</strong><br /> 覆寫 RenderContents 方法，將原本 TBToolbar (複合控制項) 的 CreateChildControls 方法中建立工具列按鈕程式碼，搬移至 RenderContents 方法即可。</p> <pre><code> Private Sub ButtonClickEventHandler(ByVal sender As Object, ByVal e As EventArgs) Dim oButton As Button Dim oEventArgs As ClickEventArgs oButton = CType(sender, Button) oEventArgs = New ClickEventArgs() oEventArgs.Key = oButton.ID OnClick(oEventArgs) End Sub ''' <summary> ''' 覆寫 RenderContents 方法。 ''' </summary> Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter) Dim oItem As TBToolbarItem Dim oButton As Button For Each oItem In Me.Items oButton = New Button() oButton.Text = oItem.Text oButton.Enabled = oItem.Enabled oButton.ID = oItem.Key AddHandler oButton.Click, AddressOf ButtonClickEventHandler Me.Controls.Add(oButton) Next If Me.Items.Count = 0 AndAlso Me.DesignMode Then oButton = New Button() oButton.Text = "請設定 Items 屬性。" Me.Controls.Add(oButton) End If MyBase.RenderContents(writer) End Sub </code></pre> <p>上述的直接搬移過來的程式碼還有個問題，就是原來的使用 AddHandler 來處理按鈕事件的方式變成沒有作用了？因為現在不是複合式控制項，當前端的按鈕 PostBack 傳回伺服端時，TBToolbar 不會事先建立子控制槓，所以機制會找不到原來產生的按鈕，也就無法使用 AddHandler 來處理事件了。</p> <pre><code>AddHandler oButton.Click, AddressOf ButtonClickEventHandler </code></pre> <p><strong>step3. 處理 Click 事件</strong><br /> 因為不能使用 AddHandler 來處理按鈕事件，所以我們就自行使用 Page.ClientScript.GetPostBackEventReference 方法來產生 PostBack 動作的用戶端指令碼，按鈕的 OnClientClick 去執行 PostBack 的動作。</p> <pre><code> For Each oItem In Me.Items oButton = New Button() oButton.Text = oItem.Text oButton.Enabled = oItem.Enabled oButton.ID = oItem.Key sScript = Me.Page.ClientScript.GetPostBackEventReference(Me, oItem.Key) oButton.OnClientClick = sScript Me.Controls.Add(oButton) Next </code></pre> <p>TBToolar 控制項輸出的 HTML 碼如下</p> <pre><code><span id="TBToolbar1"> <input type="submit" name="TBToolbar1$Add" value="新增" onclick="__doPostBack('TBToolbar1','Add');" id="TBToolbar1_Add" /> <input type="submit" name="TBToolbar1$Edit" value="修改" onclick="__doPostBack('TBToolbar1','Edit');" id="TBToolbar1_Edit" /> <input type="submit" name="TBToolbar1$Delete" value="刪除" onclick="__doPostBack('TBToolbar1','Delete');" id="TBToolbar1_Delete" /> </span> </code></pre> <p>要自行處理 PostBack 的事件，需實作 IPostBackEventHandler 介面，在 RaisePostBackEvent 方法來引發 TBToolbar 的 Click 事件。</p> <pre><code> Public Class TBToolbar Inherits WebControl Implements INamingContainer Implements IPostBackEventHandler Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent Dim oEventArgs As ClickEventArgs oEventArgs = New ClickEventArgs() oEventArgs.Key = eventArgument Me.OnClick(oEventArgs) End Sub End Class </code></pre> <p><strong>二、測試程式</strong><br /> 在測試頁面上放置 TBToolbar 控制項，在 Click 事件撰寫測試程式碼。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15WebControlToolbar_12C6D/image_thumb.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/17/5706.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/17/5706.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-17 00:05:40</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day15] 複合控制項隱藏的問題</title> <link>https://ithelp.ithome.com.tw/articles/10012425?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012425?sc=rss.iron</guid> <description><![CDATA[<p>上一篇我們使用複合控制項(繼承 CompositeControl)的方式來實作 TBToolbar 控制項，本文將針對複合控制項做一些測試，說明在使用複合控制項要注意的一些問題。<br /> 程...]]></description> <content:encoded><![CDATA[<p>上一篇我們使用複合控制項(繼承 CompositeControl)的方式來實作 TBToolbar 控制項，本文將針對複合控制項做一些測試，說明在使用複合控制項要注意的一些問題。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008101612954661.rar" target="_blank">ASP.NET Server Control - Day15.rar</a><br /> <strong>一、複合控制項建立子控制項的時機</strong><br /> 還記得我們之前介紹複合控制項時有談到 CompositeControl 類別會確保我們存取子控制項時，它的子控制項一定會事先建立；也就是當我們使用 Controls 屬性去存取子控制項時，一定會執行 CreateChildControls 方法，以確保子控制項事先被建立。我們看一下 CompositeControl 類別的 Controls 屬性的寫法就可以了解其中的原由，在存取 CompositeControl.Controls 屬性時，它會先執行 Control.EnsureChildControls 方法；而 EnsureChildControls 方法會去判斷子控制項是否已建立，若未建立會去執行 CreateChildControls 方法，這也就是為什麼 CompositeControl 有辨法確保子控制項事先被建立的原因。</p> <p>CompositeControl.Controls 屬性如下</p> <pre><code>Public Overrides ReadOnly Property Controls As ControlCollection Get Me.EnsureChildControls Return MyBase.Controls End Get End Property </code></pre> <p>Control.EnsureChildControls 方法如下</p> <pre><code>Protected Overridable Sub EnsureChildControls() If (Not Me.ChildControlsCreated AndAlso Not Me.flags.Item(&H100)) Then Me.flags.Set(&H100) Try Me.ResolveAdapter If (Not Me._adapter Is Nothing) Then Me._adapter.CreateChildControls Else Me.CreateChildControls End If Me.ChildControlsCreated = True Finally Me.flags.Clear(&H100) End Try End If End Sub </code></pre> <p><strong>二、複合控制項隱藏的問題</strong><br /> 我們以上篇的 TBToolbar 控制項為例，撰寫一些測試案例來說明複合控制項的問題。在撰寫測試案例之前，我們先修改一下 TBToolbar 控制項，覆寫 LoadViewState 及 SaveViewState 方法，將 Items 屬性儲存於 ViewState 中以維持狀態。</p> <p>在測試頁面上放置「測試一」、「測試二」、「PostBack」三個按鈕，這三個按鈕的動作如下。<br /> 「測試一」按鈕：在工具列直接新增一個按鈕。<br /> 「測試二」按鈕：先使用 FindControl 取得工具列的按鈕，然後在在工具列再新增一個按鈕。<br /> 「PostBack」按鈕：單純執行 PostBack，不撰寫程式碼。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15_E8C/image_thumb.png" alt="" /></p> <p>三個按鈕的程式碼如下所示。</p> <pre><code> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim oItem As TBToolbarItem '加入新按鈕 oItem = New TBToolbarItem() oItem.Text = "新按鈕" oItem.Key = "NewButton" TBToolbar1.Items.Add(oItem) Me.Response.Write("「測試一」按鈕") End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click Dim oItem As TBToolbarItem Dim oButton As Button '先執行 FindControl 去取得 ID="Add" 的按鈕 oButton = TBToolbar1.FindControl("Add") '再加入新按鈕 oItem = New TBToolbarItem() oItem.Text = "新按鈕" oItem.Key = "NewButton" TBToolbar1.Items.Add(oItem) Me.Response.Write("「測試二」按鈕") End Sub Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click '單純 PostBack，無程式碼 Me.Response.Write("「PostBack」按鈕") End Sub </code></pre> <p>案例一：執行「測試一」按鈕，在工具列直接新增一個按鈕。<br /> 當按下「測試一」按鈕時，工具列可以正常加入我們新增的按鈕。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15_E8C/image_thumb_1.png" alt="" /></p> <p>案例二：執行「測試二」按鈕，先使用 FindControl 取得工具列的按鈕，然後在在工具列再新增一個按鈕。<br /> 重新執行程式，當按下「測試二」按鈕時，你會發現奇怪的現象，工具列竟然沒有加入我們新增的按鈕？<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15_E8C/image_thumb_2.png" alt="" /></p> <p>此時再按下「PostBack」按鈕，工具列才會出現我們剛剛加入的按鈕。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15_E8C/image_thumb_3.png" alt="" /></p> <p>為什麼會發生這種怪現象呢？其實原因很簡單，因為 FindControl 時會去存取 Controls 屬性，而這時子控制項已經被建立了；而之前再用 Items 屬性加入新按鈕，它已經不會在重建子控制項，導致第一時間沒有加入新按鈕。不過 Items 屬性會被存在 ViewState 中，所以當執行「PostBack」按鈕時，就會出現我們剛剛新增的按鈕。</p> <p><strong>三、解決方式</strong><br /> 要解決上述「測試二」的問題，只要覆寫 TBToolbar 控制項的 Render 方法，在 Render 前執行 RecreateChildControls 方法，強制重建子控制項。</p> <pre><code> ''' <summary> ''' 覆寫 Render 方法。 ''' </summary> Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) Me.RecreateChildControls() MyBase.Render(writer) End Sub </code></pre> <p>再一次執行「測試二」的動作，就會發現執行結果就會正常了。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay15_E8C/image_thumb_5.png" alt="" /></p> <p><strong>四、結語</strong><br /> 在複合控制項的 Render 前執行 RecreateChildControls 方法可以強制重建子控制項，可是這樣又會引發另一個問題，那就是當直接存取子控制項去修改子控制項的屬性後，一旦在 Render 又重建子控制項，那之前設定子控制項狀態又被全部重建了，所以需特別注意有這樣的情形。另外複合控制項有可能重覆執行建立子控制的動作，在執行效能上也比較不佳。</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/16/5695.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/16/5695.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-16 00:14:12</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day14] 繼承 CompositeControl 實作 Toolbar 控制項</title> <link>https://ithelp.ithome.com.tw/articles/10012339?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012339?sc=rss.iron</guid> <description><![CDATA[<p>之前我們簡單介紹過繼承 CompositeControl 來實作複合控制項，在本文我們將以 Toolbar 控制項為例，以複合控制項的作法(繼承 CompositeControl )來實作 To...]]></description> <content:encoded><![CDATA[<p>之前我們簡單介紹過繼承 CompositeControl 來實作複合控制項，在本文我們將以 Toolbar 控制項為例，以複合控制項的作法(繼承 CompositeControl )來實作 Toolbar 控制項，此工具列控制項包含 Items 屬性來描述工具列項目集合，依 Items 屬性的設定來建立工具列按鈕，另外包含 Click 事件可以得知使用按了那個按鈕。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/20081014234924792.rar" target="_blank">ASP.NET Server Control - Day14.rar</a><br /> <strong>一、工具列項目集合類別</strong><br /> 工具列包含多個按鈕，新增 TBToolbarItem 類別來描述工具列項目，TBToolbarItem 類別包含 Key、Text、Enabled 三個屬性；而 TBToolbarItemCollection 為 TBToolbarItem 的集合類別來描述工具列按鈕集合。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay14CompositeControlToolbar_12481/image_thumb.png" alt="" /></p> <p><strong>二、實作 TBToolbar 控制項</strong><br /> <strong>step1. 新增繼承 CompositeControl 的 TBToolbar 控制項</strong></p> <pre><code> < _ Description("工具列控制項。"), _ ParseChildren(True, "Items"), _ ToolboxData("<{0}:TBToolbar runat=server ></{0}:TBToolbar>") _ > _ Public Class TBToolbar Inherits CompositeControl End Class </code></pre> <p><strong>step2. 新增 Items 屬性，描述工具列項目集合</strong></p> <pre><code> ''' <summary> ''' 工具列項目集合。 ''' </summary> < _ Description("工具列項目集合。"), _ PersistenceMode(PersistenceMode.InnerProperty), _ DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _ Editor(GetType(CollectionEditor), GetType(UITypeEditor)) _ > _ Public ReadOnly Property Items() As TBToolbarItemCollection Get If FItems Is Nothing Then FItems = New TBToolbarItemCollection() End If Return FItems End Get End Property </code></pre> <p><strong>step3. 新增 Click 事件</strong><br /> TBToolbar 類別新增 Click 事件，當按下按鈕時會引發 Click 事件，由 Click 的事件引數 e.Key 可以得知使用者按了那個按鈕。</p> <pre><code> ''' <summary> ''' Click 事件引數。 ''' </summary> Public Class ClickEventArgs Inherits System.EventArgs Private FKey As String = String.Empty ''' <summary> ''' 項目鍵值。 ''' </summary> Public Property Key() As String Get Return FKey End Get Set(ByVal value As String) FKey = value End Set End Property End Class ''' <summary> ''' 按下工具列按鈕所引發的事件。 ''' </summary> < _ Description("按下工具列按鈕所引發的事件。") _ > _ Public Event Click(ByVal sender As Object, ByVal e As ClickEventArgs) ''' <summary> ''' 引發 Click 事件。 ''' </summary> Protected Overridable Sub OnClick(ByVal e As ClickEventArgs) RaiseEvent Click(Me, e) End Sub </code></pre> <p><strong>step4. 建立工具列按鈕集合</strong><br /> 覆寫 CreateChildControls 方法，依 Items 屬性的設定，來建立工具列中的按鈕集合。每個按鈕的 Click 事件都導向 ButtonClickEventHandler 方法，來處理所有按鈕的 Click 動作，並引發 TBToolbar 的 Click 事件。</p> <pre><code> Private Sub ButtonClickEventHandler(ByVal sender As Object, ByVal e As EventArgs) Dim oButton As Button Dim oEventArgs As ClickEventArgs oButton = CType(sender, Button) oEventArgs = New ClickEventArgs() oEventArgs.Key = oButton.ID OnClick(oEventArgs) End Sub ''' <summary> ''' 建立子控制項。 ''' </summary> Protected Overrides Sub CreateChildControls() Dim oItem As TBToolbarItem Dim oButton As Button For Each oItem In Me.Items oButton = New Button() oButton.Text = oItem.Text oButton.Enabled = oItem.Enabled oButton.ID = oItem.Key AddHandler oButton.Click, AddressOf ButtonClickEventHandler Me.Controls.Add(oButton) Next MyBase.CreateChildControls() End Sub </code></pre> <p><strong>三、測試程式</strong><br /> 在頁面拖曳 TBToolbar 控制項，並設定 Items 屬性，如入新增、修改、刪除三個按鈕。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay14CompositeControlToolbar_12481/image_thumb_1.png" alt="" /></p> <p>在 TBToolbar 控制項的 Click 事件加入測試程式碼，輸出引發 Click 事件的 e.Key。</p> <pre><code> Protected Sub TBToolbar1_Click(ByVal sender As Object, ByVal e As Bee.Web.WebControls.TBToolbar.ClickEventArgs) Handles TBToolbar1.Click Me.Response.Write(String.Format("您按了 {0}", e.Key)) End Sub </code></pre> <p>執行程式，當按了工具列上的按鈕時，就會引發 Click 事件，並輸出該按鈕對應的 Key。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay14CompositeControlToolbar_12481/image_thumb_2.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/15/5687.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/15/5687.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-15 00:13:50</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day13] Flash 控制項</title> <link>https://ithelp.ithome.com.tw/articles/10012267?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012267?sc=rss.iron</guid> <description><![CDATA[<p>Flash 也是網頁常用的 ActiveX 插件，在本文中將繼承 TBActiveX 下來撰寫 TBFlash 控制項，用來輸出網頁套用 Flash 的相關 HTML 碼。<br /> 程式碼下...]]></description> <content:encoded><![CDATA[<p>Flash 也是網頁常用的 ActiveX 插件，在本文中將繼承 TBActiveX 下來撰寫 TBFlash 控制項，用來輸出網頁套用 Flash 的相關 HTML 碼。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/2008101323519608.rar" target="_blank">ASP.NET Server Control - Day13.rar</a></p> <p><strong>一、網頁 Flash 的原始 HTML 碼</strong><br /> 我們先觀查在網頁中套用 Flash 插件的原始 HTML 碼，以點部落首頁抬頭的 Flash 原始碼為例如下，其中 <object> tag 的 codebase attribute 是指 Flash 插件的下載位置及版本。</p> <pre><code><object id="ShockwaveFlash2" height="90" width="728" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param value="http://files.dotblogs.com.tw/dotjum/ad/debug.swf" name="movie"/> <param value="high" name="quality"/> <param value="#000000" name="bgcolor"/> <embed height="90" width="728" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://files.dotblogs.com.tw/dotjum/ad/debug.swf"/> </object> </code></pre> <p>在 <object> tag 中必要的 attribute 為 classid、codebase、movie、width、height，而 <embed> tag 的必要 attribute 為 src、pluginspage、width、height，其他選擇性的 attribute 可參閱以下網頁。</p> <p>Flash OBJECT and EMBED tag attributes<br /> <a href="http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701" target="_blank"><a href="http://kb.adobe.com/selfservice/viewContent.do?externalId=tn%5C_12701" target="_blank">http://kb.adobe.com/selfservice/viewContent.do?externalId=tn\_12701</a></a></p> <p><strong>二、實作 TFlash 控制項</strong><br /> 了解 Flash 的原始 HTML 碼後，我們就可以開始著手撰寫 TBFlash 控制項，想辨法來輸出所需要的 HTML 碼。</p> <p><strong>step1. 新增 TBFlash 控制項繼承至 TBActiveX</strong><br /> 我們先在 TBActiveX 控制項新增一個 CodeBase 屬性，用來設定 ActiveX 插入的下載位置及版本，然後新增 TBFlash 控制項繼承至 TBActiveX，並在建構函式中設定 MyBase.ClassId 及 MyBase.CodeBase 屬性。</p> <pre><code> Public Class TBFlash Inherits TBActiveX ''' <summary> ''' 建構函式。 ''' </summary> Sub New() MyBase.ClassId = "D27CDB6E-AE6D-11CF-96B8-444553540000" MyBase.CodeBase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" End Sub End Class </code></pre> <p><strong>step2. 加入相關屬性</strong><br /> 在 TBFlash 加入 MovieUrl 及 Quality 屬性，MovieUrl 為 Flash 檔案來源，Quality 為影音品質。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay13Flash_13AEC/image_2.png" alt="" /></p> <p><strong>step3. 輸出 Flash 相關參數</strong><br /> 覆寫 CreateChildControls 方法，輸出 MovieUrl 及 Quality 屬性對應的參數，以及在 Params 集合屬性設定的參數。</p> <pre><code> ''' <summary> ''' 加入 MediaPlayer 參數。 ''' </summary> ''' <param name="Name">參數名稱。</param> ''' <param name="Value">參數值。</param> Private Sub AddParam(ByVal Name As String, ByVal Value As String) Dim oParam As TBActiveXParam oParam = New TBActiveXParam(Name, Value) Me.Params.Add(oParam) End Sub ''' <summary> ''' 建立 Embed 標記。 ''' </summary> Private Function CreateEmbed() As HtmlControls.HtmlGenericControl Dim oEmbed As HtmlControls.HtmlGenericControl Dim oParam As TBActiveXParam oEmbed = New HtmlControls.HtmlGenericControl() oEmbed.TagName = "embed" oEmbed.Attributes("src") = Me.ResolveClientUrl(Me.MovieUrl) oEmbed.Attributes("pluginspage") = "http://www.macromedia.com/go/getflashplayer" oEmbed.Attributes("height") = Me.Height.ToString oEmbed.Attributes("width") = Me.Width.ToString 'Embed 的 Attributes 加入 Params 集合屬性的設定 For Each oParam In Me.Params If oParam.Name <> "movie" Then oEmbed.Attributes(oParam.Name) = oParam.Value End If Next Return oEmbed End Function ''' <summary> ''' 建立子控制項。 ''' </summary> Protected Overrides Sub CreateChildControls() Dim oEmbed As HtmlControls.HtmlGenericControl '加入 movie 參數 AddParam("movie", Me.ResolveClientUrl(Me.MovieUrl)) '加入 quality 參數 If Me.Quality <> EQuality.NotSet Then AddParam("quality", Me.Quality.ToString.ToLower) End If MyBase.CreateChildControls() oEmbed = CreateEmbed() Me.Controls.Add(oEmbed) End Sub </code></pre> <p><strong>三、測試程式</strong><br /> 在頁面拖曳 TBFlash 控制項，設定 MovieUrl 及 Quality 屬性，若有需要加入其他參數，可自行設定 Params 集合屬性。執行程式就可以在頁面上看到呈現出來的 Flash。</p> <pre><code> <bee:TBFlash ID="TBFlash1" runat="server" Height="90px" MovieUrl="http://files.dotblogs.com.tw/dotjum/ad/debug.swf" Quality="High" Width="728px"> </bee:TBFlash> </code></pre> <p><img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay13Flash_13AEC/image_4.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/14/5674.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/14/5674.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-14 00:16:30</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day12] 繼承 TBActiveX 重新改寫 TBMediaPlayer 控制項</title> <link>https://ithelp.ithome.com.tw/articles/10012196?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012196?sc=rss.iron</guid> <description><![CDATA[<p>上篇介紹的 TBActiveX 控制項，它可以支援網頁 Media Player 的設定，這跟前面提及的 TBMediaPlayer 功能相同。TBActiveX 具有網頁設定 ActiveX ...]]></description> <content:encoded><![CDATA[<p>上篇介紹的 TBActiveX 控制項，它可以支援網頁 Media Player 的設定，這跟前面提及的 TBMediaPlayer 功能相同。TBActiveX 具有網頁設定 ActiveX 通用屬性，所以 TBMediaPlayer 基本上是可以由 TBActiveX 繼承下來，再加入 Media Player 特有的屬性即可。本文將原來的 TBMediaPlayer 控制項，繼承的父類別由 WebControl 改為 TBActiveX 類別，重新改寫 TBMediaPlayer 控制項。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/200810130325962.rar" target="_blank">ASP.NET Server Control - Day12.rar</a></p> <p><strong>一、改寫 TBMediaPlayer 控制項</strong><br /> TBMediaPlayer 控制項原本是繼承 WebControl，現改繼承對象為 TBActiveX，來重新改寫 TBMediaPlayer 控制項。</p> <p><strong>step1. TBMediaPlayer 繼承至 TBActiveX</strong><br /> 新增 TBMediaPlayer 控制項，繼承至 TBActiveX，並在建構函式設定 Media Player ActiveX 的 ClassId。</p> <pre><code> Public Class TBMediaPlayer Inherits TBActiveX ''' <summary> ''' 建構函式。 ''' </summary> Sub New() MyBase.ClassId = "6BF52A52-394A-11D3-B153-00C04F79FAA6" End Sub End Class </code></pre> <p><strong>step2. 加入相關屬性</strong><br /> 跟原來的 TBMediaPlayer 控制項一樣，加入 Url、AutoStart、UIMode 三個屬性，可視情形加入需要設定的屬性。</p> <p><strong>step3. 加入 Media Player 參數</strong><br /> 覆寫 CreateChildControls 方法，動態依屬性設定在 Params 集合屬性加入參數。雖然 TBMediaPlayer 控制項目前只有 Url、AutoStart、UIMode 三個屬性，但是父類別 TBActiveX 具有 Params 集合屬性，所以開發人員可以視需求加入其他未定義的參數。</p> <pre><code> ''' <summary> ''' 加入 MediaPlayer 參數。 ''' </summary> ''' <param name="Name">參數名稱。</param> ''' <param name="Value">參數值。</param> Private Sub AddParam(ByVal Name As String, ByVal Value As String) Dim oParam As TBActiveXParam oParam = New TBActiveXParam(Name, Value) Me.Params.Add(oParam) End Sub ''' <summary> ''' 覆寫 CreateChildControls 方法。 ''' </summary> Protected Overrides Sub CreateChildControls() '加入 Url 參數 If Me.Url <> String.Empty Then AddParam("URL", Me.ResolveClientUrl(Me.Url)) End If '加入 autoStart 參數 If Me.AutoStart Then AddParam("autoStart", "true") End If '加入 uiMode 參數 If Me.UIMode <> EUIMode.NotSet Then AddParam("uiMode", Me.UIMode.ToString) End If MyBase.CreateChildControls() End Sub </code></pre> <p><strong>二、執行程式</strong><br /> 在頁面拖曳 TBMediaPlayer 控制項，設定 Url、AutoStart、UIMode 屬性，若有需要加入其他參數，可自行設定 Params 集合屬性。執行程式就可以在頁面上看到呈現出來的 Media Player。</p> <pre><code> <bee:TBMediaPlayer ID="TBMediaPlayer1" runat="server" AutoStart="True" Height="249px" Url="D:\Movie_01.wmv" Width="250px"> </bee:TBMediaPlayer> </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/13/5663.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/13/5663.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-13 00:13:29</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day11] ActiveX 伺服器控制項</title> <link>https://ithelp.ithome.com.tw/articles/10012159?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012159?sc=rss.iron</guid> <description><![CDATA[<p>Media Player 與 Flash 之類在網頁上執行的外掛控制項，都是屬於 ActiveX 控制項，它們套用在 HTML 碼中的方式差不多，除了要指定 ClassID 以外，ActiveX...]]></description> <content:encoded><![CDATA[<p>Media Player 與 Flash 之類在網頁上執行的外掛控制項，都是屬於 ActiveX 控制項，它們套用在 HTML 碼中的方式差不多，除了要指定 ClassID 以外，ActiveX 使用的參數(相當於 ActiveX 控制項的屬性)以 Param Tag 來表示。本文標題命名為「ActiveX 伺服器控制項」就是避免誤解為 ActiveX 控制項，而是在 ASP.NET 中輸出 ActiveX 相關 HTML 碼的伺服器控制項；我們可透過 ActiveX 伺服器控制項可以用來輸出網頁上引用 ActiveX 的通用 HTML 碼，另外 ActiveX 的參數會以集合屬性來呈現，所以也會一併學習到集合屬性的撰寫方式。<br /> 程式碼下載：<a href="http://files.dotblogs.com.tw/jeff377/0810/200810124846794.rar" target="_blank">ASP.NET Server Control - Day11.rar</a></p> <p><strong>一、集合屬性</strong><br /> ActiveX 的 Param 參數是集合屬性，所以我們定義了 TBActiveParam 類別描述 ActiveX 參數，包含 Name 及 Value 屬性；而 TBActiveXParamCollection 為 TBActiveParam 的集合類別，用來描述 ActiveX 參數集合。TBActiveXParamCollection 繼承 CollectionBase，加入操作集合的 Add、Insert、Remove、IndexOf、Contains 等方法，關於集合屬性的用法可以參閱筆者在部落格的「<a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1747.aspx" target="_blank">撰寫伺服器控制項的集合屬性 (CollectionBase)</a>」一文中有詳細說明。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay11ActiveX_166/image_thumb_1.png" alt="" /></p> <p><strong>二、實作 ActiveX 伺服器控制項</strong><br /> <strong>step1. 新增繼承 WebControl 的 TBActiveX</strong></p> <p><strong>step2. 覆寫 TagKey 屬性，傳回 object 的 Tag</strong></p> <pre><code> Protected Overrides ReadOnly Property TagKey() As HtmlTextWriterTag Get Return HtmlTextWriterTag.Object End Get End Property </code></pre> <p><strong>step3. 新增 ClassId 屬性，描述 ActiveX 的 ClassId</strong><br /> 定義 ClassId 屬性，並覆寫 AddAttributesToRender 來輸出此屬性。</p> <pre><code> ''' <summary> ''' 覆寫 AddAttributesToRender 方法。 ''' </summary> Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter) '加入 MediaPlayer ActiveX 元件的 classid writer.AddAttribute("classid", String.Format("clsid:{0}", Me.ClassId)) MyBase.AddAttributesToRender(writer) End Sub </code></pre> <p><strong>step4. 新增 Params 屬性，描述 ActiveX 的參數集合</strong><br /> 定義 Params 屬性，型別為 TBActiveXParamCollection 類別，套用 EditorAttribute 設定 CollectionEditor 為集合編輯器。</p> <pre><code> ''' <summary> ''' ActiveX 控制項參數集合。 ''' </summary> < _ Description("控制項參數集合。"), _ PersistenceMode(PersistenceMode.InnerProperty), _ DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _ Editor(GetType(CollectionEditor), GetType(UITypeEditor)) _ > _ Public ReadOnly Property Params() As TBActiveXParamCollection Get If FParams Is Nothing Then FParams = New TBActiveXParamCollection() End If Return FParams End Get End Property </code></pre> <p>當編輯 Params 時，會使用的 CollectionEditor 集合編輯器。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay11ActiveX_166/image_thumb_2.png" alt="" /></p> <p><strong>step5. 輸出 ActiveX 參數</strong><br /> 覆寫 CreateChildControls 方法，在此方法依 Params 集合屬性定義依序來輸出 ActiveX 的參數集合。</p> <pre><code> Private Sub AddParam(ByVal Name As String, ByVal Value As String) Dim oParam As HtmlControls.HtmlGenericControl oParam = New HtmlControls.HtmlGenericControl("param") oParam.Attributes.Add("name", Name) oParam.Attributes.Add("value", Value) Me.Controls.Add(oParam) End Sub ''' <summary> ''' 建立子控制項。 ''' </summary> Protected Overrides Sub CreateChildControls() Dim oParam As TBActiveXParam '加入 ActiveX 參數集合 For Each oParam In Me.Params AddParam(oParam.Name, oParam.Value) Next MyBase.CreateChildControls() End Sub </code></pre> <p><strong>三、執行程式</strong><br /> 上一篇我們使用 TBMediaPlayer 控制項來設定 Media Player，在此我們改用 TBActiveX 控制項來設定 Media Player，一樣可以呈現相同的結果。</p> <pre><code> <bee:TBActiveX ID="TBActiveX1" runat="server" ClassId="6BF52A52-394A-11D3-B153-00C04F79FAA6" Height="250px" Width="250px"> <Params> <bee:TBActiveXParam Name="URL" Value="d:/Movie_01.wmv" /> <bee:TBActiveXParam Name="autoStart" Value="true" /> </Params> </bee:TBActiveX> </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/12/5659.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/12/5659.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-12 04:20:27</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day10] Media Player 控制項</title> <link>https://ithelp.ithome.com.tw/articles/10012142?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012142?sc=rss.iron</guid> <description><![CDATA[<p>我們在前面幾篇文章中，已經簡要的對伺服器控制項做了基本介紹，接下來的幾篇文章中我們要開始實作伺服器控制項。在網頁上常使用 Media Player 來撥放影片，在 ASP.NET 中沒有現成的控...]]></description> <content:encoded><![CDATA[<p>我們在前面幾篇文章中，已經簡要的對伺服器控制項做了基本介紹，接下來的幾篇文章中我們要開始實作伺服器控制項。在網頁上常使用 Media Player 來撥放影片，在 ASP.NET 中沒有現成的控制項來處理 Media Player，只能在 aspx 中加入 Media Player 相關的程式碼；本文將示範如何製作一個 Media Player 控制項，讓我們在 ASP.NET 中更方便的使用 Media Player。<br /> 程式碼下載：<a href="http://Files.Dotblogs.com.tw/jeff377%5C0810%5C2008101122230798.rar" target="_blank">ASP.NET Server Control - Day10.rar</a></p> <p><strong>一、Media Player 原始 HTML 碼</strong><br /> 在製作 Media Player 控制項之前，你需要先了解 Media Player 原本的 HTML 碼，控制項的作用就是想辨法把這些寫在 aspx 中的 HTML 碼交由控制項來輸出而已，以下為網頁中加入 Media Player 的 HTML 碼範例。</p> <pre><code><OBJECT id="VIDEO" width="320" height="240" style="position:absolute; left:0;top:0;" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"> <PARAM NAME="URL" VALUE="your file or url"> <PARAM NAME="SendPlayStateChangeEvents" VALUE="True"> <PARAM NAME="AutoStart" VALUE="True"> <PARAM name="uiMode" value="none"> <PARAM name="PlayCount" value="9999"> </OBJECT> </code></pre> <p>在下面的網頁有 Media Player 相關參數說明。<br /> <a href="http://www.mioplanet.com/rsc/embed_mediaplayer.htm" target="_blank"><a href="http://www.mioplanet.com/rsc/embed%5C_mediaplayer.htm" target="_blank">http://www.mioplanet.com/rsc/embed\_mediaplayer.htm</a></a></p> <p><strong>二、實作 Media Player 控制項</strong><br /> <strong>step1.首先新增由 WebControl 繼承下來的 TBMediaPlayer 類別。</strong></p> <pre><code> Public Class TBMediaPlayer Inherits WebControl End Class </code></pre> <p><strong>step2.覆寫 TagKey 屬性，傳回 object 的 Tag。</strong></p> <pre><code> Protected Overrides ReadOnly Property TagKey() As System.Web.UI.HtmlTextWriterTag Get Return HtmlTextWriterTag.Object End Get End Property </code></pre> <p><strong>step3.輸出 HTML Tag 的 Attribute</strong><br /> 在 object Tag 中包含 style、classid、type 二個 Attribute，WebControl 本身會處理 style，所以我們只需覆寫 AddAttributesToRender 方法，處理 classid 及 type 二個 Attribute，記得覆寫 AddAttributesToRender 方法時最後要加入 MyBase.AddAttributesToRender(writer)，才會執行父類別的 AddAttributesToRender 方法。</p> <pre><code> ''' <summary> ''' 覆寫 AddAttributesToRender 方法。 ''' </summary> Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter) '加入 MediaPlayer ActiveX 元件的 classid writer.AddAttribute("classid", "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6") writer.AddAttribute("type", "application/x-oleobject") MyBase.AddAttributesToRender(writer) End Sub </code></pre> <p><strong>step4.加入 Url 屬性</strong><br /> 加入指定播放檔案來源的 Url 屬性，其中套用 EditorAttribute 設定 UrlEditor，使用 Url 專用的編輯器來設定屬性。</p> <pre><code> ''' <summary> ''' 播放檔案來源。 ''' </summary> < _ Description("播放檔案來源"), _ Bindable(True), _ Category("Appearance"), _ Editor(GetType(UrlEditor), GetType(UITypeEditor)), _ UrlProperty(), _ DefaultValue("") _ > _ Public Property Url() As String Get Return FUrl End Get Set(ByVal value As String) FUrl = value End Set End Property </code></pre> <p><strong>step5.輸出 Url 參數</strong><br /> 接下來覆寫 CreateChildControls 方法，輸出 Url 參數。</p> <pre><code> ''' <summary> ''' 加入參數。 ''' </summary> ''' <param name="Name">參數名稱。</param> ''' <param name="Value">參數值。</param> Private Sub AddParam(ByVal Name As String, ByVal Value As String) Dim oParam As HtmlControls.HtmlGenericControl oParam = New HtmlControls.HtmlGenericControl("param") oParam.Attributes.Add("name", Name) oParam.Attributes.Add("value", Value) Me.Controls.Add(oParam) End Sub Protected Overrides Sub CreateChildControls() '加入 Url 參數 AddParam("url", Me.ResolveClientUrl(Me.Url)) MyBase.CreateChildControls() End Sub </code></pre> <p><strong>step6.輸出 Media Player 其他參數</strong><br /> 你可以將 Media Player 的參數設定皆使用相對應的屬性來設定，然後使用 step5 的方式來輸出所有設定的參數值。</p> <p><strong>三、Media Player 控制項程式碼</strong><br /> Media Player 控制項的完整程式碼如下，此控制項只加入 URL、AutoStart、UIMode 三個參數，你可以視需求情形將使用到的參數定義為屬性來做設定即可。<br /> 因為此處有字元數限制，完整的程式碼請參閱筆者部落格相同文章<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/11/5655.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/11/5655.aspx</a></p> <p><strong>四、執行程式</strong><br /> 把 TBMediaPlayer 控制項拖曳至頁面，設定好屬性後，執行程式就可以在頁面上看到呈現出來的 Media Player。</p> <pre><code> <bee:TBMediaPlayer ID="TBMediaPlayer1" runat="server" Height="250px" Width="250px" Url="~/test.wmv" /> </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/11/5655.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/11/5655.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-11 19:08:27</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day9] 控制項常用 Attribute 介紹(2)</title> <link>https://ithelp.ithome.com.tw/articles/10012060?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012060?sc=rss.iron</guid> <description><![CDATA[<p>接續上篇 Attribute 的介紹，本文將再介紹一些伺服器控制項常用的 Attribute。<br /> <strong>六、ToolboxDataAttribute 類別</strong><...]]></description> <content:encoded><![CDATA[<p>接續上篇 Attribute 的介紹，本文將再介紹一些伺服器控制項常用的 Attribute。<br /> <strong>六、ToolboxDataAttribute 類別</strong><br /> 作用：指定當自訂控制項從工具箱拖曳到頁面時，為此自訂控制項產生的預設標記。<br /> 當我們新增一個伺服器控制項，它就會預設在控制項類別套用 ToolboxDataAttribute，定義在控制項在 aspx 程式碼中的標記。</p> <pre><code><ToolboxData("<{0}:TBButton runat=server ></{0}:TBButton>")> _ Public Class TBButton Inherits System.Web.UI.WebControls.Button End Class </code></pre> <p><strong>七、DefaultPropertyAttribute 類別</strong><br /> 作用：指定類別的預設屬性。<br /> 下面的範例中，MyTextbox 類別套用 DefaultPropertyAttribute，設定 Text 屬性為預設屬性。</p> <pre><code><DefaultProperty("Text")> _ Public Class MyTextbox Inherits WebControl Public Property Text() As String Get Return CType(Me.ViewState("Text"), String) End Get Set(ByVal value As String) Me.ViewState("Text") = value End Set End Property End Class </code></pre> <p><strong>八、DefaultEventAttribute 類別</strong><br /> 作用：指定控制項的預設事件。<br /> 下面的範例中，MyTextbox 類別套用 DefaultEventAttribute，設定 TextChanged 為預設屬性。</p> <pre><code><DefaultEvent("TextChanged")> _ Public Class MyTextbox Inherits WebControl ''' <summary> ''' TextChanged 事件。 ''' </summary> Public Event TextChanged As EventHandler End Class </code></pre> <p>當設計階段在頁面上的 MyTextbox 控制項點二下時，就會產生預設事件的處理函式。</p> <pre><code> Protected Sub MyTextbox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyTextbox3.TextChanged End Sub </code></pre> <p><strong>九、LocalizableAttribute 類別</strong><br /> 作用：指定屬性是否應該當地語系化。<br /> 當屬性套用設為為 true 的 LocalizableAttribute 時，其屬性值會儲存在資源檔中，未來不需修改程式碼就可以將這些資源檔當地語系化。</p> <pre><code> <Localizable(True)> _ Public Property Text() As String Get Return CType(Me.ViewState("Text"), String) End Get Set(ByVal value As String) Me.ViewState("Text") = value End Set End Property </code></pre> <p><strong>十、DesignerAttribute 類別</strong><br /> 作用：設定控制項在設計階段服務的類別。<br /> 指定一個設計階段的服務類別，來管理控制項在設計階段的行為，例如控制項的設計階段外觀、智慧標籤內容。例如下面範例的 TBGridView 控制項就定義了 TBGridViewDesigner 來實作設計階段的行為，未來的章節中也會介紹如何實作控制項的 Designer。</p> <pre><code> < Designer(GetType(TBGridViewDesigner)) > _ Public Class TBGridView Inherits GridView End Class </code></pre> <p><strong>十一、EditorAttribute 類別</strong><br /> 作用：指定在屬性視窗中編輯屬性值的編輯器。<br /> 例如 ListBox 控制項的 Items 屬性，在屬性視窗編輯 Items 屬性時，會彈出 Items 集合屬性的編輯器。以下範例就是定義 Items 屬性的編輯器類別為 TBListItemsCollectionEditor，未來的章節中也會介紹如何實作屬性的 Editor。</p> <pre><code> <Editor(GetType(TBListItemsCollectionEditor), GetType(System.Drawing.Design.UITypeEditor))> _ Public Overrides ReadOnly Property Items() As ListItemCollection </code></pre> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/10/5653.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/10/5653.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-10 11:27:02</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day8] 控制項常用 Attribute 介紹(1)</title> <link>https://ithelp.ithome.com.tw/articles/10012016?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10012016?sc=rss.iron</guid> <description><![CDATA[<p>Property 與 Attribute 二個術語一般都是翻譯成「屬性」，例如類別的屬性，是使用英文的 Property，而 HTML/XML 的元素屬性，使用的英文則是 Attribute。在...]]></description> <content:encoded><![CDATA[<p>Property 與 Attribute 二個術語一般都是翻譯成「屬性」，例如類別的屬性，是使用英文的 Property，而 HTML/XML 的元素屬性，使用的英文則是 Attribute。在 .NET 中 Property 與 Attribute 的意義及用法不同，不過微軟線上文件也將它翻譯為「屬性」，這可能讓人發生困擾及誤解；筆者比較喜歡的方式就是 Property 是屬性，Attribute 就維持原文。在 .NET 中類別或屬性上可以套用上不同的 Attribute，使類別或屬性具有不同的特性，本文將介紹一些在伺服器控制項常使用到的 Attribute。<br /> <strong>一、DescriptionAttribute 類別</strong><br /> 作用：指定控制項或屬性的描述。<br /> 當 DescriptionAttribute 套用至控制項的類別時，設定的描述內容就會出現在工具箱中控制項的提示。</p> <pre><code><Description("按鈕控制項")> _ Public Class TBButton Inherits System.Web.UI.WebControls.Button End Class </code></pre> <p><img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay7Attribute_D3/image_thumb.png" alt="" /><br /> 當 DescriptionAttribute 套用至控制項的屬性時，在屬性視窗下面就會出現設定的屬性描述內容。</p> <pre><code><Description("詢問訊息")> _ Public Property ConfirmMessage() As String </code></pre> <p><img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay7Attribute_D3/image_thumb_1.png" alt="" /></p> <p><strong>二、DefaultValueAttribute 類別</strong><br /> 作用：指定屬性的預設值。<br /> 使用 DefaultValueAttribute 設定屬性的預設值，若設定的屬性值與預設值相同時，此屬性值就不會出現在 aspx 程式碼中；筆者強烈建議屬性一定套用 DefaultValueAttribute，一來在 aspx 中的程式碼會比較少，另外一個重點是若因為某些因素需要修改屬性的預設值時，所有已開發頁面的控制項屬性值會一併變更；因為當初屬性值是預設值，沒有被寫入 aspx 程式碼中，所以一但控制項的屬性預設值變更，頁面已佈屬的控制項的屬性值就會全面適用。</p> <pre><code> Private FConfirmMessage As String = String.Empty <DefaultValue("")> _ Public Property ConfirmMessage() As String Get Return FConfirmMessage End Get Set(ByVal value As String) FConfirmMessage = value End Set End Property </code></pre> <p><strong>三、CategoryAttribute 類別</strong><br /> 作用：指定屬性或事件的分類名稱，當屬性視窗設定為 [分類] 模式時，以群組方式來顯示屬性或事件。<br /> 例如設定 ConfirmMessage 屬性在 "Behavior" 分類，則 ConfirmMessage 屬性會被歸類到「行為」分類。</p> <pre><code> <Category("Behavior")> _ Public Property ConfirmMessage() As String </code></pre> <p><img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay7Attribute_D3/image_thumb_2.png" alt="" /></p> <p><strong>四、BindableAttribute 類別</strong><br /> 作用：指定成員是否通常使用於繫結。<br /> 在資料繫結設定視窗中中，指定屬性是否預設會出現在屬性清單中。</p> <pre><code><Bindable(True)> _ Public Property ConfirmMessage() As String </code></pre> <p><img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay7Attribute_D3/image_thumb_3.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/09/5647.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/09/5647.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-09 21:11:43</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day7] 設定工具箱的控制項圖示</title> <link>https://ithelp.ithome.com.tw/articles/10011933?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011933?sc=rss.iron</guid> <description><![CDATA[<p>當我們把自訂控制項加入到工具箱中時，你會發現所有的控制項預設都是同樣的圖示，雖然控制項的圖示不變更不會有什麼影響，不過我們還是希望為自訂控制項加上合適的外衣，本文將介紹如何設定工具箱控制項圖示。...]]></description> <content:encoded><![CDATA[<p>當我們把自訂控制項加入到工具箱中時，你會發現所有的控制項預設都是同樣的圖示，雖然控制項的圖示不變更不會有什麼影響，不過我們還是希望為自訂控制項加上合適的外衣，本文將介紹如何設定工具箱控制項圖示。<br /> <strong>一、加入控制項圖示檔</strong><br /> 首先要準備一個 16 x 16 的點陣圖(bmp)，如下所示。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay6_BA88/image_thumb_1.png" alt="" /><br /> 將此圖檔加入至「伺服器控制項專案」中，可以如下圖所示，用一個特定的資料夾來儲存所有工具箱的圖示。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay6_BA88/image_thumb_2.png" alt="" /><br /> 然後在圖檔的屬性視窗中，設定建置動作為「內嵌資源」。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay6_BA88/image_thumb_3.png" alt="" /><br /> <strong>二、設定控制項的圖示</strong><br /> 首先定義一個 TBResource 類別，此為一個空的類別，其命名空間需與根命名空間相同，做為引用資源檔時使用。並加上控制項圖示的 WebResource 定義，因為根命名空間是 Bee.Web，而圖檔名稱為 TBButton.bmp，所以定義如下所示。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay6_BA88/image_thumb_5.png" alt="" /><br /> 假設我們要設定 TBButton 的工具箱圖示，則在 TBButton 類別套用 ToolboxBitmapAttribute 如下，其中第一個參數為 GetType(TBResource)，第二個參數為圖檔檔名。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay6_BA88/image_thumb_7.png" alt="" /><br /> 重新編輯伺服器控制項專案，再將 Bee.Web.dll 組件的控制項加入工具箱中，你就可以發現 TBButton 的圖示已經變成設定的圖示了。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay6_BA88/image_thumb_8.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/08/5624.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/08/5624.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-08 22:26:13</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day6] 事件與 PostBack</title> <link>https://ithelp.ithome.com.tw/articles/10011861?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011861?sc=rss.iron</guid> <description><![CDATA[<p>一般類別的事件撰寫很單純，不過在 ASP.NET 中與前端使用者互動產生的事件就不是那麼簡單了；在以往的 ASP 年代是沒有事件這回事的，而在 ASP.NET 把網頁程式撰寫真正的物件導向化，用...]]></description> <content:encoded><![CDATA[<p>一般類別的事件撰寫很單純，不過在 ASP.NET 中與前端使用者互動產生的事件就不是那麼簡單了；在以往的 ASP 年代是沒有事件這回事的，而在 ASP.NET 把網頁程式撰寫真正的物件導向化，用戶端使用者的操作透過 PostBack 來產生相對應的事件。例如前端使用者按鈕後會引發伺服端 Button 的 Click 事件，當前端使用者輸入文字框完畢後離開後會引發伺服端 TextBox 的 TextChanged 事件，在本文中就是要說明如何透過 PostBack 來產生與使用者互動的事件。<br /> <strong>一、IPostBackEventHandler 與 IPostBackDataHandler 介面</strong><br /> 控制項要處理 PostBack 產生的事件，必須實作 IPostBackEventHandler 或 IPostBackDataHandler 介面，這二個介面有什麼差別呢？例如 Button 是實作IPostBackEventHandler 介面，由控制項產生的 PostBack 直接引發事件，如 Button 的 Click 事件。例如 TextBox 是實作 IPostBackDataHandler 介面，當頁面產生 PostBack 時，會傳用戶端輸入的新值給控制項，由控制項本身去決定是否引發該事件；以 TextBox 舉例來說，它會判斷新值與舊值不同時才會引發 TextChanged 事件。</p> <p><strong>二、IPostBackEventHandler 介面實作</strong><br /> 首先介紹 IPostBackEventHandler 介面，它包含 RaisePostBackEvent 方法，控制項在此方法中需處理要引發那些事件。我們繼承 WebControl 撰寫 MyButton 類別來說明 IPostBackEventHandler 介面，我們簡化控制項程式碼直接在 Render 方法輸入按鈕的 HTML 原始碼，並定義一個 Click 事件。實作 IPostBackEventHandler 介面的 RaisePostBackEvent 方法，在此方法中直接引發 Click 事件。</p> <pre><code>Public Class MyButton Inherits WebControl Implements IPostBackEventHandler ''' <summary> ''' Click 事件。 ''' </summary> Public Event Click As EventHandler ''' <summary> ''' 引發 Click 事件。 ''' </summary> Private Sub OnClick(ByVal e As EventArgs) RaiseEvent Click(Me, e) End Sub Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent Dim e As New EventArgs() OnClick(e) '引發 Click 事件 End Sub ''' <summary> ''' 覆寫 Render 方法。 ''' </summary> Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) Dim sHTML As String sHTML = String.Format("<INPUT TYPE=Submit Name={0} Value = '按鈕'/>", Me.UniqueID) writer.Write(sHTML) End Sub End Class </code></pre> <p>在頁面上拖曳 MyButton 控制項，在屬性視窗找到 Click 事件，點二下產生 Click 事件處理函式，並撰寫測試程式碼如下。</p> <pre><code> Protected Sub MyButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyButton1.Click Me.Page.Response.Write("MyButton Click 事件") End Sub </code></pre> <p>執行程式，當按下 MyButton 按鈕時，就會執行它的 RaisePostBackEvent 方法，進而引發 Click 事件，也就會執行 Click 事件處理函式的程式碼。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay5PostBack_143C0/image_2.png" alt="" /></p> <p><strong>三、IPostBackDataHandler 介面實作</strong><br /> IPostBackDataHandler 介面包含 LoadPostData 及 RaisePostDataChangedEvent 方法，當頁面 PostBack 時，會尋找具 IPostBackDataHandler 介面的控制項，先執行LoadPostData 方法，控制項在 LoadPostData 方法中會判斷用戶端傳入值決定是否引發事件，若 LoadPostData 傳回 True 表示要引發事件，此時會執行RaisePostDataChangedEvent 方法去決定要引發那些事件，反之傳回 False 表示不引發事件。</p> <p>我們繼承 WebControl 撰寫 MyText 類別來說明 IPostBackDataHandler 介面，我們簡化控制項程式碼直接在 Render 方法輸入文字框的 HTML 原始碼，並定義一個 TextChanged 事件。在 LoadPostData 方法中我們會判斷用戶端傳入值與目前的值是否不相同，不相同時才會傳回 True，此時才會執行 RaisePostDataChangedEvent 方法，進而引發 TextChanged 事件。</p> <pre><code>Public Class MyTextbox Inherits WebControl Implements IPostBackDataHandler Public Property Text() As String Get Return CType(Me.ViewState("Text"), String) End Get Set(ByVal value As String) Me.ViewState("Text") = value End Set End Property ''' <summary> ''' TextChanged 事件。 ''' </summary> Public Event TextChanged As EventHandler ''' <summary> ''' 引發 TextChanged 事件。 ''' </summary> Private Sub OnTextChanged(ByVal e As EventArgs) RaiseEvent TextChanged(Me, e) End Sub Public Function LoadPostData(ByVal postDataKey As String, ByVal postCollection As System.Collections.Specialized.NameValueCollection) As Boolean Implements System.Web.UI.IPostBackDataHandler.LoadPostData '前端使用者輸入值 Dim oNewValue As String = postCollection.Item(postDataKey) If oNewValue <> Me.Text Then Me.Text = oNewValue Return True Else Return False End If End Function Public Sub RaisePostDataChangedEvent() Implements System.Web.UI.IPostBackDataHandler.RaisePostDataChangedEvent Dim e As New EventArgs() '引發 TextChanged 事件 OnTextChanged(e) End Sub ''' <summary> ''' 覆寫 Render 方法。 ''' </summary> Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) Dim sHTML As String sHTML = String.Format("<INPUT Type=text Name={0} Value={1} >", Me.UniqueID, Me.Text) writer.Write(sHTML) End Sub End Class </code></pre> <p>在頁面上拖曳 MyTextbox 及 MyButton 控制項，在 MyButton 的 Click 及 MyTextbox 的 TextChanged 事件撰寫如下測試程式碼。</p> <pre><code> Protected Sub MyButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyButton1.Click Me.Page.Response.Write("MyButton Click 事件") Me.Page.Response.Write("<br/>") End Sub Protected Sub MyTextbox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyTextbox1.TextChanged Me.Page.Response.Write("MyTextbox TextChanged 事件") Me.Page.Response.Write("<br/>") End Sub </code></pre> <p>執行程式，在 MyTextbox 輸入 "A"，再按下 MyButton，因為 MyTextbox 的值「空字串->"A"」，所以會引發 MyTextbox 的 TextChanged 事件及 MyButton 的 Click 事件。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay5PostBack_143C0/image_6.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格</p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-07 23:30:19</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day5] 屬性與 ViewState</title> <link>https://ithelp.ithome.com.tw/articles/10011745?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011745?sc=rss.iron</guid> <description><![CDATA[<p>在 ASP.NET 中，控制項的屬性與 ViewState 有著密不可分的關係，透過 ViewState 才有辨法維護控制項的屬性值。在本文中將介紹屬性與 ViewState 的關係，並說明屬性...]]></description> <content:encoded><![CDATA[<p>在 ASP.NET 中，控制項的屬性與 ViewState 有著密不可分的關係，透過 ViewState 才有辨法維護控制項的屬性值。在本文中將介紹屬性與 ViewState 的關係，並說明屬性如何存取 ViewState 是比較有效率的方式。<br /> 當你加入一個「ASP.NET 伺服器控制項」時，類別中預設會有一個 Text 屬性寫法的範例如下所示，屬性的讀寫都是直接存取 ViewState，這是一般常見的控制項屬性寫法。可是這種屬性的寫法是沒有效率的，因為 ViewState 的成員是 Object 型別，每次讀取屬性時都是由 ViewState 取出指定鍵值的成員再轉型為屬性的型別，寫入屬性的動作也是直接寫入 ViewState 中。</p> <pre><code> Property Text() As String Get Dim s As String = CStr(ViewState("Text")) If s Is Nothing Then Return String.Empty Else Return s End If End Get Set(ByVal Value As String) ViewState("Text") = Value End Set End Property </code></pre> <p>比較好的方式應該是讀取 ViewState 成員只做一次型別轉換的動作，而寫入 ViewState 的動作可以在 Render 前做批次寫入的動作即可。為了達到這樣的需求，我們可以覆寫 LoadViewState 及 SaveViewState 方法來處理屬性與 ViewState 的存取動作；當控制項初始化後會執行 LoadViewState 方法，來載入 ViewState 還原的控制項狀態，當控制項 Render 之前，會執行 SaveViewState 方法，將控制項的最終狀態存入 ViewState 中，也就是在此方法之後對控制項所做的任何變更都將會被忽略。</p> <p>我們改寫屬性的寫法，不直接用 ViewState 來存取屬性，而是改用「屬性區域變數」來存取屬性，在 LoadViewState 時載入 ViewState 到屬性區域變數，而 SaveViewState 時再將屬性區域變數寫入 ViewState 中。我們依此方式將 Text 屬性改寫如下。</p> <pre><code> Private FText As String Property Text() As String Get Return FText End Get Set(ByVal Value As String) FText = Value End Set End Property ''' <summary> ''' 載入 ViewState 還原控制項狀態。 ''' </summary> Protected Overrides Sub LoadViewState(ByVal savedState As Object) If Not (savedState Is Nothing) Then ' Load State from the array of objects that was saved at vedViewState. Dim myState As Object() = CType(savedState, Object()) If Not (myState(0) Is Nothing) Then MyBase.LoadViewState(myState(0)) End If If Not (myState(1) Is Nothing) Then FText = CType(myState(1), String) End If End If End Sub ''' <summary> ''' 將控制項狀態寫入 ViewState 中。 ''' </summary> Protected Overrides Function SaveViewState() As Object Dim baseState As Object = MyBase.SaveViewState() Dim myState(1) As Object myState(0) = baseState myState(1) = FText Return myState End Function </code></pre> <p>利用上述的方式，我們可以在 LoadViewState 批次載入所有屬性值，而在 SaveViewState 批次寫入屬性值，如此在讀取屬性就不用一直做型別轉換的動作以改善效率。</p> <p><strong>結語</strong><br /> 雖然屬性一般都是儲存於 ViewState 中，不過若是一些無關緊要的屬性或是完全不會執行階段就變更的屬性，可以考慮不需要將這些屬性儲存於 ViewState 中；因為 ViewState 是個兩面刃，ViewState 可以很輕易幫我們維護屬性值，不過相對的也增加了面頁的傳輸量，所以可以視實際情形來決定屬性是否要儲存於 ViewState 中。</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/07/5601.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/07/5601.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-06 21:17:20</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day4] 複合控制項</title> <link>https://ithelp.ithome.com.tw/articles/10011633?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011633?sc=rss.iron</guid> <description><![CDATA[<p>複合控制項就是控制項可包含其他子控制項，複合控制項繼承至 System.Web.UI.WebControls.CompositeControl，例如 Login 及 Wizard 等控制項就是屬...]]></description> <content:encoded><![CDATA[<p>複合控制項就是控制項可包含其他子控制項，複合控制項繼承至 System.Web.UI.WebControls.CompositeControl，例如 Login 及 Wizard 等控制項就是屬於複合控制項。我們常在網頁上常看到一種輸入日期的方式是年月日三個下拉清單，本文將利用複合控制項來實作這個年月日下拉清單控制項，示範如何實作複合控制項。<br /> <strong>一、CompositeControl 類別的特性</strong><br /> CompositeControl 類別是抽象類別，它會實作 INamingContaner 介面，INamingContaner 介面會在子控制項的 ClinetID 加上父控制項的 ID，以確保頁面上控制項的 ClientID 是唯一的。繼承 CompositeControl 類別一般都是覆寫 CreateChildControls 方法，在此方法中將建立子控制項並加入 Controls 集合屬性中；當存取其子控制項時，若子控制項未建立，會執行 CreateChildControls 方法，以會確保所有子控制項皆已在存取 ControlCollection 之前建立。<br /> <strong>二、日期下拉清單輸入器</strong><br /> 我們繼承 CompositeControl 類別，命名為 TBDropDownDate。這個控制項會包含年月日三個下拉清單(DropDownList)，所以我們只要在 CreateChildControls 方法中依序建立年月日的 DropDownList 子控制項，並加入 Controls 集合屬性中即可。</p> <pre><code>''' <summary> ''' 日期下拉清單輸入器。 ''' </summary> < _ ToolboxData("<{0}:TBDropDownDate runat=server></{0}:TBDropDownDate>") _ > _ Public Class TBDropDownDate Inherits System.Web.UI.WebControls.CompositeControl Protected Overrides Sub CreateChildControls() Dim oYear As DropDownList Dim oMonth As DropDownList Dim oDay As DropDownList Dim N1 As Integer '年下拉清單區間為 1950-2010 (年區間可以用屬性來設定) oYear = New DropDownList oYear.ID = "Year" For N1 = 1950 To 2010 oYear.Items.Add(N1.ToString) Next Me.Controls.Add(oYear) '加入子控制項 Me.Controls.Add(New LiteralControl("年")) '月下拉清單區間為 1-12 oMonth = New DropDownList oMonth.ID = "Month" For N1 = 1 To 12 oMonth.Items.Add(N1.ToString) Next Me.Controls.Add(oMonth) '加入子控制項 Me.Controls.Add(New LiteralControl("月")) '日下拉清單區為為 1-31 oDay = New DropDownList oDay.ID = "Day" For N1 = 1 To 12 oDay.Items.Add(N1.ToString) Next Me.Controls.Add(oDay) '加入子控制項 Me.Controls.Add(New LiteralControl("日")) End Sub End Class </code></pre> <p>在設定階段拖曳 TBDropDownDate 到頁面上，就可以看到我們在 CreateChildControls 方法中所加入的子控制項。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/ASP.NETDay4_9C76/image_2.png" alt="" /></p> <p>執行程式，檢視它的 HTML 原始碼，會發現年月日的子控制項的 ClientID 都會在原 ID 前加上父控制項的 ID，這樣命名規則可以確保所有的控制項的 ClinetID 都是唯一值。</p> <pre><code><span id="TBDropDownDate1"> <select name="TBDropDownDate1$Year" id="TBDropDownDate1_Year"> ....省略 <select name="TBDropDownDate1$Month" id="TBDropDownDate1_Month"> ....省略 <select name="TBDropDownDate1$Day" id="TBDropDownDate1_Day"> </span> </code></pre> <p><strong>三、結語</strong><br /> 我們已經看過三類伺服器控制項的簡單案例，不過這三個案例都只是簡單說明控制項 UI 的部分，一個完整的控制項需具備屬性、方法、事件、設計階段支援...等，在後面的文章中，我們將陸續針對這些部分做詳細的介紹。</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/05/5583.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/05/5583.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-05 22:22:25</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day3] 擴展現有伺服器控制項功能</title> <link>https://ithelp.ithome.com.tw/articles/10011562?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011562?sc=rss.iron</guid> <description><![CDATA[<p>相對於由無到有開發控制項，繼承現有現伺服器控制項是比較簡單且實用的方式；若希望在現有的控制項增加某些屬性或功能，直接繼承該控制項下來擴展功能是最快的方式，例如「按下 Button 會彈出詢問訊息...]]></description> <content:encoded><![CDATA[<p>相對於由無到有開發控制項，繼承現有現伺服器控制項是比較簡單且實用的方式；若希望在現有的控制項增加某些屬性或功能，直接繼承該控制項下來擴展功能是最快的方式，例如「按下 Button 會彈出詢問訊息」、「TextBox 設為 ReadOnly 時，可以取得前端傳回的 Text 屬性」這類需求，都可以直接繼承原控制項下來，加上我們需要的功能即可。以下我們就以一個簡單的案例來說明如何繼承現有伺服器下來擴展功能。<br /> <strong>一、擴展 Button 控制項：按鈕加上詢問訊息</strong><br /> 按下按鈕執行某些動作前，有時會詢問使用者是否執行該動作；例如按下刪除鈕，會詢問使用者是否確定要執行刪除的動作。當然這只需要簡單的 JavaScript 就可以完成，不過相對於 .NET 的程式語言，JavaScript 是非常不易維護的用戶端指令碼，如果能讓開發人員完全用不到 JavaScript，那何樂不為呢？ 那就由 Button 控制項本身提供加上詢問訊息的功能就可以，相關的 JavaScript 由控制項去處理。<br /> 一般要在 Button 加上詢問訊息，只要在 OnClientClick 屬性設定如下的 JavaScript 即可。我們的目的只是讓開發人員連設定 OnClientClick 屬性的 JavaScript 都省略，直接設定要詢問的訊息即可，接下來我們就要開始實作這個控制項。</p> <pre><code><asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="if (confirm('確定執行嗎？')==false) {return false;}" /> </code></pre> <p>在 Bee.Web 專案中，加入「ASP.NET 伺服器控制項」，此控制項繼承 Button 下來命名為 TBButton (命名空間為 Bee.Web.WebControls)。在 TBButton 類別中加入 ConfirmMessage 屬性，用來設定詢問訊息的內容。然後在 Render 方法將詢問詢息的 JavaScript 設定到 OnClientClick 屬性即可。</p> <pre><code>Namespace WebControls < _ Description("按鈕控制項"), _ ToolboxData("<{0}:TBButton runat=server></{0}:TBButton>") _ > _ Public Class TBButton Inherits System.Web.UI.WebControls.Button <Description("詢問訊息")> _ Public Property ConfirmMessage() As String Get Dim sConfirmMessage As String sConfirmMessage = CStr(ViewState("ConfirmMessage")) If sConfirmMessage Is Nothing Then Return String.Empty Else Return sConfirmMessage End If End Get Set(ByVal value As String) ViewState("ConfirmMessage") = value End Set End Property ''' <summary> ''' 覆寫 Render 方法。 ''' </summary> Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) Dim sScript As String Dim sConfirm As String '若有設定 ConfirmMessage 屬性，則在 OnClientClick 加入詢問訊息的 JavaScript If Me.ConfirmMessage <> String.Empty Then sScript = Me.OnClientClick '詢問訊息的 JavaScript sConfirm = String.Format("if (confirm('{0}')==false) {{return false;}}", Me.ConfirmMessage) If sScript = String.Empty Then Me.OnClientClick = sConfirm Else Me.OnClientClick = sConfirm & sScript End If End If MyBase.Render(writer) End Sub End Class End Namespace </code></pre> <p>將 TBButton 拖曳到測試頁面，設定 ConfirmMessage 屬性。</p> <pre><code><bee:TBButton ID="TBButton1" runat="server" ConfirmMessage="確定刪除此筆資料嗎？" Text="刪除" /> </code></pre> <p>執行結果如下。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/8cea6e0221af_B473/image_2.png" alt="" /></p> <p><strong>二、結語</strong><br /> 筆者在開發 ASP.NET 的應用程式過程中，通常會習慣把所有現有控制項繼承下來，無論目前需不需要擴展控制項功能。這種方式對於開發大型系統是相當有幫助的，因為無法預期在系統開發的過程中會不會因為某些狀況，而臨時需要擴展控制項的功能，所以就先全部繼承下來以備不時之需，也為未來保留修改的彈性。</p> <p><strong>三、相關連結</strong><br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1748.aspx" target="_blank">擴展 CommandField 類別 - 刪除提示訊息</a><br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1697.aspx" target="_blank">按鈕加上詢問訊息</a></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/04/5578.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/04/5578.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-04 21:24:49</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day2] 建立第一個伺服器控制項</title> <link>https://ithelp.ithome.com.tw/articles/10011523?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011523?sc=rss.iron</guid> <description><![CDATA[<p>上一篇中已經建立「ASP.NET 伺服器控制項」專案，接下來我們將學習來撰寫第一個伺服器控制項。<br /> 撰寫伺服器控制項大致分為下列三種方式<br /> 1.由無到有建立全新的控制項，一般...]]></description> <content:encoded><![CDATA[<p>上一篇中已經建立「ASP.NET 伺服器控制項」專案，接下來我們將學習來撰寫第一個伺服器控制項。<br /> 撰寫伺服器控制項大致分為下列三種方式<br /> 1.由無到有建立全新的控制項，一般會繼承至 System.Web.UI.Control 或 System.Web.UI.WebControls.WebControl 類別。<br /> 2.繼承現有控制項，擴展原有控制項的功能，如繼承原有 TextBox 來擴展功能。<br /> 3.複合式控制項，將多個現有的控制項組合成為一個新的控制項，例如 TextBox 右邊加個 Button 整合成一個控制項，一般會繼承至 System.Web.UI.WebControls.CompositeControl 類別。</p> <p>本文將先介紹第1種方式，由無到有來建立控制項，後面的文章中會陸續介紹第2、3種方式的控制項。要建立全新的控制項會繼承至 Control 或 WebControl，沒有 UI 的控制項可由 Control 繼承下來 (如 SqlDataSource)，具 UI 的控制項會由 WebControl 繼承下來。接下來的範例中，我們將繼承 WebControl 來建立第一個 MyTextBox 控制項。</p> <p><strong>一、新增 MyTextBox 控制項</strong><br /> 在 Bee.Web 專案按右鍵選單，執行「加入\新增項目」，選擇「ASP.NET 伺服器控制項」，在名稱文字框中輸入 MyTextbox，按下「確定」鈕，就會在專案中加入 MyTextbox 控制項類別。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/0e8fe1ad2977_14385/image_thumb.png" alt="" /><br /> 新加入的控制項預設有一個 Text 屬性，以及覆寫 Render 方法。Render 方法是「將控制項呈現在指定的 HTML 寫入器中」，簡單的說就是在 Render 方法會將控制項對應的 HTML 碼輸出，用來呈現在用戶端的瀏覽器上。假設我們要撰寫一個網頁上的文字框，那就先去看一下文字框在網頁中對應的 HTML 碼，然後在 Render 方法中想辨法輸出這些 HTML 碼即可。</p> <p><strong>二、輸出控制項的 HTML 碼</strong><br /> 你可以使用 FrontPage 之類的 HTML 編輯器，先編輯出控制項的呈現方式，進而去觀查它的 HTML 碼，再回頭去思考如何去撰寫這個伺服器控制項。假設 MyTextbox 控制項包含一個文字框及一個按鈕，那最終輸出的 HTML 碼應該如下。</p> <pre><code><input id="Text1" type="text" /> <input id="Button1" type="button" value="button" /> </code></pre> <p>我們在 MyTextbox 的 RenderContents 方法中輸出上述的 HTML 碼。</p> <pre><code> Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter) Dim sHTML As String sHTML = "<input id=""Text1"" type=""text"" />" & _ "<input id=""Button1"" type=""button"" value=""button"" />" writer.Write(sHTML) End Sub </code></pre> <p>建置控制項專案，然後拖曳 MyTextbox 在測試頁面上，設計階段就會呈現出我們期望的結果。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/0e8fe1ad2977_14385/image_4.png" alt="" /></p> <p>執行程式，在瀏覽器看一下 MyTextbox 控制項輸出的結果，是不是跟我們預期的一樣呢。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/0e8fe1ad2977_14385/image_6.png" alt="" /></p> <p><strong>三、屬性套用到控制項 HTML 碼</strong><br /> 控制項不可能單純這樣輸出 HTML 碼而已，控制項的相關屬性設定，一般都影響到輸出的 HTML 碼。假設 MyTextbox 有 Text 及 ButtonText 二個屬性，分別對應到 文字框的內容及按鈕的文字，MyTextbox 本來就有 Text 屬性，依像畫蘆葫新增 ButtonText 屬性。</p> <pre><code> < _ Bindable(True), _ Category("Appearance"), _ DefaultValue(""), _ Localizable(True)> _ Property ButtonText() As String Get Dim s As String = CStr(ViewState("ButtonText")) If s Is Nothing Then Return String.Empty Else Return s End If End Get Set(ByVal Value As String) ViewState("ButtonText") = Value End Set End Property </code></pre> <p>RenderContents 方法改寫如下。</p> <pre><code> Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter) Dim sHTML As String sHTML = "<input id=""Text1"" type=""text"" value=""{0}""/>" & _ "<input id=""Button1"" type=""button"" value=""{1}"" />" sHTML = String.Format(sHTML, Me.Text, Me.ButtonText) writer.Write(sHTML) End Sub </code></pre> <p>重新建置控制項專案，在頁面上測試 MyTextbox 的 Text 及 ButtonText 屬性。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/0e8fe1ad2977_14385/image_8.png" alt="" /></p> <p><strong>四、使 ClientID (HTML 原始碼控制項的 ID) 是唯一值</strong><br /> 在頁面上放置二個 MyTextbox 控制項，執行程式，在瀏覽器中檢查 MyTextbox 的 HTML 原始碼。你會發現 MyTextbox 會以一個 span 包住控制項的內容，而每個控制項的輸出的 ClientID 是唯一的。不過 MyTextbox 內含的文字框及按鈕卻會重覆，所以一般子控制項的 ClientID 會在前面包含父控制項的 ID。</p> <pre><code><span id="MyTextbox1"> <input id="Text1" type="text" value="這是文字"/> <input id="Button1" type="button" value="這是按鈕" /> </span> <br /> <span id="MyTextbox2"> <input id="Text1" type="text" value="這是文字"/> <input id="Button1" type="button" value="這是按鈕" /> </span> </code></pre> <p>所以我們再次修改 RenderContents 方法的程式碼</p> <pre><code> Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter) Dim sHTML As String sHTML = "<input id=""{0}_Text"" type=""text"" value=""{1}""/>" & _ "<input id=""{0}_Button"" type=""button"" value=""{2}"" />" sHTML = String.Format(sHTML, Me.ID, Me.Text, Me.ButtonText) writer.Write(sHTML) End Sub </code></pre> <p>執行程式，再次檢視 HTML 原始碼，所有的 ClinetID 都會是唯一的。</p> <pre><code><span id="MyTextbox1"> <input id="MyTextbox1_Text" type="text" value="這是文字"/> <input id="MyTextbox1_Button" type="button" value="這是按鈕" /> </span> <br /> <span id="MyTextbox2"> <input id="MyTextbox2_Text" type="text" value="這是文字"/> <input id="MyTextbox2_Button" type="button" value="這是按鈕" /> </span> </code></pre> <p><strong>五、控制項前置詞</strong><br /> 自訂控制項的預設前置詞是 cc1，不過這是可以修改的，在專案中的 AssemblyInfo.vb 檔案中，加入如下定義即可。詳細的作法請參考筆者部落格中的「<a href="http://www.dotblogs.com.tw/jeff377/archive/2008/03/17/1744.aspx" target="_blank">自訂伺服器控制項前置詞</a>」一本有詳細介紹，在此不再累述。</p> <pre><code>'設定控制項的標記前置詞 <Assembly: TagPrefix("Bee.Web.WebControls", "bee")> </code></pre> <p><strong>六、結語</strong><br /> 本文中是用土法鍊鋼的方法在撰寫伺服器控制項，一般在實作控制項時會有更好的方式、更易維護的寫法，後續的文章中會陸續介紹相關作法。</p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/03/5573.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/03/5573.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-03 23:51:35</pubDate> </item> <item> <title>[ASP.NET 控制項實作 Day1] 建立 ASP.NET 伺服器控制項專案</title> <link>https://ithelp.ithome.com.tw/articles/10011408?sc=rss.iron</link> <guid isPermaLink="true">https://ithelp.ithome.com.tw/articles/10011408?sc=rss.iron</guid> <description><![CDATA[<p>在 ASP.NET 開發環境中，我們常使用現成的控制項直接拖曳至頁面中使用，有沒有想過我們也可以開發自用的控制項呢？本文將本文以 VS2008 為開發工具，VB.NET 為開發程式語言，來說明如...]]></description> <content:encoded><![CDATA[<p>在 ASP.NET 開發環境中，我們常使用現成的控制項直接拖曳至頁面中使用，有沒有想過我們也可以開發自用的控制項呢？本文將本文以 VS2008 為開發工具，VB.NET 為開發程式語言，來說明如何建立「伺服器控制項」專案，以及如何測試開發階段的的伺服器控制項。<br /> <strong>一、建立「ASP.NET 伺服器控制項」專案</strong><br /> 首先執行功能表「檔案\新增專案」，在專案類型中選擇 Visual Basic -> Web，選取「ASP.NET 伺服器控制項」範本，在名稱文字框中輸入專案名稱，也就是組件的檔案名稱，我們輸入 Bee.Web 為專案名稱，組件檔案為 Bee.Web.dll，按下「確定」鈕即會建立新的「ASP.NET 伺服器控制項」專案。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_1.png" alt="" /><br /> 在新建立「ASP.NET 伺服器控制項」專案中，會預設加入一個伺服器控制項類別(ServerControl1.vb)，這個伺服器控制項已經事件幫我們加入一些控制項的程式碼。目前暫不做任何修改，直接使用此控制項來做測試說明。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_2.png" alt="" /><br /> 接下來執行功能表「專案\Bee.Web 屬性」，設定此組件的根命名空間，一般慣用的根命名空間都會與組件名稱相同，以方便加入參考時可以快速找到相關組件。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_10.png" alt="" /><br /> 我們先儲存這個「ASP.NET 伺服器控制項」專案，指定儲存位置，按下「儲存」鈕。整個專案相關檔案，會儲存在以專案名稱的資料夾中。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_3.png" alt="" /></p> <p><strong>二、加入測試網站</strong><br /> 不要關閉目前「ASP.NET 伺服器控制項」專案，執行功能表「檔案\加入\新網站」，選擇「ASP.NET 網站」，會在方案中加入一個網站，來測試開發階段的伺服器控制項使用。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_5.png" alt="" /><br /> 在測試網站加入參考，選擇「專案」頁籤，此頁籤中會列出該方案中其他可加入參考的專案，選取 Bee.Web 專案，按下「確定」鈕。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_6.png" alt="" /><br /> 先在 Bee.Web 專案中執行「建置」動作，然後切換到測試網站的頁面設計，工具箱中就會出現 ServerControl1 伺服器控制項。這個控制項就可以直接拖曳至頁面中使用，這個控制項只是單純 Render 出 Text 屬性值，你可以在控制項屬性視窗中，更改 Text 屬性值為 "測試文字"，就會看到這個控制項顯示 "測試文字"。將測試網站設為啟動專案，按下「F5」執行程式，就會看到該控制在執行階段的結果。<br /> <img src="http://files.dotblogs.com.tw/jeff377/0810/166fb54653d6_12877/image_thumb_12.png" alt="" /></p> <p>備註：本文同步發佈於筆者「ASP.NET 魔法學院」部落格<br /> <a href="http://www.dotblogs.com.tw/jeff377/archive/2008/10/02/5562.aspx" target="_blank">http://www.dotblogs.com.tw/jeff377/archive/2008/10/02/5562.aspx</a></p> ]]></content:encoded> <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">jeff377</dc:creator> <pubDate>2008-10-02 23:16:29</pubDate> </item> </channel> </rss>