在用户控件 WebPart 上方的 EditorPart 以及移动 EditorPart 和 WebPart

V Sridhar Chary

4.83/5 (14投票s)

2006年1月17日

2分钟阅读

90445

819

如何直接从 EditorPart 访问用户控件，以及如何在运行时移动 EditorPart。

下载源代码 - 272 Kb

问题

标准的 ASP.NET 控件（如 Textbox 和 GridView 控件）、Web 用户控件，甚至自定义控件，都可以用作 Web 部件。当您将标准控件视为 Web 部件时，该控件在 Web 部件框架中由 GenericWebPart 类表示。

我遇到一种情况，必须将用户控件用作 Web 部件，并能够使用自定义编辑器部件对其进行编辑，以便我可以利用我们组织现有的用户控件作为 Web 部件。但我无法使用自定义编辑器部件对其进行编辑，因为我们无法直接从编辑器部件访问用户控件。

我浏览了大部分 .NET 论坛，但找不到任何关于“使用自定义编辑器部件创建用户控件 Web 部件”的帖子，因此我决定写一篇小文章来实现此功能。

解决方案

为了实现此功能，我使用了以下内容

一个 Web UserControl
BaseUserControl 类
CustomEditorPart
一个 Web 页面

下图显示了我用来实现该解决方案的机制的高层架构图

BaseUserControl.cs

这是一个简单的类，它继承自 System.Web.UI.UserControl。此类将拥有我们希望在 EditorPart 中编辑的所有属性。

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public class BaseUserControl : System.Web.UI.UserControl
{
    private string _myText;
    private string _myColor;
    public BaseUserControl()
    {
        
    }

        public string MyText
    {
        get { return _myText; }
        set { _myText = value; }
    }

        public string MyColor
    {
        get { return _myColor; }
        set { _myColor = value; }
    }
}

WebUserControl.ascx

一个简单的用户控件，它有一个 Label 控件来显示消息。在运行时，此用户控件将呈现为通用 Web 部件。为了为此用户控件附加编辑器部件，当我们单击编辑动作时，我们必须实现 IWebEditable 接口。

<%@ Control Language="C#" AutoEventWireup="true" 
           CodeFile="WelcomeUserControl.ascx.cs" 
           Inherits="WelcomeUserControl" %>
<asp:Label ID="Label1" runat="server" 
       Text="Welcome to India."></asp:Label>

WebUserControl.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;

public partial class WebUserControl : BaseUserControl,IWebEditable
{
    protected void Page_Load(object sender, EventArgs e)
    {
      
        base.MyColor = Label1.ForeColor.ToString();
        
    }
    protected void Page_Prerender(object sender, EventArgs e)
    {
        Label1.ForeColor = Color.FromName(base.MyColor);
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        GenericWebPart gwp = Parent as GenericWebPart;
        if (gwp != null)
        {
            gwp.Title = "Usercontrol webpart2";
        }
    }

    #region IWebEditable Members

    public EditorPartCollection CreateEditorParts()
    {
        ArrayList editorArray = new ArrayList();
        CustomEditorPart edPart = new CustomEditorPart();
        edPart.ID = this.ID + "_customPart1";
        editorArray.Add(edPart);
        EditorPartCollection editorParts =
          new EditorPartCollection(editorArray);

        return editorParts;
    }

    public object WebBrowsableObject
    {
        get { return this; }
    }

    #endregion

}

WelcomeEditorPart.cs

这是 WelcomeEditorPart 的实现。此类继承自 EditorPart。此类中的重要内容是 ApplyChanges()（用于保存编辑后的值）、SyncChanges()（用于从 Web 部件检索要编辑的值）以及返回当前编辑的 Web 部件的 WebPartToEdit 属性。

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;



public class WelcomeEditorPart : EditorPart
{
    private TextBox _txtWelcome;

    public WelcomeEditorPart()
    {
                this.Title = "Welcome EditorPart";
    }

    public override bool ApplyChanges()
    {
        EnsureChildControls();
        GenericWebPart oPart = (GenericWebPart)WebPartToEdit;
        BaseUserControl control = (BaseUserControl)oPart.ChildControl;
        control.MyText = _txtWelcome.Text;

        return true;
    }

    public override void SyncChanges()
    {
        EnsureChildControls();
        GenericWebPart oPart = (GenericWebPart)WebPartToEdit;
        BaseUserControl control = (BaseUserControl)oPart.ChildControl;
        _txtWelcome.Text = control.MyText;

    }

    protected override void CreateChildControls()
    {
        Controls.Clear();

        _txtWelcome = new TextBox();
        Controls.Add(_txtWelcome);

    }
    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write("Modify text");
        writer.Write(" ");
        _txtWelcome.RenderControl(writer);

    }
}

由于我们使用 GenericWebpart（用户控件在运行时呈现为 GenericWebpart），因此我们必须首先获取对 GenericWebPart 的引用。然后，通过 GenericWebPart 的 ChildControl 属性，我们可以访问当前编辑的 Web 部件（用户控件）。

GenericWebPart oPart = (GenericWebPart)WebPartToEdit;
BaseUserControl control = (BaseUserControl)oPart.ChildControl;
control.MyText = _txtWelcome.Text;

随 Web 部件移动 EditorPart

默认情况下，编辑器区域将显示在我们放置它的固定位置。以下是一种将编辑器区域移动到当前编辑的 Web 部件的位置的解决方法。将下面的 JavaScript 添加到我们放置用户控件的网页的 Head 部分。

<script language="javascript" type="text/javascript">
function MoveEditorPart()
{
    if(document.getElementById('EditorZone1')!= null)
    {
        var control = document.getElementById('Hidden1').value;
        var oTr = document.getElementById('WebPart_'+control).insertRow(1);
        var oTd = oTr.insertCell();
        oTd.appendChild(document.getElementById('EditorZone1'));
    }
}
</script>

网页的示例设计布局

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
        WebPartZone1.HeaderText = " ";
        WebPartZone2.HeaderText = " ";
       
    }

    protected void Page_Prerender(object sender, EventArgs e)
    {
        if (WebPartManager1.SelectedWebPart != null)
        {
            Hidden1.Value = WebPartManager1.SelectedWebPart.ID;
        }
    }
}

可以添加以改进的内容

实现个性化。