How to create Custom Editor Part to Web Parts in ASP.NET

Introduction

Through this article,i will show to you how to create Custom Editor Part to Web Parts in ASP.NET.The ASP.NET there are different types of mode in Web parts.The mode are listed below.

• Browse
• Design
• Catalog
• Edit
• Connect.

This article will focus the EDIT MODE of the web part.let's create a class for edit.which will contain all the properties which you want to edit in your web part.Like say I have one Web Part on my page. And it contains two Labels. Both are like Welcome notes.But I have taken them as user control in my main Web Part page.

The declaration of WelcomeUserControl as like below,

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

Now we have to write server side code to allow edit mode of this web part.

C# Code

public partial class WelcomeUserControl : BaseUserControl, IWebEditable
    {
        WelcomeEditorPart part1 = new WelcomeEditorPart();

        protected void Page_Load(object sender, EventArgs e)
        {
            base.MyText = Label1.Text;
            base.MyText2 = Label2.Text;
        }

        protected void Page_Prerender(object sender, EventArgs e)
        {
            Label1.Text = base.MyText;
            Label2.Text = base.MyText2;
        }

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

        #region IWebEditable

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

            return editorParts;
        }

        public object WebBrowsableObject
        {
            get { return this; }
        }

        #endregion IWebEditable
    }

You can see that the page inherits class named BaseUserControl and an interface named IwebEditable.You have to take one class file and name it BaseUserControl. (ie BaseUserControl.cs). The file will automatically be located in app_code folder of your application.

C# Code

public class BaseUserControl : System.Web.UI.UserControl
{
    private string _myText;
    private string _myText2;
    private string _myColor;
    private string _HeaderText;

    public BaseUserControl()
    {
    }

    [Personalizable(), WebBrowsable()]
    public string MyText
    {
        get { return _myText; }
        set { _myText = value; }
    }

    public string MyText2
    {
        get { return _myText2; }
        set { _myText2 = value; }
    }
}

There is important note here,the WebPart renders out the text specified in MyText and MyText2, and putting it in either Microsoft Office SharePoint Server 2007 or an ASP.NET 2.0 WebPart framework that you wrote yourself enables you to modify the MyText value. In the case of an ASP.NET 2.0 WebPart framework, you can modify it with the PropertyGridEditorPart because MyText is decorated by the WebBrowsable() attribute.

The user controls is ready with edit mode, lets show you, how to use the user control in page.

Step 1

Just register user control with tagname top of the page.

<%@ Register Src="~/UserControls/WelcomeUserControl.ascx" TagName="WelcomeUserControl" TagPrefix="uc1" %>

Step 2

then use it in the WebPart Zone of your web part.

<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<uc1:WelcomeUserControl ID="WelcomeUserControl1" runat="server" />
</ZoneTemplate>
</asp:WebPartZone>

Step 3

Then within page load event of the page contains some useful declarations.

protected void Page_Load(object sender, EventArgs e)
    {

        if (WebPartManager1.Personalization.Scope == PersonalizationScope.User)
        {
            if (WebPartManager1.Personalization.CanEnterSharedScope)
            {
                WebPartManager1.Personalization.ToggleScope();
            }
        }

        WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
        WebPartZone1.HeaderText = " ";
    }

Also it maintains the ID of the selected webpart for edit.(But this will be helpful when you are having more than 1 webpartzones on the page).

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

Where Hidden1 is the Asp Hidden control. It is used to maintain the id of the selected webpart zone.

References

• http://www.developer.com/net/asp/print.php/3627871

Conclusion

Through this article,we have learned, how to create Custom Editor Part to Web Parts in ASP.NET.