如何制作 AjaxControlToolkit.TabContainer 的自定义版本答案

【问题标题】：How to make a custom version of AjaxControlToolkit.TabContainer如何制作 AjaxControlToolkit.TabContainer 的自定义版本
【发布时间】：2012-06-09 14:25:50
【问题描述】：

我想这是一个帖子中捆绑了很多问题。

我想构建一个类似于TabContainer 的类似向导的控件

但我需要某些自定义。这就像我想将一些帮助文本与 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 向导控件相同的功能。我已经找到了上面一些问题的答案，我会在有时间时添加它。

【问题讨论】：

为什么不自定义向导控件本身？检查forums.asp.net/t/1031636.aspx/…
您最终是使用了其中一个答案，还是采取了另一条路线？

标签： asp.net asp.net-ajax custom-controls custom-server-controls

【解决方案1】：

为了将脚本或图像嵌入到 asp.net 自定义控件中，我找到了以下站点中提到的解决方案：

Embed js resource with custom asp.net control

【讨论】：

【解决方案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

【讨论】：

【解决方案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 选项卡：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 UI 执行此操作，如果您选择走其他路线，它仍然应该是相关的：How to embed jquery library in asp.net custom server control?、http://forums.asp.net/t/1599621.aspx/1。

至于设计时支持，请尝试查看 Microsoft 的文章（包括示例）：http://msdn.microsoft.com/en-us/library/aa478960.aspx 或此 CodeProject 文章：http://www.codeproject.com/Articles/9227/ASP-NET-Server-Control-Design-Time-Support。

【讨论】：