The ASP.NET 2.0 Portal Framework

CoverStory

LANGUAGES: ALL

ASP.NETVERSIONS: 2.0

The ASP.NET 2.0 Portal Framework

Customize the Appearance, Layout, and Behavior of YourContent

By Zak Ruvalcaba

If you re an avid Internet junkie like me, you probablytend to frequent blogs, forums, resource sites, MSDN, etc. The Internet isbecoming less information-centric and more community oriented, whereparticipation, sharing, and involvement are key.

Let s face it, if you re reading this article, it s a safebet that you probably spend close to a third of your day on the computer andultimately on the Internet, possibly at one of the community oriented resourcesI just mentioned. Why? Because like our homes, the Internet is a place to sitback, relax, and read other opinions, do a bit of research, etc. Unlike ourhomes, however, we can t configure our online environments to suit our moods,customize and display what we want to see and interact with, etc.

We re basically stuck navigating the overwhelming lot ofinformation that is presented to us in what is usually a one-dimensional,inaccessible, and non-aesthetically pleasing page of information slappedtogether by someone who is more concerned with the Wow, I got it to work mantra than anything else. It s safe to say that many of the sites on theInternet haven t caught up to the idea that people want personalization intheir daily business practices and work preferences. So, as a developer, howcan I create user-centric sites that allow my visitors/clients to change thelayout, appearance, and even behaviors of the applications with which theyinteract? The answer to this question is solved by many new features introducedin ASP.NET 2.0, but none is more important than the Portal Framework.

An Introduction to Portals

Although the term portalhas become increasingly foggy over the years, the premise has remainedconsistent. Portals are simply Web sites or services that offer a broad arrayof resources and services, such as e-mail, forums, search engines, onlineshopping malls, and, more recently, information customized based on thespecific user. Figure 1 shows the My MSN portal for a registered user. In thisexample you can see that common information including Today on MSN, Weather forecast,My MSN, MSN City Guides, and more is readily available and centralized withina single page.

Figure 1: A My MSN portal for aregistered user.

Today s portals are becoming increasingly moresophisticated, allowing the user complete customization of appearance, layout,and even the behaviors of the content within the portal. Figure 2 shows how apart of the My MSN portal can easily be moved from one location to another.

Figure 2: Part of the My MSN portalcan easily be moved from one location to another.

All of this (and more) is available through the ASP.NET2.0 Portal Framework. With the simple addition of a few tags to your page, youcan create fully interactive, user-centric portals. Even better, because thePortal Framework is tightly integrated with ASP.NET 2.0 Personalizationfeatures, the layout, appearance, and even behaviors of the portal arecustomizable on a per-user basis, and are automatically retrieved the next timethe user logs in.

Personalization

If you ve read about any of the newest features of ASP.NET2.0, you ve no doubt stumbled across the topics of Membership andPersonalization. The Membership infrastructure is designed to manage and storecredentials for users; Personalization is a persistent user storage mechanismdesigned to store data related to the particular user of your application, suchas:

In general, if you want to programmatically work withproperties of an individual user or allow your users independent customizationof your site through the use of themes, skins, etc., working withPersonalization is a necessity. For instance, in our portal we ll want to allowour user base to make individual customizations like layout, appearance, andbehavior of the portal. Because this is the case, a new site needs to becreated and minor configurations need to be made.

You can create a new site (to work with the examples in thisarticle) and enable personalization for your site by following these steps:

1)     Createa new folder within your Web server s default root directory(C:Inetpubwwwroot). I ll name mine Dorknozzle.

2)     OpenIIS and turn the folder into an application by right-clicking the projectfolder, selecting Properties, and choosing the Create button from the Directorytab.

3)     Configurethe application to use Integrated Windows Authentication by switching to theSecurity tab, then choosing the Edit button from the Anonymous access andauthentication control panel. Next, uncheck Anonymous access and Digestauthentication, making sure that Integrated Windows Authentication is selected.This will guarantee that the profile used in conjunction with our portal willbe the default Windows user account.

