如何创建一个简单的自定义容器控件，里面有 2 个 Div？
我希望创建一个自定义 ASP.NET 容器控件，它允许我在 VS 设计器中将更多控件拖入其中。
我正在寻找的最终 HTML 非常简单。
<div id="panel1">
<div id="panel2">
</div>
<div id="panel2">
</div>
</div>
可以将其他控件拖到面板 2 和 3 中。
我确信它非常简单，但我正在努力寻找有帮助的示例。
任何指示或想法表示赞赏！
干杯 斯图尔特
Im looking to create a custom ASP.NET container control that will allow me to drag further controls into it within the VS designer.
The final HTML that im looking for is very simple..
<div id="panel1">
<div id="panel2">
</div>
<div id="panel2">
</div>
</div>
With additional controls being able to be dragged into panels 2 and 3.
Im sure its very simple but im struggling to find examples that will help.
Any pointers or ideas are appreciated!
Cheers
Stuart
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我过去做过这样的事情，是的，根据我当时的经验，没有太多可用的文档。 更糟糕的是，当时一些文档不正确或含糊不清！
所以，为了让你免去所有的麻烦（哎呀，当我一想到它就已经开始受伤了:-P），这里有一些你绝对需要知道的信息。
基本上所有控件都仅供运行时使用。 您可以使用类定义上的属性将 ControlDesigner 附加到控件，设计时环境 (VS.NET IDE) 将加载该控件并将其用作控件顶部的层。
模板
克里斯关于使用模板的建议是正确的。 您的控件需要在某处存储 div 的“内容”，而模板是完美的解决方案。 确保你一开始就把这部分弄对了。 注意：如果模板属性有 set 子句，它们可能会表现得很奇怪！ 此外，还要检查 NotifyParentAttribute 的使用。
当您准备好模板，并且可以在 ASPX 页面中使用声明性语法来添加控件，并且它们呈现良好时，您就可以开始使用设计器了。
对于设计师来说，你有两个选择： 简单和复杂的方法。
简单的设计器解决方案
让我们从简单的方法开始。 ControlDesigner 基类已经提供了显示模板的框架。 您可能已经在实践中看到过这一点，例如在 GridView 控件及其模板字段中。
查看以下关于创建模板的 MSDN 文章控件设计器。
通过这个简单的解决方案，您可以自动实现智能标记（设计时控件右侧的箭头），并且可以从下拉列表中选择要编辑的模板。
复杂的设计器解决方案
现在，如果这对您来说并不真正令人满意，并且您希望能够像面板控件一样编辑控件，那么您必须深入挖掘。 这是使用控制设计器区域的复杂解决方案。
请参阅 EditableDesignerRegion 类中的 示例中的示例。
此示例的作用是重写设计器类的 CreateChildControls。 还记得我说过设计器控件是运行时控件之上的一层吗？ 因此，此 CreateChildControls 方法将在控件实现后运行。 您要做的就是使用特殊的设计器区域 HTML 属性来标记渲染输出中的 HTML 元素。 通过这种方式，设计者就知道渲染控件中的哪一部分应该是区域。
现在您必须指示 IDE 将编辑器或查看器分配给您的区域。 您必须在 GetDesignTimeHtml(DesignerRegionCollection Regions) 方法中执行此操作（请注意此方法的重载版本）。 如您所见，此方法接收区域的集合。 您必须将可编辑的视图区域分配给该集合。 这里重要的是 - 这是记录得很糟糕的部分 - 是这个集合中的顺序非常重要。 HTML 中区域属性的值指的是该集合中的索引。
因此，现在我们已经在渲染输出中定义了区域，并为其分配了编辑器或查看器。 接下来是如何填充这些区域并将这些区域的值存储回我们的控件声明中。
这两个操作在控件设计器的 GetEditableDesignerRegionContent 和 SetEditableDesignerRegionContent 方法中处理。 在这里您会明白为什么在 GetDesignTimeHtml 方法中命名已添加到集合中的区域很重要。 在这两种方法中，您接收区域引用，并通过它的 Name 属性，您可以确定要读/写的控件的哪个 Template 属性。
为了读取和写入模板属性，我们使用 ControlPersister 和 ControlParser 的魔力。 持久化程序从声明性 ASP.NET (HTML) 代码创建模板实例。 解析器以相反的方式完成这项工作； 从模板实例创建纯 HTML。
简而言之，
因此，由您决定标准模板编辑框架是否足够适合您。 如果您希望 IDE 中的两个编辑区域都具有精美的编辑功能，那么您将必须实现复杂的解决方案。 否则就坚持简单的实现。 提到的例子会对你有很大帮助。
I've done such things in the past, and yes, from my experience at that time there is not much documentation available. Even worse, at that time some of the documentation was incorrect or vague!
So, to save you all the headaches (ouch, it already starts to hurt when I just think of it :-P), here is some information you definitely need to know.
Basically all controls are for run-time use only. You can attach a ControlDesigner to a control with an attribute on the class definition, which the design time environment (VS.NET IDE) will load and use as a layer on top of your control.
Templates
Chris' suggestion to use Templates is in the right direction. Your control needs to store somewhere the 'content' of the div's, and Templates are the perfect solution. Make sure you get this part right at first. Note: template properties can behave weird if they have a set clause! Moreover, check the use of NotifyParentAttribute also.
When you've got the templates in place, and you can use declarative syntax in ASPX pages to add controls, and they render well, then you can start working on the designer.
For the designer you have 2 options; the easy and complex way.
Easy designer solution
Let's start with the easy way. The base ControlDesigner classes already provide a framework to show templates. You have probably already seen this in action, like in the GridView control and its template fields.
Check out the following MSDN article on creating a template control designer.
With this easy solution, you get an automatic implementation of the smart tag (the arrow to the right of a control during design-time), and can select a template to edit from a drop down list.
Complex designer solution
Now, if this is not really satisfying for you, and you would like to be able to edit controls just like a Panel control, then you have to dig deeper. So here is the complex solution using Control Designer Regions.
See the example in the example in the EditableDesignerRegion class.
What this example does, is overriding the CreateChildControls of the designer class. Remember I said the designer control is a layer on top of your run-time control? So this CreateChildControls method will run after your control's implementation. What you have to do, is mark a HTML element within your render output with a special designer region HTML attribute. In this way, the designer knows what part in your rendered control should be a region.
Now you have to instruct the IDE to assign a editor or viewer to your regions. You have to do this in the GetDesignTimeHtml(DesignerRegionCollection regions) method (notice the overloaded version of this method). As you can see, this method receives a collection of regions. You have to assign your editable of view regions to this collection. Important here - and this is the badly 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 this collection.
So, now we have defined regions in our rendered output, assigned a editor or viewer to it. Next up is how to fill these regions and store the value from these regions back into our controls declaration.
These two actions are handled in GetEditableDesignerRegionContent and SetEditableDesignerRegionContent methods of the control designer. Here you see why it's important to name the regions that you've added to the collection in the GetDesignTimeHtml method. In these two methods you receive the region reference and by it's Name property you could determine which Template property of your control to read/write.
To read and write the template properties we use the magic of the ControlPersister and ControlParser. The persister creates an template instance from declarative ASP.NET (HTML) code. The parser does the job the other way around; creates plain HTML from a template instance.
In a nutshell
So it's up to you to decide whether the standard template editing framework is good enough for you. If you want to have fancy edit capabilities for both of your edit regions in your IDE, then you will have to implement the complex solution. Otherwise just stick with the simple implementation. The examples mentioned will help you a lot.
这是关于您想要执行的操作的 MSDN 文章的链接，不幸的是，没有 VS 设计器支持，因此它可以从服务器正确呈现，但不能在 IDE 中正确呈现。
如何：创建模板化 ASP.NET 用户控件
http://msdn.microsoft.com/en-us/library/36574bf6。 ASPX
Here is a link to a MSDN article regarding what you are trying to do, unfortunently there is no VS designer support so it renders correctly from the server but not in the IDE.
How to: Create Templated ASP.NET User Controls
http://msdn.microsoft.com/en-us/library/36574bf6.aspx