使用 Ajax Toolkit 控件创建复合控件

• 下载源代码 - 579.4 KB

引言

Ajax Control Toolkit 允许开发者创建可以在不完全重新加载页面的情况下更新网页数据的 Web 应用程序，并且包含许多具有非常有趣功能的控件：弹出面板、可调整大小的控件、浮动控件等。

通常，您希望一个控件具有其他一些控件的某些功能，因此您可以将多个控件合并到一个控件中，即 CompositeControl，从而实现这一目标。
复合控件是将多个控件组合在一起以形成新的可重用控件的控件。例如，我想创建一个控件容器，使其将所有来宾控件（如 IFrame 或其他控件）都可调整大小、可折叠和可拖动。
ResizableControlExtender、CollapsiblePanelextender、DragPanelExtender 控件将其自身的功能扩展到 TargetControlID 属性中编写的 Panel 上，因此您可以创建如下的组合

背景

这是该控件的图形表示...

... 这是在页面中构建的上述位图中描述的控件的代码。

<%--====== StyleSheet class needed by the control build in page ====--%>
...

<%-- PANEL CONTAINER --%>
<asp:Panel ID="PanelContainer" runat="server"  Visible="false" 
	style="Left:200px; Position:absolute; Top:100px;">
	<%-- PANEL CLOSE --%>
	<asp:Panel ID="PanelClose" runat="server" Height="20px">
		<asp:ImageButton ID="ImageButton1" 
		runat="server" style="cursor: hand"
		ImageAlign="Right" Height="100%" ImageUrl="~/images/close.gif"
		onclick="ImageButton1_Click" />
	</asp:Panel>

	<%-- PANEL HEADER --%>
	<asp:Panel ID="PanelHeader" runat="server" style="cursor: hand" Height="20px"
		BackImageUrl="~/images/RoundedGrayExplorer.gif">
	</asp:Panel>

	<%-- PANEL BODY --%>
	<asp:Panel ID="PanelBody" runat="server" BorderStyle="Solid" BorderWidth="1px">
		<iframe  id="ieframe" scrolling="auto" runat="server"
			src="HTMLPage.htm"
			height="100%"
			width="100%">
		</iframe >
	</asp:Panel>
</asp:Panel>

<%--====== AjaxPanelExtender Controls ============================--%>
...
<%--====== Client side script needed to the behavior ====--%>
...

现在我们将把它转换为可重新分发的复合控件。

Using the Code

为了测试在页面中构建的控件，请将 AjaxCompositePanelBuildInPage.aspx 设置为项目启动页面。
为了测试复合控件，请将 AjaxCompositePanelBuildInControl.aspx 设置为项目启动页面。

关注点

一个复合控件类 AjaxCompositePanel 在 AjaxCompositePanel.cs 文件中，继承自 CompositeControl 类，并具有一些类属性...

//This attribute gives to the control added on Visual Studio Toolbox 
//the icon of other control,View control in this case.
[ToolboxBitmap(typeof(View))]
//This attribute sets a control name displayed on the toolbox of Visual Studio.
[ToolboxData("<{0}:AjaxCompositePanel runat="server">")]
//This attribute sets a design-time rendering support class.
[Designer("AjaxCompositePanelControl.AjaxCompositePanelDesigner")]
public class AjaxCompositePanel : CompositeControl
{
    ...

... 以及一些方法属性，用于在 Visual Studio 属性窗口中的设计时行为

//Visible from Visual Studio properties windows.
[Browsable(true)]
//Property category
[Category("AjaxCompositePanel")]
//Property default value displayed on properties windows
[DefaultValue("")]
//Property description
[Description("Url of header image.")]
[Localizable(true)]
[RefreshProperties(RefreshProperties.Repaint)]
//Support to design time editors as select files URL or select color.
[UrlProperty]
[EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), 
	typeof(System.Drawing.Design.UITypeEditor))]
public string BarImageUrl
{
    ...

自定义控件的主要方法是名为 CreateChildControls 的方法，该方法可以被重写，它调用 CreateControlsHierarchy()，在其中构建子控件的树结构并将其添加到控件集合中

protected virtual void CreateControlsHierarchy()
{
...
    //Create and set PanelContainer.
    Panel DragebleResizablePanelContainer = new Panel();
    DragebleResizablePanelContainer.ID = "DragebleResizablePanelContainer";
    DragebleResizablePanelContainer.Visible = false;
    DragebleResizablePanelContainer.Attributes["style"] = "float: right";

    //Create and set PanelHeader.
    Panel DrageblePanelHeader = new Panel();
    DrageblePanelHeader.ID = "DrageblePanelHeader";
    DrageblePanelHeader.Attributes["style"] = "cursor: hand";

    //Adds PanelHeader as child to the PanelContainer controls collection.
    DragebleResizablePanelContainer.Controls.Add(DrageblePanelHeader);

    //Adds PanelContainer to the controls collection of composite control.
    Controls.Add(DragebleResizablePanelContainer);
    ...

复合控件客户端行为需要将 JavaScript 方法添加到页面...

//Adds a script block to the top of the page.
if (!Page.ClientScript.IsClientScriptBlockRegistered("clientScript"))
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    sb.Append("<script type="\"text/javascript\""></script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
	"clientScript", sb.ToString(),false);
}
//Adds a script block into the page that executes when the page 
//finishes loading but before the page's onload event is raised.
if (!Page.ClientScript.IsStartupScriptRegistered("repositioningScript"))
{
    //Page.ClientScript.RegisterStartupScript(this.GetType(), 
    //"clientScript", sb.ToString(), false);
} 

... 并且还将用于 Ajax Panel Extender 的样式表类添加到页面

protected virtual void CreateControlsHierarchy()
{        ...
	//Adds to the page header a stylesheet class
    this.Page.Header.StyleSheet.CreateStyleRule(new ResizingIFrameCssClass(), 
	this.Page, ".resizingIFrame");
    ...
}
...

// Stylesheet class
class ResizingIFrameCssClass : Style
{
    protected override void FillStyleAttributes
	(CssStyleCollection attributes, IUrlResolutionService urlResolver)
    {
        base.FillStyleAttributes(attributes, urlResolver);
        attributes[HtmlTextWriterStyle.Padding] = "0px";
        attributes[HtmlTextWriterStyle.BorderStyle] = "solid";
        attributes[HtmlTextWriterStyle.BorderWidth] = "2px";
        attributes[HtmlTextWriterStyle.BorderColor] = "#B4D35D";
    }
}

最后，关于控件设计时呈现的只言片语。
在 AjaxCompositePanelDesigner.cs 中，您可以看到 AjaxCompositePanelDesigner 类，它继承自 CompositeControlDesigner 类，以及 GetDesignTimeHtml 方法，该方法可以被重写，以检索用于在设计时呈现控件的 HTML 标记。

历史

• 2008 年 11 月 28 日：初始版本