How do I create custom Controls for my VS2005 toolbox? - asp.net

Ok, this question might more about design theory. I have successfully created controls that show up in my toolbox, so I'm pretty sure I have the process right. Also, my "AutoToolboxPopulate" is set to true, so things are showing up as I create them. My question is this: I'm sub-classing a native Control for specialized use. When I derive my class from an exposed concrete class, such as BulletedList, my custom Control appears in my Toolbox. However, when I drop it back to the parent, such as ListControl, my Control is not listed (actually it's grayed out when I "List All"). What am I missing?

I think the answer is that there must have been a problem with my code. I did eventually get these to show up, and it may have been an error somewhere.
However, here's an important tip: In order to get custom server controls to show up in your toolbox, you have to load your page into "design" mode. This will update the toolbox list. (apparently, it's necessary for the document outline, too)

Related

How to make a custom version of AjaxControlToolkit.TabContainer

I guess this is a lot of questions bundled into one post.
I want to build a wizard-like control which looks similar to the TabContainer
But I need certain customizations. These would be like I'd want to associate some help text with the TabPanel. So I imagine I'd want to write my markup like below for the tabpanel:
<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 markup like that...? And how would our control from code behind be able to access data between HelpTextTemplate - which may contain server controls and all?
Moreover, notice that there is a button called 'Save' in the above pic. The user simply drags and drops into the tab panel. 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 of this achieved?
And to cap the whole solution off, I realize we have to wire some javascript to simulate that tab functionality. There is css here too (Notice the images behind the tabs - the gradient, etc). The aspect that I am looking at is making this into a control that the users can use out-of-box just like the toolkit's tabcontainer control. Hence the css/javascript should kind of be bundled. How to achieve this?
Edit:
I am also interested in making the control designer (design-time interaction) part. I am looking for functionality the same way we have for the asp.net wizard control. I have found answers to some of the questions I had above will add it when I find time.
For embedding a script or image to the asp.net custom control I found a solution mentioned in the below site:
Embed js resource with custom asp.net control
What I suggest here it may sound too much, but I can not think other easy way for what you ask and the way you won it.
Grab the source code of the TabContainer, clone it, and make all your custom settings base on that source code. The first steps is to get the full source code of this asp.net toolkit and make a build that working. The second step is to add a clone of the TabControl, with new names. Then you work on this clone to make your changes as you wish for. The final step is to try to separate your custom control in a stand alone library if this is possible.
Download the latest version of the full asp.net ajax control toolkit
http://ajaxcontroltoolkit.codeplex.com/SourceControl/list/changesets
Here you can see online the source code for the TabContainer only
http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/view/2c482e5ad6c4#Server%2fAjaxControlToolkit%2fTabs%2fTabContainer.cs
The control you are trying to build is not incredibly complex, but it does involve a number of different techniques.
I would suggest creating your own control from scratch rather then inheritting an existing one. Probably using CompositeControl as the base would be best since it gives you a lot of flexibility.
For HelpTextTemplate/ContentTemplate you'll want to create some ITemplate containers, take a look at this article http://msdn.microsoft.com/en-us/library/aa478964.aspx on how to set these up. Since you may want to access the contents/controls in HelpTextTemplate take a look at this article for how to access them: ASP.Net ITemplate - ways of declaring.
For the tabs, since this is custom, I would probably avoid AjaxControlToolkit. Instead I would include a reference to jQuery UI and use jQuery UI Tabs: http://jqueryui.com/demos/tabs/. Your CompositeControl just needs to output some divs, ul/li elements and you'll be good to go for making the tabs.
If you are fixated on using the AJAX Control Toolkit Tabs then you still can. You'll need to instantiate an instance in your custom control, add it to the control tree, and then use a technique like this: http://msdn.microsoft.com/en-us/library/0e39s2ck.aspx to transfer the contents of your template to the tab pages.
Being able to drag and drop a control from the toolbox onto your page is simple; if your server control library is already part of the same solution as your website then it will just show up. Worst case scenario you can use the Add Items option and add the DLL by browsing for it. As for how the Click event is created when you double click a button, that is done through an attribute on the class, take a look at this tutorial on setting up default events: http://msdn.microsoft.com/en-us/library/43sxkdeb.
As for embedding javascript into the library, these two questions cover how to do this specifically for jQuery UI, if you choose to go some other route it should still be pertinent: How to embed jquery library in asp.net custom server control?, http://forums.asp.net/t/1599621.aspx/1.
As for design time support, try reviwing Microsofts article on this (includes 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.

asp.net event related problem

hello friends i have a check box list which contains all the courses kept in the data base(on page load) now i want that on some event of check box list all branches corresponding to each checked box of course check box list should be list in another check box list(that is the business logic i will do my own) but the problem is that i am not finding any event where i can send all selected check box list value and can generate appropriate result, if any alternate control or solution you can suggest then please suggest me this.
Set the AutoPostBack property to true and in the SelectedIndexChanged event you can loop over the elements that are selected and then bind your second control depending on that.
Another option would be to go for an ajax solution. For this I suggest you take a look at the change event in jQuery to bind to your checkboxlist and use the ajax stack to retrieve the extra information as html and plug that into a span as innerHtml.
I think you need to clarify where your logic sits, and where the information required for that logic to work sits - in order to even know whether you're dealing with a client-side or a server-side technology question
There's two basic possibilities:
Either all required inforamtion is already in the loaded page. In that case, this is basically a javascript problem. I'd dive a bit into jQuery here which has excellent capabilities of finding elements based on properties, and manipulating them
Alternatively, some of your logic and/or data remains on the server. In that case, you can
go with the AutoPostBack property XIII mentioned, resulting, as you correctly assume, in a reload after every click.
Have the user click all the checkboxes they like, and then have them click on a "do something now" button which performs a single postback
Transmit the information about the checkbox click to the server via javascript, get a response, and select other boxes accordingly. Again, XIII already mentioned that by "ajax solution".
So I'm just trying to elaborate on what different approaches do for you, and what questions you need to answer yourself before you can proceed to a concrete technical solution.

Custom SelectedValue attribute

I am creating a completely custom (only inherits from WebControl) combobox/dropdownlist search control with autoComplete capabilities.
JQuery handles assigning the onhover and onclick events for list items (divs with strings in them) and handles the web service call for getting the list of items for the matching text.
The server handles the custom attributes and control rendering.
The issue is that I need to implement a property that is similar to SelectedValue so that when a user selects an item from the search results, the value can be used on the server for other processing. I have done days of research but have not found a clear, concise way of handling the post back data.
I did read a blog that mentioned implementing the IPostBackDataHandler interface, but the implementation of RaisePostDataChangeEvent() calls for calling a server method (like SelectedIndexChange) that I am not implementing at the moment.
public void RaisePostDataChangedEvent()
{
this.SelectedIndexChanged(EventArgs.Empty);
}
Now for the question: Does anyone have advice for handling this? Or am I better off simply inheriting from the dropdownlist control and overriding the existing functionality?
I feel like I'm missing a very small piece that will fit this all together.
Have you considered pulling down the source code from Microsoft's source server and taking a look at how they implemented DropDownList? This would allow you so see how they solved the binding and events part of the problem and give you a good idea what it does otherwise. This way you can decide if you want to inherit from it, or if you can just borrow some ideas for how they implemented IPostBackDataHandler.
Since I have no idea what specifically you are doing, I couldn't advise you if you should inherit from dropdown as it is, but based on my impressions of what you are doing I'd say you probably don't.
Also you might look at source from the AjaxControlToolkit as it has a similar component. Again, you can get ideas for how these specific things are handled and adapt them to your own needs.

Alternative UI control for large data lists instead of DropDownList

I am using C# and ASP.NET with version 2.0 of the .NET Framework library on this particular project. We are also using the AjaxControlToolkit. The AjaxControlToolkit should have the controls available to make a descent User Interface solution to the problem I'm facing.
I have run into this in a few projects in the last year, and used different solutions in the past. The current design of the project I just picked up, is that there is an <asp:DropDownList> control and on page load a Database call is made to get a list of values. This is then bound using DropDownList's datasource. The problem is that there is 25k items returned from the database. First thing, that's not acceptable for a user to have to scroll through tens of thousands of items. But, even more importantly, is that in every browser that it is tested on (IE 7, FF 3, Safari, and Chrome) the browser completely hangs as it is propagating the dropdownlist items.
What I'm thinking is using a Modal Popup form, which an Autocomplete Extender that allows the user to drill down to a specific company. So, in the field where they have to choose a company, they click on a "select company" icon, the modal form comes up, letting them use the autocomplete extender to select an existing company. They click "Ok" and it save the value to the field.
However, I'm an old school command line/shell/terminal guy, and my ideas of acceptable UI design might be skewed (give me a command prompt on any system, and I'm good to go). I would like the advice of those in the community here as to what they think would be an acceptable solution, or if they have faced other issues like this.
I think your idea for the autocomplete extender is the best solution. I've had this problem as well (sounds similar--a project you are taking over from somebody else). The push-back often comes from the user side. They are used to being able to select from a list of items. Unfortunately as the database grows, this becomes less and less feasible.
But when you have 0.5MB of html downloaded on the page (not including the viewstate), compromises have to be made.
Why do you think you need to create modal popup? Can't you just have the extender on your data entry page?
I had to deal with the same issue. But I ended up using a combobox with paging support and auto complete. Currently this combobox happens to be from Telerik. Its a comboBox for auto complete since you can't type into a droplist.
I agree that no user is going to want to look thru 25,000 items to find the one they want. Is there some way you can limit the data so that they drill down? Like selecting a region or type of company first and then showing the ones that match?
Multiple cascading ListBoxes, each futher refining the resultset of the previous
AJAX AutoCompleteExtender