4)     CloseIIS and navigate to the Web administration screen for your newly created applicationby typing http://localhost//WebAdmin.axd. Immediately, your applicationwill be configured with the default AspNetAccessProvider. You can see that thisis the case because the Data folder is created for you within the root of yourapplication. Within that Data folder, you ll have the ASPNetDB.mdb databasefile, which is used to manage Personalization and Membership settings.

That s all there is to it. Now whenever a user accessesthe portal site, we can be assured that a unique instance of the portal will beviewed by each user, which also guarantees that layout and appearance changesare persisted on a per-user basis.

The Portal Framework

The portal acts as the shell for which information isorganized, but Web Parts are what really drive the look and customizability ofthe portal. Because Web Parts employ personalization features, Web Parts can bedragged from one location (otherwise know as zones) to another, minimized, andclosed. Web Part styles can be applied on a per-user, per-Web Part basis,themes and skins can be applied, etc. Although functionality such as this wouldhave encompassed significant effort in traditional ASP and even ASP.NET 1.x, it sreally a snap in ASP.NET 2.0, requiring little more than declarative content(ASP.NET server controls).

The Web Parts Framework

As briefly mentioned in the last paragraph, Web Parts arelittle more than a library of server controls, organized within zones, topresent a customizable portal similar to the previous screen grabs. AlthoughWeb Parts are the driving force behind the portal, they aren t self-relying.For instance, the WebPartManager (a non-visual server control), is required withinall pages that use Web Parts. The WebPartManager is responsible for binding togetherall controls within the page, responding to events on the page, handlingconnections between Web Parts, etc. The WebPartManager can be added to the pageby simply adding the control, as follows:

With that tag added and now out of the way, we can beginlooking at the real components that drive how the portal functions. As previouslymentioned, Web Parts are not self-contained and self-relying. Although in mostcases we d be fine adding the WebPartManager along with a few simple controls,the real customization lies in the intricacies exposed by various other objects,including the WebPartPageMenu, WebPartZone, EditorZone, CatalogZone, and thevarious WebParts contained within those objects. Figure 3 better illustratesthe object structure for a portal.

Figure 3: The object structure for aportal.

As you can see, the object structure of a portal page isfairly involved and, in most cases, uses a combination of the zones and Web Partsoutlined. As you progress through this article, you ll get a solidunderstanding of how these objects function. In the meantime, the table inFigure 4 begins to detail these components.

Figure 4: Componentsof the object structure.

Aside from WebPartManager and WebPartPageMenu, a typicalcustomizable portal page is made up of three parts: Web Parts, catalog parts,and editor parts. The Web Parts define the content that will be visible to theuser, the editor parts allow the user to modify and customize the settings ofWeb Parts, and the catalog parts act as a library of available Web Parts that auser can add to their portal. If a user decides they don t want to see aparticular Web Part, they need only to close the Web Part, in which case itsreference is made available from the catalog.

Web Part Zones

Although it s possible to place Web Parts directly on thepage, generally you ll want to make use of Web Part zones. Web Part zones,defined using the WebPartZone control, act as containers for your Web Parts andinfluence the layout, appearance, and behavior of the Web parts containedwithin them.

The WebPartZone control follows the same structure asother templated controls within the ASP.NET control library. For instance, theWebPartZone itself exposes generic properties for overall customization, childstyle tags for controlling the look of the output, and a zone template thatcontains the actual Web Part declarations. As an example of how to use theWebPartZone control, I ll add to my page the markup shown in Figure 5.

Sub Page_Load()   WebPartManager.WebParts(0).Title ="Welcome"  WebPartManager.WebParts(1).Title = "Company Events" End Sub

 HeaderText="Directory"Width="410">    ForeColor="Black"/>    Font-Names="Arial"/>      ForeColor="Black"/>        

 HeaderText="Events"Width="410">      Font-Names="Arial"/>    ForeColor="Black"/>        

Figure 5: Usingthe WebPartZone control.

Viewing this example in the browser produces resultssimilar to that shown in Figure 6.

Figure 6: Add the code from Figure 5to get a page similar to this.

As you can see, the contents of the user controls(WebParts) are displayed within their respective zones. Even better, the pageis somewhat customizable. If I click the Minimize button, the page posts backand a title bar is returned, complete with a Restore button similar to thatshown in Figure 7.

