mysql
本來打算使用ASP.NET來解決了，
後來才發現原來SQL那麼猛可以做得到(感謝賈斯丁大大><)，
還以為SQL要取得年月日很麻煩，但其實並不複雜，那就來記錄一下ㄅ!
SQL Server 找出最新日期的所有資料
從SQL語法取當天日期Getdate()看到只取得年月日的方法。
Convert(varchar(10),GetDate(),111)
將時間轉成字串，格式為YYYY/MM/DD。
搭配MAX()函式，就解決了我的問題了XDD (將時間的分跟秒去掉)。
SQL如下:
Select Max(Convert(varchar(10),[DateTime型態的欄位名稱],111)) from [資料表名稱] as [新欄位名稱]
以上SQL的結果就可以只取得最大(新)的那一天的年、月、日(YYY/MM/DD)格式的字串。
Select * From [資料表]
where ([DateTime型態的欄位名稱] >
(Select Convert (datetime,
Max(Convert(varchar(10),[DateTime型態的欄位名稱],111))) AS [新欄位名稱]
FROM [資料表名稱]
稍微說明
將取得的最大值年月日日期字串使用Convert轉回datetime型態，就會變成年分跟秒是00/00的時間型態。
再取得大於的個日期的資料，就可以抓到全部大於這個日期的資料了><
SQL的Convert可參考。
]]>在ASP.NET中沒有內建的分頁控制項，但可以從GridView屬性的AllowPaging設定為True，就可以完成分頁，但使用內建的分頁功能...]]>
在ASP.NET中沒有內建的分頁控制項，但可以從GridView屬性的AllowPaging設定為True，就可以完成分頁，但使用內建的分頁功能，資料量小的話還好，若資料量大的話，效能會變得很不好，原因是GridView內建的是一次從資料庫取得所有資料，若資料量一大讀取速度就會變慢，而且GridView的AllowPaging我也沒研究過，之後再研究看看XD
然後其實在ASP.NET中可以自製一個控制項，使用方法就是建立一個「Web Forms使用者控制項」。並將HTML、CSS等寫到裡面，就可以完成一個自製的控制項，拖曳到自己的Web頁面就可以使用了。
使用自製控制項的話，就可以想顯示幾筆資料就跟資料庫要幾筆資料就好(使用CTE和ROW_NUMBER())，總資料量大也沒關係的，跟GridView內建的分頁功能相比，效能相對比較好。
本篇的目的與web form環境
現在已有一個GridView已經與資料庫取得資料了，並且顯示，資料表叫做[ORID_data]，不過由於資料料很多，我們需要有分頁，讓使用者體驗可以比較好，頁面也比較乾淨整齊。
今天要使用一個現成的分頁控制項，並且讓它可以與SQL SERVER連接，在網頁上正常使用。
那就開始ㄅ
創立Web Forms使用者控制項
我們先創一個「Web Forms使用者控制項」其名為GridView_Page1。
Literal控制項
建立後，從工具箱拉一個Literal控制項到GridView_Page1.ascx，並替ID命名為litpage1。
Literal控制項之後寫會員權限分配管理時在作介紹囉XD
寫入分頁的程式碼
寫入分頁的HTML程式碼。
然後創一個CSS樣式表，貼上寫好的分頁CSS，並在GridView_Page1.ascx控制項內link CSS。
拖曳分頁控制項
完成分頁的控制項後，就可以直接當成工具，用拖曳的方式拉到需要分頁功能的aspx頁面上，我將它放在GridView控制項的下方。
接分頁參控制項的參數
通常分頁控制項要填寫的會有三個參數
1.每頁顯示的資料數量
2.資料總數量
3.分頁的網址參數(ex:第二頁就是aspx?page=2)
假設現在分頁控制項要填入的參數如下:
那麼首先先limit及totalitems先隨便填入一個值，然後呼叫此副程式，先測試看看是否有分頁出現。
public void Pagination()
{
//每頁數量
GridView_Page1.limit = 3;
//資料總量
GridView_Page1.totalitems = 300;
//連結文字，例:pagination.aspx?page=foo=bar
GridView_Page1.targetpage = "orid_main.aspx";
//顯示分頁控制項
GridView_Page1.showPageControls();
}
分頁有成功出現，且也按照設定出現共300筆資料及100頁。
然後注意到網址，剛進入頁面時。
按下第5頁時。
抓取每分頁網址上的參數
從上圖會發現一開始在第一頁時，網址的參數並不會有Page=1。
所以先在Page_Load建立一個存網址是第幾頁的變數，使用三元運算子，假如是NULL就是1，不然就看第幾頁就是第幾頁。
int page = Request["page"]==null?1: Convert.ToInt32(Request["page"]);
取得真正的資料總數量
現在需要抓到資料庫內真正的資料總數量，並交給totalitems輸入，需使用DataReader或DataSet(DataTable)來取得資料，並放在totalitems的值。
使用DataTable的方式，SQL使用COUNT()來取得總筆數:
//取得與資料庫的聯繫
string getconfig = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["ConnectionStrings的NAME"].ConnectionString;
//建立與資料庫的通道
SqlConnection getConnection = new SqlConnection(getconfig);
//下取得總數量的SQL語法
SqlCommand command = new SqlCommand($"SELECT count(*) FROM ORID_data ", getConnection);
//取得資料庫資料
SqlDataAdapter loginAdapter = new SqlDataAdapter(command);
//創立準備存放資料的記憶體資料集
DataTable user = new DataTable();
//將取得的資料存入記憶體資料集中
loginAdapter.Fill(user);
totalitems(總筆量)就可以放上取得的資料總筆數。
GridView_Page1.totalitems = Convert.ToInt32(user.Rows[0][0]);
假設我想每頁顯示16筆資料。
GridView_Page1.limit = 16;
GridView與分頁的聯動
切換分頁時要讓GridView上的資料會跟著分頁做變化，那麼就需要使用到SQL中暫存的CTE及ROW_NUMBER()的排序方法。
先在SQL Server中測試看看是否抓的到資料
with cte as (select ROW_NUMBER() OVER (ORDER BY id ASC) as ROW_ID ,* from ORID_data )
select * from cte where ROW_ID >= 1 and ROW_ID <=16
顯示結果只會出現ROW_ID範圍內16筆資料
那麼現在只需要將ROW_ID的範圍改成網址上的page參數分頁公式就可以成功在每個分頁抓到需要顯示的資料。
ROW_ID >= [分頁中的第一筆] and ROW_ID <= [分頁中的最後一筆]
還記得在上面抓取每分頁網址上的參數時，我們有設一個參數取得網址的page參數ㄇ，原因是假設按到第二分頁時page=2 ;第三分頁page=3以此類推。
int page = Request["page"]==null?1: Convert.ToInt32(Request["page"]);
公式如下:
ROW_ID >= [分頁中的第一筆] and ROW_ID <= [分頁中的最後一筆]
條件:每頁顯示16筆，所以
第一頁的第一筆是 1 ;第一頁的最後一筆是16
第二頁的第一筆是 17 ;第二頁的最後一筆是32
分頁的變數是 page
可得知:
[分頁中的第一筆]= (page-1) * [每頁顯示的筆數]+1
[分頁中的最後一筆]= page * [每頁顯示的筆數]
所以SQL語法就可以寫:
with cte as (select ROW_NUMBER() OVER (ORDER BY id ASC) as ROW_ID ,* from ORID_data )
select * from cte where ROW_ID >= **(page-1) * 16+1** and ROW_ID <= **page*16**
讓GridView取得資料並顯示，如下:
//取得網址參數
int page = Request["page"] == null ? 1 : Convert.ToInt32(Request["page"]);
//與資料庫的連接
string config = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["ORIDConnectionString"].ConnectionString;
//建立與資料庫的通道
SqlConnection connection = new SqlConnection(config);
//SQL語法
SqlCommand command = new SqlCommand($"with cte as (select ROW_NUMBER() OVER (ORDER BY id ASC) as ROW_ID ,* from ORID_data )\r\n\r\nselect * from cte where ROW_ID >= {(page-1) * 16+1} and ROW_ID <= {page*16} ", connection);
//使用DataTable
//取得資料庫資料
SqlDataAdapter Adapter = new SqlDataAdapter(command);
//創立準備存放資料的記憶體資料集
DataTable user = new DataTable();
//將取得的資料存入記憶體資料集中
Adapter.Fill(user);
//控制項的資料來源是從user記憶體資料集
GridView1.DataSource = user;
//資料與控制項繫結
GridView1.DataBind();
結語
運用使用者控制項達成分頁的功能，484比想像中來得簡單，比較麻煩的應該是要做出自製的分頁控制項XDD
]]>ROW_NUMBER()是SQL用來做排序的函數，在做分頁功能時，通常都會使用上它，ROW_NUMBER()會將查詢出來的每一列資料加上一個序號(從1...]]>
ROW_NUMBER()是SQL用來做排序的函數，在做分頁功能時，通常都會使用上它，ROW_NUMBER()會將查詢出來的每一列資料加上一個序號(從1開始累加)，依次排序且不會重複。
使用ROW_NUMBER()時必須要用OVER子句選擇對某一列進行排序才能生成序號。
使用方法:
Select ROW_NUMBER() OVER (ORDER BY [欄位名稱] (ASC or DESC) as [ROW_NUMBERㄉ欄位名稱] ,* from [資料表名稱]
使用範例:
Customers資料表
使用ROW_NUMBER()
select ROW_NUMBER() OVER (ORDER BY id ASC) as ROW_ID ,* from Customers
顯示結果
結果中的ROW_ID欄位，就是由ROW_NUMBER()函式所產生出的欄位序號列。原理是先使用OVER子句中的ORDER BY排序對資料進行排序，然後按照這個順序生成序號，由1開始一直流水編號到最後一筆資料。
分組排序
範例:
select ROW_NUMBER() OVER (PARTITION BY address ORDER BY id ASC) as ROW_ID ,* from Customers
結果:
多對address下PARTITION BY條件，會發現ROW_NUMBER()產生的ROW_ID欄位，會依照組別來產生流水號。
要取出每個群組的第一筆資料，就可以使用這個方法，如下:
select * from (select ROW_NUMBER() OVER (PARTITION BY address ORDER BY id ASC) as ROW_ID ,* from Customers)as KKK where KKK.ROW_ID =1
結果:
今天要介紹的是SQL Server的暫存表以及CTE的用法，因為在之後我打算寫ASP.NET自製分頁控制項的應用，會用到一點暫存表與CTE的SQL指令，所以這篇就來稍微介...]]>
今天要介紹的是SQL Server的暫存表以及CTE的用法，因為在之後我打算寫ASP.NET自製分頁控制項的應用，會用到一點暫存表與CTE的SQL指令，所以這篇就來稍微介紹一下暫存表和CTE的用法，暫存表會介紹@Table跟#Table和##Table的用法與差異。
使用暫存表
SQL Server 產生暫存的方式還滿多種的，要使用哪中方式就要取決於不同的時機，資料量的大小、使用方法的頻率等...，適當的時機使用暫存表對於效能會有很大的幫助。
1.暫存表 [#Table]
記憶體存在於tempdb，可建立索引(index)，當SQL Server關閉時，#Table會自動DROP，但最好自己手動DROP。
建立方式方式1:
Select * into [#Table_name] from [資料表名稱] where 條件
上面完成後，確認暫存表是否存在
Select * from #Table_name
使用後記得刪除
DROP TABLE #Table_name
建立方式方式2:
CREATE TABLE [#Table_name]
(
[欄位1] 資料型態,
[欄位2] 資料型態
)
INSERT INTO #Table_name ([欄位1],[欄位2])
SELECT [欄位1],[欄位2]
FROM [資料表名稱] //要參考的資料表名稱
使用後記得刪除
DROP TABLE #Table_name
如果沒有加#的話，就會創一個真正的資料表出來。
2.暫存表 [##Table]
double#與上述1的[#Table_name]都是暫存資料表，兩者均在tempdb資料庫中建立起資料表(存於DISK中)，可利用 DROP TABLE 刪除暫存資料表，或是建立該暫存資料表的連線結束時，SQL Server 會自動將其刪除。
差異
兩者的差異在於，#Table只有建立者可以使用，其他人不可使用(其他資料庫)，而##Table則是全域的資料表，所有人均可取用(其他資料庫也可使用)。
##Table用法如下，只是多加一個#:
方式1:
Select * into [##Table_name] from [資料表名稱] where 條件
方式2:
CREATE TABLE [##Table_name]
(
[欄位1] 資料型態,
[欄位2] 資料型態
)
INSERT INTO ##Table_name ([欄位1],[欄位2])
SELECT [欄位1],[欄位2]
FROM [資料表名稱] //要參考的資料表名稱
最後記得手動刪除
Drop TABLE ##Table_name
3.暫存表 [@Table]
稱為資料表變數，將資料表當作是一個變數來使用，當批次指令執行完成後即自動從記憶體中被刪除(可參考下範例)。
所以@Table與#Table & ##Table的差異在於，前者不需使用DROP指令，當此次指令執行完後會自動被刪除；後者
需使用DROP或是待連線結束後暫存表才會消失。
@Table使用方法:
DECLARE @Table_name AS TABLE
(
[欄位1] 資料型態,
[欄位2] 資料型態
)
INSERT INTO @Table_name([欄位1],[欄位2])
SELECT [欄位1],[欄位2]
FROM [資料表名稱] //要參考的資料表名稱
SELECT *
FROM @Table_name
範例:
建立一個@Table讓它30秒後執行。
DECLARE @Table AS TABLE
(
ID INT,
[NAME] NVARCHAR(20)
)
INSERT INTO @Table(ID,NAME)
SELECT id,name
from UserInformation
SELECT *
FROM @Table
WAITFOR DELAY '00:00:30'
30秒前，從tempdb暫存資料表中可以看到有一個@temp資料表(紅框)
30秒SQL執行完畢後，會發現，@Table從資料庫記憶體中消失了。
一般資料表運算式(Common Table Expressions, CTE)
簡稱CTE，與暫存資料表(#table)不同的是，使用CTE查詢完的當下就會從記憶體中消失，可以減少重覆計算所耗的I/O、CPU和執行時間，如果同樣的查詢需使用很多次時，非常適合使用CTE，例如分頁。
使用方式:
WITH [CTE名稱] ([CTE的欄位名稱A],[CTE的欄位名稱B],... ) as (SELECT [欄位1],[欄位2],... FROM [資料表名稱])
SELECT * FROM CTE //一定要直接顯示,不直接的話就會立馬消失了,因為CTE查詢完的當下就會從記憶體中消失。
範例:
Customers資料表
使用CTE單一查詢用法
with cte_name (品牌,國家) as (select name,address from Customers)
select * from cte_name
顯示結果:
感謝閱讀，以上若有任何問題或錯誤，麻煩務必糾正及建議，感謝。
]]>參考資料
SQL - 檢視(view),暫存資料表(#Table),資料表變數(@Table),衍生資料表(子查詢),一般資料表(CTE)
資料庫暫存表 @[TableName] , # [TableName],## [TableName] 解說
TempDB的基本調教
#TEMPTABLE 、##TEMPTABLE 、@TEMPTABLE 區別?!
通用資料表運算式(CTE)
如何在 T-SQL 中宣告變數
今天要來講的是ASP.NET的帳號登入登出的驗證功能，如何使用表單驗證來完成會員登入，因為怕之後有可能會忘記所以來紀錄一下這篇。若講解的有錯誤，麻煩務必糾正，感謝...]]>
今天要來講的是ASP.NET的帳號登入登出的驗證功能，如何使用表單驗證來完成會員登入，因為怕之後有可能會忘記所以來紀錄一下這篇。若講解的有錯誤，麻煩務必糾正，感謝。
要進行表單驗證，首先要在 Web.config 的 system.web項目增加
<authentication mode ="Forms" >
<forms cookieless="UseCookies" timeout="1440" loginUrl="Login.aspx"></forms>
</authentication>
稍微解釋一下:
- authentication mode ="Forms": mode就是選擇想要的驗證，這邊就選表單驗證(預設是Windows驗證)。
- UseCookies: 不管客戶端是否支援cookie,反正都使用cookie。
- timeout: 驗證票存在的有效時間(預設30分鐘)。
- loginUrl: 登入的網址。
新增類別定義存入Cookie的資訊:
public class userinformation
{
public Int32 id { get; set; }//主Key
public string name { get; set; }//暱稱
public string username { get; set; }//使用者名稱
public string mail { get; set; } //信箱 email
public string permission { get; set; }//權限
public string photo { get; set; } //照片
}
新增登入即取得使用者資訊操作(我是寫在aspx.cs當副程式)
void SetAuthenTicket(string userData, string userId)
{
//宣告一個驗證票
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1,//版本
userId,//使用者名稱
DateTime.Now,//發行時間
DateTime.Now.AddHours(3),//有效時間
false, //是否將 Cookie 設定成 Session Cookie，如果是則會在瀏覽器關閉後移除。
userData) //使用者資訊(可以想成備註欄);
//加密驗證票
string encryptedTicket = FormsAuthentication.Encrypt(ticket);
//建立Cookie
HttpCookie authenticationcookie = new HttpCookie(FormsAuthentication.FormsCookieName, encryptedTicket);
authenticationcookie.Expires=DateTime.Now.AddHours(3);
//將Cookie寫入回應
Response.Cookies.Add(authenticationcookie);
}
存入使用者資訊(login.aspx.cs)
//假如DataTable從資料庫有找到資料
if (user.Rows.Count > 0)
{
//創類別物件
userinformation Userinformation =new userinformation();
//替類別存入內容(下面是用DataTable從資料庫取得資料)
Userinformation.username = user.Rows[0]["username"].ToString();
Userinformation.name = user.Rows[0]["name"].ToString();
Userinformation.mail = user.Rows[0]["mail"].ToString();
Userinformation.permission= user.Rows[0]["permission"].ToString();
Userinformation.photo = user.Rows[0]["photo"].ToString();
//將物件序列化成字串
string userData = JsonConvert.SerializeObject(Userinformation);
//副程式SetAuthenTicket 創立一張驗證票跟存入Cookie
SetAuthenTicket(userData, username.Value);//使用者資訊和使用者名稱
//跳轉至登入後的頁面
Response.Redirect("RayWeb.aspx");
}
//登入失敗
else
{
//某個Label顯示登入失敗
Label1.Text = "登入失敗";
}
確認是否驗證與取得資料
//確認使用者是否有驗證票，現在是否登入，假如沒有就跳回Login頁面。
if (!HttpContext.Current.User.Identity.IsAuthenticated)/
{
Response.Redirect("Login.aspx");
}
//要取得驗證票內所存的使用者的資料，先將UserData反序列化成物件才能控制
//取得UserData
string strUserData =
((FormsIdentity)(HttpContext.Current.User.Identity)).Ticket.UserData;
//反序列化為物件，其名為Myperson
userinformation Myperson=
JsonConvert.DeserializeObject<userinformation>(strUserData);
//取得票卷上的username
Label1.Text = HttpContext.Current.User.Identity.Name;
//取得UserData內的使用者資訊
Label2.Text =Myperson.username;
稍微說明
1.IsAuthenticated: 指是否已驗證使用者。
2.FormsIdentity:表示使用表單驗證的已驗證使用者識別。
稍微說明取得登入的使用者資訊方式
簡單來說，一開始先創一個類別用來儲存從資料庫取得的登入使用者資料，並將它轉為字串存進驗證票的備註欄XD
接下來登入後，要取得備註欄資料(使用者資訊)，再將字串轉回物件，該物件的範本就用一開始創好專門儲存使用者資訊的類別來接取使用者資訊，然後就可以使用了。
使用者登出
創一個SignOut的Web表單
//登出表單驗證票卷
FormsAuthentication.SignOut();
//跳轉回使用者登入頁面
Response.Redirect("Login.aspx");
1.FormsAuthentication:管理表單驗證服務。
結語
使用表單驗證，用Cookie儲存有使用者資訊且加密的入場(登入)驗證票，入園後(登入後)需要資訊時再從票中取出使用，非常方便。
若以上有任何問題，麻煩務必糾正指教及建議，感謝><
]]>參考資料:
Web API 開發心得 (4) - 使用 FormsAuthentication 進行 API 授權驗證。
asp.net 2.0 下的表單驗證Cookieless屬性。
Forms 驗證與授權。
在使用ASP.NET與SQLServer做出留言板系列文中，已經有寫過新增資料進資料表的作法了，今天要來寫在Gridview控制項刪除資料庫內的資料的用法。
新增刪除鈕
在前台(.aspx)的設計模式中，GridView控制項的右上角小箭頭，選則編輯資料行，可用欄位找到CommandField，將刪除的欄位拉近選取的欄位，並將它轉換為TemplateField(在右下方有藍色的字可以按)。
並在選取的欄位，找到刪除點開，將HeaderText打上欄位名稱。
按下確定後，GridView選編輯樣板，對刪除右鍵選屬性就會出現刪除欄位(LinkButton)，且內容也會出現刪除的連結了。
CommandName:Delete
接下來GridView選編輯樣板，ItemTemplate找到刪除，對刪除右鍵選擇屬性，確認CommandName是否是Delete，若不是須將改成Delete，然後結束樣板。
CommandName要寫Delete事件動作才可以抓到這欄位是刪除。
事件中的動作Deleting
GridView的事件有好幾個，多數都有前後之分(ing或ed結尾)，刪除的話有分成RowDeleted和RowDeleting。
RowDeleted: 刪除後。
RowDeleting: 刪除中。
手寫刪除程式，必須寫在RowDeleting事件，所以在GridView屬性，選到事件(閃電符號)，對RowDeleting連點兩下會跳到.aspx.cs後端的畫面。
aspx.cs 刪除資料寫法
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string id = GridView1.DataKeys[e.RowIndex].Value.ToString();//取得點擊這列的id
string get = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnectionStrings的name"].ConnectionString;
SqlConnection Connection = new SqlConnection(get);
SqlCommand command = new SqlCommand($"DELETE FROM ORID_data WHERE (id = {id}) ", Connection);
Connection.Open();
command.ExecuteNonQuery();
Connection.Close();
Response.Redirect(Request.Url.ToString());
}
稍微解釋一下:
- DataKeys: 代表資料物件中的每個資料列的建值。
- e.RowIndex：目前要刪除這筆資料在GridView中的索引值(通常都會是id)。可參考這篇。
- SqlConnection: 建立ASP.NET與資料庫的通道。
- SqlCommand: 下達的SQL指令，記得要寫where條件式，SQL刪除語法可參考SQL-DELETE刪除的使用方法。
- ExecuteNonQuery():執行並回傳影響的數量方法。
- Response.Redirect(): 跳轉至其它頁面的方法。
- Request.Url.ToString():取得目前要求的URL指令，並字串化，放進Redirect()就是可重新整理現在這頁，可參考，也可以Redirect回自己的aspx頁面。
彈跳是否確定刪除?
到前台找到刪除的LinkButton內加上以下程式碼:
OnClientClick="javascript:if(!window.confirm('你確定要刪除嗎?')) window.event.returnValue = false;"
這樣點擊刪除後，就會自動跳出"你確定要刪除嗎?"的視窗了，防止誤按。
按下確定後，就可以刪除資料了，並且自動重新整理頁面將資料從GridView中消失了。
]]>參考留言板範例:嘉義縣公共汽車管理處留言板
新增回應留言板的內容進資料庫
現在到Message_Reply.aspx連點確定回應Button兩下，會跳到aspx.cs頁面。
現在要讓回應的資料存進reply的資料表內，程式如下:
//下面if和else if 是當有其中一欄沒有填寫時會跳出的文字提醒,都有填寫才會存進資料庫
if (string.IsNullOrEmpty(Reply_Main.Text) && string.IsNullOrEmpty(Reply_Name.Text))
{
Message.Text = "請填名字跟內容";
}
else if (string.IsNullOrEmpty(Reply_Name.Text))
{
Message.Text = "請填名字";
}
else if (string.IsNullOrEmpty(Reply_Main.Text))
{
Message.Text = "請填內容";
}
else
{
string config = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["message_boardConnectionString"].ConnectionString; //取得config的.ConnectionStrings資料
SqlConnection Connection = new SqlConnection(config); //與資料庫做連接的通道
SqlCommand command = new SqlCommand($"INSERT INTO reply(name,main,messageID) VALUES(@name, @main,@id)", Connection);//下達要執行的SQL指令,將加入存進資料表內
//因為標題本來預設就會顯示文字所以不用新增進回應資料表內
//參數化的資料型態與值
command.Parameters.Add("@name", SqlDbType.NVarChar);
command.Parameters["@name"].Value = Reply_Name.Text;
command.Parameters.Add("@main", SqlDbType.NVarChar);
command.Parameters["@main"].Value = Reply_Main.Text;
command.Parameters.Add("@id", SqlDbType.Int);
command.Parameters["@id"].Value = Convert.ToInt32(Request.QueryString["id"]);//將取得的值轉成int
Connection.Open(); //開啟通道
command.ExecuteNonQuery(); //執行SQL並回傳影響的項目
Connection.Close(); //關閉通道
Response.Redirect("Message_Main.aspx?id=" + Request.QueryString["id"]);//跳轉至回應的留言內容區(用id來抓取)
}
稍微解釋一下前幾篇沒碰到的:
1.QueryString["id"] : Request的一種屬性，可以取得網址上「 main.aspx?id= 」 等於後面的文字，也就是留言的id，在上一篇新增HyperLink時有寫入的連結。
回應留言板的標題自動顯示 : RE:'留言標題'
在Page_Load的程式碼如下:
使用DataRedader將取得的資料顯示出來
if (!IsPostBack)//假如第一次載入
{
string id = Request.QueryString["id"];//取得網址上的內容並存成字串
string config = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["message_boardConnectionString"].ConnectionString;
SqlConnection connection = new SqlConnection(config);
SqlCommand Command =new SqlCommand($"SELECT id, header, name, main, initDate FROM message_board where(id =@id)", connection);
Command.Parameters.Add("@id", SqlDbType.Int);
Command.Parameters["@id"].Value = Convert.ToInt32(Request.QueryString["id"]);//讓網址的id變成參數的值
connection.Open();
SqlDataReader reader = Command.ExecuteReader();//使用DataReader
if (reader.Read())//每讀入一行(這邊只會讀進一行因為SQL下的條件只會取得一筆資料)
{
TextBox1.Text ="RE:"+ reader["header"].ToString();
//將取得留言資料的標題放在標題的Text,前面加上字串"RE"
}
connection.Close();
}
執行看看，恩～留言板id=10的標題有加上'RE'出現在回應標題了。
接著打上資料看有無存進資料庫，確認後確實有存進資料庫了><
顯示全部回應的內容 Repeater
現在要在Message_Main.aspx下方顯示出所有回應這篇留言的回應，因為會一直往下延伸，需要使用Repeater控制項，所以先從工具箱拉出一個Repeater，還有兩個用來接回應留言資料的Label然後命名id，並且使用<ItemTemplate>包住。
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<asp:Label ID="who" runat="server"></asp:Label>
<asp:Label ID ="repmain" runat="server" ></asp:Label>
</ItemTemplate>
</asp:Repeater>
Repeater是ASP.NET的控制項，它會重複抓取資料，簡單來說在Repeater裡面的控制項，會抓取資料並重複顯示。
接下來在Message_Main.aspx.cs 的Page_Load內，寫入要讓Repeater取得資料並顯示出來的程式碼:
SqlConnection rconnection = new SqlConnection(config);
SqlCommand Rcommand =new SqlCommand($"SELECT id, messageID, name, main, initDate FROM reply where(messageID =@id)", rconnection);
Rcommand.Parameters.Add("@id", SqlDbType.NVarChar); //設定參數資料型態
Rcommand.Parameters["@id"].Value =Request.QueryString["id"]; //接id的值變成參數的值
rconnection.Open();
SqlDataReader rereader = Rcommand.ExecuteReader();
Repeater1.DataSource = rereader;//repeater的資料來源是從rereader來
Repeater1.DataBind();//執行繫結
稍微說明一下
1.ItemTemplate: 定義清單內項目的內容和配置。在Repeater樣板是必要的。
2.Repeater.DataSource: 取得或設定提供資料以填入清單的資料來源。
3.Repeater.DataBind(): 用來將 DataSource 屬性所指定的資料來源繫結至 Repeater 控制項。
這樣Repeater算是與資料庫做繫結成功了，不過要取得顯示什麼資料內容，還是需要在Label內下繫結語法:
Text='<%# Bind("name") %>'和 Text='<%# Bind("main") %>'
成功顯示回覆留言在下方了，且就算是多筆也都會出現，這就是Repeater控制項神奇的地方。
首頁表格顯示回覆數量
在回應欄位的ItemTemplate從工具箱拉一個Label。
接下來，要從資料庫找到回應幾筆的數量，要下SQL語法:
"SELECT [id], [header], [name],[initDate] ,(select count(*) from [reply] where messageID=[message_board].id)as 回應 FROM [message_board]"
所以將command下的SQL語法改成上面SQL語法。
然後對回應的Label，下資料繫結Text='<%# Eval("回應") %>'，抓取到回應的資料。
這樣回應欄位就能取得該留言回應的數量了，如下圖。
這樣大致上的留言板功能都完成了，可以留言、回應留言以及顯示留言內容，如果我之後還有想到要新增什麼功能會再更新的。
取得IP位置
在新增留言頁面加上一個標籤用來接IP位置的資料。
取得IP位置副程式如下:
private string getIP()
{
//取得本機名稱
string hostname = Dns.GetHostName();
//取得本機的IpHostEntry類別實體
IPHostEntry ipHostEntry = Dns.GetHostEntry(hostname);
//取得
string ipAddress = "";
foreach (IPAddress ipaddress in ipHostEntry.AddressList)
{
// 只取得IP V4的Address
if (ipaddress.AddressFamily == System.Net.Sockets.AddressFamily.InterNetwork)
{
ipAddress = ipaddress.ToString();
}
}
return ipAddress;
}
耶！30天鐵人賽完成了！感言:
還記得以前大學唸書時，準備期中期末考，就有在看iT邦的文章尋找答案、解除疑惑，但真的從來都沒有想過未來的某一天我竟然也在iT邦幫忙寫文章參加鐵人賽，雖然寫的只是入門系列的文章，但還是很感動，希望可以幫助到其他有需要的人。
真的很感謝火箭隊團隊，洧杰老師及賈斯丁老師的教導及同學們彼此互相學習、努力及加油打氣，還有各位iT邦大神們的不吝指教，尤其是小朱大大給了我很多建議，真的很用心，受益良多，雖然30天完賽了，但我還是會繼續努力學習的。
首頁顯示資料表的資料
在上一篇最後已經完成了新增留言資料到資料庫了，且按下確定留言的下一刻會跳轉到Message_Index.aspx頁面，現在要做的事情，就是將留言的資料表顯示在Message_Index.aspx，而在上篇已經有將GridView1的表格拉出來了並且跟留言資料表做繫結了，所以在Message_Index.aspx.cs的Page_Load要讓資料表資料顯示在上面。
作法如下:
使用DataSet的方式
if (!IsPostBack) //是否第一次載入PageLoad
{
string config =
System.Web.Configuration.WebConfigurationManager.ConnectionStrings["message_boardConnectionString"].ConnectionString; //從config找到資料庫位置
SqlConnection connection = new SqlConnection(config); //與資料庫做連結的大門
SqlCommand command =new SqlCommand(@"SELECT [id], [header], [name],[initDate] FROM [message_board]",connection);//對資料庫下令的SQL語法
SqlDataAdapter dataAdapter = new SqlDataAdapter(command);//取得command資料
DataSet dataset = new DataSet();//創立一個dataset的記憶體資料庫
dataAdapter.Fill(dataset);//將上面抓到的資料存入dataset內
GridView1.DataSource = dataset;//DataSource的資料來源是dataset or datatable
GridView1.DataBind();//資料與欄位合在一起
}
稍微說明一下
1.DataAdapter: 取得SqlCommand內SQL的資料。
2.DataSet: 創立準備存放資料的記憶體資料集。
3.dataAdapter.Fill: 將取得的資料存入記憶體資料集中。
4.DataBind: 將資料與控制項做繫結。
更多DataSet可參考ASP.NET與資料庫的資料存取-DataSet
執行後，資料就有進去GridVeiw1裡了。
創建留言內容的頁面
現在要創立一個新的Web表單，命名:Message_Main.aspx
，是要用來顯示留言的內容的頁面。
並將控制項拉好，如下:
<asp:Button ID="Reply" runat="server" Text="回應文章" />
<br />
<br />
主題:<asp:Label ID="Message_header" runat="server" Text="Label"></asp:Label>
<br />
發表人:<asp:Label ID="Message_Name" runat="server" Text="Label"></asp:Label>
發表時間:<asp:Label ID="Message_Time" runat="server" Text="Label"></asp:Label>
<br />
內容:<asp:Label ID="Main" runat="server" Text="Label"></asp:Label>
<br/>
設定連結到Message_Main.aspx
到Message_Index.aspx對GridView1選編輯樣板，找到主題，會看到之前放好的HyperLink。
將HyperLink編輯，NavigateUrl，自訂程式碼運算式寫上:
"Message_Main.aspx?id="+Eval("id")
就可以點擊連接到Message_Main，且會在網址上抓取點開欄位的id資料(是id不是編號唷！)。
顯示留言的內容在Message_Main
將留言資料庫內的資料顯示在Message_Main上，如下:
使用DateReader讀取資料
if (!IsPostBack)
{
string id = Request.QueryString["id"];
string config = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["message_boardConnectionString"].ConnectionString;
SqlConnection connection = new SqlConnection(config); //與資料庫做連結的大門
SqlCommand Command =new SqlCommand($"SELECT id, header, name, main, initDate FROM message_board where(id =@id)", connection);//SQL語法，使用參數。
Command.Parameters.Add("@id", SqlDbType.NVarChar); //設定參數資料型態
Command.Parameters["@id"].Value = Request["id"]; //賦予參數值
connection.Open();
SqlDataReader reader = Command.ExecuteReader();
if (reader.Read())
{
Message_header.Text = reader["header"].ToString();
Message_Name.Text = reader["name"].ToString();
Message_Time.Text = reader["initDate"].ToString();
Main.Text = reader["main"].ToString();
}
reader.Close();
}
稍微介紹一下
1.Connection : 與資料庫建立起連接的通道。
2.Command: 下達SQL語法指令。
3.ExecuteReader: 通知資料庫執行Command所下達的SQL語法指令，並回傳資料。
4.Read(): 使DataReader開始一行一行的讀取資料列。
DataReader可參考ASP.NET 讀取資料庫的資料常常用到的DataReader
創立回覆留言頁面
創立一個叫Message_Reply.aspx，是用來回應留言的頁面。
並拉一拉控制項跟html:
<h1>回應留言</h1>
標題<asp:TextBox ID="Reply_Header" runat="server" ></asp:TextBox>
<p>
暱稱<asp:TextBox ID="Reply_Name" runat="server" ></asp:TextBox>
</p>
內容<asp:TextBox ID="Reply_Main" runat="server" Height="427px" TextMode="MultiLine" Width="928px"></asp:TextBox>
<br />
<asp:Button ID="pass" runat="server" Text="確定回應"/>
<input id="Reset1" type="reset" value="reset" /><asp:Label ID="Message" runat="server" ForeColor="red" Text=""></asp:Label>
然後在Message_Main.aspx點擊回應留言按紐會自動跳到，Message_Main.aspx.cs
Click動作裡面打上:
Response.Redirect("Message_Reply.aspx?id="+Request.QueryString["id"];
Request.QueryString["id"]可以取得網址上的id，以下圖來說也就是10。
這樣就可以跳轉過去Message_Reply.aspx了。
好吧！今天就先到這裡，明天就會完成整個留言板了。
]]>製作留言板分成三篇，這邊附上其他篇連結:
留言板中篇點這
留言板下篇點這
創立資料庫
首先要先觀察需要存到資料庫的資料有哪些？
從嘉義縣公共汽車管理處留言板可以發現，會存進資料庫的資料就只有留言的內容及回覆的內容，所以先創立留言板資料庫及兩個資料表，一個存放留言另一個則存放回覆內容。
資料庫名稱:message_board
留言板的資料表:message_board(下圖下)
回覆留言資料表:reply(下圖上)
並把兩個資料表主索引的線給拉好，可參考主索引鍵與外部索引鍵
建立Web form專案
建立ASP.NET新專案。
接下來先加入兩個Web表單，乘客留言板首頁(Message_Index)和新增留言(Message_Add)的頁面。
加入連接字串
先到Message_Index的設計模式，工具箱拉一個Button並將Text改成'我要留言'和一個GridView及SqlDataSource(如下程式碼及圖)。
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="我要留言" />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource></form>
接下來對SqlDataSource設定資料來源，新增連接字串，新增方法可參考我的上一篇或ASP.NET與資料庫的聯繫，選擇message_board資料表並全選全部欄位按確定。
最後確認Web.config有沒有出現連接字串。
編輯資料行
因為首頁顯示的留言資訊有編號跟回應且沒有顯示id跟留言內容，所以再GridView與SqlDataSource資料繫結後需要新增及刪除幾個欄位。
選擇資料來源後，對GridView右上角的箭頭按編輯資料行，將不要的欄位打「X」。
並且加入兩個TemplateField，並將欄位名稱改名(選取欄位在HeaderText做更改)，使用上下箭頭來排列欄位位置，按下確定就完成了。
接下來在編號欄位裡面使用行號索引:Container.DataItemIndex，讓編號可以依序遞增，索引從0開始所以必須要+1，如下:
<asp:TemplateField HeaderText="編號">
<ItemTemplate>
<%# Container.DataItemIndex + 1%>
</ItemTemplate>
</asp:TemplateField>
TemplateField放個HyperLink
因為在留言板首頁，主題是有個超連結可以點擊的，所以必須將主題欄位放置一個HyperLink工具。
先對GridView1右上角箭頭點開選編輯資料行，將主題轉換為TemplateField(點擊主題按右邊藍色的「將這個欄位轉換為TemplateField」)，轉換成TemplateField就可以讓我們放置控制物件。
接下來按確定後，再到編輯樣板的頁面(一樣GridView1右上角箭頭點開)，在下拉式選單中找到剛剛已經設定好的主題欄位，並將原本預設的Label刪掉並切放一個HyperLink，可直接從工具拖曳過去。
接著對GridView1結束樣板編輯，因為主題點開的那一個Web還沒有創立，所以之後再做連結。
然後再來是是將GridView1的選擇資料來源從SqlDataSource1改成無，跳出來的視窗記得按否。接著再把SqlDataSource1改刪除吧XD
目前Message_Index.aspx的畫面應該會是如下:
新增留言頁面製作
現在要做的是這頁的功能，也就是新增留言。
接下來對著我要留言的Button點擊兩下，最自動跳到Message_Index.aspx.cs
直接貼上跳轉的方法，讓點擊Button後會自動跳到Message_Add的頁面。
Response.Redirect("Message_Add.aspx");
Response是由Server回傳給Browser的物件，而Redirect()是一種跳轉到其他頁面的方法。可參考[ASP.NET] 網頁常用物件-初淺談Response物件和[ASP.NET] 網頁常用物件-網頁跳轉的比較及實際範例說明。
接下來到Message_Add.aspx建立TextBox，要有標題、暱稱、內容三個以及一個送出的Button及一個重新填寫的input(可從工具箱->HTML->Input(Reset)拖曳，這是預設的重新填寫)，間單的用排一下版型。
然後將內容的TextBox右鍵屬性，textMode選MultLine就可以將TextBox向下拉XD，然後可以順便設定寬與高。
最後畫面將如下:
標題<asp:TextBox ID="Message_Header" runat="server" ></asp:TextBox>
<p>
暱稱<asp:TextBox ID="Message_Name" runat="server"></asp:TextBox>
</p>
內容 <asp:TextBox ID="Message_Main" runat="server" Height="477px" TextMode="MultiLine" Width="596px" ></asp:TextBox>
<br />
<br />
<br />
<p>
<asp:Button ID="Confirm" runat="server" Text="確定留言" />
<input id="Reset1" type="reset" value="重新填寫" /></p>
將留言的資料傳入資料庫
將基本的工具拉好後，接著快速點擊「確定留言」的Button到Message_Add.aspx.cs頁面。
並將留言的資料傳入資料庫的程式碼打上，程式碼如下:
//取得config連接字串資訊
string getconfig = System.Web.Configuration.WebConfigurationManager
.ConnectionStrings["message_boardConnectionString"].ConnectionString;
//建立與資料庫建立起連接的通道，以getconfig內的連接字串連接所對應的資料庫
SqlConnection Connection = new SqlConnection(getconfig);
//要對SQL Server下達的SQL指令並且參數化
SqlCommand command = new SqlCommand($"INSERT INTO message_board( header,name, main) VALUES(@header, @name, @main)", Connection);
//賦予參數資料型態與值
command.Parameters.Add("@header", SqlDbType.NVarChar);//值必須是NVarChar的資料型態
command.Parameters["@header"].Value = Message_Header.Text;//給予的值是從Message_Header的Text來的
command.Parameters.Add("@name", SqlDbType.NVarChar);
command.Parameters["@name"].Value = Message_Name.Text;//給予的值是從Message_Name的Text來的
command.Parameters.Add("@main", SqlDbType.NVarChar);
command.Parameters["@main"].Value = Message_Main.Text;//給予的值是從Message_Main的Text來的
Connection.Open();//開啟通道
command.ExecuteNonQuery();//執行command的SQL語法，回傳受影響的資料數目
Connection.Close();//關閉通道
Response.Redirect("Message_Index.aspx");//確認留言完後要跳轉回首頁Message_Index.aspx
稍微介紹一下
1.System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnectionString的name"].ConnectionString: 取得Web.config與資料庫連接的連接字串資訊。
2.SqlConnection: 建立與資料庫建立起連接的通道。
3.SqlCommand: 對SQL Server下達的SQL指令。
4.Parameters :防止SQL Injection，有要對資料庫執行SQL語法最好要用參數動作。
5.ExecuteNonQuery(): 執行commandSQL語法的方法，並會回傳有受影響的數量。
6.Redirect: 跳轉頁面。
7.INSERT INTO: SQL的新增資料語法，可參考SQL-INSERT 新增資料的方法
留言不能空白
留言時當然不能有任何的TextBox是空白的，所以在HTML5的TextBox有很多屬性可以使用，可將TextBox設定成必須填寫，且還可設定彈沒填寫時會跳出來的提醒文字。請將以下程式碼貼在TextBox內:
<asp:TextBox ID="Message_Header" runat="server" required="" aria-required="true" oninput="setCustomValidity('');" oninvalid="setCustomValidity('記得填寫標題ㄛ')" ></asp:TextBox>
稍微介紹一下:
1.設定為必填的屬性是:required="" 和aria-required="true"
2.彈挑出內容的文字是可以客製化的，需使用:oninvalid="setCustomValidity('文字內容')"
3.清除彈跳文字的紀錄:oninput="setCustomValidity('');" 若沒使用這行，假如有跳出警告文字，將清除不掉會一直出現XD
可參考這篇
所以當標題沒填寫時就會跳出通知，如下圖。
而按執行測試一下留言是否有存入資料庫，填入資料，按下確定留言後，恩～看起來存入資料庫成功了><
下一篇將繼續完成其它留言板功能，應該會是首頁顯示留言版以及主題內容，感謝閱讀。
]]>若有任何問題或建議，請務必要糾正指教，感謝><
使用ASP.NET把文字檔案的資料存進資料庫
這邊有一份2019年高雄得獎的里長的名...]]>
使用ASP.NET把文字檔案的資料存進資料庫
這邊有一份2019年高雄得獎的里長的名單表格是csv檔，部分內容如下:
其實下面還有很多里長資訊就不全部截圖了><
創立資料庫及資料表
看過檔案內容後，先到SQL Server創立一個里長得獎名單的資料庫，並創好資料表的欄位，要用來存資料的。
資料庫名稱:prizeLi
資料表名稱:Li
欄位如下:
建立Web Form
創好資料庫及資料表後，接下來就是開啟ASP.NET並且開啟一個Web Form專案，專案名稱就叫做LiPrize。
如何建立可以參考我的團隊夥伴CynthiaChuang的這篇文章，或者是碼屋( MARK WU ) 的ASP.NET系列文章。
開啟Web表單
建立好Web Form後，看到方案總管，對方案按右鍵→加入→Web表單，名字就用預設的WebForm1吧XDD
建立後可以按看看執行，執行結果會一個空白的頁面XD
到時候完成後，一進網頁就會顯示得獎名單的表格了。
幫Web拉一個表格和精靈與按鈕
可以到工具箱裡的資料，直接用游標把GridView(表格)，及SqlDataSource(用來與資料庫做連接用的控制項)，還有到標準拉一個Button按鈕，記得要拖曳到form內唷！
怎麼用游標拖曳工具到網頁，可以參考 你 說 什 麼？！網頁設計竟然可以用拉的 ( ASP.NET 伺服器控制項)
如下:
接下來按到設計模式來看看感覺，恩～還ㄅ錯>< 不用自己打HTMLㄏㄏ
Button的Text可先改成"按我"。
使用SqlDataSourse控制項與SQL Server連接
現在要使用SqlDataSourse1與資料庫做連接在Web.config產生連線字串。
怎麼做連接？可以參考我之前寫的文章ASP.NET與資料庫的聯繫。
對SqlDataSourse1角落的箭頭按一下，設定資料來源，然後新增連接。
在加入連接的頁面寫好資料庫資訊選好資料庫prizeLi的，接下來就確定ㄅ。伺服器名稱就是SQL Server的伺服器名稱，可以從登入那裡複製。 使用者驗證可以看這篇文章創立 SQL Server驗證使用者帳戶。
然後按下一步，是否將連接字串存到應用程式主態檔(就是自動將連接字串加到Web.config內)，打勾勾後，再下一步，然後先取得所有欄位ㄅ，所以直接勾「 * 」接下來按下一步，可以按看看測試查詢看有沒有取得資料庫，確認後按完成就可以了。
然後可以在方案總管點開Web.config確信一下，connectionStrings有沒有連接字串。
<connectionStrings>
<add name="prizeLiConnectionString" connectionString="Data Source=WIN-A7UR0ON72LS\SQLEXPRESS;Initial Catalog=prizeLi;User ID=帳號;Password=密碼"
providerName="System.Data.SqlClient" />
</connectionStrings>
接下來對GridView1的右上角箭頭按一下選擇資料來源，選擇SqlDataSourse1，就會看到GridView1自動加入了prizeLi的資料表的欄位了，代表已經與資料庫做連接了，接下來一樣對GridView1右上角箭頭的編輯資料行將id及initDate的資料行做取消(選到欄位案紅色X就可以刪除了)，按下確定後兩個欄位再GridView1都不見了。
接下來對GridView1的右上角箭頭按一下選擇資料來源，選則「無」，然後按下「否」，不要清除已經有的欄位。
然後就可以把SqlDataSourse1控制項給砍掉了QQ(掰~）。
設計按鈕按下後將檔案資料存入資料庫
接下來在設計模式對Button點擊兩下，會自動跳到aspx.cs的頁面，就開始設計點擊按鈕後的動作。
現在要寫點擊按鈕後會將csv檔的資料存入prizeLi的Li資料表內。
C#程式碼如下:
string file1 = System.IO.File.ReadAllText("C:\\儲存檔案的路徑\\檔名.csv", Encoding.Default).Trim(); //取得檔案位置將資料存成字串。
string[] f_array = file1.Split('\n');//將換行做字串切割存到陣列內
string s_data = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["prizeLiConnectionString"].ConnectionString;//從config找到資料庫位置[]內放的是Web.config的connectionStrings的name。
SqlConnection connection=new SqlConnection(s_data);//建立與資料庫建立起連接的通道，以s_data內的連接字串連接所對應的資料庫。
string sql = ""; //先創一個等下用來存SQL語法的空字串
connection.Open();//開啟通道
foreach (var a in f_array)//使用foreach將f_array陣列的每一個陣列都跑一遍。
{
string[] f_array2 = a.Split(',');//將每一次跑的陣列都再以逗號進行一次分割。
sql = $"INSERT INTO [Li](年度, 得獎類別, 區別, 里別, 姓名)VALUES (@year, @prize, @Chitype, @Litype, @name)";//存入插入多筆資料的SQL語法;將f_array2陣列的資料存進Li資料表欄位中。VALUES先使用@參數來取代直接給值，以防SQL Injection 程式碼。
SqlCommand command = new SqlCommand(sql, connection);//要對SQL Server下什麼SQL指令。
command.Parameters.Add("@year", SqlDbType.NVarChar);//給@參數加入資料型態
command.Parameters["@year"].Value = f_array2[0];//@參數的值是f_array2[0]
command.Parameters.Add("@prize", SqlDbType.NVarChar);
command.Parameters["@prize"].Value = f_array2[1];
command.Parameters.Add("@Chitype", SqlDbType.NVarChar);
command.Parameters["@Chitype"].Value = f_array2[2];
command.Parameters.Add("@Litype", SqlDbType.NVarChar);
command.Parameters["@Litype"].Value = f_array2[3];
command.Parameters.Add("@name", SqlDbType.NVarChar);
command.Parameters["@name"].Value = f_array2[4];
command.ExecuteNonQuery();//執行command的SQL語法，回傳受影響的資料數目。
}
connection.Close();//關閉與資料庫連線的通道
veiw();//執行副程式
稍微說明一下程式碼
1.File:開啟單一檔案的靜態方法。
2.ReadAllText:開啟文字檔，讀取所有行，並關閉;()內放路徑。
3.split字串切割:()內放的是要以什麼字串也可以放脫逸字元來做切割。可看這篇最常用的陣列!處理字串的一百種方法~(組合、切割、取代、擷取、尋找、修改)。
4.ConnectionStrings: 取得連接字串config內的資訊。
5.Connection : 與資料庫建立起連接的通道。
6.Command: 下達SQL語法指令。要對資料庫下的SQL語法，必須是要一個物件才能執行，不能直接用SQL語法，所以才要把SQL丟進sqlcommand 這個物件
7.Open: 開啟與資料庫連接的通道。
8.ExecuteNonQuery: 通知資料庫執行Command所下達的SQL語法指令，並回傳受影響的資料數目。
9.foreach:通常配合陣列使用，指的是執行陣列的每一個物件，陣列有10個就跑10次，執行次數=陣列長度。
介紹可以看這篇foreach介紹。
10.INSERT INTO:SQL新增資料的語法，可看這篇SQL-INSERT 新增資料的方法。
11.Parameters:為了防止SQL Injection 程式碼攻擊，所以寫入SQL時，要使用參數「@參數名稱」來代替直接給的值，而給予參數的資料型態要使用Add。
在讀取文字資料還有另一種方法StreamReader
如下:
String content;
StreamReader sr = new StreamReader("C:\\Users\\蔡京叡\\source\\repos\\sqlserver1\\sqlserver1\\108.csv", Encoding.Default); //使用StreamReader讀取文字檔
content = sr.ReadLine(); //對StreamReader做ReadLine()一行一行讀取，並存入字串變數內。
string s_data = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["prizeLiConnectionString"].ConnectionString; //從config找到資料庫位置[]內放的是Web.config的connectionStrings的name。
SqlConnection connection = new SqlConnection(s_data);//建立與資料庫建立起連接的通道，以s_data內的連接字串連接所對應的資料庫。
connection.Open();//開啟通道
while (content != null) //ReadLine()會一行一行讀取，值到讀到null時跳出迴圈
{
content = sr.ReadLine(); //StreamReader讀下一行
if (!string.IsNullOrEmpty(content))//當字串不是空值或是Null時
{
string[] f_array2 = content.Split(',');//將陣列字串分割
sql = $"INSERT INTO [Li](年度, 得獎類別, 區別, 里別, 姓名)VALUES (@year,@prize,@Chitype, @Litype, @name)";//存入插入多筆資料的SQL語法;將f_array2陣列的資料存進Li資料表欄位中。
SqlCommand command = new SqlCommand(sql, connection);//要對SQL Server下什麼SQL指令。
command.Parameters.Add("@year", SqlDbType.NVarChar);
command.Parameters["@year"].Value = f_array2[0];
command.Parameters.Add("@prize", SqlDbType.NVarChar);
command.Parameters["@prize"].Value = f_array2[1];
command.Parameters.Add("@Chitype", SqlDbType.NVarChar);
command.Parameters["@Chitype"].Value = f_array2[2];
command.Parameters.Add("@Litype", SqlDbType.NVarChar);
command.Parameters["@Litype"].Value = f_array2[3];
command.Parameters.Add("@name", SqlDbType.NVarChar);
command.Parameters["@name"].Value = f_array2[4];
command.ExecuteNonQuery(); //執行command的SQL語法，回傳受影響的資料數目。
}
}
connection.Close();//關閉與資料庫連線
sr.Close();//關閉StreamReader
veiw();//執行副程式
創造一個顯示整個表格GridView1的副程式
程式碼如下:
private void veiw()//副程式名稱為:veiw()
{
string s_data = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["prizeLiConnectionString"].ConnectionString;//從config找到資料庫位置[]內放的是Web.config的connectionStrings的name。
SqlConnection connection = new SqlConnection(s_data);//建立與資料庫建立起連接的通道
SqlCommand command = new SqlCommand(@"SELECT 年度,得獎類別,區別,里別,姓名 FROM [Li]", connection);//要對SQL Server下什麼SQL指令。
connection.Open();
SqlDataReader goDataReader = command.ExecuteReader();//new一個DataReader接取ExecuteReader所執行SQL語法回傳的資料。
GridView1.DataSource = goDataReader;//告訴GridView1的資料來源是從goDataReader
GridView1.DataBind();//將資料來源與GridView1做繫結
connection.Close();
}
說明:
1.SqlDataReader: 一種資料流，以「順向」且「唯讀」的查看方式來讀取裡面的資料。可參考這篇ASP.NET 讀取資料庫的資料常常用到的DataReader
2.ExecuteReader: 通知資料庫執行Command所下達的SQL語法指令，並回傳資料。可以通過這個物件來查詢結果，它提供了游水式的執行方式，即從結果中讀取一列之後，指向到下一列。
3.DataBind(): 將資料來源繫結至GridView控制項。
執行結果
這樣就可以執行看看結果了。
按下「按我」就傳上資料庫並顯示了。
資料庫裡面也有資料了><
這樣就完成使用ASP.NET從檔案匯入資料庫了。
]]>感謝閱讀，若有任何問題也務必要糾正指教><謝謝
在SQL中，除了可以搜尋之外，還可以使用數學的運算子來做加「+」、減「-」、乘「 * 」、除「/」等。
這邊以MS SQL來示範一下加減乘除:...]]>
在SQL中，除了可以搜尋之外，還可以使用數學的運算子來做加「+」、減「-」、乘「 * 」、除「/」等。
這邊以MS SQL來示範一下加減乘除:
select 1+1,9-4,2*3,10/2;
顯示結果依序對應加減乘除的結果。
以Orderdetial資料表為範例:
現在要將amount欄位的資料與price欄位的資料做相乘計算出total，SQL如下:
select amount,price,amount*price as total from Orderdetial ;
這樣就能計算出每一列的amount乘price的結果了，並且使用關鍵字「as」取名為total，結果如下:
其它數學運算子
餘數:
SQL中計算餘數可以使用: 「 % 」
範例如下:
select 10 % 4 ;
結果如下:
當然也可以使用欄位%欄位來做運算。
其它運算子(+=,-=,/= 等...)可參考MS SQL官網。
SQL的數學函數
四捨五入
使用函數: ROUND ( numeric_expression ,length )
numeric_expression是要四捨五入的數字。
lenth是指要結果是小數點下幾位。
例如:
select ROUND(1345.123456,2)
結果:
1345.120000
平方
使用函數: SQUARE(float_expression)
就是將想要平方的數字放入()內。
例如:
select SQUARE(6);
結果:
6
開根號
使用函數: SQRT( float_expression )
開根號就是平方的相反XD
使用方式: 將想開根號的數字寫入()內。
例如:
select SQRT(36)
結果:
6
還有很多數學函示及使用方法可以參考MS SQL所提供的網站。
]]>顧名思義就是刪除的意思，SQL中就是刪除資料。
使用範例:
DELETE FROM [資料表名稱]
WHERE 條...]]>
DELETE
顧名思義就是刪除的意思，SQL中就是刪除資料。
使用範例:
DELETE FROM [資料表名稱]
WHERE 條件
刪除資料的關鍵字就是DELETE FROM，後面加上要刪除的資料表名稱，不過注意要記得下WHERE的條件，如果沒有下的話，會將整個資料表刪除的。
使用範例:
這次直接使用精靈產生SQL來刪除Customers資料表的name='lg'的資料。
選好資料庫，在新增查詢頁面右鍵選「在編輯器中設計查詢」，然後加入要刪除的資料表後，右鍵「變更類型」選擇刪除。
接著資料行選擇name， 篩選打上'lg'，然後點其他空白處，下方就會自懂產生SQL刪除語法了。
DELETE FROM Customers
WHERE (name = N'lg')
確認沒選錯後，按下「確定」，在按下「執行」。
確認Customers資料表，name='lg'的那筆資料，真的已經被刪除了XD
使用精靈工具產生SQL語法真的很方便呢><
最後還是要提醒一下:
記得刪除資料要記得加上WHERE條件，不然就會刪到整筆資料表了，真的刪除的話就只能靠第三方救援程式來挽救了><像我有一位同學昨天就忘了下WHERE條件，不小心就刪了一個資料表XD所以千萬要注意！記得加上WHERE條件。
]]>
捲毛蔡
2019-09-26 10:01:17
-
[iT鐵人賽Day24]SQL-UPDATE 修改資料的方法
https://ithelp.ithome.com.tw/articles/10220040?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10220040?sc=rss.iron
UPDATE
顧名思義就是更新的意思，在SQL中就是更新已經在資料庫的資料。
UPDATE [資料表名稱]
SET [要更新的欄位名稱...]]>
UPDATE
顧名思義就是更新的意思，在SQL中就是更新已經在資料庫的資料。
UPDATE [資料表名稱]
SET [要更新的欄位名稱1] = '更新的內容'(字串才要加'), [要更新的欄位名稱2] ='更新的內容',...
WHERE 條件
要更新資料，需要使用update的關鍵字，還有set這個關鍵字。
UPDATE後面放的是要更新的資料表;SET後面是放入要更新的欄位; =等於後面寫入需要更新的值，若是字串要加單引號;數值的話就不用，要更新其他欄位記得使用逗號「,」做區隔。
加上WHERE條件
注意要加上where條件，假如沒有加上條件的話，將會把set的欄位內每一筆資料都做修改，會很悲劇的，所以要注意加上WHERE條件，除非真的是要修改該欄位每一筆的資料。
範例
Customers資料表
修改Customers資料表中id=8的欄位，將canon更改成fujifilm，Address欄位資料更新成Japan。
UPDATE Customers
SET address = N'Japan', name = N'fujifilm'
WHERE id = 8
UPDATE Customers資料表，然後要setaddress欄位跟name的欄位，打完資料後，記得下WHERE條件，讓SQL確切知道要更新哪一列的資料。更新後結果如下:
id=8的欄位成功被更新了><
使用SQL精靈取得更新的SQL
選擇資料庫後，按下新增查詢，在新增查詢空白處按下右鍵選在編輯器中設計查詢。
接下來選擇要更新的資料表，然後在查詢設計工具的空白處右鍵，變更類型選更新。
勾選要更新的欄位，在新值欄位內打上想更新的資料。若要下條件，在篩選欄位打上要下的條件，例如 id = 8，打完後隨便點一下空白處，下面就會出現SQL了，也就是更新的SQL。
按下確定後，在按執行就可以順利更新囉!
使用精靈工具取得SQL真的超級方便der ><
最後提醒一下:
記得要下WHERE條件唷，不然會像我一位同事一樣，忘記打WHERE然後資料表的所有資料都被更新了XD，SQL Server內建是不能返回拯救資料表的唷QQ
]]>
捲毛蔡
2019-09-25 00:22:12
-
[iT鐵人賽Day23]SQL-INSERT 新增資料的方法
https://ithelp.ithome.com.tw/articles/10220002?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10220002?sc=rss.iron
INSERT 新增
將資料新增至資料庫中，在SQL語法中新增資料除了使用insert還需加上into，所以會是insert into ，然後後面通常還會加一個values，所以...]]>
INSERT 新增
將資料新增至資料庫中，在SQL語法中新增資料除了使用insert還需加上into，所以會是insert into ，然後後面通常還會加一個values，所以當要新增資料時基本上會insert into values 的，不過有種情形會不需要加上values的，下面會說明。
使用方式
在VALUES內，若是要新增字串則需將內容用單引號'包住，數值則不用，如下:
INSERT INTO 資料表名稱
(欄位1, 欄位2, 欄位3,...)
VALUES (新增至欄位1的數值資料, N'新增進欄位2的字串資料', N'新增進欄位3的字串資料',...)
範例
想要在Customers資料表中加入新的資料。
INSERT INTO Customers
(name, tel, address)
VALUES (N'olympus', 333, 'Japan')
資料前面之所以有N是因為Unicode的關係(在這篇有做nvarchar的介紹)，當然也可以不打N，而因為在創立資料表時就有設定會自動新增id和initDate，所以只需要手動加入name, tel, address欄位，執行後結果真的有加入olympus的資料進客戶資料表，而系統自動新增了id=6。
SQL Server使用精靈新增資料
首先選好要新增的資料庫，然後再新增查詢空白處，右鍵選編輯器中新增查詢。
選好要新增的資料表後，在查詢設計工具的視窗空白處右鍵變更類型然後選擇插入值，插入值就是新增資料的意思。
接下來就勾選想新增的欄位，並在下方新值中打上想要新增的資料內容，在正下方就會自動出現新增資料的SQL語法了。
接下來'確定'後再按'執行'就可以加入資料了。
使用精靈取得SQL語法真的超方便der>///<
使用子查詢的方式新增資料
新增資料除了加入新的資料外，也可以新增現有的資料，也就是其他資料表(或本身的資料表)若剛好有需要的資料，也可以從該資料表中取得，這種時候就不需要VALUES了。
就以Customers資料表跟Products資料表為範例:
Customers資料表
除了賣零食也賣起了canon的Products資料表 XDD
現在要新增資料進Customers資料表內，name是canon，就是那麼剛好Products資料表有canon這筆資料，tel剛好是30000，雖然沒有地址資料但至少可以新增兩筆。所以SQL語法如下:
INSERT INTO Customers
(name, tel)
select name,price from Products where id=6
上述使用一個select子查詢，找出來自Products資料表內的name和price的資料(注意要對應()內的順序)，條件是id=6的資料(也就是Products的canon那列資料行)。找出後加入CUstomers資料表的name和tel也就是()內的資料。結果如下:
id=8有一筆canon的客戶資料了，雖然沒有address的資料，但name和tel都有從產品資料表加入資料了。(id=8是因為我有刪除一筆id=7的資料><)
這就是使用子查詢的方式將資料表的資料加入需要加入的資料表內的方法，好像有點饒舌XD
]]>
捲毛蔡
2019-09-24 11:36:18
-
[iT鐵人賽Day22]可以做好多事情的SQL子查詢
https://ithelp.ithome.com.tw/articles/10219497?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10219497?sc=rss.iron
SQL子查詢
進行多資料表查詢，除了使用join外，也可以使用SQL 子查詢(Subquery)，子查詢就是在一個Select指令內再放入一個Select查詢指令進行查詢，通常是位在Select的Where子句，可以透過子查詢取得查詢條件。
子查詢須知
每一個子查詢都是一個Select指令，必須用小括弧包起來，能夠針對不同資料表進行查詢。
如果SQL查詢指令內有子查詢，首先處理的是子查詢條件，然後再依子查詢取得的條件值來處理主查詢，然後就去得最後的查詢結果。
子查詢基本語法:
SELECT 欄位名稱1,欄位名稱2,...,欄位名稱n
FROM 資料表名稱1
WHERE 欄位名稱 =
(SELECT 欄位名稱 FROM 資料表名稱2 WHERE 條件)
1.子查詢要在括號()中。
2.通常子查詢SELECT只會取得單一欄位的值，以便主查詢的欄位進行比較運算。
3.如需排序，子查詢不能使用ORDER BY，只能使用GROUP BY 子句。
4.如果子查詢可以取得多筆資料，在主查詢需使用IN邏輯運算子。
在WHERE使用子查詢主要目的是取得其他資料表紀錄的欄位值來建立WHERE句的條件運算式。
範例練習
範例將以下面四個資料表為例。
Customers 客戶資料表
Products 產品資料表
orders 訂單資料表
Orderdetial 訂單資訊資料表
SQL範例1:
在orders資料表查出CustomerID是apple的訂單資訊有幾筆。
select count( * ) as 訂單數
from orders
where customerID = (select id from Customers where name = 'apple')
上述使用兩個select，分別查詢orders與Customers資料表，在客戶資料表取得apple的ID後，再從orders資料表計算。結果如下:
SQL範例2:
查出Products資料表，price價格大於平均價格的產品。
select *,(select avg(price) from Products )as 平均值 from Products where price > (select avg(price) from Products)
子查詢不只是只能放在where後，也可以放在select後面的，當欄位輸出的。
上述SQL的三個select分別查詢相同的資料表，其中一個在select後的子查詢，則為創立一個顯示在資料表不存在的平均值欄位，而在where的子查詢查詢出price平均值後與主查詢where做比較。結果如下:
SQL範例3 EXISTS指令:
EXISTS指令:可以判斷子查詢的結果有沒有回傳資料，若有則會執行查詢中的結果。
從Customers資料表，找出orders和Orderdetail資料表有買ProductID為1的產品的客戶資料。
select * from Customers where exists(select customerID from orders where customerID=Customers.id and (select count(*) from Orderdetial where orderID=orders.id and productID=1 )>0)
上述SQL使用三層巢狀查詢，首先要先將有哪些客戶有訂單編號的資料表找出來(select * from Customers where exists(select customerID from orders where customerID=Customers.id) ，接下來在使用and條件從Orderdetial資料表找出orderID要跟orders的id一樣且 productID要=1的大於0的數量(and (select count(*) from Orderdetial where orderID=orders.id and productID=1 )>0))。
這樣就可以從Customers資料表中查出Orderdetail資料表有買ProductID為1的產品的客戶資料。結果如下:
SQL範例4:
使用Orderdetail資料表查出有購買糖果與牛奶糖的訂單資訊。
select * from Orderdetial where exists(select * from Products where (name='糖果' or name='牛奶糖')and id = Orderdetial.productID )
結果如下:
SQL範例5 IN指令:
IN指令可以檢查是否存在子查詢的資料紀錄中。
從Products與Orderdetail資料表找出訂單編號2沒有購買的products。
select * from Products where id not in (select productID from Orderdetial where orderID=2)
從產品資料表中where條件從id中not in找出不在Orderdetial資料表中orderID=2的productID。結果如下:
SQL範例6 in的三層巢狀查詢:
從Products、Orderdetial、orders找出order id =1有買了哪些產品。
select * from Products where id in (select productID from Orderdetial where orderID in (select id from orders where id ='1'))
顯示產品的資料表紀錄，在第二層子查詢中找出產品編號，在第三層子查詢找出訂單編號=1的資料，訂單編號1所購買的產品為糖果、餅乾、巧克力糖。結果如下:
]]>
捲毛蔡
2019-09-23 15:17:18
-
[iT鐵人賽Day21]SQL語法-in與not in
https://ithelp.ithome.com.tw/articles/10219093?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10219093?sc=rss.iron
in與not in
in就是找出在in元素內所符合的資料;而not in就是相反過來，找出不符合在in元素內的資料。
用法:
selec...]]>
in與not in
in就是找出在in元素內所符合的資料;而not in就是相反過來，找出不符合在in元素內的資料。
用法:
select [欄位名] from [資料表] where [欄位名] in(資料名1,資料名2,...)
繼續以orderdetail資料表為範例
找出orderID是1且productID是1和3的資料行，SQL:
SELECT *
FROM Orderdetial
where orderID =1 and productID in (1,3)
這樣就可以找出orderID =1且productID內資料要事1&3，顯示結果:
而改成not in就是，orderID =1的資料除了productID有1&3其他資料行都顯示，SQL:
SELECT *
FROM Orderdetial
where orderID =1 and productID not in (1,3)
顯示結果:
]]>
捲毛蔡
2019-09-22 16:40:35
-
[iT鐵人賽Day20]SQL語法-GROUP BY 資料分組
https://ithelp.ithome.com.tw/articles/10218537?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10218537?sc=rss.iron
GROUP BY
SQL語法中的Group by 意思就是說，欄位內的資料若有不只一筆名稱相同的資料的話，就會把它們作為群組。
然後通過使用GROUP BY,可以讓...]]>
GROUP BY
SQL語法中的Group by 意思就是說，欄位內的資料若有不只一筆名稱相同的資料的話，就會把它們作為群組。
然後通過使用GROUP BY,可以讓SUM和COUNT這些函式對屬於一組的資料起作用。
範例:
現在有一個Orderdetail資料表,裡面記錄了每一筆訂單所購買了些什麼產品編號個多少錢這樣。
現在要使用Group by並計算每一筆訂單的總金額是多少錢，SQL如下:
select orderID as 訂單編號 , sum(total) as 總金額 from Orderdetial group by orderID
對orderID欄位group by，將相同名稱的orderID資料合再一起，並且計算出每筆orderID的total加總。顯示結果:
也可以下其他的聚合函數AVG、MAX等，例如要找出每筆訂單最貴的金額是多少XD
SQL如下:
SELECT orderID AS 訂單編號, max(total) AS 最貴的訂單價格
FROM Orderdetial
GROUP BY orderID
顯示結果:
]]>
捲毛蔡
2019-09-21 14:55:55
-
[iT鐵人賽Day19]SQL語法-常用的聚合函數 COUNT()、AVG() 、MAX() 、MIN()、 SUM()
https://ithelp.ithome.com.tw/articles/10218055?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10218055?sc=rss.iron
聚合函數
可以執行所選取的欄位值的筆數、平均、統計等，以便資料分析。
常用的聚合函數如下:
COUNT()
SQL語法可使用COUNT()函數來計算指定欄位的數量。
()內可以使用「 * 」來統計資料表所有的資料有幾筆數量，或放入指定的欄位名稱來統計該欄位不是null的資料數量。
SQL範例:
Customers資料表
查詢Customers有幾筆資料:
select count( * ) as 總共有幾筆資料 from Customers
顯示結果有5筆，就算lg那一列有null，使用 * 同列其中一欄位有資料就會算是有資料的。
不過要查詢tel有幾筆資料數量:
select count(tel) as 總共有幾筆資料 from Customers
顯示結果只會有4筆，因為lg那一列為null值。
而現在要查詢地址在日本的客戶有幾個:
select count( * ) as 總共有幾筆資料 from Customers where address='Japan'
因為只有一筆地址是在Japan，所以結果會是一筆。
AVG()
AVG()可以計算指定欄位資料的平均值，()內欄位名稱可計算該欄位平均值。
SQL範例:
Products資料表
計算Products 的價格平均
select avg(price) as 價格平均 from Products
顯示結果:
計算有「糖」字串的價格平均值及數量:
select avg(price) as 價格平均,count(name)as 總量 from Products where name like '%糖%'
顯示結果:
MAX()
MAX()可以計算()內欄位資料的最大值。
SQL範例:
一樣Products資料表，要算出Products資料表內價格最大值是幾元。
select max(price) as 最大值 from Products
顯示結果:
但假如要有其他欄位顯示明顯的可以知道哪一筆是最大值，可以這樣用。
select top 1 * from [dbo].[Products] order by price desc
MIN()
MIN()可以計算()內欄位資料的最小值。
SQL範例:
算出Products資料表內價格最小值是幾元。
select min(price) as 最小值 from Products
MAX跟MIN也可以下where條件。
select min(price) as 最小值 from Products where name like '%糖%'
不過剛好有糖的最小值剛好也是100所以結果是一樣的。
SUM()
SUM()可以計算欄位資料的總和。
SQL範例:
計算Products資料表價錢的總和與平均:
select sum(price) as 總和 , avg(price) as 平均 from Products
結果如下:
搜尋只有糖字串的總和與平均:
select sum(price) as 總和 , avg(price) as 平均 from Products where name like '%糖%'
結果如下:
]]>
捲毛蔡
2019-09-20 14:17:37
-
[iT鐵人賽Day18]SQL語法-排序Order by
https://ithelp.ithome.com.tw/articles/10217026?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10217026?sc=rss.iron
使用Select查出想要的資料後，假如想要使資料排序由小到大或是由大到小，這時候就需要使用Order by這個指令來做排序。
資料排序 Orde...]]>
使用Select查出想要的資料後，假如想要使資料排序由小到大或是由大到小，這時候就需要使用Order by這個指令來做排序。
資料排序 Order By
將資料做排序有兩個關鍵字:
- asc 遞增(由小到大)
- desc 遞減(由大到小)
使用order by不只是數值的大小做排序，也可以是時間的久遠或英文(a-z)的大小或者文字的筆畫來做排序。
用法:
SELECT "欄位名稱"
FROM "資料表名稱"
[WHERE "條件"]
ORDER BY "欄位名稱" [ASC or DESC];
Order by條件是可以多個的
但假如以欄位名稱1排序後，有三個名稱重複一樣，oder by後可以再用,做區隔後繼續 欄位名稱2 加上 ASC or DESC排序，若排序後還是一樣無發比較高下的話可再第三個 欄位名稱3排序以此類推，但會越前面的排序為優先。
作法如下:
ORDER BY "欄位名稱1" [ASC or DESC],"欄位名稱2" [ASC or DESC],"欄位名稱3" [ASC or DESC],...;
以student資料表來做order by的範例:
現在要以id來進行遞減的排序並顯示出學生姓名
SELECT 學生
FROM student
ORDER BY id DESC
顯示結果依照id大小，從最大(京帥 id=8)排列到最小(Mark id=1)。結果如下:
那麼現在要以學生姓名來進行遞增。
SELECT 學生
FROM student
ORDER BY 學生 ASC
顯示結果先由英文排序到中文，而英文從字母的先後順序開始遞增，中文則是依照筆畫來做遞增。結果如下:
使用工具精靈產生Order By的SQL
對資料庫新增查詢後，右鍵在編輯器中查詢設計，選擇想要的資料表(作法與前幾篇SQL小精靈一樣)，在排序類型那兒的下拉選單就可以對欄位做遞增或遞減了，而SQL就會在下方，確定後就可執行了(也可以對不想顯示的欄位做排序唷><)。
]]>
捲毛蔡
2019-09-19 14:12:07
-
[iT鐵人賽Day17]SQL語法-集合運算Union 、Intersect 、Except
https://ithelp.ithome.com.tw/articles/10216761?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10216761?sc=rss.iron
集合運算查詢
在資料庫執行多個資料表查詢時，除了使用
集合運算查詢
在資料庫執行多個資料表查詢時，除了使用Join的合併查詢外，也可以使用集合運算:聯集Union、交集Intersect、差集Except來執行兩個資料表的合併。
下面會用這兩個資料表來當作集合範例
student資料表:
Teacher資料表:
其中兩個資料表中，有些人分別是學生又同時是老師(Mike和新西亞)。
集合運算查詢分為三種:
1.聯集 UNION:
將2個資料表的紀錄垂直結合再一起，有重複的資料只會顯示其中一筆，UNION 與 JOIN 不同的地方在於，JOIN 是作橫向結合 (合併多個資料表的各欄位)；而 UNION 則是作垂直結合 (合併多個資料表中的紀錄)。
SQL範例:
現在要將[student]與[Teacher]兩個資料表使用聯集運算取出全部學生及老師的名字，SQL如下:
select 學生 as 姓名 from student
union
select 老師 from Teacher
全部學生及老師都有被顯示出來，不過在[student]與[Teacher]裡都有的新西亞以及Mike學生和老師，在查詢結果中只會出現一筆，而不會重複出現相同的姓名。
而UNION查詢的資料集欄位名稱，通常會依據第一個Select所查詢的欄位來當名稱，不過上述SQL語法使用as姓名來代替欄位名稱 學生 了。結果如下圖:
Union all
union all與union的差異在於，union會將重複的自動踢掉，而union all將會保留重複的。
也就是說假如想要 新西亞 和 Mike 在[student]與[Teacher]的兩個資料庫內的資料都要出現，那就需要使用 Union all ，顯示結果就會重複出現 新西亞 與 Mike。如下圖所示:
select 學生 as 姓名 from student
union all
select 老師 from Teacher
2.交集 INTERSECT:
將兩個資料表相同的紀錄取出來，且有重複的資料只會顯示其中一筆。
SQL範例:
現在要將[student]與[Teacher]兩個資料表使用交集運算取出兩個資料表是老師又同時是學生的姓名，SQL如下:
select 學生 as 姓名 from student
intersect
select 老師 from Teacher
結果顯示兩個資料表都有的相同姓名的Mike及新西亞，且也都各只顯示一筆。結果如下圖:
3.差集 EXCEPT:
只取出第一個select指令但是不存在第二個select指令的紀錄。
SQL範例
現在將[student]與[Teacher]兩個資料表使用差集運算取出student資料表的學生姓名，但不能同時也是老師的學生姓名(只取出純學生，不包含同時也是老師的學生XD)，有點像left join。SQL如下:
select 學生 as 姓名 from student
except
select 老師 from Teacher
顯示結果只出現student的學生姓名，不過顯示結果的姓名不會有在Teacher資料表內的姓名，所以在兩個資料表都有的Mike和新西亞就不會出現(Bye~)。結果如下圖:
另外差集 EXCEPT及只適用於 SQL Server，在Oracle的交集則是使用 MINUS，使用方法與EXCEP一樣; 而MySQL不支援EXCEPT及MINUS，則要使用left join。詳細介紹可以看這個網頁。
]]>
捲毛蔡
2019-09-18 11:23:09
-
[iT鐵人賽Day16] SQL語法-表與表之間的關係 Join 也可使用小精靈產生Join
https://ithelp.ithome.com.tw/articles/10215741?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10215741?sc=rss.iron
Join (合併查詢)
多資料表查詢，可將關聯表正規劃分割的資料表，還原成使用者所需要的資訊。
合併查詢就是將儲存在不同資料表的欄位資料，利用資料表之間欄位的關連...]]>
Join (合併查詢)
多資料表查詢，可將關聯表正規劃分割的資料表，還原成使用者所需要的資訊。
合併查詢就是將儲存在不同資料表的欄位資料，利用資料表之間欄位的關連性來結合多資料表之所需要的資訊。常用的合併查詢如下:
1.inner Join 內部合併查詢
2.left (outer) Join 左外部合併查詢
3.right (outer) Join 右外部合併查詢
4.full (outer) Join 完全外部合併查詢
5.cross Join 交叉合併查詢
Inner Join
(自繪圖上色不是很好請見諒><)
INNER JOIN (內部連接) 為內部合併查詢指令，可以取回2個資料表都共同存在合併欄位的記錄資料。也就是在「兩個資料表都有在 on 關鍵字所指定的欄位的值」這個條件下才取出想取的欄位。
select 想收尋的欄位(資料表A & B都可) from [資料表A] inner Join [資料表B] on [資料表A].[關聯鍵] =[資料表B].[關聯鍵]
以這個網站為範例。
Cumstomers資料表取出CustomerID與CustomerName欄位，和從Orders資料表取出OrderID欄位，合併的欄位是CustomerID，如下程式碼:
SELECT Customers.CustomerID,Customers.CustomerName ,Orders.OrderID FROM Customers inner join Orders on Customers.CustomerID = Orders.CustomerID;
Cumstomers資料表使用inner Join合併Orders資料表的欄位資料，合併欄位是on後的CustomerID欄位。
顯示結果CumstomerID沒有1是因為Orders資料表沒有CumstomerID 1 的資料，因為inner Join會顯示兩個資料表所重複的資料。
Left Join
left Join (左外部合併查訊)是在合併兩個資料表中，取回左邊資料表的所有紀錄，就算在右邊資料表沒有存在合併欄位的值，顯示結果會以左邊資料表為主。
select 想收尋的欄位(資料表A & B都可) from [資料表A] left Join [資料表B] on [資料表A].[關聯鍵] =[資料表B].[關聯鍵]
左邊是指在left join 左邊的資料表名稱也就是上程式的[資料表A]。
SELECT Customers.CustomerID,Customers.CustomerName ,Orders.OrderID FROM Customers left join Orders on Customers.CustomerID = Orders.CustomerID;
使用left Join後會發現，CustomerID 1 會顯示出來，因為在Customers資料表中有這筆資料，才不管右邊的Orders資料表有沒有這筆資料呢哼！不過CustomerID 1的OrderID那欄資料就會是Null。
Right Join
就跟left相反XD
right Join (右外部合併查訊)是在合併兩個資料表中，取回右邊資料表的所有紀錄，就算在左邊資料表沒有存在合併欄位的值，顯示結果會以右邊資料表為主。
select 想收尋的欄位(資料表A & B都可) from [資料表A] right Join [資料表B] on [資料表A].[關聯鍵] =[資料表B].[關聯鍵]
右邊是指在right join 右邊的資料表名稱也就是上程式的[資料表B]。
SELECT Customers.CustomerID,Customers.CustomerName ,Orders.OrderID FROM Customers right join Orders on Customers.CustomerID = Orders.CustomerID;
使用right Join顯示結果會以Orders資料表為主，會顯示Orders資料表的全部資料，就算Customers資料表沒有(就會用Null呈現)。不過這範例Orders資料表的資料好像在Customers都有，所以顯示的結果跟inner Join的結果一樣只有排序不一樣而已。
Full Join
不同於left Join & right Join ， full Join(完全外部合併)可以取回左右兩邊資料表的所有紀錄。
select 想收尋的欄位(資料表A & B都可) from [資料表A] full Join [資料表B] on [資料表A].[關聯鍵] =[資料表B].[關聯鍵]
用網站的資料庫範例使用full Join 好像會出錯XD
SELECT * FROM Products full join OrderDetails on Products.ProductID= OrderDetails.ProductID;
結果:
「An unspecified error occurred.」
理論上以該是可以成功的==畢竟left join 跟 right join 都可成功XD。
不過可以看 w3c 介紹full Join的網站裡的範例來參考，但若是複製裡面的程式碼到網站一樣不能執行QQ
不過最重要的事，知道full Join就是將Customers和Orders的資料左右全部合併，不管有沒有空的資料。
Cross Join
交叉合併查詢(Cross Join )是關聯式代數的卡迪生乘績運算，查詢結果的紀錄是2個資料表紀錄的乘積。
將兩個資料表所有想取出欄位的資料的全部結果都排列組合出來，不需要加 on 關鍵字。
Select * From 表A Cross Join 表B;
也就是說表A有5筆紀錄，表B有8筆紀錄，交查合併後會得到5 * 8=40筆的紀錄，如果沒有指名欄位，欄位數就是2個資料表的欄位總數。
範例可參考這裡
使用工具精靈出現Join的SQL語法
在SQL Server 可以使用工具精靈直接顯示出join的SQL語法，就不用手打了，而且當資料表不止兩個時會打到瘋掉吧XD，所以能拉工具就拉工具吧哈哈
首先在新增查詢右鍵在編輯中設計查詢
選擇要的資料表後，如果沒拉過線(主索引鍵 & 外部索引鍵)會預設相同名稱的欄位幫忙拉線，可以對著線按右鍵移除就好了。
然後再將自己的主索引及外部拉好，自己拉好線後，在下方就會有inner Join的SQL語法了XD，按確定後再執行就可以看到結果了。
如果要left Join 可以對線右鍵將選擇Orders資料表打勾勾，下方就會有left Join的SQL語法出現了。
阿假如要right Join 就跟上面一樣對線右鍵，不過是選Customers資料表打勾勾，下方就會有right Join的SQL語法出現了XD
full Join就兩個資料表都打勾勾就會有full Join的SQL了。
而兩個資料表以上也是可以很方邊的產生join SQL語法><
總之善用精靈工具可以節省不少時間XD
]]>
捲毛蔡
2019-09-17 16:11:07
-
[iT鐵人賽Day15]SQL語法-撈取資料Select
https://ithelp.ithome.com.tw/articles/10214938?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214938?sc=rss.iron
要如何搜尋資料庫內的資料? SQL語法中就是從Select開始。
Select
用於查詢表格內欄位資料的指令，可搭配條件限制的子...]]>
要如何搜尋資料庫內的資料? SQL語法中就是從Select開始。
Select
用於查詢表格內欄位資料的指令，可搭配條件限制的子句(如where)或排列順序的子句(如order)來取得查詢結果。
Select使用:
以這個網站 SQL Server MySQL 內的資料庫為練習範例。
SELECT CustomerName,ContactName FROM Customers where Country="UK";
SELECT[欄位名稱] (想要顯示出來的欄位內的資料結果)
FROM[資料表名稱] (資料庫.table名稱)
WHERE[搜尋的條件與範圍] (條件子句)
上述的程式碼就是要從customers資料表中(FROM Customers)收尋條件是欄位Country叫UK( Country="UK";)並只要秀出欄位CustomerName跟ContactName的結果(SELECT CustomerName,ContactName)出來就好，然後Select from where 英文大小寫是沒差的。
執行後結果:
使用 * 顯示所有欄位
SELECT * FROM Customers where Country="UK"
如果想要顯示Country="UK"的全部欄位可以用 * 的符號SELECT *，就不用每一個欄位都打出來了。
不過若資料量大時竟量避免使用 * ，只有幾十筆資料可能沒什麼感覺但假如已經是數百萬筆資料那就會影響到速度了。
若是沒有from則是單純列印
當然也可以不打from跟where，代表直接列印出結果。
SELECT 'Alfreds Futterkiste';
記得要加上單引號'。
限制數量
SQL Server
SELECT top 2 * FROM Customers;
Customers資料表內有很多筆的資料，假如我只想要收尋前x筆資料的話，可以selcet後加上top x，就可以只顯示出想要的x筆資料數量。
MySQL
SELECT * FROM Customers limit 5;
Customers資料表內有很多筆的資料，假如我只想要收尋前x筆資料的話，可以使用limit x，就可以只顯示出想要的幾筆資料數量。
善用搜尋條件where
假如我想從Customers資料表中找出Country是France的資料，可以這樣下SQL語法
SELECT * FROM Customers where Country="France";
不過假如我還要再下條件，找出Country是France且City是Paris的客戶資料，那麼只需在條件是下個and就可以了。
SELECT * FROM [Customers] where Country ="France" and City ="Paris";
不過我舉例的不太好，因為條件只要直接指定wher City ="Paris"就可以收尋出一樣的結果了XD
不過記得可以使用and來增加條件式ㄏㄏ。
然後可以使用AND當然也就可以使用OR囉！就看想要怎樣的結果來運用收尋條件。
比較運算子
比較運算子包含『 =、>、<、>=、<= 』等幾種，下達條件時，可針對資料行使用比較運算子。
例如:
只想收尋Country="UK"的資料
where Country="UK"
或找出CustomerID 大於等於5但要小於10的資料。
where CustomerID >=5 and CustomerID < 10
透過運算子可以加快收尋的速度。
參考資料
hahow學校Ryan老師的資料庫設計課程。
]]>
捲毛蔡
2019-09-16 08:44:41
-
[iT鐵人賽Day14]ASP.NET與資料庫的資料存取-DataSet你很猛
https://ithelp.ithome.com.tw/articles/10215263?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10215263?sc=rss.iron
在前一篇已經講過了DataReader，...]]>
在前一篇已經講過了DataReader，那今天就來聊聊DataReader的好朋友DataSet，它是另一種讀取資料的物件。
DataSet
DataSet一旦連接到資料來源並透過DataAdapter取得資料後，就會立刻離線，並且把獲得的資料放在主機的記憶體裡面，等待日後應用。因為是獨立出來的資料集，所以做任何操作都不會影嚮到真正的資料庫內的資料。
程式範例
string s_data = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["config中connectionString的name"].ConnectionString;
SqlConnection connection = new SqlConnection(s_data);
SqlCommand Command =new SqlCommand($"SQL語法指令", connection);
SqlDataAdapter dataAdapter = new SqlDataAdapter(Command);//從Command取得資料存入dataAdapter
DataSet dataset = new DataSet()//創一個dataset的記憶體資料集
dataAdapter.Fill(dataset);//將dataAdapter資料存入dataset
foreach (DataRow datarow in dataset.Tables["選擇的資料表名稱"].Rows)
{
//每個資料列的內容
}
//新增一筆資料
DataRow newRow = dataset.Tables["資料表名稱"].NewRow();
newRow["id"] = 999;
newRow["header"] = 111;
dataset.Tables["資料表名稱"].Rows.Add(newRow);
//移除一筆資料
dataset.Tables["資料表名稱"].Rows.Remove(dataset.Tables["資料表名稱"].Rows[1]);
//修改一筆資料
DataRow[] rows = dataset.Tables["資料表名稱"].Select("id=1");
if (rows.Length > 0)
{
rows[0]["id"] = 2;
}
GridView1.DataSource = dataset; //告訴GridView1的DataSource資料來源是dataset
GridView1.DataBind(); //資料繫結
//還有很多種操作方式
1.Connection : 建立與資料庫連接的通道。
2.Command: 下達SQL語法指令。要對資料庫下的SQL語法，必須是要一個物件才能執行，不能直接用SQL語法，所以才要把SQL丟進sqlcommand 這個物件
3.DataAdapter: 取得資料庫資料。
4.DataSet: 創立準備存放資料的記憶體資料集。
5.dataAdapter.Fill: 將取得的資料存入記憶體資料集中。
6.就可以使用dataset來做很多種操作了~(≧▽≦)/~
其實也可以創立DataTable來做操作，就不用dataset.Tables了XD
DataTable dataTable =new DataTable();
最後DataReader和DataSet各有所好，都很好用der，就看個人習慣或需求囉٩(˃̶͈̀௰˂̶͈́)و
]]>
捲毛蔡
2019-09-15 15:33:16
-
[iT鐵人賽Day13]ASP.NET 讀取資料庫的資料常常用到的DataReader
https://ithelp.ithome.com.tw/articles/10215075?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10215075?sc=rss.iron
ASP.NET在讀取資料時，很常會使用DataReader這個物件。
DataReader
一個資料流，以「順向」且「唯讀」的查看方式來讀取裡面的資料，
...]]>
ASP.NET在讀取資料時，很常會使用DataReader這個物件。
DataReader
一個資料流，以「順向」且「唯讀」的查看方式來讀取裡面的資料，
就像個指標一樣在資料庫裡讀取資料直到連線關閉，與DataSet相比不會占用大量記憶體較省資源。
DataReader 範例:
//創一個變數存放從config內的資訊，其實也可不用創立這變數，直接放進SqlConnection內即可。
string s_data = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["config中connectionString的name"].ConnectionString;
//new一個SqlConnection物件，是與資料庫連結的通道(其名為Connection)，以s_data內的連接字串連接所對應的資料庫。
SqlConnection connection = new SqlConnection(s_data);
//new一個SqlCommand告訴這個物件準備要執行什麼SQL指令
SqlCommand Command =new SqlCommand($"SQL語法指令", connection);
//與資料庫連接的通道開啟
connection.Open();
//new一個DataReader接取Execute所回傳的資料。
SqlDataReader Reader = getCommand.ExecuteReader();
//檢查是否有資料列
if (Reader.HasRows)
{
//使用Read方法把資料讀進Reader，讓Reader一筆一筆順向指向資料列，並回傳是否成功。
if (Reader.Read())
{
//DataReader讀出欄位內資料的方式，通常也可寫Reader[0]、[1]...[N]代表第一個欄位到N個欄位。
TextBox.Text = Reader["欄位名稱"].ToString();
}
}
//關閉與資料庫連接的通道
connection.Close();
1.Connection : 與資料庫建立起連接的通道。
2.Command: 下達SQL語法指令。要對資料庫下的SQL語法，必須是要一個物件才能執行，不能直接用SQL語法，所以才要把SQL丟進sqlcommand 這個物件
3.Open: 開啟與資料庫連接的通道。
4.Execute: 通知資料庫執行Command所下達的SQL語法指令，並回傳資料。可以通過這個物件來查詢結果，它提供了游水式的執行方式，即從結果中讀取一列之後，指向到下一列。
5.Read: 使DataReader開始一行一行的讀取資料列。呼叫Read()方法之後，DataReader物件才會移動到資料集的第一列，同時此方法也返回一個Bool值，表明下一列是否可用，回傳True則可用，回傳False則到達資料集末尾。
6.Reader[欄位名稱 or 0~N]: DataReader讀出欄位內資料的方式，可寫Reader[0]、[1]...[N]代表第一個欄位到N個欄位，也可直接寫欄位的名稱。
7.Close: 關閉與資料庫之間的連結管道。
if & while:
使用Reader.Read()時，通常一筆資料時使用if;大於一筆資料時使用while判斷式。
若讀取失敗(代表沒資料)，會傳回false 讓if或是while判斷失敗而不執行。
]]>
捲毛蔡
2019-09-14 13:48:50
-
[iT鐵人賽Day12]ASP.NET與資料庫的聯繫
https://ithelp.ithome.com.tw/articles/10214990?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214990?sc=rss.iron
ASP.NET要如何與資料庫連接
在ASP.NET要與資料庫做連接，需要把連接字串寫進Web.config檔裡
SQL Server 支援兩種驗證模式：Windo...]]>
ASP.NET要如何與資料庫連接
在ASP.NET要與資料庫做連接，需要把連接字串寫進Web.config檔裡
SQL Server 支援兩種驗證模式：Windows 驗證模式和SQL Server驗證模式。
SQL Server驗證
必須建立儲存在 SQL Server中的SQL Server登入。需要登入使用者名稱及密碼，在連接字串中也需要提供。
<connectionStrings>
<add name="DbConnectionString" connectionString="Data Source=資料庫來源;Initial Catalog=資料庫名稱;User ID=帳號;Password=密碼" providerName="System.Data.SqlClient" />
</connectionStrings>
說明一下裡面在說啥XD
connectionString:資料庫來源
AttachDBFilename 要連結的資料庫完整檔案路徑
Initial Catalog:要連接資料庫名稱
User ID:帳號
Password:密碼
providerName:Framework資料提供者的名稱
Windows驗證
使用 Windows 驗證的好處是因為使用者已登入 Windows，所以不必再另行登入 SQL Server，且不需要使用者名稱或密碼。會使用一系列的加密訊息在 SQL Server 中驗證使用者。
<connectionStrings>
<add name="DbConnectionString" connectionString="data source=資料庫來源;initial catalog=資料庫名稱;integrated security=true;" providerName="System.Data.SqlClient" />
</connectionStrings>
與SQL Server驗證插在integrated security=true;這段。
使用SqlDataSourse控制項連接
如果不會手動建立，也可以利用控制項的SqlDataSourse產生:
從工具箱拉一個SqlDataSourse出來後，新增連接字串，按一按伺服器名稱以及驗證方式就可以產稱連接字串了XD
]]>
捲毛蔡
2019-09-13 11:38:00
-
[iT鐵人賽Day11]SQL Server 匯入Excel資料表
https://ithelp.ithome.com.tw/articles/10214762?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214762?sc=rss.iron
從SQL Server 匯入Excel資料成為資料庫內的資料表
現在有一份xls的檔案(記得副檔名要xls不能xlsx)，要將它匯入成為資料表。
從SQL Server 匯入Excel資料成為資料庫內的資料表
現在有一份xls的檔案(記得副檔名要xls不能xlsx)，要將它匯入成為資料表。
首先對著資料庫右鍵選工作然後匯入資料
會到了選擇資料來源的畫面，然後資料來源就選Excel，並將檔案路徑選到我們的資料，就可以按next。(記得副檔名要xls不能xlsx)
之後會到選擇目的地的畫面，目的地選SQL Server Native Client 11.0，然後按next
一樣next
接下來在目的地下的欄位可以更改資料表的名稱，這邊先取成"TEST123"
接下來就瘋狂的next或finish，跑完後close
接下來去資料表上重新整理，並點開資料表的資料夾，會發現剛剛匯入的資料表出現了。
選編輯前200個資料列，後就會發現有資料了><
這樣就匯入資料表成功了XD
]]>
捲毛蔡
2019-09-12 14:27:25
-
[iT鐵人賽Day10]SQL語法小精靈
https://ithelp.ithome.com.tw/articles/10214682?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214682?sc=rss.iron
不熟SQL語法也可以生出SQL語法
在SQL Server的世界中，有一個非得要認識的小精靈，它可以幫助你節省非常多的寫SQL語法的時間，就算你對SQL語法不熟，也可以知道SQ...]]>
不熟SQL語法也可以生出SQL語法
在SQL Server的世界中，有一個非得要認識的小精靈，它可以幫助你節省非常多的寫SQL語法的時間，就算你對SQL語法不熟，也可以知道SQL語法，現在就來認識小精靈ㄅ><
在前幾天已經創立好一個Orders的資料庫了，並且創立4個資料表(Customers、Products、Orders、Orderdetial)，那就繼續以這個資料庫來當範例。
選取資料
首先將游標放在資料庫上並點擊一下，並且點擊上方列表中有一個新增查詢，
會出現可以執行SQL語法的地方，但若一開始沒有選擇到Orders的資料庫也沒關係，也可以從左上方的選單中選到自己要的資料庫。現在顯示Orders代表是選對了。
接下來對著空白的畫面右鍵選擇在編輯器中設計查詢，
會出現可以加入資料表的畫面，我們先選Products及Orderdetail並且按下加入，然後勾選想要尋找的欄位按下確定。
接下來就會出現一串SQL語法了，先不管這些SQL語法怎麼用，接著按下上方的執行，便會跑這些SQL語法，下方就會出現我們要的結果。
找到這些資料的SQL語法就這樣出現了，不用手打什麼Select From等等...節省了不少時間呢XD
其他招式
產生別名
若要改變資料欄位名稱但不動到真正的資料內的欄位，可以在別名的地方打上要顯示的欄位名稱(as)
SQL語法出來後再執行後就成功將name改成產品名稱了XD
條件篩選
當然小精靈除了查詢整筆資料，也可以更深入的篩選資料中的資料(Where)，請全選剛剛的程式碼，並一樣按右鍵選擇在編輯器中設計查詢，就會跳到這段SQL語法所選擇的項目畫面。
那麼假如我只想要看糖果就好了，只要在篩選那裡打上糖果然後按確定就會產生只有糖果的SQL語法了XD
那麼如果只想要有糖這個字就要出現的話，只要在篩選那兒加上 LIKE N'%糖%' 就可以找到有糖這個字的欄位了><
新增資料
在編輯器中設計查詢，選擇要新增資料的資料表，再選擇欄位，接著再右鍵變更類型選擇"插入值"(insert into)
下方就可以輸入想要插入的內容了
確定後就會出現插入資料的SQL語法了，按下執行後就會新增資料進去了。
接著要確認資料是否真的有存入資料表內，要對資料表右鍵選編輯前200個資料列
耶！剛剛插入的資料確定有成功加入了><
結語
除了剛剛上面講的當然還有其他的功能，像是修改及刪除等就不多做說明了XD
雖然精靈產生SQL語法很快速很方便，但有些SQL語法是不能這樣點點按按就會跑出來的，像是子查詢等，總之SQL語法還是要很熟練的。
]]>
捲毛蔡
2019-09-11 10:55:21
-
[iT鐵人賽Day9]-創立 SQL Server驗證使用者帳戶
https://ithelp.ithome.com.tw/articles/10214386?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214386?sc=rss.iron
SQL Server驗證登入
在SQL Server中，除了Windows 驗證登入外，其中還有一種登入方式，那就是使用SQL Server驗證登入。
使用SQL...]]>
SQL Server驗證登入
在SQL Server中，除了Windows 驗證登入外，其中還有一種登入方式，那就是使用SQL Server驗證登入。
使用SQL Server驗證來登入前需要創立帳號及密碼，
之後與Visual Studio做連接只要將帳密寫在連線字串內即可。
所以今天就要來創立SQL Server驗證登入的帳密及一些設定。
創立帳號
首先使用Windows驗證登入後，安全性->登入按右鍵選擇新增登入
輸入登入名稱(帳號)及SQL Server驗證的密碼，並按確定，若顯示密碼驗證失敗，代表密碼設的不夠嚴謹XD
原因是強致執行密碼原則有被啟用，強制執行密碼原則必須符合以下規範:
1.密碼不包含使用者的帳戶名稱。
2.密碼長度至少為八個字元。
3.密碼包含下列四種類別的其中三種：
拉丁文大寫字母 (A 到 Z)。
拉丁文小寫字母 (a 到 z)。
以 10 為基底的數字 (0 到 9)。
非英數字元，例如：驚嘆號 (!)、錢幣符號 ($)、數字符號 (#) 或百分比符號 (%)。
密碼長度最多可達 128 個字元。 盡可能使用長且複雜的密碼。
所以如果不想那麼嚴謹，可以把強制執行密碼原則關掉，按確定就可以了。
重新登入選擇SQL Server驗證登入，打上帳密，便可看到安全性的登入有出現QQQQ了
代表創立帳號成功了。
創立與開啟資料庫
不過當要開啟原本創建好的資料庫或要創建新的資料庫時，會出現建立失敗，原因是還沒有給這帳號設定權限。
這時候請使用Windows驗證登入，登入後對QQQQ使用者右鍵屬性，並選擇使用者對應。
選擇要賦予權限的資料庫(orders)，並將下方 db_owner打勾。
db_owner 固定資料庫角色的成員可以在資料庫上執行所有的組態和維護活動，也可以在 SQL Server中卸除資料庫。 (在 SQL Database 和 SQL 資料倉儲中，某些維護活動需要伺服器層級的權限，而且無法由 db_owners執行。)
接著選安全性實體，並允許建立資料庫，按確定後就完成了。
重新登入QQQQ後就可以建立資料庫及開啟orders資料庫了。
修改密碼
修改密碼，對要修改帳號右鍵屬性(或快速按兩下)，選一般，接著直接改密碼按確定就可以了。
刪除帳號
刪除帳號，須使用Windows登入後，接著對帳號右鍵刪除，便可刪除，
不過sa管理員帳戶以及目前正在登入的帳戶不可被刪除。
]]>
捲毛蔡
2019-09-10 12:04:38
-
[iT鐵人賽Day8] -SQL Server資料庫基本操作手動存入資料
https://ithelp.ithome.com.tw/articles/10214381?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214381?sc=rss.iron
存入資料內容
在之前已經成功創立完名叫Customers資料表了，接下來要將假設的資料輸入進資料表內，
因為這是客戶的資料表，所以要輸入客戶的資料。
存入資料內容
在之前已經成功創立完名叫Customers資料表了，接下來要將假設的資料輸入進資料表內，
因為這是客戶的資料表，所以要輸入客戶的資料。
首先對Customers資料表按下右鍵並選擇 “編輯前200個資料列”
會看到一開始因為還沒有輸入資料，所以一筆資料都沒有XD
接著請在name那欄填入客戶名稱：apple ; tel輸入電話：123456789 ;address輸入地址：USA
(如果點了無法輸入，請先按一下Enter鍵，就可以輸入了)
接著輸入第二筆客戶資料 name:asus ; tel：987654321 ;address：Taiwan
然後再輸入第三筆客戶資料 name:sony ; tel：52012345 ; address：Japan
並按下儲存後，接著對資料表重新執行一次編輯前200個資料列，
會發現id以及initDate，系統已經自動幫忙依序輸入1,2,3還有輸入建立的時間了，
這是因為我們再id有將為識別開啟為是以及initDate設定getdate()的關係。
現在已經成功輸入資料存入Customers的資料表內了。
接下來繼續創立另外三個資料表及存入資料進去。
orders資料表： 訂單資料，這邊的customerID是要用來接customers資料表的索引值的。
Products資料表：創一個用來存放產品資料的資料表，並且將兩筆資料存進去。
Orderdetial資料表：客戶所購買的內容資料都在這個資料表裡，orderID及productID是用來接索引值的
建立資料庫圖表
接下來要建立資料庫圖表，首先對著資料庫圖表按下 ”新增資料庫圖表“
接著選取所有資料表，並按加入。
然後四個資料表都出現了！
接下來開始拉主索引鍵，建立資料表與資料表互相的關聯。
首現要將Products與Orderdetial建立關聯，
請按著Products的id主索引鍵不放並拉向Orderdetial的productID然後放開
按確定後
就會出現一條線聯繫著兩個資料表，而鑰匙的圖案那邊代表主索引鍵的那一端，而另一端就是外部索引鍵。
接下來將剩下的關聯線也連一連。
假如在創立資料表時忘記建立主索引鍵，再資料庫圖表這裡也還可以建立，
只要在資料表按右鍵，選擇設定主索引鍵就可以建立了。
接下來將orders及orderdetail的資料存一存
先在orders資料表內存入資料，customerID那欄只需要輸入1即可，
就可以帶表是Customers資料表的id=1內的資料，這就是有連接主索引鍵神奇的地方！
Total可以先空白沒關係，等orderdetail存入資料後再填寫。
而有了orders的第一筆id後就可以填寫orderdetial的資料表了XD
這邊的orderID兩筆都可填入1，就代表是屬於orders id=1內的資料。
建立後，就可以在orders的total內填入資料了，也就是orderdetial內兩筆資料的total的總和(200+600)。
就是最後這筆訂單應付的總金額(800)了><
然後這樣這筆手動的訂單關聯性就算是完成了XD
]]>
捲毛蔡
2019-09-09 09:36:33
-
[iT鐵人賽Day7] -SQL Server資料庫基本操作手動創立資料表
https://ithelp.ithome.com.tw/articles/10214308?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10214308?sc=rss.iron
創立資料表
在前幾篇已...]]>
創立資料表
在前幾篇已經順利完成SQL Server的安裝後，接下來要試著建立資料表並手動放一些資料進去。
就先試看看我畫的不專業出貨訂單單來當練習好了><
看上圖這張出貨單，我會把它分成Customers,Products,Orders,OrderDetial四塊資料表。
可以把資料表想像成是像Excel一樣的表單，裡面會有欄跟列來做排序。
建立資料表前呢，首先要先建立一個訂單的資料庫。
請對系統資料庫按右鍵選新增資料庫。
創立一個名叫Orders的資料庫並按下確定。
建立資料庫後，接下來就要創立資料表了，
請對Orders資料庫內的資料表資料夾按右鍵新增資料表，會看到可填入資料行的畫面。
資料行就是要填入資料的項目名稱，以出貨單為例就是:產品名稱、客戶姓名、數量等...
不過一般而已，第一項資料行通常都會設叫id做關聯圖時的主索引鍵(金鑰匙)，
主索引鍵(Key)可以讓資料庫快速的找到相關的資料。
而id的資料型態就先設定為int，接著看到正下方有一堆屬性，
找到最下面有一個識別規格，預設為“否”，
接著對識別規格點兩下左鍵會往下展延，然後對(為識別)一樣點兩下左鍵將否改為“是”，
這個意思就是說，每次在這個資料表建立資料時，id這個項目的內容每次都會自動+1(就不用打了)。
最後要幫id加上主索引鍵，在上方有個鑰匙圖案，按下後就可以設定主索引鍵。
設定後會發現，id列前方的小圖示會變成一個鑰匙，就代表已經是主索引鍵了！(預設不可為NULL)
接下來依序填入其他項目，不過其他項目就不用設定成主索引鍵了(通常一個資料表都只會有一個主索引)
比較要一提的是initDate，通常在資料表內都會加上這個資料行的項目是代表建立資料的時間，
而資料型態使用datetime，並在下方一般的預設值或繁結輸入getdate()方法，會自動抓取創立時間。
接著按儲存(ctrl+s)命名為 Customers(這是用來存放客戶資料的資料表)
接著對資料表右鍵重新整理後，Customers的資料表就出現了。
現在創立完資料表了，接下來會繼續完成其他資料表並輸入資料與索引鍵連線。
]]>
捲毛蔡
2019-09-08 20:00:34
-
[iT鐵人賽Day6]SQL Server 資料型態 char varchar nchar nvarchar
https://ithelp.ithome.com.tw/articles/10213922?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10213922?sc=rss.iron
選擇適合的資料型態
建立資料表時需要先選擇欄位的資料型態，而當要輸入文字存入資料時，要使用哪種資料型態呢？
在SQL Server大致上有char varchar...]]>
選擇適合的資料型態
建立資料表時需要先選擇欄位的資料型態，而當要輸入文字存入資料時，要使用哪種資料型態呢？
在SQL Server大致上有char varchar nchar nvarchar text ntext 這6種可以選擇。
不過這次我要介紹的是較常用的4種char varchar nchar nvarchar的資料型態。
那麼這4種的差別在哪裡呢?
char varchar nchar nvarchar
仔細觀察以上4種型態從字面上的差別只在有無var以及有無n，
接下來將要來介紹 char varchar nchar nvarchar 的差別，幫助選擇自己適合的資料型態。
所以var跟n是什麼呢？
定長與變長
定長(沒有var):文字的長度固定，當輸入的數據長度沒有達到指定的長度時將自動以英文空格在其後面填充，讓長度達到相對應的長度。
變長(有var):表示是實際存儲空間是變長的，也就是說當輸入的數據長度沒有達到指定的長度時不會在後面填充空格。(不過text所存儲的也是可變長的)。
舉個例子來說，現在資料表有兩個欄位:
rocket1 char(10)
rocket2 varchar(10)
存入相同的資料「HiIU」
rocket1 會自動在「HiIU」後面補空白，存滿10 Bytes。
rocket2 會根據資料長度變更儲存空間，「HiIU」共四個英文字符，所以則存了4 Bytes。
使用varchar相對節省空間。
Unicode或非Unicode
在資料庫中，每個英文字符的儲存空間只需要一個 1 Byte，但若是非英文字及符號，如中文、泰文、日文、韓文等非英文字符，則需要 2 Byte來儲存。
如果英文與中文同時存在，由於占用空間數不同，容易造成混亂，導致讀取出來的字符串是亂碼。所以就要使用Unicode字符集(N)。
Unicode(有n):所有的文字都用2 Byte來儲存，即使是英文字也是使用2 Byte來儲存，就可以解決中英文字符集不兼容的問題。
非Unicode(沒有n):文字是英文字符就是1 Byte;非英文字符就是使用2 Byte來儲存。
舉例來說，一樣有兩個欄位:
rocket1 varchar(50)
rocket2 nvarchar(50)
存入相同的資料「我愛TsungHua」
rocket1: 我愛 = 22= 4 Byte ; TsungHua =81= 8 Byte ，所以總共4+8=12 Byte的儲存空間。
rocket2:「我愛TsungHua」共10個字，所以儲存空間為10*2=20 Byte。
雖然rocket2較佔儲存空間，但若儲存的資料不限於英文，建議都以n開頭的欄位型態為主，避免亂碼。
所以總結
有var的:在存不固定長度的資料時，較省空間。
有n的:支援Unicode，不過儲存的資料會大兩倍(全部都英文字的話啦)。
然後建議開資料表欄位時，要以儲存的資料為考量，
建議:
char 存資料有固定長度，並且都為英文數字。
nchar 存資料有固定長度，但不確定是否都是英文數字。
varchar 存資料沒有固定長度，並且都為英文數字。
nvarchar 存資料沒有固定長度，且不確定是否皆為英文數字。
整理一下
char(n) 定長，n 必須是一個介於 1 和 8000 之間的數值，最多8000個英文字，4000個非英文字，儲存大小為 n 個位元組。
nchar(n) 定長，n 的值必須介於 1 與 4000 之間。儲存大小為 n 位元組的兩倍。
varchar(n) 變長，n 必須是一個介於 1 和 8000 之間的數值，可存儲4000個字，無論英文還是非英文，儲存大小為輸入資料的位元組的實際長度。
nvarchar(n) 變長，n 的值必須介於 1 與 4000 之間，位元組的儲存大小是所輸入字元個數的兩倍。
text(n) 變長，非Unicode數據，最大長度為2^31-1(2,147,483,647)個字符。
ntext(n) 變長，最大字串長度為 2^30 - 1 (1,073,741,823) 位元組的可變長度 Unicode 資料。 儲存體大小 (以位元組為單位) 是輸入字串長度的兩倍。
]]>
捲毛蔡
2019-09-07 00:08:12
-
[iT鐵人賽Day5]主索引鍵與外部索引鍵
https://ithelp.ithome.com.tw/articles/10213896?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10213896?sc=rss.iron
主索引鍵
在建立資料表時，通常會有一個id欄位並設成主索引鍵(Key)，
目的就是在資料庫中的索引可讓您快速地找到資料表或索引檢視中的特定資訊。
當...]]>
主索引鍵
在建立資料表時，通常會有一個id欄位並設成主索引鍵(Key)，
目的就是在資料庫中的索引可讓您快速地找到資料表或索引檢視中的特定資訊。
當資料越來越多時，建立索引可以可以有效的幫助我們快速的收尋。
主索引就像找資料的一條引線，
比方說有一天花椰菜到健保局跟櫃台人員說:我叫花椰菜，我想調查我這一年的健保的資料。
這時健保局的人員應該會跟你要身分證字號。
因為叫花椰菜的人不只一個(?)，用姓名查詢可能會出現很多筆資料，
但若用身分證字號就一定就是唯一的資料了。
所以身分證字號就好比是主索引鍵，具有代表性、不可重複，
之後只要打主索引(身分證字號)的值便可以找出該筆內資料。
主索引鍵在整個資料表中都是唯一值。
外部索引鍵
與某資料表的主索引鍵相連的資料表欄位就是外部索引鍵，
與主索引鍵不同的事，外部索引鍵並不一定要唯一。
簡單來說，外部索引鍵就是另一個資料表的主索引鍵。
請看非常簡略的主索引鍵與外部索引鍵的圖XD
在訂單詳細資料表中的客戶id與產品id就是外部索引鍵，與它們所相連的客戶id與產品id就是主索引鍵，
而外部索引鍵只需輸入主索引鍵的值便可取得客戶資料與產品資料。
]]>
捲毛蔡
2019-09-06 09:33:20
-
[iT鐵人賽Day4] SQL Server 下載安裝步驟分享
https://ithelp.ithome.com.tw/articles/10213758?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10213758?sc=rss.iron
資料庫系統下載及安裝
我這30天的資料庫系統會使用微軟公司開發的『Microsoft SQL Server』來做學習分享，
為什麼是使用Microsoft SQ...]]>
資料庫系統下載及安裝
我這30天的資料庫系統會使用微軟公司開發的『Microsoft SQL Server』來做學習分享，
為什麼是使用Microsoft SQL Server呢？
原因是因為MS SQL Server較容易入門，不需要複雜的設定，比較適合新手做開發及練習。
而且與C#相關程式的連接，非常的流暢好用，非常適合使用微軟相關的開發者。
好啦！話不多說，要使用資料庫前，先來下載Microsoft SQL Server吧！
下載SQL Server 2017 Express請點我
下載完成後請選擇安裝免費的基本款
安裝完SQL Server後，接著要下載SSMS(SQL Server Management Studio)
請點我下載SSMS 18.2
安裝完SSMS後重新開機後就可以使用囉！
接著打開
SQL Server資料庫系統
開啟後會看到需要連線登入的畫面，就先連自己的伺服器及選擇Windows驗證登入即可(也可使用SQL Server驗證，不過這需要創個帳號及密碼）
成功登入後會看到物件總管內有系統內建的資料庫，代表你成功登入資料庫系統了
]]>
捲毛蔡
2019-09-05 09:34:28
-
[iT鐵人賽Day3]SQL語法介紹
https://ithelp.ithome.com.tw/articles/10213596?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10213596?sc=rss.iron
SQL語法
在前一篇文章
SQL語法
在前一篇文章中已經簡單的介紹了資料庫，而資料庫裡面最重要的就是SQL語法了，如何存資料、取出資料、更新資料以及刪除資料等，都是透過SQL語法來進行操作。
SQL語法的全名叫做: 資料庫結構化查詢語言(Structured Query Language)
是關聯式資料庫的程式表準語言，可以撈取關聯式資料庫的數據。
SQL語言可以在MySQL、SQL Server、PostgreSQL或是Oracle資料庫裡面來搜尋資料。
SQL語法的分類
SQL語言有分三種
DDL-資料定義語言
-
create: 建立資料庫物件的指令、資料表或是主索引等都是透過create來建立。
-
alter: 是負責資料庫物件修改的指令，可修改資料庫、資料表或是主索引等。
-
drop: 是刪除資料庫物件的指令。
DML-資料操縱語言
-
select:收尋，用於查詢表格內欄位資料的指令，可搭配條件限制的子句(如where)或排列順序的子句(如order)來取得查詢結果。
-
insert: 新增，將資料插入到資料庫物件中的指令，可以插入資料的資料庫物件有資料表。
-
update: 更新，將符合條件的資料表中的資料更新為新的數值。
-
delete: 刪除，將自資料庫物件中刪除資料的指令。
在網站上輸入個人資料時，這些資料道理底層，就是透過上面四個語法來管理個人資料的。
DCL-資料控制語言
可以控制特定使用者帳戶對資料表、檢視表、預存程序、使用者自訂函式等資料庫物件的控制權。
-
grant:授予權限。
-
revoke:收回權限。
這樣就不是每一個人都有權限可以去使用任何的資料庫，像是人事資料庫只有人事部門的人才看得到，
客戶資料庫只有業務部門才看得到等等...
示範SQL
現在來看看一個基本的SQL語法-select的用法
select id,name from customers where country ="Japan";
SELECT[欄位名稱]
FROM[資料表名稱]
WHERE[搜尋的條件與範圍]
也就是說我要要從customers客戶資料表中找出來country(也是其中一個欄位)來自Japan的資料，並只提供id以及name欄位的資料。
SQL練習網站
這邊有個線上的SQL練習網站，可以練習SQL語法讓自己更加熟練，提供給大家練習
]]>
捲毛蔡
2019-09-04 09:33:39
-
[iT鐵人賽Day2]資料庫簡單介紹
https://ithelp.ithome.com.tw/articles/10213407?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10213407?sc=rss.iron
資料庫介紹
現代幾乎每一個系統後面都會有至少一個資料庫，而資料庫會儲存系統內的所有資料，
資料以不重覆的方法儲存，可能是個人的資料或是系統的設定值等各種資料，
資料庫介紹
現代幾乎每一個系統後面都會有至少一個資料庫，而資料庫會儲存系統內的所有資料，
資料以不重覆的方法儲存，可能是個人的資料或是系統的設定值等各種資料，
一般來說像是公司可能就會有用來存放客戶資料的客戶資料庫或是存放產品資料的產品資料庫等。
使用者可以透過DBMS(資料庫管理系統，database management system)以檢索、排序、計算、組織、查詢等方法，可以有效率的轉換成有用的資訊。
資料庫管理系統
資料庫管理系統有很多種，而現在市面上最主要的有這四種
MySQL
Microsoft SQL Server
PostgreSQL
Oracle Database
各有優缺點，而這次鐵人賽我主要會以Microsoft SQL Server這個資料庫系統來做分享。
所以來稍微介紹一下Microsoft SQL Server吧XD
Microsoft SQL Server
SQL Server是美國微軟公司(Microsoft)所推出的關聯式資料庫解決方案，
目前的最新版本是SQL Server 2017，SQL Server 效能高，
與Ｃ#相關程式對接非常流暢，很適合新手做入門學習開法使用，
且對於資料庫 transaction 的安全控制非常良好。
之後我會分享如何安裝下載SQL Server建置資料庫的環境。
什麼是關聯式資料庫？
在資料庫裡面會有很多資料表(表單)都是以二維的表格儲存，客戶資料表或是產品資料表、學生資料、學校科目資料表等。
只要在資料表間有相同的資料欄位存在，可以透過每個資料表的主key可以將這些資料表串連起來，互相使用或合併，所以稱之為關連式資料庫。
當然也有非關聯式資料庫，也就是NoSQL，主要是用在雲端資料庫上的技術。
我們的資料都存在於資料庫裡，我們要透過SQL的語法將資料取出來做運用，
SQL語法可以下一些條件，比如說要找尋某個國家的客戶資料，那就可以只針對某個國家來進行查詢。
資料表
每個資料庫裡都會有資料表(table)，
而資料表是由資料行(column)與資料列(Row)所組合而成。
可以把資料表想像成像是Excel那樣子的表格，
資料行是(column)又可稱為欄位(field)或屬性(attribute)，
而資料列(row)又可稱為記錄(record)或值(tuples)。
我們可以去定義資料表內的欄位以及值是要什麼樣的資料型態，
像是可以定義是int或是datetime等，然後可以使用SQL語言新增修改刪除資料表內的資料。
以一個學習系統資料庫為例子，資料庫裡就是由好幾個資料表所組成，
而資料表裡所存的就是資料內容，像是學生基本資料等。
]]>
捲毛蔡
2019-09-03 14:50:13
-
[iT鐵人賽Day1]嗨嗨鐵人賽-前言
https://ithelp.ithome.com.tw/articles/10213191?sc=rss.iron
https://ithelp.ithome.com.tw/articles/10213191?sc=rss.iron
前言
哈囉我叫花耶菜因為頭髮很爆炸捲XD
第一次參加iT鐵人賽，也是第一次在iT鐵人邦發文，真的是有夠緊張的啦XD
緊張到不小心沒存草稿就關掉兩次＝＝...]]>
前言
哈囉我叫花耶菜因為頭髮很爆炸捲XD
第一次參加iT鐵人賽，也是第一次在iT鐵人邦發文，真的是有夠緊張的啦XD
緊張到不小心沒存草稿就關掉兩次＝＝ (其實是我自己蠢）
請幫我QQ
真的覺得應該要設定個關閉視窗或上一頁若沒存草稿要跳個提醒記得存檔的通知，
不然不小心太習慣兩隻手指頭往右滑就ＧＧ了...
好拉！題外話QQ
真沒想到我竟然參加iT鐵人賽了!請大家多多指教XD
為什麼會想參加鐵人賽呢？
因為我覺得這是個很棒的比賽，可以讓自己專注研究自己有興趣的事情又可以學習，真的超棒的
然後也想挑戰自己看有沒有這個毅力完賽(還有想拿獎品XD)。
而這次主要會是以資料庫(Microsoft SQL Server)為主題來作學習與分享，
原因是最近剛接觸資料庫，想藉由這次比賽讓自己對資料庫有更加的了解及印象，
做中學也正好替自己紀錄一下學習的筆記。
資料庫對後端來是非常重要的，我想成為後端工程師，所以必須得好好的了解一番。
比賽前半部分大多都是會以手把手的方式帶領大家建立資料庫以及運用資料庫，
後半部就看到時候有學到什麼再做分享囉XD
而這次參加高雄火箭隊軟體工程師培訓營的隊伍，報名團體組，
希望不要拖累隊友們，我一定會寫好寫滿30天的。
請大家不吝指教，祝大家跟自己能順利完賽，加油><
]]>
捲毛蔡
2019-09-02 14:32:20
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>