How to Create Web Part Pages in ASP - Build website/Portals Part by Part

Welcome to TheCredence.com - You may like to subscribe to our RSS feed to stay updated.

Today’s web sites are getting more and more complicated. It is a result of the user’s expectations for personalization their site space. When users login they want every part in the site look exactly how they like. The good look and feel is not enough to capture the user’s choice today. Users prefer to see on their page only specific information, links, editable section and so on, not the standard items for all users. Since few years, a new web site type provides this functionality – the Web portals.

Architecture of Web portals

This type of web site consists of parts that are user definable, switchable and can easily be managed. In ASP.NET 2.0 these parts are called web parts. The typical web portal in .NET consists of Web part manager, Web part zones, web parts and prebuilt zones and parts. All these items are responsible of managing and presenting the coder and user definable information on portal page. Commonly the process of this management looks like this: Define customizable sections, offering components for item selection, customizing the web page and at the end saving the customized appearance.

Build process

First let’s take a look at the different parts of web portals in ASP.NET 2.0

WebPartManager

It is the main part of the system which control the basic model of interaction between other parts. It defines trough its property DisplayMode how the webparts and zones are maintained.
- browse – this model is used to display contents of web page;
- design – the user can change the position of web parts by dragging and dropping;
- catalog – the web parts maintenance is managed trough the catalog web special part (we will see later how it can be used)
- connect – the user can configure connections between connectable web parts;
- edit – the user can manage web parts properties trough editor web special part.

WebPartZones

This web controls allow adding web parts and control their appearance. Adding is made by declaring zone templates like the datagrid control. It looks like:

 
<ZoneTemplate>
	<asp:ListBox ID="ListBox1" runat="server">
		<asp:ListItem>item1</asp:ListItem>
		<asp:ListItem>item2</asp:ListItem>
		<asp:ListItem>item3</asp:ListItem>
		</asp:ListBox>
	<asp:Button ID="button2" runat="server" Text="Button2" />
</ZoneTemplate>

When implementing web portal techniques we need to have a authentication supported because each user web space appearance should be stored. Storing can be done trough default store provider, sql provider or any other custom built. Now when we have a basic knowledge of web parts let’s build a simple portal page with three web parts. Windows authentication is used, when none is specified.

1. First create web site with default.aspx page.
2. Add a table with three rows and web part zones like this.

 
<asp:WebPartManager ID="WebPartManager1" runat="server">
        </asp:WebPartManager>
<table width="100%">
<tr style="background-color:Gray; height:auto" valign="middle">
<td colspan="2" align="center"><strong >Web part page</strong></td>
</tr>
<tr valign="top" style="height:150">
<td style="width:35%" >
                    <asp:WebPartZone ID="WebPartZone1" runat="server"
                                     Height="100%" Width="100%">
                        <ZoneTemplate>
                            <asp:ListBox ID="ListBox1" runat="server">
                                <asp:ListItem>item1</asp:ListItem>
                                <asp:ListItem>item2</asp:ListItem>
                                <asp:ListItem>item3</asp:ListItem>
                            </asp:ListBox>
                            <asp:Button ID="button2" runat="server" Text="Button2" />
                        </ZoneTemplate>
                    </asp:WebPartZone>
                </td>
<td style="width:auto">
                    <asp:WebPartZone ID="WebPartZone2" runat="server"
                                          Height="100%" Width="100%">
                        <ZoneTemplate>
                            <asp:RadioButton ID="RadioButton1" runat="server" />
                            <asp:Button ID="Button1" runat="server" Text="Button1" />
                        </ZoneTemplate>
                    </asp:WebPartZone>
                </td>
</tr>
<tr style="background-color:Silver; height:auto" valign="top">
<td colspan="2" align="center" style="text-align: left" >
                    
                    <asp:CatalogZone ID="CatalogZone1" runat="server"
                                    BackColor="#E3EAEB" BorderColor="#CCCCCC"
                                    BorderWidth="1px" Font-Names="Verdana" Padding="6">
                        <HeaderVerbStyle Font-Bold="False" Font-Size="0.8em"
                                                Font-Underline="False" ForeColor="#333333" />
                        <PartTitleStyle BackColor="#1C5E55" Font-Bold="True"
                                                Font-Size="0.8em" ForeColor="White" />
                        <PartChromeStyle BorderColor="#C5BBAF" BorderStyle="Solid"
                                                BorderWidth="1px" />
                        <InstructionTextStyle Font-Size="0.8em" ForeColor="#333333" />
                        <PartLinkStyle Font-Size="0.8em" />
                        <EmptyZoneTextStyle Font-Size="0.8em" ForeColor="#333333" />
                        <LabelStyle Font-Size="0.8em" ForeColor="#333333" />
                        <VerbStyle Font-Names="Verdana" Font-Size="0.8em"
                                                ForeColor="#333333" />
                        <ZoneTemplate>
                            <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
                        </ZoneTemplate>
                        <PartStyle BorderColor="#E3EAEB" BorderWidth="5px" />
                        <SelectedPartLinkStyle Font-Size="0.8em" />
                        <FooterStyle BackColor="#C5BBAF" HorizontalAlign="Right" />
                        <HeaderStyle BackColor="#C5BBAF" Font-Bold="True"
                                                Font-Size="0.8em" ForeColor="#333333" />
                        <EditUIStyle Font-Names="Verdana" Font-Size="0.8em"
                                                ForeColor="#333333" />
                    </asp:CatalogZone>
                    
                    &nbsp;</td>
</tr>
</table>

Notice that the web pat manager should be on top of each web part control in order to work properly. The catalog zone manages the visible property of each part. When one part is hidden from browser it appears in the catalog zone. In order the catalog zone to be visible, the display mode of the manager should be set to catalog.

 
protected void Page_Load(object sender, EventArgs e)
{
	WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}

Now examine the page appearance and behavior.

The web part portal techniques are far more complicated and functional. There are many variants of manipulating the web site appearance trough web parts model.