How to create a custom version of AjaxControlToolkit.TabContainer

Question

I think this is a lot of questions in one post.

I want to create a magic control that looks like a TabContainer

But I need certain settings. This would be like I want to link some help text to a TabPanel. Therefore, I assume that I want to write my markup, as shown below for the tab:

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

So what do you do to make such markup ...? And how would our code control have access to data between HelpTextTemplate - which might contain server controls and that?

Also, note that in the above image there is a “Save” button. The user simply drags and drops to the tab bar. And when the user double-clicks on it, we have a method stub generated in the code behind (which belongs to the aspx page). How is all this achieved?

And to close the whole solution, I understand that we need to enable some javascript to simulate this tab functionality. There is also css here (pay attention to the images behind the tabs - gradient, etc.). The aspect that I am considering is to do this in the form of controls that users can use out of the box, similar to a toolkit container control. Hence css / javascript must be linked. How to achieve this?

Edit:

I am also interested in creating a part of the management constructor (development time). I am looking for functionality in the same way as for asp.net management wizard. I found the answers to some of the questions that I had above, will add them when I find the time.

Answer 1

To embed a script or image in an asp.net user element, I found the solution mentioned on the following site:

Insert js resource using asp.net custom control

Answer 2

What I'm suggesting here may seem a little too big, but I can't think of another easy way to what you ask for and how you won it.

Take the source code of the TabContainer, clone it and make all your own settings in your source code. The first steps are to get the full source code for this asp.net toolkit and make a build that works. The second step is to add a TabControl clone with the new names. Then you work on this clone to make your changes as you see fit. The final step is to try to separate your user control in a separate library, if possible.

Download the latest version of the full asp.net ajax control toolkit

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

Here you can see the online source code for TabContainer only.

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

Answer 3

The control you are trying to build is not incredibly complex, but it involves several different methods.

I would suggest creating your own control from scratch, and then inherit the existing one. Using CompositeControl as a base would probably be better as it gives you more flexibility.

For HelpTextTemplate / ContentTemplate you want to create some ITemplate containers, look at this http://msdn.microsoft.com/en-us/library/aa478964.aspx article on how to set this up. Since you can access content / controls in the HelpTextTemplate, check out this article to access them: ASP.Net ITemplate - How to Declare .

For tabs, as this is custom, I would probably avoid AjaxControlToolkit. Instead, I would include a link to the jQuery UI and use the jQuery user interface tabs: http://jqueryui.com/demos/tabs/ . Your CompositeControl just needs to display some divs, ul / li elements, and it will be useful for you to make tabs.

If you are hooked on using the AJAX Control Toolkit, you can still. You need to instantiate the instance in your custom control, add it to the control tree, and then use this technique: http://msdn.microsoft.com/en-us/library/0e39s2ck.aspx to transfer the contents of your template to tab pages.

The ability to drag a control from a toolbar onto your page is simple; if your server management library is already part of the same solution as your website, then it just appears. In the worst case scenario, you can use the "Add Items" option and add the DLL while viewing it. Regarding how a Click event is fired when a button is double-clicked and executed through a class attribute, check out this guide to setting up default events: http://msdn.microsoft.com/en-us/library/43sxkdeb .

As for embedding javascript in the library, these two questions relate to how to do this specifically for the jQuery user interface, if you decide to go a different route, it should still be appropriate: How to embed the jquery library in asp.net user server control ? , http://forums.asp.net/t/1599621.aspx/1 .

Regarding development-time support, try updating a Microsoft article on this subject (including a sample): http://msdn.microsoft.com/en-us/library/aa478960.aspx or this CodeProject article on it: http: // www. codeproject.com/Articles/9227/ASP-NET-Server-Control-Design-Time-Support .