ASP.Net container control with multiple control collections - asp.net

I've been trying to create a special kind of fieldset. Which does all kind of fantastic things, but mainly collapse and maintain state. Also the two parts of the fieldset (in the legend, and in the rest) must be available to code behind (declaratively).
The code in the consuming page or control should look something like this:
<myTagPrefix:Fieldset>
<myTagPrefix:Legend>[controls here should be available in codebehind]</myTagPrefix:Legend>
<myTagPrefix:Content>[controls here should be available in codebehind]</myTagPrefix:Content>
</myTagPrefix:Fieldset>
Or
<myTagPrefix:Fieldset>
<Legend>[controls here should be available in codebehind]</Legend>
<Content>[controls here should be available in codebehind]</Content>
</myTagPrefix:Fieldset>
Which would produce more-or-less the following HTML (excluding the magic collapsing and state-maintaining code):
<fieldset>
<legend>[result of rendered legend controls]</legend>
[result of rendered legend controls]
</fieldset>
I've looked into a templated control, exposing template container via properties marked as 'TemplateContainer', which works nice, except for the fact that the code behind cannot access the controls in the template anymore.
I also looked into inheriting a container control like panel, and override the render methods for the begin- and end-tag, which is also nice, except for that it can contain only one control collection, while this fieldset control should have two (the controls in the legend and the controls in the rest fieldset). This could be overcome by exposing the text of the legend as a property of the fieldset, but to keep things complicated, text is not the only thing to be displayed in the legend. (for instance: images and buttons can be displayed too).
This question can be seen more abstractly of course, I'm basically asking for a container control with multiple child control collections.
When I tried to figure out what to compare this with, the functionality comes close to a MultiView; a MultiView can only contain controls of Type 'View', and the controls of a View are available in code-behind. The fact that a MultiView does not restrict the number and uniqueness of its childcontrols, and my control should (a maximum of one legend, and one content element) is something I could live with ... for now ;)
Does anyone have an idea how the MultiView was built? Is there a trick I'm overlooking? Any help or suggestion would be appreciated.

Related

How to hide and display some of the text boxes in a form using boolean value

In my application there is two types of registration. Business type and individual type. Business type has some extra fields to be filled. I dont want to use two forms.
What I want is When the user clicks on Individual reg.. , some text boxes will be hidden and when Business type user clicks on the radio button every field should appear. I dont want to use jquery. How can we achieve this in asp.net mvc4
You can do something like below without Javascript.
Assuming your controls are inside div's, and two css classes (div-visible, div-hidden) are defined accordingly.
<div class="#(Model.IsBusinessType?"div-visible":"div-hidden")">
//Business controls
</div>
<div class="#(Model.IsBusinessType?"div-hidden":"div-visible")">
//Individual controls
</div>
I think there are at least three approaches you can take depending on a few factors...
1) Basic Javascript (if you're not going to do this kind of thing more than once/often in your project)
document.getElementById("yourID").style.display='none'...'block'... and so on
2) jQuery - if you need this kind of thing a little more often, plus all the other great things that jQuery can do
look up jquery hide() and show() functions - pretty easy to do ('#yourID').hide()...show()
3) Knockout.js - a more comprehensive way to bind data client side and can easily do what you describe, but does so much more than this too - more of a learning curve, but great tool if you need significant client-side functionality like this - probably overkill if you don't need much more than you describe.

Designing Custom Drop Down with mulitple rows and columns

I have a requirement like for the drop down as shown. Could any one help me in achieving this.
Briefing:
On click of the button a pane should be opened which contains rows and columns containing text, on click of it appropriate action need to take place. The source can be dynamic too....
There are many techniques for acheiving this design. You could do it purely with html and css by having an image that looks like a dropdown popup an absolutely positioned div underneath. Or you could use the asp.net ajax control toolkit control called "PopupControl" that essentially abstracts all the html/css away allowing you to just specify a target panel. There are also various jquery plugins, here is one from abeatifulsite.

How do you force an asp:Panel to overflow to the right when dynamically adding controls to a web site?

I'm trying to dynamically add controls to an asp:Panel on a web site so that they all appear on the same line. I have a set width, but when I add overflow:auto they still continue to be added on the next line when they run out of space. Is there a way to fix this?
Edit: I think I need something like the flowLayoutPanel for windows forms
Are your controls based on panel controls? Then this is normal behavior. Panels are usually generated as <div/> tags, and <div/> tags start on a new line by default.
Without actual HTML as a base I can't give you example code, but I suspect in order to do what you want, you're going to have to explore the display attribute in CSS. You can find out more about that here.

Asp.net treview image padding

I have a treeview that I am creating dynamically from xml (via a web service) and I have it populating and formatting mostly the way I want. However, the one thing that I'm still having some difficulty with is being able to manipulate some of the items within each element of the treeview. Sepcifically, each of the image that I'm using to represent the various node levels. From the source it looks like it's just an image tag in an a tag, which in turn is within at td. However none of these have classes associated with them. Is there a standard way of manipulating spacing or formatting within each node of a treeview? Searching hasn't been very successful but maybe I'm not looking for the right thing...
Since you've noticed the hideous markup that some of the ASP.NET server controls produce, check out the CSS Friendly Control Adapters. Rather than writing out nested tables, the control adapters will render markup that is much easier to work with.
Here is a sample output from a TreeView control. The li elements have classes which you can use when styling their child elements.

Automatically mark ASP.Net controls which have a RequiredFieldValidator on them

Is there a clean and centralized way to automatically designate a background color or other CSS property for ASP.Net controls (i.e. a TextBox) with an enabled RequiredFieldValidator?
Currently I have manually set the background color of required controls to yellow. I would like to replace that with a central method so if the client requests a different color or marker or if a field's status changes from required to not or vice versa, I won't miss any of the controls.
Thanks
Update
This site is pre-compiled. Can something append a Css Class or other standards-compliant flag to items in the ControlToValidtate property at compile time?
Why not add a css class of required. You can have multiple classes on a single control by space delimiting them so imagine an input field which takes a number:
Now I can have two classes one which right aligns the text and one which handles the required field requirements.
Edit
One option before the page is rendered to walk through each control in the page, and if it's a required field validator, then find it's corresponding control and set the css property; however, this is a lot of work for somethign which you can tackle at design time.

Resources