Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

This example shows the enhanced version of my previous example about Creating Custom WebPartZones with Custom verbs (Move right/ Move Left).

One of the most common issues with ASPNET WebPart in ASPNET 2.0 is the drag-and-drop functionality in firefox. As you may know the drag-and-drop feature of WebParts will not work in firefox once it is placed inside an UpdatePanel control. So in this article, I will show how are we going to move certain WebParts 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 move options by extending the WebPartZone base class.

What is added here are the MoveUp and MoveDown verbs with some validation for MoveRight and MoveLeft verbs.

To start, create a class under App_Code folder and write the following code blocks below for the Custom WebPartZone implementation:

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;
using System.Collections;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Design;
using System.Text;
using System.Text.RegularExpressions;
using System.Collections.Specialized;
using System.IO;

 
/// <summary>
/// Summary description for CustomWebZone
/// </summary>
/// 
namespace Samples.CustomWebZone.CS.Controls
{

   public class CustomZone : WebPartZone
   {

      public CustomZone(){
            //
            // TODO: Add constructor logic here
            //
      }

    #region Add Custom Verbs to List

    protected override void OnCreateVerbs(WebPartVerbsEventArgs e)
    {
        string CustomZone_Id = this.ID;
        List<WebPartVerb> newVerbs = new List<WebPartVerb>();

        if (CustomZone_Id == "CustomZone3")
            { newVerbs.Add(new DisableMoveRight(OnMoveRight)); }
            else
            { newVerbs.Add(new MoveToRight(OnMoveRight)); }
        if (CustomZone_Id == "CustomZone1")
            { newVerbs.Add(new DisableMoveLeft(OnMoveLeft)); }
            else
            { newVerbs.Add(new MoveToLeft(OnMoveLeft)); }

        newVerbs.Add(new MoveToDown(OnMoveDown));
        newVerbs.Add(new MoveToUp(OnMoveUp));
        e.Verbs = new WebPartVerbCollection(e.Verbs, newVerbs);
        base.OnCreateVerbs(e);
    }

    #endregion
       
    #region MoveRight Event Handler
    void OnMoveRight(object sender, WebPartEventArgs e)
    {
        int wpcount = (int)e.WebPart.Zone.WebParts.Count;//gets the total number of webparts that is present in a particular zone
        int wpindex = (int)e.WebPart.ZoneIndex;//get the webpart index within the zone

        string zname = (string)e.WebPart.Zone.ID; //gets the zone name
        string del = "e";
        string[] temp = zname.Split(del.ToCharArray());//splits the name to get the last numeric value
        int zid = int.Parse(temp[1].ToString());// get the numeric value of a zone

        WebPartManager wpm1 = WebPartManager.GetCurrentWebPartManager(Page);//gets the available webpartmanager on the page

        if (zid < 3)
        {
            GenericWebPart part = (GenericWebPart)wpm1.Zones[zid - 1].WebParts[wpindex]; //get the current control being move within the zone
            wpm1.MoveWebPart(part, wpm1.Zones[zid], wpindex);//move the webpart to another or within a zone * e.WebPart.Zone.WebParts.Count
        }
    }

    #endregion

    #region MoveLeft Event Handler

    void OnMoveLeft(object sender, WebPartEventArgs e)
    {
        HttpContext.Current.Session["CustomZone.Count"] = 0;//reset session to zero
        int wpcount = (int)e.WebPart.Zone.WebParts.Count;//gets the total number of webparts that is present in a particular zone
        int wpindex = (int)e.WebPart.ZoneIndex;//get the webpart index location within the zone
        string zname = (string)e.WebPart.Zone.ID; //gets the zone name
        string del = "e";
        string[] temp = zname.Split(del.ToCharArray());//splits the name to get the last numeric value
        int zid = int.Parse(temp[1].ToString());// get the numeric value of a zone
        HttpContext.Current.Session["CustomZone.Count"] = zid - 1;

        WebPartManager wpm1 = WebPartManager.GetCurrentWebPartManager(Page);//gets the available webpartmanager on the page

        if (zid != 1)
        {
            GenericWebPart part = (GenericWebPart)wpm1.Zones[zid - 1].WebParts[wpindex]; //get the current control being move within the zone
            wpm1.MoveWebPart(part, wpm1.Zones[zid - 2], wpindex);//move the webpart to another or within a zone
        }
    }

    #endregion

    #region GoDown Event Handler

    void OnMoveDown(object sender, WebPartEventArgs e)
    {
        int wpcount = (int)e.WebPart.Zone.WebParts.Count;//gets the total number of webparts that is present in a particular zone
        int wpindex = (int)e.WebPart.ZoneIndex;//get the webpart index location within the zone
        string zname = (string)e.WebPart.Zone.ID; //gets the zone name
        string del = "e";
        string[] temp = zname.Split(del.ToCharArray());//splits the name to get the last numeric value
        int zid = int.Parse(temp[1].ToString());// get the numeric value of a zone
        WebPartManager wpm1 = WebPartManager.GetCurrentWebPartManager(Page);//gets the available webpartmanager on the page
        if (wpindex < wpcount - 1)
        {
            GenericWebPart part = (GenericWebPart)wpm1.Zones[zid - 1].WebParts[wpindex]; //get the current control being move within the zone
            wpm1.MoveWebPart(part, wpm1.Zones[zid - 1], wpindex + 1);//move the webpart to another or within a zone
        }
        else
        {
            //some code here for vaildation
        }
    }