Whats a good way to trim the GUI of a ASP.NET website?

I've been trimming the UI of our website by doing the following in the onload event of that control:
btnDelete.isVisible = user.IsInRole("can delete");
This has become very tedious because there are so many controls to check again and again. As soon as I get it all working, designers request to change the UI and then it starts all over.
Any suggestions?
One simple suggestion would be to group controls into panels based on access rights
Something I have done before has been to create a custom page class (Actually, I do this part on every project) that each ASP.NET Page inherits.
This page class contains an IsAdmin property.
I then subclass the commonly used controls that may or may not be visible between modes into custom controls, and add code to check the Pages IsAdmin property.
All this is maybe an hour of work, but if you build pages using these controls, they manage their mode automatically.
Another fun timesaving tip is if you need to flip the page in and out of readonly mode. I added a property to the main base class, and then added a custom control that renders a textbox in one mode, and a label in the other.
Again, a little bit of time on the components, but then you can create a readonly version of the page in 2 lines of code...Very worth it.
You may be thinking of the situation in the wrong way. Instead of thinking of individual controls, think of it in terms of business roles and what they have the ability to do. This goes along with grouping controls into panels for access rights. For example, maybe only managers have the ability to delete and do other things, and you have a role for managers that you check. This way if there are changes, you can just move users into different roles. Business rules should not change drastically. There will always be tweaking as new positions gain more responsibility, but thinking of it in this way should minimize the number of changes to be made.
A quick and dirty option is using the asp:loginview controls, which can be wired up to user roles.
Not as elegant as the custom page class option suggested by Jonathan, and can be a bit of a performance hit if they are all over the page.

Resources