How do I create a simple custom container control with two sections inside?
I need to create a custom ASP.NET container control that will allow me to drag additional controls into it in the VS Designer.
The last HTML it looks for is very simple.
<div id="panel1">
<div id="panel2">
</div>
<div id="panel2">
</div>
</div>
With additional drag-and-drop controls in panels 2 and 3.
I'm sure this is very simple, but I'm trying to find examples to help.
Any pointers or ideas are appreciated!
Cheers Stewart
a source to share
I've done this kind of thing in the past, and yes, from my experience at the time, there is little documentation available. Even worse, some of the documentation was incorrect or vague at the time!
So, to save you all the headaches (oh, it already starts to hurt when I just think about it: -P), here's some information you should definitely know.
Basically all controls are only for runtime use. You can attach a ControlDesigner to a control with a class definition attribute that the development environment (VS.NET IDE) will use and use it as a layer on top of your control.
Templates
Chris's suggestion to use Templates in the right direction. Your control needs to store the "content" div somewhere, and templates are the perfect solution. Make sure you get this part first. Note. Template properties can behave strangely if they have a set clause! Also, check the use of NotifyParentAttribute.
Once you have the templates in place and you can use declarative syntax in the ASPX pages to add controls and they look good, then you can start working on the designer.
For a designer, you have 2 options; easy and difficult way.
Simple design solution
Let's start with a simple path. The base ControlDesigner classes already provide the framework for displaying templates. You've probably already seen this in action, such as the GridView control and its templated fields.
Check out the following MSDN article on Creating a Template Designer .
With this simple solution, you get an automatic implementation of the smart tag (arrow to the right of the control at design time) and can select a template to edit from the dropdown list.
Complex design solution
Now, if that doesn't suit you very well, and you would like to be able to edit controls in the same way as a control panel, then you need to dig deeper. So here is a comprehensive solution using Design Designer scopes.
See an example in the EditableDesignerRegion class .
What this example does is override the CreateChildControls constructor class. Remember when I said that the designer control is a layer on top of your runtime control? So this CreateChildControls method will run after your control is implemented. What you need to do is mark the HTML element in your render view with a special designer HTML attribute. This way the developer knows which part of your rendered control should be scoped.
Now you need to instruct the IDE to assign an editor or viewer to your regions. You must do this in the GetDesignTimeHtml (DesignerRegionCollection regions) method (note the overloaded version of this method). As you can see, this method gets a set of regions. You must assign your editable viewing areas to this collection. The important thing here - and this is the poorly documented part - is that the order in this collection is very important. The value of the region attribute in your HTML refers to the index in that collection.
So now we have defined areas on our rendered output, assigned an editor or viewer to it. What follows is how to populate these regions and store the values from these regions back into our control declaration.
These two actions are handled in the GetEditableDesignerRegionContent and SetEditableDesignerRegionContent methods of the control designer. Here you can see why it is important to name the regions that you added to the collection in the GetDesignTimeHtml method. In these two methods, you get a reference to the region and using the Name property you can determine which Read / Write property of your Control's Template.
To read and write template properties, we use the ControlPersister and ControlParser magic. Persister instantiates a template from declarative ASP.NET code (HTML). The parser does the opposite; creates simple HTML from a template instance.
In a nutshell
So, it's up to you to decide if the standard template editing structure is good enough for you. If you want to have convenient editing capabilities for both editing areas in your IDE, you have to implement a comprehensive solution. Otherwise, just stick to a simple implementation. These examples will help you a lot.
a source to share
Here is a link to the MSDN article on what you are trying to do, unfortunately there is no VS designer support, so it will display correctly from the server, but not in the IDE.
A practical guide. Creating templated ASP.NET custom controls
http://msdn.microsoft.com/en-us/library/36574bf6.aspx
a source to share