WebPart Framework basics

Edit Web Part Page

Editing a web page include

Enabling users to personalize the layout of the Web Parts controls on the page.

Enabling users to edit the appearance of a Web Parts control.

Enabling users to select from a catalog of available Web Parts controls.

The Web Parts framework provides a variety of page display modes that enable users to perform customization on a page. Following are the modes of a Web Part Page.

BrowseDisplayMode : Represents the default display mode.

CatalogDisplayMode : Used for adding controls from a catalog of controls to a Web page.

ConnectDisplayMode : Displays a special UI for users to manage connections between Web Part controls.

DesignDisplayMode : Used for changing the layout of Web pages containing Web Part controls.

EditDisplayMode : Displays a UI from which end users can edit and modify server controls

The WebPartManager control also provides a programmatic interface, making it possible to switch the Web Part Page between browse, design, and edit display modes. For example, to programmatically switch the current page into design mode, you can simply add a link control with an event handler that sets the DisplayMode property to DesignDisplayMode.

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;

By default, a Web Part Page operates in browse mode, which doesn't let the user make changes to any Web Parts.

To make changes to Web Parts , the page should be in design,catalog or edit mode .

Lets add a dropdownlist control to our website and add item corresponds to edit,display and design mode and selection change event of list.

Default.aspx

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem>Browse</asp:ListItem>

<asp:ListItem>Design</asp:ListItem>

<asp:ListItem>Catalog</asp:ListItem>

<asp:ListItem>Edit</asp:ListItem>

Default.aspx.cs

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
     switch (DropDownList1.SelectedValue)
     {
        case "Browse":
        WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
       break;

       case "Design":
      WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
      break;

      case "Catalog":
      WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
       break;

      case "Edit":
      WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
      break;

     default:
     break;

   }

}

Page will look like

Design Mode:-

In design mode, the user is able to move WebParts within WebPartZone or between zones.

Select Design Mode from the dropdown list . Your page will look like

You will be able to drag and drop webpart . ASP.Net 2.0 Web Part controls produce all the required DHTML and JavaScript behind the scenes to enable drag and drop .

Lets change the layout by moving “Hello World “ web part at the top and go back to browse mode. your page will look like

Edit Mode:-

In this mode you can modify appearance, style and properties of your webparts.

Go to design view of your webpage. Drag and drop EditorZone control in second cell (green) . Now drag and drop PropertyGridEditorPart, LayoutEditorPart and ApperanceEditorPart into EditorZone.

EditorZone: This is the area on the page that prompts the user to edit his WebPart and customize it to his specific needs. A WebPart can also be customized in a Shared mode, where an administrator can configure the WebPart and all other users can view or use the WebPart but not customize it.

LayoutEditorPart: Provides an editor control that enables end users to edit several layout-oriented user interface (UI) properties on an associated WebPart control. This class cannot be inherited

AppearnceEditorPart: Provides an editor control that enables end users to edit several apperance-oriented user interface (UI) properties on an associated WebPart control.

PropertyGridEditorPart :- Provides an editor control that enables end users to edit custom properties on an associated WebPart or server control

We have added following custom property in MyWebPart

private string displayText = "Hello World!";
[WebBrowsable(true), Personalizable(true)]
public string DisplayText
{
get { return displayText; }
set { displayText = value; }

}

WebBrowsable() Attribute:

It allows a web part to display property in web browser in edit mode.

Personalizable() Attribute:

It allows property to be editable.

Default.aspx

Now run the application and select edit from the dropdown and click dropdown corresponds to from Web Part as shown in below picture

Select Edit from the dropdown.

Change the text for DisplayText property to “Hello User” and click Ok. Go back to Browse mode. Your page will look like follow.

Catalog Mode:-

In this mode user can add Web part or User Control to Web Part pages.

Go to design view of your webpage. Drag and drop CatalogZone control in thrid cell (blue) . Now drag and drop DeclarativeCatalogPart.

For this site lets Drag and Drop a label control and a Calendat control in DeclarativeCatalogPart.

CatalogZone: The CatalogZone is the menu or the catalog from which a user can choose. It holds a number of CatalogPart controls, which in turn hold WebParts that are already added to the site and ready for the picking to add to various pages on the site. The user can pick WebParts from the Catalog, and add them to the various WebPartZones on the same page.

DeclarativeCatalogPart :- The DeclarativeCatalogPart control enables you to add a catalog of WebPart or other server controls to a Web page, giving users the ability to change the set of controls and the functionality available on a page at run time. A catalog is a list of WebPart or other server controls that is visible when a page is in catalog-display mode. At design time you can add controls to the DeclarativeCatalogPart control and at run time a user can choose which controls to view in the page by selecting them from the catalog list

Default.aspx

<asp:CatalogZone ID="CatalogZone1" runat="server">

<ZoneTemplate>

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">

<WebPartsTemplate>

<asp:Label ID="Label1" runat="server" Text="Label" Title="Add Label"></asp:Label>

<asp:Calendar ID="Calendar1" runat="server" Title="Add Calendar"></asp:Calendar>

</WebPartsTemplate>

</asp:DeclarativeCatalogPart>

</ZoneTemplate>

</asp:CatalogZone>

Now run the application and select catalog from the dropdown and click dropdown corresponds to from Web Part as shown in below picture.

Check “Add Calendar” check box and click Close button

You will get

Go back to Browse mode

1 2 3

More Links from CoderSource.net: