如何製作一個自定義版本的AjaxControlToolkit.TabContainer

Question

我想這是一個捆綁到一篇文章中的很多問題。

我想建立一個精靈般的控制，看起來類似於TabContainer

但我需要一定的自定義設置。這些就像我想將一些幫助文本與TabPanel相關聯。所以我想我想寫我的標籤，如下面的Tabpanel：

<cc1:MyTabPanel ID="mtp1" runat="server"> 
    <HelpTextTemplate> 
     This is your step 1 which is about ... 
    </HelpTextTemplate> 
    <ContentTemplate> 
     Content goes here... 
    </ContentTemplate> 
</cc1:MyTabPanel> 

那麼你做什麼做這樣的標記......？我們的代碼控制如何能夠訪問HelpTextTemplate之間的數據 - 它可能包含服務器控件和所有？

此外，請注意，在上面的圖片中有一個按鈕叫'保存'。用戶只需拖放到標籤面板。當用戶雙擊它時，我們在後面的代碼中生成了一個方法存根（屬於aspx頁面）。這是如何實現的？

爲了限制整個解決方案，我意識到我們必須連接一些JavaScript來模擬該選項卡功能。這裏也有CSS（請注意標籤背後的圖像 - 漸變等）。我正在研究的方面是將它變成一個控件，用戶可以像使用工具箱的tabcontainer控件一樣使用開箱即用的控件。因此，CSS/JavaScript應該被捆綁。如何實現這一目標？

編輯：

我也有興趣在使控制設計師（設計時的相互作用）的一部分。我正在尋找與asp.net嚮導控件一樣的功能。我找到了一些我上面提到的問題的答案，當我找到時間時會添加它。

Answer 1

嵌入腳本或圖像的asp.net自定義控件我發現下面的網站中提到的解決方案：

Embed js resource with custom asp.net control

Answer 2

我認爲這聽起來可能太多了，但我不能想想你想問什麼以及你贏的方式等其他簡單的方法。

抓住TabContainer的源代碼，克隆它，並使所有的自定義設置基於該源代碼。第一步是獲得這個asp.net工具包的完整源代碼並進行構建。第二步是添加新名稱的TabControl的克隆。然後，您可以根據需要處理此克隆以進行更改。如果可能的話，最後一步是嘗試將獨立庫中的自定義控件分開。

下載完整的asp.net AJAX控件工具包的最新版本

http://ajaxcontroltoolkit.codeplex.com/SourceControl/list/changesets

在這裏你可以在網上看到的源代碼，只TabContainer的

http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/view/2c482e5ad6c4#Server%2fAjaxControlToolkit%2fTabs%2fTabContainer.cs

Answer 3

控制你正在嘗試構建並不是非常複雜，但確實涉及許多不同的技術。

我建議從頭創建自己的控件，而不是繼承現有的控件。可能使用CompositeControl作爲基礎是最好的，因爲它給你很大的靈活性。

對於HelpTextTemplate/ContentTemplate，你需要創建一些ITemplate容器，看看這篇文章http://msdn.microsoft.com/en-us/library/aa478964.aspx如何設置它們。由於您可能想訪問HelpTextTemplate中的內容/控件，請查看本文以瞭解如何訪問它們：ASP.Net ITemplate - ways of declaring。

對於選項卡，由於這是自定義的，我可能會避免使用AjaxControlToolkit。相反，我會包括對jQuery UI的引用並使用jQuery UI Tabs：http://jqueryui.com/demos/tabs/。您的CompositeControl只需輸出一些div，ul/li元素，您將很樂意製作標籤。

如果您正在使用AJAX控件工具包標籤，那麼您仍然可以。您需要在自定義控件中實例化一個實例，將其添加到控件樹中，然後使用如下技術：http://msdn.microsoft.com/en-us/library/0e39s2ck.aspx將模板的內容傳輸到標籤頁。

能夠將控件從工具箱拖放到頁面上很簡單;如果你的服務器控制庫已經和你的網站一樣屬於同一個解決方案，那麼它就會顯示出來。在最壞情況下，您可以使用「添加項目」選項並通過瀏覽來添加DLL。至於雙擊按鈕時如何創建Click事件，這是通過類上的屬性完成的，請參閱本教程中有關設置默認事件的信息：http://msdn.microsoft.com/en-us/library/43sxkdeb。

至於嵌入javascript到進庫，這兩個問題涉及如何爲jQuery用戶界面做到這一點而言，如果你選擇去一些其他的途徑，應該仍然是恰當的：How to embed jquery library in asp.net custom server control?，http://forums.asp.net/t/1599621.aspx/1。

至於設計時間的支持，請嘗試reviwing關於此的微軟文章（包括一個樣本）：http://msdn.microsoft.com/en-us/library/aa478960.aspx或此CodeProject文章：http://www.codeproject.com/Articles/9227/ASP-NET-Server-Control-Design-Time-Support。