12.2. Building a Web Parts Page without AJAX
As you begin using the Portal Framework to build Web sites, note that the framework defines everything in zones. There are zones for laying out as well as for editing content. The zones that a page might incorporate are managed by a Portal Framework manager. The Portal Framework manager performs the management on your behalf, meaning that you do not have to manage them yourself in any fashion. This makes working with the Portal Framework a breeze.
This framework contains a lot of moving parts, and these multiple pieces that are heavily dependent upon each other. For this reason, this section starts by examining a simple page built with a couple of Web Parts. This page is presented in Listing 12-1.
Example 12-1. A simple page using Web Parts without AJAX
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.UI.WebControls.WebParts"%>
<%@ Register src="HelloUser.ascx" tagname="HelloUser" tagprefix="uc1" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = "You selected " + Calendar1.SelectedDate.ToShortDateString();
}
protected void LinkButtonBrowse_Click(object sender, EventArgs e)
{
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
protected void LinkButtonDesign_Click(object sender, EventArgs e){
WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Basic Web Parts</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<asp:LinkButton ID="LinkButtonBrowse" runat="server"
onclick="LinkButtonBrowse_Click">Browse</asp:LinkButton>
<asp:LinkButton ID="LinkButtonDesign" runat="server"
onclick="LinkButtonDesign_Click">Design</asp:LinkButton>
<table>
<tr valign="top">
<td colspan="2"><h1>Bill Evjen's Web Page</h1></td>
</tr>
<tr valign="top">
<td>
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server"
Title="Select a date"
OnSelectionChanged="Calendar1_SelectionChanged">
</asp:Calendar>
<asp:Label ID="Label1" runat="server"
Title="Selected Date:"></asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID="WebPartZone2" runat="server">
<ZoneTemplate>
<uc1:HelloUser ID="HelloUser1" runat="server"
Title="Entry Form" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
</table>
</div>
</form>
</body>
</html> |
12.2.1. The WebPartManager Server Control
There are some important pieces to this page of code. The first and foremost thing to understand is the WebPartManager control that is on the page. The WebPartManager control is an ASP.NET server control that completely manages the state of the zones and the content placed in these zones on a per user basis. This control, which has no visual aspect, can add and delete items contained within each zone of the page. The WebPartManager control can also manage the communications sometimes required between different elements contained in the zones. For example, you can pass a specific name-value pair from one item to another item within the same zone, or between items contained in separate zones. The WebPartManager control provides the capabilities to make this communication happen.
The WebPartManager control must be in place on every page in your application that works with the Portal Framework. A single WebPartManager control does not manage an entire application; instead, it manages on a per page basis.
You can also place a WebPartManager server control on the master page (if you are using one) to avoid having to place one on each and every content page.
12.2.2. WebPartZone Server Controls
After you place the WebPartManager control on the page, the next step is to create zones from which you can utilize the Portal Framework. You should give this step some thought because it contributes directly to the usability of the page you are creating. Web pages are constructed in a linear fashion — either horizontally or vertically. Web pages are managed in square boxes — sometimes using tables that organize the columns and rows in which items appear on the page.
First, the page from Listing 12-1 includes the <asp:WebPartManager> control that manages the items contained in the two zones on this page. Within the table, the <asp:WebPartZone> server control specifies two Web zones. You can declare each Web zone in one of two ways. You can use the <asp:WebPartZone> element directly in the code, or you can create the zones within the table by dragging and dropping WebPartZone controls onto the design surface at appropriate places within the table. Figure 12-2 shows what the sample from Listing 12-1 looks like in the Design view of Visual Studio 2008.
When using Visual Studio 2008, note that by default this IDE creates a Microsoft SQL Server Express Edition file called ASPNETDB.MDF and stores it in the App_Data folder of your Web project. This database file is where the Portal Framework stores all the customization points. Although, Visual Studio 2008 uses SQL Server Express by default, you can also code this page to work from the full version of SQL Server 2008, 2005, 2000, or even 7.0.
Now that you have seen the use of WebPartZone controls, which are managed by the WebPartManager control, the next section takes a closer look at the WebPartZone server control itself.
12.2.3. Understanding the WebPartZone Control
The WebPartZone control defines an area of items, or Web Parts, that can be moved, minimized, maximized, deleted, or added based on programmatic code or user preferences. When you drag and drop WebPartZone controls onto the design surface using Visual Studio 2008, the WebPartZone control is drawn at the top of the zone, along with a visual representation of any of the items contained within the zone.
Figure 12-2. Figure 12-2
You can place almost anything in one of the Web zones. For example, you can include the following:
HTML elements (when putting a runat="server" on the element)
Web server controls
User controls
Custom controls
As you can see from Listing 12-1, WebPartZone controls are declared like this:
<asp:WebPartZone ID="WebPartZone1" runat="server"></asp:WebPartZone>
The items that are placed in the WebPartZone controls from this listing are standard controls, such as the Calendar and the Label controls. There is also a user control in this page. To build the same user control, add a user control (.ascx) to your project and name the control HelloUser.ascx. The code for this user control is defined here in Listing 12-2.
Example 12-2. The user control to use and place within the WebPartZone control
<%@ Control Language="C#" ClassName="HelloUser" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
if (TextBox1 != null)
{
Label1.Text = "Hello " + TextBox1.Text;
}
}
</script>
<p>What is your name?</p>
<p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Submit Name" />
</p>
<p>
<asp:Label ID="Label1" runat="server" Font-Bold="True"
Font-Size="Large"></asp:Label>
</p> |
As page demonstrates, this is a pretty simple user control that performs a postback operation when the button on the page is clicked.
12.2.4. Allowing Users to Change the Page Mode
By working with the WebPartManager class either directly or through the use of the WebPartManager server control, you can enable your users to change the page's mode. Changing the mode of the page being viewed allows the user to add, move, or change the pages they are working with. The nice thing about the Web Part capabilities of ASP.NET is that these changes are then recorded to the ASPNETDB.MDF database file and are, therefore, recreated the next time the user visits the page.
The page from Listing 12-1 allows the end user to work with two page modes: Browse and Design. The Browse mode is a view that allows the end users only to view the page; they are unable to make any page adjustments. However, when the end users switch to the Design mode, they can move the parts or controls of the page around to completely customize the page's appearance (although not all browsers successfully support this feature). The mode is set to Browse when the page is first generated:
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode; } }
To change the mode of the page, the end user has only to click one of the LinkButton controls that are at the top of the page. Clicking on one of the controls changes the DisplayMode property of the WebPartManager control:
protected void LinkButtonBrowse_Click(object sender, EventArgs e)
{
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
protected void LinkButtonDesign_Click(object sender, EventArgs e)
{
WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
}