The creation of Web Parts for use in ASP.NET websites
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.
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">
<uc1:VendorWebPart ID="Part1" runat="server" />
Creating Web Parts From Existing Controls
Create Web Part by inserting standard ASP.NET control within
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.
|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. To use this mode, must add EditorZone control to web page along with either (or both) AppearanceEditorPart 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"];
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.
Developer establishes connection during development process - cannot be changed by user.
- 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.
- 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.
- Create webpage with WebPartManager control. Add one (or more) WebPartZone containers.
- Add provider and consumer to WebPartZone containers.
- 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">
<asp:webPArtConnection ID="conn1", ProviderID="prov1", ProviderConnectionPointID="GetTextBoxValue", ConsumerID="cons1", ConsumerConnectionPointID="ShowTextBoxValue" />
Established by users.
Enabled by adding ConnectionsZone control to webpage.
- Create page with provider and consumer connections (as with Static Connections)
- Optionally, establish static connection to act as default
- Add ConnectionsZone control to page
- Add control to enable user to enter ConnectDisplayMode
Establishing Dynamic Connections Among Web Parts
User follows these steps:
Switch display mode to ConnectDisplayMode
On Web Parts menu of provider or consumer select Connection
ConnectionZone object appears
If existing connection exists click Disconnect to break it
- Click Create A Connection To Consumer
- Select consumer
- Click connect
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:
<allow verbs="get" users="SomeUserAccount" roles="admin" />`
? 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.