WebPart Framework basics by deepak.gupta

ASP .Net Web Parts framework contains a set of controls that help in organizing a portal page in a way that provide users of the portal flexibility to customize the appearance, content, and behavior of its contents directly from a web browser.

The changes made are then saved for the user and recalled for subsequent visits.
Using the Web Part framework , developer can enable end users to:

Personalize page content

    :- Users can add new Web Parts controls to a page, remove them, hide them, or minimize them like ordinary windows.
     :- Users can drag a Web Parts control to a different zone on a page, or change its appearance, properties, and behavior.

:- Users can import or export Web Parts control settings for use in other pages or sites, retaining the properties, appearance, and even the data in the controls.

          :- Users can establish connections between controls

Why WebPart Framework

Websites today contain a wealth of information; so much that a poorly designed site can easily overwhelm users. User wants to see the sites that suit their individual working style. User might want to hide the parts that contain information in which they have no interest. To better help users cope, portal websites today need to organize their data into discrete units that support a degree of personalization that allows the properties or state of page?s controls to be saved in long term storage and not tied to a particular browser session, so that user will be able to see the same settings when he revisit the page again.

To support all the Microsoft comes with ASP .Net Web Part Framework

The Major Components of the ASP.NET 2.0 WebPart Framework

A page that is designed to host Web Parts is known as a Web Part Page.

Layout of WebPart Page:

Following are the major component of ASP.Net2.0 WebPart Framework

WebPartManager: This control is the central policeman of the ASP.NET 2.0 WebPart framework. Each page should contain only a single WebPartManager, which is responsible for managing all functionality, events, and customization of various WebParts on that page. It has no user interface and is invisible at runtime. WebPartManager also has the ability to set various modes.
- 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
Various Zones: Zones are physical areas on a page. These are implemented in the following Server Controls that ship with the Framework:

WebPartZone: A WebPartZone is a control that defines an area on a page where one or more WebParts can be hosted. A WebPartZone also controls the look and feel of a WebPart inside itself. Also, any control that doesn’t inherit from the WebPart class can masquerade itself as a WebPart and live inside a WebPartZone. This is done with the help of the GenericWebPart class, which inherits from the WebPart base class. By doing so, you are restricted to a subset of the functionality that a WebPart class can expose.

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.

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.

ConnectionsZone: This is the area of the page that prompts the end user to define communication between various WebParts on the same page.

Various Parts:

WebPart: A WebPart is a reusable widget on a Web page. The user can choose to add a WebPart on his page, customize the WebPart per his needs, or even define communication between various WebParts. An ASP.NET 2.0 WebPart inherits from the System.Web.UI.WebControls.WebParts.WebPart class. It Contains the actual content presented to the user.

CatalogPart: The base class for catalog WebPart controls that present a list of available WebParts to users. Derived classes are ImportCatalogPart, DeclarativeCatalogPart, and PageCatalogPart.

EditorPart: The base class for all editing controls that allow modifications to WebParts. An editor part presents its own user interface to let users set properties.

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.

Building Web Part Page

Here we will create a webpart page using components of WebPart Framework.

Prerequisite
Personalize page layout
Export and import controls
Create connections
Internet Information Services (IIS) installed and configured on the computer that will host the site.

For details about installing and configuring IIS, see the IIS Help documentation included with the installation, or see the online IIS documentation on the Microsoft TechNet site (Internet Information Services 6.0 Technical Resources).

VS .Net 2005

Launch Visual Studio 2005 and create a class library project named ?MyWebPart?.

Add following code in MyWebpart.cs

using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

namespace MyWebpart
{
[Guid(“0d722531-f735-43f4-af13-51b4dc8f4ecd“)]

    public class MyWebpart : System.Web.UI.WebControls.WebParts.WebPart
   {
         private string displayText = “Hello World!”;
         [WebBrowsable(true), Personalizable(true)]
         public string DisplayText
         {
           get { return displayText; }
           set { displayText = value; }
         }
        public MyWebpart()
       {
          this.ExportMode = WebPartExportMode.All;
       }
       protected override void Render(HtmlTextWriter writer)
      {
       // TODO: add custom rendering code here.
       // writer.Write(“Output HTML”);
      writer.Write(displayText);
      }
    }
}

