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!
Related
The problem that I'm having is that the design of an .aspx has a lot of controls that a lot of things are collapsed and pretty much impossible to visual the page as it should be from the Visual Studio.
Because of that, I can't add like a CheckBoxList from the toolbox directly to the Design window next to a <label> for example.
So I have to work from the Source and add that CheckBoxList from there, let's say inside a <tr> and next to a <td> with a <label>.
<asp:CheckBoxList runat="server">
</asp:CheckBoxList>
One question I have is, why doesn't the designer.vb auto-generate (add) the CheckBoxList control unless I specify an ID to it?
After I add that control from the source, is it possible to open up the Property Window (since I wouldn't be able to find/rightclick from the Design window? And also how can I create an event for that control?
Is it possible to reorganize that .aspx design and basically rearrange everything
and make it look like when I visualize it from the browser?
Is it possible to reorganize that .aspx design and basically rearrange
everything and make it look like when I visualize it from the browser?
It seems like you come from WinForms background. Web Form Designer window won't normally match up with what we see inside a browser. So, we - web developers - do not use Designer.
Changing a markup while debugging doesn't need to recompile the application, so we just press F5 to refresh the browser. My suggestion will be not to use Designer at all, because there is no Designer Window in ASP.NET MVC.
FYI: I use Resharper which displays intelligence for events, when I partially type event name inside the source. Then when I press enter, it automatically creates the event in Code Behind file.
The original problem is how to make the most maintainable code given that I need to have a menu bar that is very similar but not identical in most WebForms.
At first glance I thought I wanted to make a placeholder in a custom user control, which was placed in a master page, then access the placeholder, putting in the unique content within the WebForm and all is happy and maintainable. After reading through the forms and through trial and error, I realize there are some problems with every solution I have tried:
Putting a placeholder control in a user control makes the placeholder and each of its contents difficult to access in the web form (relying on nested instances of FindControl("ID")), events are difficult to bubble up (I assume I have to do this when the control is created in the code behind where it is referenced) or bind (not successful yet despite referencing: http://msdn.microsoft.com/en-us/library/t4z863dh(vs.71).aspx), and the code is difficult to maintain if I want to move/rename the control.
Nesting controls gives the same problem because I want to use one control - making small modifications on many pages. If I nest then I still have to have cross-control knowledge of each other which is difficult in ASP.NET. Regardless, if I nested user controls then I would also need a unique user control per WebForm right?
Copying and pasting the code to each WebForm while simple is also repetitive and error prone.
Apparently, I shouldn't even try to inherit user controls to make unique children: How (if at all) can you make an ASP.NET UserControl inherit from another UserControl?.
I'm new to ASP.NET. Is there some general strategy I should use to make good maintainable code in this scenario?
You need to use a Master Page, and put your menu in there...
http://msdn.microsoft.com/en-us/library/wtxbf3hh(v=vs.100).aspx
Then, for a data-driven menu, try to use one of the template controls like the Repeater to bind your data.
For example, I have a query that returns Page Name and Link - I bind this to a Repeater control to produce my Menu.
<asp:Repeater runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate><li><a href='<% Eval("Link") %>'><%# Eval("PageName") %></a></li></ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
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.
I haven't seen this implemented before in ASP.NET, but am thinking about a UI that would look and act like this:
Conceptual Overview
A TabControl is loaded and the first tab contains a grid
When a row is double-clicked, a new tab is created with the record detail
The content of the tab/record detail is created by a usercontrol
Many tabs could be created, and therefore many instances of the usercontrol will be created
I know ASP.NET will rename my (runat="server") ID's for me, and that I can use jQuery or ASP.NET server-side code to work with the ID's... My concerns are:
How can I ask ASP.NET to generate a unique ID for each Nth instance of my usercontrol (to be rendered in a placeholder)
How do I actually create that extra instance of the control?
What else do I need to keep in mind?
Since I don't want postbacks I'm considering basing my implementation off of ComponentArt's Callback Control, and using ASP.net usercontrols to achieve this effect. This will allow me to do most things that require a postback, but won't refresh all the elements on a page... just the section that contains the user control. That being said, I'm not tied to a particular implementation.
You should look into the Page.LoadControl method. It works nicely and as far as I remember you put placeholders on your page and load the controls into the PlaceHolders, that's how you control the ids.
One thing that doesn't work out so well with this approach is when your control raises events that your Page object has to handle. If your control is selfcontained however you shouldn't have a problem.
This might help you get started:
http://www.codeproject.com/KB/aspnet/LoadingUSerControl.aspx
If they are different, under what circumstances should we decide to use either approach?
Also, what is the advantage of ascx over aspx?
user controls are a form of custom control, that gives you a visual designer. They are ideal for use when you want a reusable control within the same web site. (It is possible to create and package user controls as seperate assemblies but that is beyond the scope of this question and I know has been asked on SO).
A custom control is typically used to refer to a Web Control, or a Composite Control which is specialized form of a web control. These controls have no designer and are usually implemented in seperate projects from your web allowing them to be reused accross many sites.
Now your second question, ASCX and ASPX are two different things. ASCX is the extension for a User Control, where as ASPX is an ASP.Net Page. You cannot use an ASCX by itself it must be placed onto an ASPX or Master page.
One way I like to use user controls is I have for example a very complex page which have 7 tabs, 5 of those have grids, of those grids three of them are identicle. Well what I can do is create a seperate user control for the content of the tabs, this now reduces the code I need down significantly (Since three grids are identicle except for the data).
Further more it allows multiple to work on various parts of the page, and it helps me keep everything straight since I am reducing the complexity of the page. You do not use User Controls instead of Pages, you use them in conjuction with a page.
Edit
You do not use ascx over aspx. You use ascx to complement. For example on my site every page has the same footer, but I don't want every page to derive from a single master page. I can create my footer as an acsx control and put it in each of my master pages.
Another example, I have a form that lets a user enter three different date ranges. (And we have other forms). So I put the logic to enable a calender button, and a text box that when clicked on opens up the calender, in a user control. I can then reuse that user control in all my aspx pages.
Custom controls are control build entirely in code. The pro is that you can put them in libreries, add an icon to the toolbox and other fine control.
User controls are more easy to do, and in general is a way to encapsulate things to simplify other pages or when you need to use the same markup in several pages.
The advantage of controls over regular aspx pages is that you only need to do some part of the markup (not the whole page)
User Controls/Composite controls
User controls that are made up of other ASP.Net or custom controls. They are usually quite straight forward and can be created quite quickly. They Are generally not shared across projects however there are some tricks that can allow you to do this.
Custom controls
Custom controls are controls that you implement the UI by creating everything from the HTML output to design time support. Custom controls take much longer to make. You must use either Web.UI.Control or inherit from a sub control (Textbox for example). Custom controls are compiled to binary format to allow them to be distributed more easily. Since they are compiled they can be referenced from the toolbox in visual studio.
There are 2 main advantages to using a control in an aspx page. Encapsulation of logic and reuseability.