    #endregion

    #region GoUp Event Handler
    void OnMoveUp(object sender, WebPartEventArgs e)
    {
        int wpcount = (int)e.WebPart.Zone.WebParts.Count;//gets the total number of webparts that is present in a particular zone
        int wpindex = (int)e.WebPart.ZoneIndex;//get the webpart index location within the zone
        string zname = (string)e.WebPart.Zone.ID; //gets the zone name
        string del = "e";
        string[] temp = zname.Split(del.ToCharArray());//splits the name to get the last numeric value
        int zid = int.Parse(temp[1].ToString());// get the numeric value of a zone
        WebPartManager wpm1 = WebPartManager.GetCurrentWebPartManager(Page);//gets the available webpartmanager on the page
        if (wpindex != 0)
        {
            HttpContext.Current.Session["zoneindex"] = null;
            GenericWebPart part = (GenericWebPart)wpm1.Zones[zid - 1].WebParts[wpindex]; //get the current control being move within the zone
            wpm1.MoveWebPart(part, wpm1.Zones[zid - 1], wpindex - 1);//move the webpart to another or within a zone
        }
        else
        {
            //some code here for vaildation
        }
    }

    #endregion
}

 
    //Internal Classes
    #region Create Move Right Verb
    internal class MoveToRight : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/right_arrow.png";
        internal MoveToRight(WebPartEventHandler serverClickHandler)
            :
           base("MyVerbRight", 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 _copyWebPartImageUrl;
            }
            set { ; }
        }
    }

    internal class DisableMoveRight : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/disabled_right_arrow.png";
        internal DisableMoveRight(WebPartEventHandler serverClickHandler)
            :
           base("Right", serverClickHandler)
        { }

        public override string Text
        {
            get { return "Move Right"; }
            set { ;}
        }

        public override string Description
        {
            get
            {
               return "Unable to move ";
            }
            set { ; }
        }

        public override bool Enabled
        {
            get { return base.Enabled = false; }
            set { base.Enabled = value; }
        }

        public override string ImageUrl
        {
            get { return _copyWebPartImageUrl; }
            set { ; }
        }
    }

    #endregion

    #region Create Move Left Verb

    internal class MoveToLeft : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/left_arrow.png";
        internal MoveToLeft(WebPartEventHandler serverClickHandler)
            :

           base("MyVerbLeft", 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 _copyWebPartImageUrl; }
            set { ; }
        }
    }


    internal class DisableMoveLeft : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/disabled_left_arrow.png";
        internal DisableMoveLeft(WebPartEventHandler serverClickHandler)
            :
           base("Left", serverClickHandler)
        { }

        public override string Text
        {
            get { return "Move Left"; }
            set { ;}
        }

        public override string Description
        {
            get
            {
                return "Unable to move ";
            }
            set { ; }
        }

        public override bool Enabled
        {
            get { return base.Enabled = false; }
            set { base.Enabled = value; }
        }

        public override string ImageUrl
        {
            get { return _copyWebPartImageUrl; }
            set { ; }
        }
    }

    #endregion

    #region Create Move Down Verb
    internal class MoveToDown : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/down_arrow.png";
        internal MoveToDown(WebPartEventHandler serverClickHandler)
            :
           base("MyVerbDown", serverClickHandler)
        { }

        public override string Text
        {
            get { return "Move Down"; }
            set { ;}
        }

        public override string Description
        {
            get
            {
                return "Allows you to move webparts downward";
            }
            set { ; }
        }

        public override bool Enabled
        {
            get { return base.Enabled; }
            set { base.Enabled = value; }
        }

        public override string ImageUrl
        {
            get { return _copyWebPartImageUrl; }
            set { ; }
        }
    }

    internal class Disable_Down : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/disabled_down_arrow.png";
        internal Disable_Down(WebPartEventHandler serverClickHandler)
            :
           base("DownVerbDisabled", serverClickHandler)
        { }

        public override string Text
        {
            get { return "Move Down"; }
            set { ;}
        }

        public override string Description
        {
            get
            {
                return "Unable to move";
            }
            set { ; }
        }

        public override bool Enabled
        {
            get { return base.Enabled = false; }
            set { base.Enabled = value; }
        }

        public override string ImageUrl
        {
            get { return _copyWebPartImageUrl; }
            set { ; }
        }
    }

    #endregion

    #region Create Move Up Verb
    internal class MoveToUp : WebPartVerb
    {
        private const String _copyWebPartImageUrl = "~/Images/up_arrow.png";
        internal MoveToUp(WebPartEventHandler serverClickHandler)
            :
           base("MyVerbUp", serverClickHandler)
        { }

        public override string Text
        {
            get { return "Move Up"; }
            set { ;}
        }

        public override string Description
        {
            get
            {
                return "Allows you to move webparts upward";
            }
            set { ; }
        }

        public override bool Enabled
        {
            get { return base.Enabled; }
            set { base.Enabled = value; }
        }

        public override string ImageUrl
        {
            get { return _copyWebPartImageUrl; }
            set { ; }
        }
    }

    #endregion
}

