Creating Custom WebPartZones with Custom verbs (Move right/ Move Left)

Creating Custom WebPartZones with Custom verbs (Move right/ Move Left)

By: Vincent Maverick Durano

Introduction:

This article shows on how we are going to move a webpart from left or right directions in different zones without the drag and drop functionality of the standard webpart. In order to achieve this, we need to create a custom webpartzone with custom verb option “move right/move left” button. See Figure 1.

Figure 1

The first thing to do is we need to create those custom verbs options by extending the webpartzone base class and add those custom verbs within the zone. Below are the steps on how to extend the webpartzone class.

Creating the CustomZone.cs Class

Below are the snippets with a description in each line on how to extend and overrides verbs. I placed it in a separate class and wrap it in a namespace so that we can use it easily in the page by just registering the namespace. But before that lets take a look at the details first on how does it goes.

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Security.Permissions;

using System.Collections.Generic;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

/// Custom WebPartZone with custom verbs

///

namespace Samples.CustomWebpartZone.CS.Controls

{

[AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]

[AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]

//Inherits the webpartzone class

public class CustomZoneWithNewVerb : WebPartZone

{

//Overrides the OnCreateVerbs Methods

protected override void OnCreateVerbs(WebPartVerbsEventArgs e)

{

//NOTE:MoveToLeft and MoveToRight are the name of methods where the custom verbs are created. While the parameter RightVerb and LeftVerb are the event handlers for those verbs.

List<WebPartVerb> addNewVerbs = new List<WebPartVerb>();

addNewVerbs.Add(new MoveToRight(RightVerb));

addNewVerbs.Add(new MoveToLeft(LeftVerb));

e.Verbs = new WebPartVerbCollection(e.Verbs, addNewVerbs);

base.OnCreateVerbs(e);

}

void RightVerb(object sender, WebPartEventArgs e)

{

//gets the total number of webparts that is present in a particular zone

int wpcount = (int)e.WebPart.Zone.WebParts.Count;

//get the webpart index within the zone

int wpindex = (int)e.WebPart.ZoneIndex;

//gets the zone name

string zname = (string)e.WebPart.Zone.ID;

string del = "b";

//splits the id name “CustomZoneWithNewVerb1” to get the last numeric value

string[] temp = zname.Split(del.ToCharArray());

// get the numeric value of a zone “1”

int zoneid = int.Parse(temp[1].ToString());

//gets the available webpartmanager on the page

WebPartManager wpm1 = WebPartManager.GetCurrentWebPartManager(Page);

if (zid < 3) //assume that you have 3 zones in your page

{

//get the current control being move within the zone

GenericWebPart part = (GenericWebPart)wpm1.Zones[zoneid - 1].WebParts[wpindex];

//move the webpart to another or within a zone wpm1.MoveWebPart(part, wpm1.Zones[zoneid], wpindex);

}

void LeftVerb(object sender, WebPartEventArgs e)

{

int wpcount = (int)e.WebPart.Zone.WebParts.Count;

int wpindex = (int)e.WebPart.ZoneIndex;

string zname = (string)e.WebPart.Zone.ID;

string del = "b";

string[] temp = zname.Split(del.ToCharArray());

int zoneid = int.Parse(temp[1].ToString());

WebPartManager wpm1 = WebPartManager.GetCurrentWebPartManager(Page);

if (zid != 1)

{

GenericWebPart part = (GenericWebPart)wpm1.Zones[zid - 1].WebParts[wpindex];

wpm1.MoveWebPart(part, wpm1.Zones[zid-2], wpindex);

}

[AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]

[AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]

//A fucntion where custom Move Right verbs are created

//Inherits WebpartVerb class to create custom verbs

internal class MoveToRight : WebPartVerb

{

private const String _WebPartImageUrl = "~/image/right.gif";

internal MoveToRight(WebPartEventHandler serverClickHandler) :

base("GotoRight", serverClickHandler)

{ }

public override string Text

{

get { return "Move Right"; }

set { ;}

}

public override string Description

{

get

{

return "Allows you to move webparts to the right zone ";

}

set { ; }

}

public override bool Enabled

{

get

{

return base.Enabled;

}

set { base.Enabled = value; }

}

public override string ImageUrl

{

get

{

return _WebPartImageUrl;

}

set { ; }

}

//A fucntion where custom Move Left verbs are created

//Inherits WebpartVerb class to create custom verbs

internal class MoveToLeft : WebPartVerb

{

private const String _WebPartImageUrl = "~/image/left.gif";

internal MoveToLeft(WebPartEventHandler serverClickHandler):

base("GotoLeft", serverClickHandler)

{ }

public override string Text

{

get { return "Move Left"; }

set { ;}

}

public override string Description

{

get

{

return "Allows you to move webparts to the left zone ";

}

set { ; }

}

public override bool Enabled

{

get { return base.Enabled; }

set { base.Enabled = value; }

}

public override string ImageUrl

{

get { return _WebPartImageUrl; }

set { ; }

}

{

get { return base.Enabled; }

set { base.Enabled = value; }

}

public override string ImageUrl

{

get { return _copyWebPartImageUrl; }

set { ; }

}

Important:

MoveToRight() and MoveToLeft() are names of the methods where the custom verbs are created including its properties like imageUrl, Title, Description and so on.

RightVerb() and LeftVerb() are the Event handlers for that custom verbs being created. It is where the moving of webparts is manipulated.

After creating the class, we can now use those custom webpartzone with added new verbs in our page. To do that, just take a look at the steps below:

Add new WebForm and switch to source mode (aspx side)
Add and Register the Class Namespace below:

<%@ Register TagPrefix="mywebparts" namespace="Samples.CustomWebpartZone.CS.Controls" %>

Add a standard WebPartManager in the page.
Add three (3) standard WebPartZone in the page.
Replace the tagprefix and name of the standard asp WebPartZone to the tagprefix and name of the custom Webpartzone created earlier like below:

<mywebparts:CustomZoneWithNewVerb id="CustomZoneWithNewVerb1"

HeaderText="1" runat="server">

<asp:TextBox ID="TextBox1" runat="server">A TextBox</asp:TextBox>

</ZoneTemplate>

</mywebparts:CustomZoneWithNewVerb>

<mywebparts:CustomZoneWithNewVerb id="CustomZoneWithNewVerb2"

HeaderText="1" runat="server">

<asp:Image ID="Image1" runat="server" ImageUrl="~/image/default.jpg" />

</ZoneTemplate>

</mywebparts:CustomZoneWithNewVerb>

<mywebparts:CustomZoneWithNewVerb id="CustomZoneWithNewVerb3"

HeaderText="1" runat="server">

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/dashboard.aspx">My Favorites</asp:HyperLink> </ZoneTemplate>

</mywebparts:CustomZoneWithNewVerb>

6. Compile the application and run

7. The output should look the same as shown in Figure 1

The behavior of the custom Webpartzone are still the same as what standard webpartzone behaves since the custom webpartzone inherits the standard webpart zone. The only difference is that I added the Custom “Move Right” and “Move Left” Verb in the custom WebpartZone.

Hope you like this article.

Technorati Tags: ASP.NET,WebParts

Posted on Wednesday, July 23, 2008 4:42 PM ASP.NET , WebParts | Back to top

Comments on this post: Creating Custom WebPartZones with Custom verbs (Move right/ Move Left)

# re: Creating Custom WebPartZones with Custom verbs (Move right/ Move Left)

Can you please upload the source code so that we can check the demo project you created?

Left by Esonix on Mar 16, 2009 6:06 PM

Hello Everyone,
I Want to put UserControls in WebParts in down arrow button
Can any one help me out

Thanks in Advance

Regards,
Sandhya

Left by Sandhya on Aug 27, 2010 2:34 PM