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.
Related
I would like to use more client-side scripts on my aspx page. I'm not an expert in this area and I'm a bit overwhelmed at the options. First, let me spell out what the page is displaying and then what I am trying to accomplish.
The Page:
The page containts a GridView (on the left-hand side) which is pulling data from a DB for different types of products a user can request. For example's sake, let's say we have table, chair, and couch.
What I want to Accomplish:
When the user clicks on a row of the GridView (let's say "table"), the ID of that selected row and the title is copied over to the right-hand side of the page into an accordion pane (or a similar display). The header of the accordion pane will be "Product: Table". When the accordion is expanded, the user has the option to specify the color and size of the table (via check boxes, text boxes, etc.). So essentially this is shopping cart functionality on the right-hand side of this page.
I should also point out I would like a "remove" button for each pane in the accordion so it can dynamically be deleted.
What is the best option for this situation? Should I use jQuery, AJAX (AJAX Control Toolkit?), a combination or a different tool? Thank you in advance for your help.
I would use knockoutJs because it's easy to use, has reasonable documentation and good online support. At a glance it looks easy than backbone as well (I don't know backbone).
I would not use the AJAX Control Toolkit unless I had too. I HATE the ajax toolkit as everything happens 'by magic' and once you step off the path shown in the simple demo's you are dead.
Knockout does require a little investment of time, but I consider it a great framework for web apps that require moderate javaScript use.
The website I'm building contains a large number of views which will be displayed on the same place but hidden or shown according to how the user navigates the menu.
It gets quite messy in visual studios design view when you have a MultiView with 10 different views in it. I've already separated the content of each view in several user controls. But is there an alternative to MultiView?
I generally just use a Panel or Placeholder and toggle visibilities manually. But then I don't use the VS designer either...
Assuming you're using ASP.NET webforms here...
This is another reason to invest in some powerful web controls like the Telerik ASP.NET control suite.
You could use their RadTabStrip control along with the RadMultiPage control.
Example here: http://demos.telerik.com/aspnet-ajax/tabstrip/examples/multipage/loading-external-content/defaultcs.aspx
You can specify a ContentUrl for each RadPageView which allows you to separate each view into separate aspx files.
This simplifies your solution by separating each view into their own page and increases performance as RadPageView content is requested only when viewed initially.
The way that I would do this would be to have a placeholder on the page and dynamically add controls to it as needed.
From what you have said it looks like the user navigates a menu and this decides which view to display in the MultiView control...
I would so something like this
ASPX file:
<asp:PlaceHolder id=phContentContainer" runat="server"></asp:PlaceHolder>
Code Behind
switch (MenuSelection)
{
case "LOGIN" //Display the login control
{
ucLoginUserControlType loginControl = (ucLoginUserControlType)LoadControl("~/UserControls/ucLoginUserControlType.ascx");
phContentContainer.Controls.Add(loginControl);
}
}
Obviously you will want to work the codebehind to be a bit more efficient and cleaner than the above would be with 10 views... but you get the idea.
This keeps your aspx page simple and makes future control additions easier to implement.
Hope this helps, I have typed the code from memory, so some syntax may not be right - if you cant get it going give me a shout and Ill dig out some examples of when I have done this.
Good luck!
I'm writing an ASP.NET app in which a table of objects is created by the user client-side.
I envisage them clicking "Add item" and a new 'row' is created in the table with textboxes for them to enter their stuff.
I can do this fine by adding HTML with jQuery. The problem is that one of the fields in the row for the user to fill in needs to be a colour picker.
I have an ASP.NET web user control for my colour picker. How do I add an instance of it to the page within my html row? Or am I barking up the wrong tree here - is there a better way of encapsulating the functionality of my colour picker so that it can be put on every row?
No, you can't add a server-side asp.net control to a page that has already been rendered using client-side techniques (aka Javascript)
Two options:
Firstly, switch to using a client-side colour picker. You can then have the data from this included in the post-back by dynamically adding hidden fields to your form.
Secondly, have a single editing panel which includes your colour picker. Users then select a row to edit, which updates the edit panel with current values etc. Values are stored in hidden fields created when you dynamicaly add rows to your table, and included in the post-back
Without seeing your UI, I can't comment as to which would be best. The asp.net control might look nicer, but it might be difficult to work into your design. A pure client-side solution might fit your designer better, but might not look so good. You also need to consider what happens if / when a users adds lots of rows (this might be 10, 50 or 100 depending on your app /code). Lots of dynamically added controls (the first solution) might cripple the performance of the page.
I'm not sure what version of ASP.NET you're using, one approach that would work is to turn your usercontrol into a custom control. You'd then need to implement ICallbackEventHandler (the first way to do Ajax on asp.net); for sure it's a bit more work but it does give you a good level of control.
Alternatively, you could try this
You can't add ASP.NET controls with jQuery (at least not easily). You could, however, perform a postback when you need to add the colour picker to the row.
In the code in front declaratively define a template of what the new row should look like, then hide it using css.
When the user clicks the 'Add new button' select and cloen the contents of your hidden template and write that into your target div. Just make sure to remove the hiding css when you do this.
You will, of course, just be copying the rednered html of your server controls, but htis apporach may give you a quick and easy way of doing what you need
I've always wondered what is the best way to add a new item to html-select in a website.
Yes, this may sound silly but it is a great problem from the usability perspective. I don't want the user to be taken to a new page every time they need to add new item to a html-select.
I like the way Google Reader and Gmail handle this problem in there "add folder" and "add label" functionality. I would like to mimic that but i have no clue how they did that.
I'm using jQuery, so any reference to plugins, code examples or tutorials are welcome.
I would like it to be as modular as possible so i can reuse it anywhere.
I'm using ASP.NET 3.5 web-forms, Microsoft Access 2003, jQuery, IIS 5 and Win XP Professional as web server.
Thanks.
there's a jquery select plugin that might help you with this. I've manipulated select lists client side and had no problem with subsequent form-submits but you'd need to do some experiments w asp.net
The standard technique of doing this is called ajax, which basically means replacing only parts of the page. JQuery ajax and maybe a tutorial should get you going.
A common mistake for this scenario is to add the item on client (using jQuery or plain javascript). It may look that it works until the next post-back. Unfortunately the Asp.NET post-back model does not allow to alter the controls contents on client side only. So basicaly there are two choices:
Use ajax (the simplest would be to
use an UpdatePanel)
Make a normal
postback to add the item (simple and
fast to code, if performance is not
an issue - for intranet applications
for example)
I've got a web application that I'm trying to optimize. Some of the controls are hidden in dialog-style DIVs. So, I'd like to have them load in via AJAX only when the user wants to see them. This is fine for controls that are mostly literal-based (various menus and widgets), but when I have what I call "dirty" controls - ones that write extensive information to the ViewState, put tons of CSS or script on the page, require lots of references, etc - these are seemingly impossible to move "out of page", especially considering how ASP.NET will react on postback.
I was considering some kind of step where I override Render, find markers for the bits I want to move out and put AJAX placeholders in there, but not only does the server overhead seem extreme, it also feels like a complete hack. Besides, the key element here is the dialog boxes that contain forms with validation controls on them, and I can't imagine how I would move the controls and their required scripts.
In my fevered imagination, I want to do this:
AJAXifier.AJAXify(ctlEditForm);
Sadly, I know this is a dream.
How close can I really get to a quick-and-easy AJAXification without causing too much load on the server?
Check out the RadAjax control from Telerik - it allows you to avoid using UpdatePanels, and limit the amount of info passed back and forth between server and client by declaring direct relationships between calling controls, and controls that should be "Ajaxified" when the calling controls submit postbacks.
I recommend that you walk over to your local book store this weekend, get a cup of coffee and find jQuery in Action by Manning Press. Go ahead and read the first chapter of this 300 page book in the store, then buy it if it resonates with you.
I think you'll be surprized by how easy jQuery lets you perform what your describing here. From ajax calls to the server in the background, to showing and hiding div tags based on the visitor's actions. The amount of code you have to write is super small.
There are a bunch of good JavaScript libraries, this is just one of them that I like, and it really is easy to get started. Start by including a reference to the current jQuery file with a tag and then write a few lines of code to interact with your page.
Step one is to make your "dirty" pieces self contained user controls
Step two is to embed those controls on your consuming page
Step three is to wrap each user control tag in their own Asp:UpdatePanel
Step four is to ensure your control gets the data it needs by having it read from properties which check against the viewstate for pre-existing values. I know this makes your code rely on ugly global variables but it's a fast way to get this done.
Your mileage may vary.