User Control

User Control 與 Server Control 提供了程式的可重複使用性，但是兩者的開發成本上，卻是有著蠻大的差距。使用 UserControl 可以讓程式設計師保有拖拉物件的習慣與WYSIWYG(所見即所得)的便利性，入門上的門檻其實是比較低的。然而 Server Control的開發，則必須對 .Net 事件的觸發及基本類別的幾個重要屬性或方法有一定了解，才會比較能夠用起來得心順手。Server Control的確在跨專案也可使用的特性下獨具優勢，不然你看外面 third-party 所賣的元件，絕大多數都是包成 dll 讓你直接呼叫就可使用，很少是提供 User Control 來給你 copy-past 使用的。但並非少了跨專案可直接使用的特性，就會讓 User Control 失去舞台，相反地，只要你掌握住幾個 User Control 的關鍵要點， 相信使用起來就會非常的方便。

目前常會採用 User Control 的情況如下：
1.整個專案中重複出現的功能，如每頁上方的功能列
2.很多地方會重複出現的區塊

而自己遇到這種情況時，都會優先考慮採用 User Control 來達成。

回到剛剛所提到，要掌握住哪些 User Control 的要點呢？

要點一、ASPX 呼叫或設定 User Control 裡面的方法或屬性
自訂的User Control 裡，可能會定義了一些公開的方法或屬性，希望日後被某個 ASPX 頁面引用時，可以在 ASPX 的頁面裡直接呼叫 User Control 裡所定義的這些方法或屬性。

參考： http://paladinprogram.blogspot.com/2008/04/user-control.html

要點二、ASPX 攔截 User Control 裡的物件觸發事件
自訂的User Control 裡，我們可能加入了一些按鈕。而當這個 User Control 被某個 ASPX 頁面引用時，當網路使用者壓下自訂 User Control 按鈕時，希望也能夠讓 ASPX 頁面攔到是這個按鈕所觸發的事件，並在這事件裡頭寫些程式。
參考：http://paladinprogram.blogspot.com/2008/11/raise-usercontrol-event-to-main-page.html

相信這幾點釐清後， User Control 與你的距離，會拉近不少。

ASP.NET AJAX Extensions 1.0

一改過去專注於 server 端的功能，微軟在 .net 2.0 開始加強與 client 端的整合。為了讓開發人員更有效率的開發 Ajax 程式，ASP.NET AJAX Extensions 1.0 封裝了相關開發套件，讓開發人員像是往常使用 Server Control 般的使用這些新元件。

但這項新功能，並非在你安裝完 VS2005之後就有，需要到 ASP.Net Ajax 網站去下載，
網址為：http://www.asp.net/ajax/downloads/

當下載並安裝完 ASP.NET AJAX Extensions 1.0 ，日後當你執行【加入】-【新網站】時，會多一個 【ASP.NET AJAX-Enabled Web Site】，你的每個 WebForm 新頁面，在設計頁面就會多一個 ScriptManager 控制項。我們可以將這個 ScriptManager視為所有 Ajax 技術會使用到的相關 JavaScript 定義集合。也就是因為這是個定義集合，所以需要將它放置在整個頁面的最前面，如此當後面有叫用 Ajax 方法時，才能夠找到對應的函式。如果您沒注意到這個小地方，那你會得到一個下面的錯誤訊息：

The control with ID 'UpdatePanel1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

當然，在實際的開發專案裡，可能原先並沒有一開始就採用 【ASP.NET AJAX-Enabled Web Site】，而是一般的 【ASP.Net 網站】。如果想加入 Ajax 功能，則需要留意下面幾點：

1.Copy 3個 Ajax dll 檔並設成參考。Web.Config 會增加三個 assembly。這3個檔案是安裝 ASP.NET AJAX Extensions 1.0 時，自動產生在您的電腦上，可以透過Windows的【程式集】找到他們。

AJAXExtensionsToolbox.dll
System.Web.Extensions.Design.dll
System.Web.Extensions.dll

2.Web.Config 修改：[放大檢視] ← Copy 專用，避免複製到網頁的控制碼

在 <System.web></System.web>區間加上:

<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>

這資料可以參考【ASP.NET AJAX-Enabled Web Site】的 web.config 設定檔。如果您在 Web.Config 沒有加上這設定，會出現
'Sys'未被定義 的 javascript 錯誤訊息。

GridView Header 的折行