Please note that in the above implementation, it requires you to have three WebZones in the page. If you have more than 3 WebZones, you can tweak the code above based on your requirements.

Also be sure to create a folder for storing your verbs images and set the path of the image in the _copyWebPartImageUrl  for you to see those move option verbs image in the WebParts menu.

Important:

  • MoveToRight(), DisableMoveRight(), MoveToLeft(), DisableMoveLeft, MoveToDown() and MoveToUp() are the names of the methods where the custom WebPart verbs are created including its properties like imageUrl, Title, Description and so on.
  • OnMoveRight(),OnMoveLeft(), OnMoveDown and OnMoveUp() are the Event handlers for that custom verbs being created. It is where the moving of webparts is manipulated.
  • OnCreateVerb() is an overridden method which allows you to add your own custom verbs to the list of the standard WebPart Verbs collection.

Using the Custom WebZone

1. Add a new WebForm and switch to source view (aspx side)
2. Add and Register the namespace of the class which contains the custom control that was created above. See below:

<%@ Register TagPrefix="MyWebZone" 
             namespace="Samples.CustomWebZone.CS.Controls" %>

 

Note that you can changed the TagPrefix value to whatever you like.

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

REPLACE <asp:WebPartZone> to <MyWebZone:CustomZone> 

6. Be sure to name the ID of the Custom WebZone the same as the class name of the Custom WebZone with a numeric character like CustomZone1, CustomZone2 and CustomZone3.

See the whole ASPX markup below.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="MyWebZone" namespace="Samples.CustomWebZone.CS.Controls" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
    <title>Custom WebZone Demo</title>
</head>

<body style=" width:100%; height:100%;">
    <form id="form1" runat="server" style=" width:100%; height:100%;">
        <asp:WebPartManager ID="WebPartManager1" runat="server">
        </asp:WebPartManager>
        <table style=" width:100%; height:100%;">
            <tr>
                <td valign="top" style=" width:30%; height:100%;">
                    <MyWebZone:CustomZone ID="CustomZone1" runat="server" style=" width:100%; height:100%;">
                        <ZoneTemplate>
                            <asp:TextBox ID="TextBox1" Text="Hello ASP.NET" runat="server" Title="Sample Text"></asp:TextBox>
                        </ZoneTemplate>
                        <RestoreVerb ImageUrl="~/Images/maximize_blue.gif" />
                        <CloseVerb ImageUrl="~/Images/close_blue.gif" />
                        <MinimizeVerb ImageUrl="~/Images/minimize_blue.gif" />
                        <PartTitleStyle BackColor="Silver" ForeColor="Blue" />
                        <PartChromeStyle BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" />
                    </MyWebZone:CustomZone>
                </td>
                <td valign="top" style=" width:30%; height:100%;">
                    <MyWebZone:CustomZone ID="CustomZone2" runat="server" style=" width:100%; height:100%;">
                        <RestoreVerb ImageUrl="~/Images/maximize_blue.gif" />
                        <CloseVerb ImageUrl="~/Images/close_blue.gif" />
                        <MinimizeVerb ImageUrl="~/Images/minimize_blue.gif" />
                        <PartTitleStyle BackColor="Silver" ForeColor="Blue" />
                        <PartChromeStyle BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" />
                        <ZoneTemplate>
                            <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
                        </ZoneTemplate>
                    </MyWebZone:CustomZone>               
                </td>
                <td valign="top" style=" width:30%; height:100%;">
                    <MyWebZone:CustomZone ID="CustomZone3" runat="server" style=" width:100%; height:100%;">
                        <RestoreVerb ImageUrl="~/Images/maximize_blue.gif" />
                        <CloseVerb ImageUrl="~/Images/close_blue.gif" />
                        <MinimizeVerb ImageUrl="~/Images/minimize_blue.gif" />
                        <PartTitleStyle BackColor="Silver" ForeColor="Blue" />
                        <PartChromeStyle BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" />
                    </MyWebZone:CustomZone>                
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

7. Compile and run the application.
8. The output would look the same as shown in above screen shot.

I hope you will find this article useful.

Technorati Tags: ,,,
Posted on Tuesday, April 14, 2009 12:20 PM ASP.NET , WebParts , C# , Tips&Tricks | Back to top


Comments on this post: Enhanced Custom WebPartZone with Custom Move Option Verbs in ASP.NET 2.0

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net