EditorPart over a User Control webpart and moving EditorPart along with a webpart

• Download source - 272 Kb

Problem

Standard ASP.NET controls (such as the Textbox and GridView controls), Web User Controls, and even custom controls, can be used as Web Parts. When you treat a standard control as a Web Part, the control is represented in the Web Part framework with the GenericWebPart class.

I have a situation where I have to use user controls as web parts and able to edit them with the custom editor parts, so that I can utilize our organization's existing user controls as web parts. But I was unable to edit them with the custom editor parts, as we can’t access user controls from the editor part directly.

I walked through most of the .NET forums, and I couldn’t find any post about “Creating User control web parts with custom Editor Parts”, so I decided to write a small article to achieve this functionality.

Solution

To implement this functionality, I am using the following:

1. A Web UserControl
2. The BaseUserControl class
3. CustomEditorPart
4. A Web page

The high level picture of the architecture of the mechanism which I have used to implement the solution, is whown below:

BaseUserControl.cs

This is a simple class which inherits System.Web.UI.UserControl. This class will have all the properties which we would like to edit in an 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

A simple user control that has a Label control to display messages. At runtime, this user control will be rendered as a generic web part. In order to attach editor parts for this user control, when we click the edit verb, we have to implement the IWebEditable interface.

<%@ 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

Here is the implementation of the WelcomeEditorPart. This class inherits from EditorPart. The important things in this class are ApplyChanges() which saves the edited value, SyncChanges() which retrieves value from the webpart to edit, and the WebPartToEdit property which returns the currently edited webpart.

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);

    }
}

As we are using GenericWebpart (user controls are runtime rendered as GenericWebpart), first we have to get a reference to GenericWebPart. Then, with GenericWebPart’s ChildControl property, we can access the currently edited webpart (user control).

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

Moving EditorPart along with the WebPart

By default, the editor zone will be displayed at a fixed location wherever we place it. Here is a workaround to move the editor zone to the location of the currently edited webpart. Add the JavaScript below to the Head section of the webpage where we have placed our user controls.

<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>

Sample design layout of the web page:

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;
        }
    }
}

Things that can be added to improve

• Implementing personalization.

Sample Screens