Web Parts in ASP.NET 2.0 — Part 5.

In this article we will see how users can create a manager to allow adding their own Web Parts to the page as well as define properties for the Web Parts. This will allow the users to move the Web Part controls from one zone to another zone as well as allow them to edit various characteristics of the controls. The characteristics might include properties such as appearance, layout and behavior.

We will take a walkthrough that will allow us to edit the basic characteristics of any Web Part control on the page. This walk through makes use of the existing project that we used in the previous sessions.

In the WebPartsDemo.aspx file, add an element inside the third element in the table. Add a element, an element, and an element. The code should look like the following example.

<asp:editorzone id="EditorZone1" runat="server">

<zonetemplate>

<asp:appearanceeditorPart runat="server" id="AppearanceEditorPart1" />

<asp:layouteditorPart runat="server" id="LayoutEditorPart1" />

zonetemplate>

asp:editorzone>

td>

Note that we will be making use of the AppearanceEditorPart and the LayoutEditorPart in this walkthrough.

Add an element to the element, just below the element. This allows you to specify the text that represents the edit mode in the Display Modes drop-down menu on the page.

asp:WebPartManager><br />

<asp:WebPartPageMenu ID="WebPartPageMenu1" Runat="server">

<editmodeverb text="Edit" />

asp:WebPartPageMenu>

This is all that is needed to provide the functionality to edit the Web Part and add attributes to the Web Parts. Let us run the page and see the layout. When the page runs for the first time this is what you see as in Figure 1.

Let us open the drop down menu and see if there is anything new since we have added a editmodeverb to this. Yes of course the word "Edit" is seen here in the drop down list box as seen in Figure 2.

Now let us select the word "Edit" from the drop down list box and then click on the Change button. The layout of the page changes slightly and a small drop down arrow is seen just before the links "Minimize" and "Close" as seen in Figure 3.

Clicking on the small arrow reveals a new menu item "Edit" as seen in Figure 4.

Wow! A host of new items are now seen in the last column of that page and it has a lot of controls that allow to tweak the settings of the Web Part for which the edit menu was clicked. So let us focus on editing the WebPart "Search" for now. The EditorZone control appears containing the EditorPart controls that we just added now. The layout is seen in Figure 5.

Appearance section of the edit control, change the Title to Find, use the Chrome Type drop-down to select Title Only, change the direction "Right to left". This is shown in Figure 6.

Click on OK and see what happens to the Web Part, the effects get applied instantly and the Web Part is now exactly as we wanted it to be. There is no border for the Web Part and the title has changed from "Search" to "Find". Also the EditorZone control has disappeared. This is seen in Figure 7.

Now we will wrap up the article on Web Parts with this demo. This will allow the user to add his own Web Parts to the Website at run time. This is similar to customizing the Web page to show the Web Parts of his interest and hide the Web Parts in which he is not interested.

In the WebPartsDemo.aspx file, add an element inside the third column of the table, just below the element. Add a element, and within that, an element and a element. Finally, add and elements. Your code should look like the following code example.

<zonetemplate>

<asp:declarativecatalogPart Title="My Catalog" runat="server" id="declarativePart1">

<webPartstemplate>

<asp:fileupload runat="server" id="upload1" title="Upload Files" />

<asp:calendar runat="server" id="cal1" Title="Team Calendar" />

webPartstemplate>

asp:declarativecatalogPart >

zonetemplate>

Add a element to the ,just below the element, so that you can specify the text that appears in the menu.

The code looks like this

<

asp:WebPartManager>

<br />

<asp:WebPartPageMenu ID="WebPartPageMenu1" Runat="server">

<editmodeverb text="Edit" />

<catalogmodeverb text="Catalog" />

asp:WebPartPageMenu>

Now let us run the page and see the outcome of what we have seen so far. Run the Website by pressing F5. The outcome is seen in Figure 8. Now it is seen that the catalog menu Part is seen in the drop down list box.

Let us select this menu item and then see what happens. Wow we are seeing a new Web Part in the place where we saw the editor zone earlier. The outcome is seen in Figure 9.

Clearly it is seen that there are 2 Web Parts that can be added to this page. One is the upload file control and the other is the calendar. Also a drop down list box is visible which allows adding the Web Part to the specific zone of our choice. Note that the number of zones that appears in the drop down list box depends on the number of zones that are available in the page and this will vary from site to site.

Let us add both the Web Parts to the site. Let us add this Web Parts to the Main Zone since it is the zone which is empty for now. Check both the boxes and then select the Main zone and then click on Add button. Voila! the main zone is now visible with both the controls. This is seen in Figure 10.

We saw a lot that can be done with Web Parts and that also with just a little bit of coding.

This article concludes the discussion of "Web Parts" and in the next article we will continue exploring the new features of ASP.NET 2.0. So stay tuned and keep watching this section of the Web site.

Disclaimer

"Since this article was written when the technology .NET 2.0 is still in development, there is no guarantee that the features explained will be there in the final version and is subject to change. This article should be taken only for getting a general idea of what is going to be available in .NET 2.0 and not the actual features that will be a Part of the final release of .NET 2.0"