Figure 7: This page is somewhatcustomizable.

If you d like to customize the text to include buttonsinstead of text, you need only change the CloseVerb-ImageURL,MinimizeVerb-ImageURL, and RestoreVerb-ImageURL properties for the WebPartZone.

Note: As you ll see throughout the article, user controlsare one way of defining Web Parts. In this example, we ve used two usercontrols: Directory and Events. Not visible in the code example is the codecontained within the user controls, which is available for download (see end ofarticle for details). Also, the Register directive is not visible; the Registerdirective is still a requirement for including user controls within an ASP.NETpage.

Examining the markup, you ll notice the form contains therequired WebPartManager control and two WebPartZone controls. The WebPartZonecontrol by default will show the title and a border. With some customization ofvarious styles (PartStyle, PartTitleStyle, and VerbStyle) we can customize thelook and feel of each zone. Next, within the WebPartZone controls, we use a tag. The tag includes all the Web Parts defined in thezone. Web Parts can be defined as:

If you studied Figure 3, you ll notice we re missing theGenericWebPart. It s important to note that WebPart is a generic abstract classthat is used for referencing Web Part objects. To incorporate dynamic contentwithin the page, you must use either a user control, a user control thatinherits WebPart, or a compiled assembly. By default, the ASP.NET runtime wrapsa user control into an instance of the GenericWebPart control, thus exposingbasic Web Part capabilities such as minimizing, closing, captions, etc.

The WebPartPageMenu Control

In the previous example, you probably noticed we wererestricted in the modifications we were able to make. Basically, with thecontrols that we added, we had limited functionality exposed to us, likeminimize, close, and restore. What if we wanted to move Web Parts into otherzones? What about customizing the look of the zone and Web Parts directly fromthe browser via a unique interface? The answer to these questions lies in thedisplay modes that are supported by the WebPartManager. For instance, a typicalportal page will support the following display modes:

The control that is used to switch between these modes isthe WebPartPageMenu control. When added to the form, the WebPartPageMenucontrol lists the display modes that the page currently supports. By default,the WebPartPageMenu control lists options for switching from DesignDisplayModeto BrowseDisplayMode. If I add an EditorZone and CatalogZone to the page,options for switching to CatalogDisplayMode and EditDisplayMode are listedwithin the control, as well.

It s extremely easy to work with the WebPartPageMenucontrol. In fact, like the WebPartManager control, the WebPartPageMenu controlcan be added anywhere on the page with one line:

As Figure 8 illustrates, options for switching betweenBrowse and Design mode are listed in the dropdown menu.

Figure 8: Options for switchingbetween Browse and Design mode.

You ll also notice that the mode which the page iscurrently in is highlighted as . Now if I switch to Designmode and click Change, the page posts back and the portal zone titles andborders become visible. Even better, as Figure 9 shows, I can drag one Web Partfrom one zone to the next.

Figure 9: Drag one Web Part from onezone to the next.

Of course, you can also customize the text that isdisplayed within the menu by changing the Text attribute of the various modeverbs:

 Text="DESIGNPORTAL">    

Editor Zones

As you ve seen, the first step to enabling dynamic editingon your portal is to simply add a WebPartPageMenu control. Unfortunately, theWebPartPageMenu control only goes so far. To provide complete layout,appearance, and behavior modification control to your users, you must define aneditor zone. The editor zone, represented by the tag,defines various controls for customizing the appearance, layout, and behaviorof the Web Parts within your portal. The controls supported by the editor zoneare listed in Figure 10.

Figure 10: Thecontrols supported by the editor zone.

You can add an editor zone, complete with editor parts, asshown in Figure 11.

 Font-Names="Arial"  HeaderText="EditSettings">                  Runat="Server"/>        

Figure 11: Addingan editor zone complete with editor parts.

Like the WebPartZone control, the EditorZone controlallows you to customize the look and feel of the control when in edit modethrough various styles, including PartTitleStyle, HeaderStyle,InstructionTextStyle, and PartStyle. Also like the WebPartZone control, theEditorZone control s functionality resides within the tag.Initially, when viewed in the browser, you won t notice a significant change. However,take a second look at the WebPartPageMenu control. As Figure 12 indicates, younow have a third option listed, called Modify the Web Part Settings.

