ASP.NETcontains a group of server controls known as Web Parts, which are designed to enable users topersonalize Web pages. You may have seen this in action in, for example, SharePoint-based Web sites and the MSN home page http://www.msn.com/. When you use Web Parts, the resultant functionality is as follows:
¤ Users are presented with a default page layout that you supply. This layout consists of a number of component Web Parts, each of which has a title and content.
¤ Users can change the position of the Web Parts on a page.
¤ Users can customize the appearance of Web Parts on a page or remove them from the page c.ompletely .
¤ tjsers can be supplied with a catalog of Web Parts that they can add to the page.
¤ Users can export WebParts from a page, and then import them on a different page or site.
¤ Connections can exist between Web Parts. For example, the content displayed in a Web Part could be a graphical representation of the content displayed in another Web Part.
¤ Any changes that users make persist between site visits.
ASP.NETsupplies a complete framework for implanting Web Parts functionality, including management and editing controls.
The use of Web Parts is a complex topic, and this section does not describe all available functionality or list all of the properties and methods that the Web Part components supply. However, you do see enough to get a flavor of Web Parts and to understand the basic functionality that is possible.
Web Parts Apptlcatlon Components
The Web Parts section of the toolbox contains 13 controls, as shown in Figure 38~18(note that Pointer is not a control). ‘
These controls are described in the following table. The table also introduces some of the key concepts for Web Parts pages.
You may notice that this list of controls does not include any Web Parts. This is because you create these yourself. Any control that you put into a WebPartZone region automatically becomes a Web ~rt – including (most impcrtant) user controls. By using user controls, you can group together other «>ntrols to provide the user interface and functionality of a Web Part control.
Web Parts Example
To illustrate the functionality of Web Parts, you can look at the example in the downloadable code for this chapter, PCSWebParts. This example uses the same security database as the PCSAuthenticationDemo example, It has two users with usemames of User and Administrator and a password
both. You can log in as a user, manipulate the Web Parts on the page, log out, log in as the other user, and manipulate the WebParts in a completely different way. The personalization for both users is retained
between site visits.
Once you have logged in to the site, the initial display (with User logged in) is as shown
This page con~ins the following controls:
¤ AWebPartManager control (which doesn’t have a visual component).
¤ ThreeWebPartZone controls.
¤ Three Wet!Parts (Date, Events, and User Info), one in each WebPartZone. Two of the Web Parts are connected by a static connection – if you change the date in Date, the date displayed in Events updates ..
¤ A drop-down list for changing the display mode. This list doesri’t contain all of the possible display modes, just the available ones. The available modes are obtained from the WebPartManager control, as you see shortly. The modes listed are:
¤ Browse – This mode is the default and allows you to view and use Web Parts. In this mode, each Web Part can be minimized or closed by using the drop-down menu accessible in the top right of each Web Part.
¤ Design – In this mode, you can reposition Web Parts
¤ Edit – In this mode, you can edit Web Part properties. An additional item in the dropdown menu for each Web Part becomes available: Edi
¤ Catalog – In this mode, you can add new Web Parts to the page.Catalog – In this mode, you can add new Web Parts to the page.
¤ A link to reset the Web Part layout to the defau”lt(for the current user only).
¤ An EditorZone control (visible only in Edit mode).
¤ A Cata1611zone control (visible only in Catalog mode).
¤ One additional Web Part in the catalog that you can add to the page
Each of the Web Parts is defined in a user control.
To illustrate how layout can be changed, use the drop-down list to change the display mode to Design. You will notice that each WebPartZone is then labeled with an ID value (LeftZon., CenterZone, and Ril1htZone, respectively). You will also be able to move Web Parts simply by dr~gging their titles – and will even see visual feedback as you drag. This is illustrated in Figure 38-20, which shows the Date Web Part being moved .
Next, try adding a new Web Part from the catalog. Change the display mode to Catalog, and you will notice that the Catalol1Zone control becomes visible at the bottom of the page. Click the Declarative
Catalog link, and you will be able to add a Links control to the page, as shown in Figure 38-21.
Notice that there is also a Page Catalog link here. If you close a Web Part by using the drop-down menu for the part, you will find it here – it’s not completely deleted, merely hidden.
Next, change the display mode to Edit and select the Edit item from the drop-down list for a Web Part, as shown in Figure 38-22. When you select this menu option, you will open the Edi torZone control. 1ft the example, this control contains an AppearanceEdi torPart control, as shown
Youcan edit and apply property values for WebParts by using this interface. After making changes, confirm that they are stored foe the user by logging off and logging in as a different user;”and then switching back to the first user. Now, you might think that this functionality requires quite a lot of code. In fact, the code in this example is remarkably simple. Look at the code for the Web Parts page. The <form> element starts with a WebPartManager control:
There is an event handler for the DisplayModeChanged event of this control, which is used to show or hide the editor <di v> at the bottom of the page. There is also a specification for a static connection between the Date and Events WebParts. This is achieved by defining named endpoints for the connection.in the two user controls for these WebParts and referring to those endpoints here. Yousee the code for this shortly.
The displaymode drop-down listispopulated in the Page_Load () event handler,by using the WebPartManagerl .SupportedDisplayModes property.The resetbutton uses theWebPartManagerl .Personalization. ResetPersonalizationState () method toresetthepersonalizationstateforthe currentuser.
Next come the threeWebPartZon~ controls,each of which containsa user controlthatisloaded as a Web Part:
No additional markup is’~equired to make this user control work as a Web Part. The only point to note here is that the <uc3 :LinksControl> element for the user control has a ti tle attribute – even though
the user control doesn’t have a Ti tle property. This attribute is used by the Declarati veCatalogPart control to infer a title to display for the Web Part (which you can edit at runtime with the
AppearanceEdi torPart). The connection between the Date and Events controls is achieved by passing an interface reference from
DateSelectorControl to EventListControl (the two user control classes used by these Web Parts): public interface IOateProvider
DateSelectorControl supports this interface, and so can pass an instance of IDateProvider by using this. The reference is passed by an endpoint method in DateSelectorControl, which is decorated with the ConnectionProvider attribute:
This is all that is required to mark a Web Part as Iiprovider control. You can then reference the provider by its endpoint 10, in this case DateProvider. To consume a provider, you use the ConnectionConsumer attribute to decorate a consumer method in
EventListControl: . [ConnectionConsumer(‘Date Consumer’, ‘OateConsumer’») public void GetOate(IOateProvider provider)
This method stores a reference to the IDateProvider interface passed, sets a flag, and changes the label text in the control. There is not a lot more to look at in this example. There are a few minor cosmetic sections of code, and details for the event handlers in Page_Load ( ) , but nothing that you really need to See here. You can investigate further by examining the downloadable code for this chapter There is, however, a whole lot more to Web Parts than this.The Web Parts framework is extremely powerful and richly featured. Whole books are devoted to the subject. Hopefully, though, this section has enabled you to get an insight into Web Parts and has demystified some of their functionality