Adding control from the Source and generate it in the designer.vb? - asp.net

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.

Related

implementing mostly repeating content in ASP.NET WebForms' controls

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>

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 - Elements disappear on the design view after updating XAML source

I think this is a bug in Visual Studio but again I'll try my chance to get a solution for this. I've recently had a problem with my form elements becoming invisible after editing the XAML source. Let's say I want to add a list item to a dropdownlist. If I do it visualy in the design view there's no problem, but if I directly change it in the XML source all the elements in one of the divs disappear and I get "Error creating control Unknown service tag 'uc1:DatePicker'". (Datepicker is my User Control and I've had a lot of headache with it.). However I can see them in the source. Each time I touch the source I have to close and reopen the aspx page.

Disable javascript in GridViews

Is there a way prevent an ASP gridview from always relying on javascript for the edit and delete LinkButtons? If I disable javascript in my browser the edit and delete commands still seem to link to "javascript: _doPostBack". (I'm using VB and .NET framework 2.0)
Thanks in advance.
You could implement the edit and delete buttons yourself using an <asp:TemplateField>. Then you are free to have them do the postback however you like, with <input type=submit> buttons, perhaps.
You are limited to smaller subset of controls when Javascript is not available. See MSDN. The postbacks function conveys to the runtime what was clicked and that is how the server side events are triggered. If you really want to develop an app without Javascript support, you will have to stay away from most server controls. The rendering is fine but any interaction (like editable grid) would be one of those controls to stay away from. You might also want to look into ASP.NET MVC framework.

Alternatives to MultiView in ASP.NET

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!

Resources