Click here to Skip to main content
Click here to Skip to main content

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

, 17 Jan 2006
Rate this:
Please Sign up or sign in to vote.
How to access User Controls from the EditorPart directly, and how to move EditorParts at runtime.

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

V Sridhar Chary
Web Developer
India India
No Biography provided

Comments and Discussions

 
QuestionI had some clarification regarding this article Pinmembervignesh9572-May-14 18:20 
GeneralThis is what I was looking for Pinmemberr_maiya17-Feb-09 12:54 
Generaldatabase to get values Pinmemberstanz911-Nov-07 6:55 
GeneralSharepoint portal PinmemberBrave_Gass4-Oct-07 21:44 
QuestionHow to get drag and drop to work in Firefox PinmemberBig Dog22-Aug-07 8:43 
GeneralThank you very much, Mr. Chary PinmemberBig Dog22-Aug-07 8:23 
General&amp;amp;#35874;&amp;amp;#35874; THS U [modified] PinmemberXuShiHao31-May-07 0:16 
I know little in English
虽然看不懂你写的内容,但是代码还是能读懂一点点,第一次接触2005。以后希望能多多交流
My mail Is xuaimin0909@163.com
 

 

-- modified at 6:21 Thursday 31st May, 2007
 
I know little in English
I'm Chinese

GeneralThanks for your code PinmemberJos Branders29-Jan-07 4:24 
Generalgood Pinmemberpaofu14-Dec-06 22:54 
QuestionCannot get it to work Pinmemberj.channon24-May-06 1:50 
GeneralThanks Pinmembersamuel.hs.lo20-Apr-06 1:03 
GeneralThere was an Exception Pinmemberwalid100113-Mar-06 19:19 
GeneralRe: There was an Exception Pinmemberkbio15-Sep-06 0:02 
Generalout of date Pinmemberkisoft28-Jan-06 11:59 
GeneralRe: out of date PinmemberV Sridhar Chary31-Jan-06 22:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 17 Jan 2006
Article Copyright 2006 by V Sridhar Chary
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid