Web Parts

Components of predefined functionality that can be embedded in webpage.

Have centralised framework, management and customisation.

Can be added / moved / removed from page by both designers and users.

Individual web parts have client-side menus that allow for user control.

Any control can act as a web part.

Adding web parts doesn't necessarily require writing code - much can be done within Visual Designer.

Requires ASP.NET personalisation database (ASPNETDB). By default hosted in SQL Server Express, can be upgraded to other editions of SQL Server.

WebParts Namespace

Most important classes:

  • WebPartManager - required on every page including Web Parts. No visual representation, it manages the controls and their events on specified page.
  • CatalogPart - provides UI for managing group of Web Parts that can be added to Web Part page. Groups are typically site wide - not restricted to specific page.
  • PageCatalogPart - similar to CatalogPart, but groups Web Parts specific to a page.
  • EditorPart - allows for user customisation of specified Web Part.
  • DeclarativeCatalogPart - declare Web Parts that should be available to page or entire site.
  • WebPartZone - define area of page in which Web Parts can be hosted
  • EditorZone - area of page where EditorPart controls can exist
  • CatalogZone - area of page where CatalogPart controls can exist

Defining Web Part zones

Add Web Parts to page by placing in zones.

Zone has width, height and placement within page and can contain 0 or more Web Parts.

Zones allow common styles to be set for its Web Parts - called Web Part's chrome, includes header & menu styles, borders, content style, etc. Can be defined within a skin.

Crate using WebPartZone control.

Creating Web Parts With User Controls

Can be added at design or run time, or configured to be there by user.

Add user control to a Web Part zone.

Fist register user control with web page <% @ Register src="VendorWebPart.ascx" tagName="VendorWebPart", tagprefix="uc1" %>

Then add control to Web Part zone.

<asp:WebPartZone ID="Zone1" runat="server">

 <ZoneTemplate>

  <uc1:VendorWebPart ID="Part1" runat="server" />

 </ZoneTemplate>

</asp:WebPartZone>

Creating Web Parts From Existing Controls

Create Web Part by inserting standard ASP.NET control within< ZoneTemplate> element.

User editing of Web Parts

Web Parts can be displayed to user in several ways - depends on what user is doing with the Web Parts and hosting page.

Display Mode Description
BrowseDisplayMode Standard way to browse web pages - default
DesignDisplayMode Allows users to drag Web Parts to new locations
EditDisplayMode In addition to dragging, users can edit title, size, direction, appearance and zone of Web Part controls. Touse this mode, must add EditorZone control to web page along with either (or both) ApperanceEditorPart and LayoutEditorPart
CatalogDisplayMode Allow users to add Web Parts specified by CatalogZone control (which must also be present on page)
ConnectDisplayMode   Allows users to establish connections between controls using ConnectionZone control, e.g. Web Parts can be linked to show summary and detail information for same report.

 

Code to change mode:

string mode = (string)ViewState["mode"];

if (mode == "browse")
  WebPartManager1.DisplayMode = WebPartManager1.SupportedDisplayModes["Catalog"];
else
  WebPartManager1.DisplayMode = WebPartManager1.SupportedDisplayModes["Browse"];

Connection Web Parts

Application may consist of:

  • Main Web Part to browse employee data
  • Web Part displaying chart of employee overtime pay
  • Web Part showing pie chart describing components of their remuneration package
  • Web Part comparing their pay to other employees

With Web Part connections can select employee file and have all other parts automatically update their display.

Useful for consumer oriented sites, e.g. portal site may display localised info based on users post code.

Static Connections

Developer establishes connection during development process - cannot be changed by user.

  1. Create provider Web Part - Can derive from Web Part class, or create as user control. Provider must expose public method with ConnectionProvider attribute applied. This method returns value consumer shall receive.
  2. Create consumer Web Part - Can derive from Web Part class, or create as user control. Consumer must expose public method with ConnectionConsumer attribute applied. This method accepts the same type as the ConnectionProvider method returns.
  3. Create webpage with WebPartManager control. Add one (or more) WebPartZone containers.
  4. Add provider and consumer to WebPartZone containers.
  5. Add connection information to WebPartManager markup. The WebPartConnection control must have ID, the provider control (ProviderID), provider method (ProviderConnectionPointID), the consumer control (ConsumerID) and consumer method (ConsumerConnectionPointID), e.g. <asp:WebPartManager ID="WebPartManager1" runat="server"> <StaticConnections> <asp:webPArtConnection ID="conn1", ProviderID="prov1", ProviderConnectionPointID="GetTextBoxValue", ConsumerID="cons1", ConsumerConnectioPointID="ShowTextBoxValue" /> </StaticConnections> </asp:WebPartManager>

Dynamic Connections

Established by users.

Enabled by adding ConnectionsZone control to webpage.

  1. Create page with provider and consumer connections (as with Static Connections)
  2. Optionally, establish static connection to act as default
  3. Add ConnectionsZone control to page
  4. Add control to enable user to enter ConnectDisplayMode

Establishing Dynamic Connections Among Web Parts

User follows these steps:

  1. Switch display mode to ConnectDisplayMode
  2. On Web Parts menu of provider or consumer select Connection
  3. ConnectionZone object appears
  4. If existing connection exists click Disconnect to break it

    1. Click Create A Connection To Consumer
    2. Select consumer
    3. Click connect
  5. Click close. Web parts connected as if they were connected statically.

Personalising Custom Controls

Personalisation automatically stores location and other personalised Web Parts.

Can also store custom data in personalisation database.

To store custom data define properties on control representing custom data and apply the Personalizable attribute to them.

Enabling Shared Personalisation

Web Parts personalisation enabled by default, authenticated users able to personalise pages for themselves without any special configuration. These changes only visible to user who made them.

To allow a user to make changes that are visible to others need to enable shared personalisation in web.config file. Within system.web add authorization section which contains an allow element specifying which user(s) have access to shared personalisation:

<authorization>

<allow verbs="get" users="SomeUserAccount" roles="admin" />

</authorization>

? in users grants access to anonymous users, whilst * allows everyone.

roles attribute specifies the roles that are granted access to resource

verbs provide HTTP transmission methods (get, head, post, debug) granted access to resource

Disabling Personalisation for page

Can disable on individual pages by setting the WebPartManager.Personalisation.Enabled attribute to false.

Download