Writing the Web Parts
Let me quickly summarize what you've accomplished so far. You've set up the basic Web pages that will host your Web Parts. You saw that a master page will control their look and feel. You've hooked into the authentication mechanism to show/hide the administration menu in the master page. Finally, you added two ASPX pages that have WebPartZones defined on them. If you had Web Parts written, and had added them to the CatalogZone
, you could now add the Web Parts to your application, move them around, and edit them as necessary. So let's go ahead and write the Web Parts.
Writing the RSSImport Web Part
For a class to be a Web Part, it needs to inherit from System.Web.UI.WebControls.WebParts.WebPart. Interestingly, the WebPart class also inherits indirectly from the System.Web.UI.WebControls.WebControl class. This means you can use what you've learned about writing server controls and apply that knowledge to writing Web Parts.
This Web Part, or put simply, a special kind of server control, needs to have a public property called RssUrl
where I can specify the URL for my RSS feed. Given a URL, the Web Part should be able to absorb the RSS feed and render the results in a presentable form by overriding the RenderContents
method. If you look at Listing 9
, which shows the full code for this Web Part, you can see two custom classes: RssFeed and RssItem. These classes load the RSS feed as an XmlDocument and present it in strongly-typed business objects. Since that code has nothing to do with ASP.NET 2.0 Web Parts as such, I won't present it here but you can find it in the Winsmarts.RSSRender
project download that accompanies this article.
As you can see in Listing 9
, the RSSUrl
property is decorated with the WebBrowsable(true)
attribute. This setting makes this property editable by the PropertyGridEditorPart control in the EditorZone as shown in Figure 11
. Also, the PersonalizationScope
is defined as Shared
. This means that the personalization is at page level versus being at the user level.
With the project compiled as a DLL, go ahead and add a reference to the Web site project. Then go ahead and add a Register directive at the top of the SiteMaster.master master page, as shown below.
<%@ Register Assembly="Winsmarts.RSSRender"
Namespace="Winsmarts.RSSRender" TagPrefix="cc1" %>
Also, modify the DeclarativeCatalogPart as shown below.
|Figure 9: Default.aspx in CatalogMode with RSSImport ready to add.|
Description="Import My Blog"
Run the Web site and browse to authenticate.aspx
. Then login with the userid/password that is in the admin role. Using the administration menu, put the WebPartManager in the "Catalog" display mode. The page would then look like Figure 9
|Figure 10: RSSImport added to the WebPartZone, with no feed specified yet.||
Add RSSImport to WebPartZone2 and you should see something like Figure 10
. Now put the WebPartManager in "Edit" display mode. Note that the Web Part itself now shows an Edit menu. Click Edit to show the EditorZone. You can perform a number of customizations to the Web Part, but as shown in Figure 11
, you should specify an RSSUrl
, a Title
, change the Chrome Type to "Title Only," and then click OK at the bottom of the EditorZone.
You will immediately notice that the RSSImport Web Part pulls in the RSS feed from my blog, and renders it inside the Web Part. Not only that, you can easily drag and drop this Web Part to an alternative WebPartZone as shown in Figure 12
. For now, just leave the Web Part in WebPartZone2 and click the "Logout" menu item to view the page as an anonymous user would see it. Figure 13
shows the result.
Writing the Contact Me Web Part
|Figure 12: Dragging a Web Part from WebPartZone2 to WebPartZone1.||
|Figure 13: Default.aspx with RSSImport, as it appears to the anonymous user.||
I decided to write the Contact Me form as a user control rather than a server control. Since this article is not about writing user controls, I'll skip the basics of writing a simple user control that shows a contact form. It is a rather simple user control and you'll find the code in the "usercontrols" folder in the Web site project.
Using a user control as a Web Part requires almost no additional work. Simply add it to the DeclarativeCatalogPart.
<uc1:ContactMe ID="ContactMe1" runat="server"
Title="Contact Me" Description=
"A simple form to get in touch with me." />
<cc1:UIWebPart ID="UIWebPart1" runat="server"
Title="RSSImport" Description="Import my Blog"/>
The ASP.NET 2.0 Web Part framework wraps anything that is a control, but not a Web Part, inside a GenericWebPart class instance. You have the option of implementing the IWebPart interface and offer customization to some degree. But by using a GenericWebPart class you lose advanced features such as connections or communication between Web Parts.
Now using a mechanism similar to the first Web Part, you can easily add and customize this Web Part to the contact.aspx
form, which has only a single WebPartZone.
Writing the ContentEditor Web Part
This Web Part will allow the administrator to present any static HTML content. As with the RSSRender Web Part, you could easily setup such a Web Part by creating a public property called HtmlContent
, then simply write out the value of HtmlContent
in the overridden RenderContents
You could also decorate the HtmlContent
property with the WebBrowsable(true)
attribute. This will give you a tiny textbox to edit your fancy HTML. While that will work, it is hardly a good user experience. So the trick is to be able to create a custom editor for this Web Part, and somehow hook the EditorPart to the Web Part. The custom EditorPart is nothing but a class that inherits from System.Web.UI.WebControls.WebParts.EditorPart.
In this example, you'll leverage the telerik r.a.d. editor to provide the user with a full-fledged Web-based HTML editor. You can create an instance of the telerik r.a.d. editor by overriding the CreateChildControls
method as shown in Listing 10
The EditorPart class comes with two abstract methods that you must override.
- ApplyChanges is responsible for getting the Web Part being edited right now using the WebPartToEdit property, and applying the values the user specified to the Web Part. Here is the implementation of the ApplyChanges method.
SyncChanges is responsible for getting the current state of values from the Web Part being edited, and applying those to the EditorPart. The implementation for SyncChanges for this EditorPart is shown below.
public override bool ApplyChanges()
UIWebPart part = WebPartToEdit as UIWebPart;
if (part != null)
part.HtmlContent = htmlContentTxt.Html;
public override void SyncChanges()
UIWebPart part = WebPartToEdit as UIWebPart;
if (part != null)
htmlContentTxt.Html = part.HtmlContent;