Figure 12: A third option, Modifythe Web Part Settings, is now available.

If you select Modify the Web Part Settings, the page postsback and small dropdown menu icons will appear next to the minimize optionwithin each Web Part zone s title bar. Choosing this option reveals the Editfunctionality for the particular Web Part selected, as shown in Figure 13.

Figure 13: Select Modify the WebPart Settings to access the Edit functionality for the selected Web Part.

Selecting the Edit link reveals the Appearance and Layoutcustomization options similar to that shown in Figure 14.

Figure 14: Selecting the Edit link shownin Figure 13 reveals the Appearance and Layout customization options.

As you can see from the image, the footer of the EditorZonecontrol displays an OK button to confirm changes, an Apply button to savechanges and continue, and a Cancel button to continue without saving. It simportant to note that once you ve applied a change, that change is storedwithin the personalization data store; in our case, theaspnet_PagePersonalizationPerUser table within the ASPNetDB database located inthe Data folder.

Note: You ve probably noticed that behavior settings arenot visible, despite including the BehaviorEditorPart. The basic premise behindpersonalization and the portal framework is that we have administrators andusers. By default, the portal opens in user mode, allowing only layout andappearance changes. Later in the article we ll discuss options for theadministrator, also known as shared mode. It is here that we ll be able to makechanges to the behavior of Web Parts.

Catalog Zones

By default, users are able to close every Web Part withinthe portal simply by clicking the Close button located in the upper-rightcorner of the Web Part zone. You can use the CatalogZone component, representedby the tag, as a way to provide users with the abilityto re-add controls back to a zone once they ve closed them. Even better, theCatalogZone control supports the ability of allowing your users to browse fortheir own Web Parts via the ImportCatalogPart control, as well as to pick froma list of additional Web Parts that you expose at run time via theDeclarativeCatalogPart control.

Like WebPartZone and EditorZone, the CatalogZone controldefines its functionality with the tag and offers threedistinct controls as a way to define functionality (see Figure 15).

Figure 15: The CatalogZonecontrol defines its functionality with the tag and offersthree distinct controls.

Like the controls that you ve seen to this point, CatalogZonealso supports the formatting of various styles as a way to customize the lookand feel of the zone. Figure 16 shows an example of a standard CatalogZone controladded to the page.

 Font-Names="Arial"  HeaderText="Web PartCatalog">                                            runat="server"             title="Cafeteria Menu" />                  runat="server"             title="Company News" />          

Figure 16: Astandard CatalogZone control added to the page.

As you can see from the code sample, the CatalogZonecontrol defines the three mentioned controls within its tag. Viewing this page within the browser also exposes a new option availableto us (Add Web Parts to this Page) within the WebPartPageMenu control. AssumingI ve closed the Company Directory Web Part, if I select the Add Web Parts tothis Page option from the menu, we are provided with the option of re-adding itto a zone via the Page Catalog option, as shown in Figure 17.

Figure 17: Select the Add Web Partsto this Page option from the menu to re-add it to a zone via the Page Catalogoption.

You ll also notice that a dropdown menu of available zonesis provided to help you choose in which zone to add the Web part. Selecting theImported Web Part Catalog option exposes a unique interface similar to thatshown in Figure 18 that allows users to manually browse for and add their ownpre-built Web Parts to the portal.

Figure 18: Selecting the ImportedWeb Part Catalog option exposes a unique interface that allows users tomanually browse for and add pre-built Web Parts to the portal.

Finally, we can select the Declarative Catalog link (shownin Figure 19) which exposes the two additional Web Parts (Cafeteria Menu andCompany Events). Similar to the page catalog part, the user has the option ofchoosing the part they want to add by checking the available checkbox, choosinga zone to add the part to, and then clicking Add.

Figure 19: Select the DeclarativeCatalog link to expose two additional Web Parts, Cafeteria Menu and CompanyEvents.

Shared View, User View, and BehaviorEditorPart