當 GridView 的 Header 文字太長，需要折行時，會發現有時候用 <BR>有效，有時候卻無效。細究原因，要注意該欄位是否為 TemplateField 或是 BoundField。如果是 BoundField，則會完完整整的呈現 HeaderText 內容。相反的，TemplateField 則是會支援 HTML 語法，也就可以透過 <BR> 呈現強迫折行的效果。

.Net 2.0 SqlDataSource 使用 StoreProcedure 注意事項

雖然在 .Net 2.0 提供了一個好用的 SqlDataSource 元件，但實際開發的經驗裡發現，當資料來源使用的是 StoreProcedure時，如果所傳入的參數為空白，則會自動被轉成 NULL。當 SQL Server 收到時，會自動忽略掉這個指令而被去執行，同時也不會發出任何的錯誤訊息。

為了防止這現象發生，在 .Net 的 SqlDataSource 呼叫 StoreProcedure 時，於加入參數的地方多一段程式來解決：

SqlDataSource_Do_import.SelectParameters.Clear();
SqlDataSource_Do_import.SelectParameters.Add("senos", str_senos);
SqlDataSource_Do_import.SelectParameters.Add("keyinEmpno", sso.empNo);
SqlDataSource_Do_import.SelectParameters.Add("keyinEmpname", sso.empName);