Using WebPart

Create Web Site

Launch Visual Studio 2005 and create a new website project. A default.aspx page will also get created.

Configure Web.config

By default ASP.NET 2.0 Web Parts uses SQL Express. Go to next section if SQL Express is installed on your machine.

To use this stuff with SQL Server 2000,2005 follow following steps to configure the aspnetdb database on your SQL Server 2000 database server

Follow these steps to setup the aspnetdb database:

1) run the utility – C:WINDOWSMicrosoft.NETFrameworkv2.0.50215aspnet_regsql.exe

2) Select the ?Configure SQL Server for application services? option and click ?Next?

3) Enter your server name, login credentials and the name of the database to create/edit with the aspnetdb stuff.(The database will hold your login and personalization data, so if you don’t have complete control over the database server

4) Add the following stuff to your web sites Web.config file (this stuff tells ASP.NET to use your SQL Server 2000 or 2005 database instead of SQL Express):

<system.web> <webParts> <personalization defaultProvider=”SqlPersonalizationProvider”>
<providers>
<add name=”SqlPersonalizationProvider”
type=”System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider”
connectionStringName=”SQLConnString”
applicationName=”/” />
</providers> <authorization>
<deny users=”*” verbs=”enterSharedScope” />
<allow users=”*” verbs=”modifyState” />
</authorization>
</personalization>
</webParts>
</system.web>

Add WebPartManager Control

Next, drag and drop a WebPartMenuManager control from the Toolbox (under the WebParts tab) onto the default Web Form. The WebPartManager control manages all of the Web Parts on a Web Form and must be the first control that you add to the page. A Web Part Page require exactly one instance of WebPartManager control. This control must be placed in an .aspx file before the tags for any of the other control associated with the Web Part infrastructure.

You will find following in your code

<asp:WebPartManager ID=”WebPartManager1” runat=”server“>
</asp:WebPartManager>

Add WebPartZone

Insert a 3-by-1 table onto the form (Layout->Table) and drag and drop a WebPartZone control from the Toolbox (under the WebParts tab) into first cell. This WebPartZone control will serve as the docking area for one or more Web Parts.

Add a Web Control

Drag drop a lable control in WebPartZone

<asp:WebPartZone ID=”WebPartZone1” runat=”server“>

<asp:Label ID=”Label1” runat=”server” Text=”My web part“></asp:Label>

</ZoneTemplate>

</asp:WebPartZone>

Run the web application.

Add WebPart

Here will add the webpart created

Add a reference to the class library that holds the MyWebPart.

Open code default.aspx page . Register mywebpart in page you want to display webpart

<%@ Register Assembly=”MyWebpart” Namespace=”MyWebpart” TagPrefix=”mywebpart” %>

Add following line

<mywebpart:SimpleWebpart runat=”server” id=”HelloWorld” Title=”WebPart” />

Code will look like

<asp:WebPartZone ID=”WebPartZone1″ runat=”server” >

<asp:Label ID=”Label2″ runat=”server” title = “My Area” Text=”My Web Part”></asp:Label>

<mywebpart:SimpleWebpart runat=”server” id=”HelloWorld” Title=”WebPart” />

</ZoneTemplate>

Run the application

Till now we are able to create and display web part. Now we will see how we can edit properties and layout of a webpart.

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

<asp:EditorZone ID=”EditorZone1″ runat=”server”>

<asp:AppearanceEditorPart ID=”AppearanceEditorPart1″ runat=”server” />

<asp:LayoutEditorPart ID=”LayoutEditorPart1″ runat=”server” />

<asp:PropertyGridEditorPart ID=”PropertyGridEditorPart1″ runat=”server” />

</ZoneTemplate>

</asp:EditorZone> </td>

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”>

<asp:DeclarativeCatalogPart ID=”DeclarativeCatalogPart1″ runat=”server”>

<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

CoderSource.net

A growing community of coders..

WebPart Framework basics by deepak.gupta