Similar to SharePoint, the Web Part framework supports theability to distinguish between administrators and regular users of your portalvia two supported modes: Shared Mode and User Mode. Shared Mode allows a user,typically accessible by an administrator, to configure the appearance andlayout settings for all users of the portal. User Mode, which is the defaultstate of the portal when Shared Mode settings are not enabled, allowscustomizations of the portal on a per-user basis. If you haven t noticed, we veyet to discuss the BehaviorEditorPart control. BehaviorEditorPart, anadministrative control, will never become visible, even when it resides withinthe tag of the editor zone. Because the behavior editorincludes zone-specific options for all users, only the administrator will haveaccess to this customization feature. To begin working with theBehaviorEditorPart, we must first enable Shared Mode. This can be done bycreating a new web.config file within the root of your application and addingthe code shown in Figure 20.

                           users="MyDomainzak"/>                            users="MyDomainzak"/>                           Figure 20: Enable SharedMode by creating a new web.config file within the root of your application andadding this code.   That s it! Notice we re simply adding the enterSharedScopeand modifyState verbs for user MyDomainzak. Assuming the user logs into theapplication, new options for Shared Mode and User Mode views will appear in theWebPartPageMenu control, similar to the example shown in Figure 21.  
Figure 21: New options for Shared Modeand User Mode views in the WebPartPageMenu control.   You ll also notice that User Mode view is highlighted bydefault. Because my user s name is listed within the authorization section ofthe web.config file, I can now view the Behavior settings by performing thefollowing steps: 1)     Selectthe Show Shared View option from the page menu. 2)     ClickChange. 3)     Choosethe Modify Web Part Settings option from the page menu. 4)     ClickChange. 5)     ClickEdit from the desired Web Part s edit dropdown menu. 6)     TheBehavior settings will now appear similar to those shown in Figure 22.  
Figure 22: The Behavior settings.   Among other functionality, the Behavior settings allow youto define whether or not users will be able to close, hide, minimize, changezones for Web parts, etc. Furthermore, you can provide users with a Help optionfor each Web Part in your portal. To demonstrate this, I ll select the Modaloption from the Help Mode dropdown menu. Next, I ll enter help.htm within theHelp Link textbox. Now I ll click OK and once again choose Edit from the Web Part sedit dropdown menu. Finally, notice that a Help link appears above the Editlink. Selecting the Help link reveals the Help box (if you created it) similarto that shown in Figure 23.  
Figure 23: Select the Help link to revealthe Help box.  Conclusion Creating fully interactive and user-centric portals in thepast was a difficult task. As we ve seen in this article, ASP.NET 2.0 makescreating portals via a rich set of controls as easy as adding declarativecontent to the page with very little to no server-side code. Within thearticle we looked at the WebPartPageMenu control and how it facilitates switchingbetween editing modes. We looked at creating Web Parts through user controlsand how the various Web Parts can be added and moved within Web Part zones. Wealso reviewed the use of EditorZone and CatalogZone controls, including theparts associated with these zones to allow the user complete personalization interms of layout, appearance, and behavior of the various Web Parts and zoneswithin the portal. We also looked at how the WebPartManager control, anon-visual control, is added to the page to bind together all controls on thepage. Finally, we looked at how you can make changes to the portal as anadministrator through a simple addition within the web.config file.   Although this article briefly discusses some of the newestfeatures in ASP.NET 2.0, it should get you excited enough to begin exploringthe broad set of controls and, more specifically, get you building your owncustomizable portals.   The sample code inthis article is available for download.  Zak Ruvalcaba hasbeen researching, designing, and developing for the Web since 1995. He holds aBachelor s Degree from San Diego State University and a Master of Science inInstructional Technology from National University in San Diego. Zak hasdeveloped Web applications for such companies as Gateway, HP, Toshiba, and IBM.More recently, he s worked as a wireless software engineer developing .NETsolutions for Goldman Sachs, TV Guide, The Gartner Group, Microsoft, andQualcomm. As an MCAD.NET and MCSD.NET certified professional, Zak also teachesat the San Diego Community College District on various technologies and tools,including ASP.NET, ADO.NET, and Web services. He is also the author of Build Your Own ASP.NET Website Using C# & VB.NET,available at http://www.sitepoint.com.