//將所有空字串都設成不轉為NULL
for (int iPa = 0; iPa <>
SqlDataSource_Do_import.SelectParameters[iPa].ConvertEmptyStringToNull = false;

SqlDataSource_Do_import.Select(new DataSourceSelectArguments());

checkbox 全選或取消

介紹一個將 checkbox 全選或是取消的方法。
關鍵的 js 語法如下：




function chkall(input1,input2)
{
var objForm = document.forms[input1];
var objLen = objForm.length;
for (var iCount = 0; iCount < objLen; iCount++)
{ 　
if (input2 == true) 　
{ 　　
if (objForm.elements[iCount].type == "checkbox")
{ 　
objForm.elements[iCount].checked = true; 　
} 　
}
else
{ 　
if (objForm.elements[iCount].type == "checkbox") 　
{
objForm.elements[iCount].checked = false;
}
}
}
}

這方法的優點，是會將 form 名稱當參數傳入。在ASP.Net 2.0可以發現，如果你有使用 MasterPage時，預設的 form 名稱會變成 aspnetForm。 缺點是，這是會影響目前畫面上的所有 checkbox，如果你的畫面上出現的都是你想要變更的 checkbox，那就無妨，否則還需要作一些加工才能符合需求。

詳細程式碼：[Here]

在這個範例中，分別用了2個 GridView，其中一個採用 預設的 checkbox ServerControl ，另一個則是 Html checkbox，當畫面上有個觸發 PostBack 的按鈕執行後，只剩下 ServerControl 依然能夠維持目前所勾選的狀態。

image 出現手指的游標

<image> 是個很簡單的物件。有時候我們可能只是放一個按鈕圖示而已。但希望當滑鼠游標移到按鈕上頭時，要能變成手指的圖示，這時候，可以透過 javascript去設定 onmouseover的屬性來達成。

ex:

img.Attributes.Add("onmouseover", "style.cursor='pointer'");

在 IE 4/5 版本，是支援 "style.cursor='hand'" 當作是『手指』的游標符號。但後來 W3C 公佈的標準裡採用 pointer 當作手指的符號，所以IE 6 以後的版本也可使用 pointer 來指定手指游標。目前的 FireFox 或 Google 瀏覽器則都是採用 pointer。

附上常見 游標符號：

CSS 樣式	顯現結果
{ cursor: crosshair; }	滑鼠游標圖案是 crosshair
{ cursor: pointer; }	滑鼠游標圖案是 pointer
{ cursor: text; }	滑鼠游標圖案是 text
{ cursor: move; }	滑鼠游標圖案是 move
{ cursor: wait; }	滑鼠游標圖案是 wait
{ cursor: help; }	滑鼠游標圖案是 help
{ cursor: progress; }	滑鼠游標圖案是 progress
{ cursor: not-allowed; }	滑鼠游標圖案是 not-allowed
{ cursor: no-drop; }	滑鼠游標圖案是 no-drop
{ cursor: no-vertical-text; }	滑鼠游標圖案是 no-vertical-text
{ cursor: all-scroll; }	滑鼠游標圖案是 all-scroll
{ cursor: col-resize; }	滑鼠游標圖案是 col-resize
{ cursor: row-resize; }	滑鼠游標圖案是 row-resize
{ cursor: e-resize; }	滑鼠游標圖案是 e-resize
{ cursor: ne-resize; }	滑鼠游標圖案是 ne-resize
{ cursor: n-resize; }	滑鼠游標圖案是 n-resize
{ cursor: nw-resize; }	滑鼠游標圖案是 nw-resize
{ cursor: w-resize; }	滑鼠游標圖案是 w-resize
{ cursor: sw-resize; }	滑鼠游標圖案是 sw-resize
{ cursor: s-resize; }	滑鼠游標圖案是 s-resize
{ cursor: se-resize; }	滑鼠游標圖案是 se-resize

我們也可以自定游標圖案。自定圖案的語法是：

{ cursor: url(圖案網址); }

參考相關網址：http://css.1keydata.com/tw/cursor.php

更新日期：20090701

在 Server Control 裡使用 資源檔

Ref :http://aspalliance.com/articleViewer.aspx?aId=726&pId=-1

以往在設計 Server Control 元件時，常常會為了需要嵌入圖片或是JavaScript檔而煩惱。透過 .Net 2.0所提供的新方法，讓我們在設計自行研發的元件時，更有彈性。

一、如何建立 Server Control。
01.先建立一個測試專案：ServerControlTest

02.在ServerControlTest專案中，建立一個資源檔(Resource) .resx

03.開啟 Resource.resx，選擇加入資源頁籤，並加入你的檔案。可以是圖檔、文字檔。範例中，我同時加入圖片檔(icon-find.gif)、Javascript(jsMMS.js)檔以及字串 test來說明。

04.由於我們希望將圖片、文字檔都能夠包在未來所產生的元件裡，不再需要透過連結方式來存取，所以要記得分別點選方案總管下的Resource資料夾裡的 icon-find.gif、jsMMS.js，將建置動作改為『內嵌資源』。

05.為了讓元件能夠存取資源檔裡所加入的檔案，可以到方案總管，看到專案裡的屬性頁籤資料夾，找到 AssemblyInfo.cs 檔，打開並編輯。

[詳細程式碼]

加入兩行：
[assembly: System.Web.UI.WebResource("ServerControlTest.Resources.icon-find.gif", "img/gif")]
[assembly: System.Web.UI.WebResource("ServerControlTest.Resources.jsMMS.js", "text/js")]

透過WebResource( v1,v2)，定義了要去抓取資源檔的位置與檔案型態。
WebResource(v1,v2) 第一個參數，是一個包含完整的NameSpace名稱與資源檔所在路徑與檔名。[NameSpace].[路徑].[檔名]，對照目前的範例，就是ServerControlTest.Resources.icon-find.gif。第二個參數則是檔案的型態定義：img/gif、text/js



二、如何使用 Resource。

01.在方案總管裡，我們需要加入兩個參考(Reference):
System.Web
System.Drawing


02.加入一個新的類別 SCTest01.cs [詳細程式碼]
並在其 using 的區塊，新增兩個 ：
using System.Web.UI;
using System.ComponentModel;

我們將這個類別(SCTest01.cs)去繼承 Control 物件

03.覆寫 Render方法
protected override void Render(HtmlTextWriter writer)

首先建立一個 Image 物件，而這 Image物件的圖片來源，則是透過事先存在資源檔的圖片當作其來源。抓取資源檔的方法為：GetWebResourceUrl( )。
在這個方法裡，有兩個參數，第一個是要指定資源檔的類型，我們可以傳入 this.GetType()。第二個參數，則是要傳入資源名稱。這裡需特別注意的地方，是要傳入包含完整的NameSpace名稱與資源檔所在路徑與檔名。[NameSpace].[路徑].[檔名]，對照目前的範例，就是ServerControlTest.Resources.icon-find.gif

介紹了抓圖檔之後，再提抓資源檔裡的字串方法，以Image.ToolTip為例。這個資源檔裡的字串，就相對簡單些了，只需要透過資源檔變數的屬性，就可以完成設定的動作。
[資源檔變數].[字串名稱]
Resource1.Test

為了讓這個圖示比較完美些，也在程式中加入了一個 onmouseover 的處理，讓游標移到 Image 物件上時，能夠變成『手指』的樣子。

此外，加入了 User 壓下按鈕時會觸發 JavaScript 的事件。

img.Attributes["onclick"] = "showWelcome();";

而 showWelcome() 正是我們事先定義在資源檔裡的 JavaScript。

最後，則是將設定好的 Image 物件加入目前的 控制項物件裡。

三、陷阱。

大部分的Server Control，都是透過覆寫 Render( ) 方法來完成。然而現在所介紹的資源檔，在使用字串、圖片等，都沒有問題。唯一有問題的，是 javascript。如果我們在 Render()方法裡去註冊事先定義在資源檔裡的 javascript，則會發生當 USER 觸發了按鈕而啟動 javascript方法時，因為 javascript尚未產生出來而發生錯誤的現象。為了避免這問題，就需要將註冊 javascript的動作提前，例如範例中，我將註冊的時間點提前在 OnInit( ) 的地方。

ps:可以參考先前 Server Control 生命週期 的介紹

四、使用 Server Control

01.先建立一個網站，MyTestWeb
02.在工具箱裡的一般頁籤，按滑鼠右鍵，點選『選擇項目』。

03.點選『瀏覽』按鈕，並挑選剛剛 Server Control 專案所產生的 dll 檔，確定後，就會在工具箱多了一個我們自訂的元件。

04.將我們自訂的元件，拖拉至 .aspx 頁面，即完成 Server Control 的叫用。


參考程式碼：\\3probe-server\RD2\Document\Program\Server Control\ServerControlTest.rar

呼叫 User Control 所定義的方法

一個 User Control，裡面大多會自己定義了許多的方法，當主頁面加入了這個 User Control之後，並想要呼叫 User Control 的方法，[Professional ASP.NET Server Controls]作者有介紹了一篇不錯的用法：



假設 User Control 定義了：
public string ShowUCMsgWithSomeString(string str)
{
return string.Format("This message is from usercontrol and with some strign :{0}", str);
}

則主頁呼叫的方式為：


// 待會給 MethodInfo 使用
using System.Reflection;

//抓目前頁面上的 UserControl
Control ctl = Page.FindControl("MyUC1");

//取得執行個體的 Type
Type ctlType = ctl.GetType();


//取得已定義的方法
MethodInfo ctlMethod = ctlType.GetMethod("ShowUCMsgWithSomeString");

//取得已定義方法的參數
ParameterInfo[] p = ctlMethod.GetParameters();

//輸入參數宣告
Object[] parameters = new Object[p.Length];
string strPassInfo = "Hello my usercontrol!";
parameters[0] = strPassInfo;

//執行 UserControl 所定義的方法
lbMsg2.Text = ctlMethod.Invoke(ctl, parameters).ToString();

程式參考：
\\3probe-server\RD2\Document\Program\User Control\UCTest01.zip

技能清單

ASP.Net

• String:Format、Convert yyyyMMdd
• ArrayList
• Array
• 開窗程式(for IE & Firefox)
• Server Side Web Control
• Image
  
• DB Connection(1.1、2.0)
  
• GridView(2.0)
• Repeater(1.1、2.0)
• DataList(1.1、2.0)
• DataSet (1.1)
• DataReader(1.1、2.0)
  
• SqlDataSource(2.0)
• CheckBox
• RadioButton
• DropDownList
• ListBox
• CheckBoxList
• RadioButtonList
• IsPostBack
  
• 分頁元件(SmartGridView)
• 檔案上傳
• .Net所提供
• SA-FileUp
• SSO(Itri Single Sign-On)
• ViewState
• 註冊 Client Side Javascript
• Thread
• 抓Web.Config資料
• StringBuilder的使用時機
• Life Cycle
• 跨網頁傳遞資料
• 發信(SQL-Mail,FreeSMTP)
• User Control
• Server Control
• Ajax
• 　ASP.NET AJAX Extensions 1.0
• 　當 .Net AJAX 遇上 Frame [重要問題(Panda好棒)]
• 　Ajax學習筆記[不錯的參考]
• 　JSON[參考]
  

SQL

• Store-Procedure
• Transaction
• Join
• String函數
  

HTML

• ifreame
  

JavaScript

• 參考 w3schools js 的介紹
• 目前所有 javascript的文章
  

Reporting Service

• Layout Report
  
• 透過WebService製作 PDF
• SubReport
  

專案管理技巧
專案時程制定與檢視(PDCA:Plan-Do It-Check-Action)
陳頂立的PDCA