Creating a Simple Page with Web Parts
In this part of the walkthrough, you create a page that uses Web Parts to show static content.
.gif) Note: |
|---|
You do not need to do anything to enable Web Parts personalization; it is enabled by default for the Web Parts control set. When you first run a Web Parts page on a site, ASP.NET sets up a default personalization provider to store user personalization settings. The default provider uses a database created in a subdirectory of your site's directory. For more information about personalization, see
Web Parts Personalization Overview.
|
To create a Web page
In your text editor, create a new file and add the following page declaration to the beginning of the file.
<%@ page language="VB" %>
<%@ page language="C#" %>
Enter tags beneath the page declaration to create a complete page structure as shown in the following code example.
Note that the page includes an empty table with one row and three columns. The table will contain the Web Parts controls you will add later.
<html>
<head runat="server">
<title>Web Parts Page</title>
</head>
<body>
<h1>Web Parts Demonstration Page</h1>
<form runat="server" id="form1">
<br />
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
</form>
</body>
</html>
Name the file WebPartsDemo.aspx, and save it in the directory for your Web site.
The next step is to set up zones. Zones are composite controls that occupy a specified region of a page and contain Web Parts controls.
To add zones to the page
Just below the <form> element in your page, add an <asp:webpartmanager> element, as shown in the following example.
<asp:webpartmanager id="WebPartManager1" runat="server" />
The WebPartManager control is required on every page that uses Web Parts controls.
Add an <asp:webpartzone> element inside the first <td> element in the table, and assign its property values as shown in the following code example.
Note that the <asp:webpartzone> element also contains a <zonetemplate> element. The Web Parts controls are placed within the <zonetemplate> element.
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<asp:webpartzone id="SideBarZone" runat="server"
headertext="Sidebar">
<zonetemplate>
</zonetemplate>
</asp:webpartzone>
</td>
Add an <asp:webpartzone> element inside the second <td> element in the table, and assign its property values as shown in the following code example:
<td valign="top">
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
<zonetemplate>
</zonetemplate>
</asp:webpartzone>
</td>
Save the WebPartsDemo.aspx file.
Your page now has two zones that you can control separately. However, neither zone has any content, so the next step is to create content. For this walkthrough, you work with Web Parts controls that display only static content.
The layout of the Web Parts zone is specified by a <zonetemplate> element. Inside the zone template, you can add any Web server control, whether it is a custom Web Parts control, a user control, or an existing server control. In this walkthrough you are using the Label server control, and inside it you are simply adding static text. When you place a regular ASP.NET server control in a WebPartZone zone, ASP.NET treats it as a Web Parts control at run time, which enables you to use most Web Parts features with standard server controls.
To create content for the zones
Inside the <zonetemplate> element for the Main zone, add an <asp:label> element with some content, as shown in the following code example:
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
<zonetemplate>
<asp:label id="contentPart" runat="server" title="Content">
<h2>Welcome to My Home Page</h2>
<p>Use links to visit my favorite sites!</p>
</asp:label>
</zonetemplate>
</asp:webpartzone>
Save the WebPartsDemo.aspx file.
Create a new file in your text editor.
This file will contain a user control that can also be added to the page as a Web Parts control.
At the top of the new file, add a control declaration as shown in the following example.
<%@ control language="VB" classname="SearchUserControl" %>
<%@ control language="C#" classname="SearchUserControl" %>
| Note: |
|---|
The search control for this walkthrough does not implement actual search functionality; it is used only to demonstrate Web Parts features.
|
Beneath the control declaration, add a pair of <script> tags, and within them add code to create a personalizable property.
Note that the ResultsPerPage property has a Personalizable attribute. This property would enable users of the control to personalize how many search results to return per page, if you provided an edit control with the user interface (UI) to change the setting in Design view.
Make sure the code for your control looks like the following code example:
<%@ control language="VB" classname="SearchUserControl" %>
<script runat="server">
Private results As Integer
<Personalizable()> _
Property ResultsPerPage() As Integer
Get
Return results
End Get
Set(ByVal value As Integer)
results = value
End Set
End Property
</script>
<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
private int results;
[Personalizable]
public int ResultsPerPage
{
get
{return results;}
set
{results = value;}
}
</script>
Add a text box and a button below the <script> element to provide the UI for a search control, as shown in the following code example:
<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />
.gif) Security Note: |
|---|
This control has a textbox that accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate user input to ensure that the input does not contain HTML elements or script. For more information, see
Script Exploits Overview.
|
Name the file SearchUserControlVB.ascx or SearchUserControlCS.ascx (depending on which language you are using), and save it in the same directory as the WebPartsDemo.aspx page.
Now you will add two controls to the Sidebar zone, one containing a list of links and another that is the user control you created in the previous procedure. The links are added as a single, standard Label server control, similar to the way you created the static text for the Main zone. However, although the individual server controls contained in the user control could be contained directly in the zone, in this case they are not. Instead, they are part of the user control you created in the previous procedure. This demonstrates a common way to package whatever controls and extra functionality you want in a user control, and then reference that user control in a zone as a Web Parts control.
At run time, ASP.NET wraps both controls with GenericWebPart controls. When a GenericWebPart control wraps a Web server control, the generic part control is the parent, and you can access the server control through the parent control's ChildControl property. Generic part controls enable standard Web server controls to have the same basic behavior and attributes as Web Parts controls that derive from the WebPart class.
To create content for the Sidebar zone
Open the WebPartsDemo.aspx page in your text editor.
At the top of the page, just after the page declaration, add the following declaration to reference the user control you just created:
<%@ register tagprefix="uc1" tagname="SearchUserControl"
src="searchusercontrolvb.ascx" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl"
src="searchusercontrolcs.ascx" %>
Inside the <zonetemplate> element for the Sidebar zone, add a Label control containing several links. Beneath the control, reference the user control you created previously, as shown in the following code example:
<asp:webPartZone id="SidebarZone" runat="server"
headertext="Sidebar">
<zonetemplate>
<asp:label runat="server" id="linksPart" title="Links">
<a href="www.asp.net">ASP.NET site</a>
<br />
<a href="www.gotdotnet.com">GotDotNet</a>
<br />
<a href="www.contoso.com">Contoso.com</a>
<br />
</asp:label>
<uc1:SearchUserControl id="searchPart" runat="server"
title="Search" />
</zonetemplate>
</asp:WebPartZone>
Save the WebPartsDemo.aspx file.
Now you can test your page.
To test the page
Load the page in a browser.
The page displays the two zones. Each control on the page is displayed with a downward arrow in its title bar, which contains a drop-down menu called the verbs menu. Verbs are actions that a user can carry out on a server control, such as closing, minimizing, or editing a control. Each item in the verbs menu is a verb. The following screen shot shows the page.
.gif)
Click the downward arrow in a control's title bar to display its verbs menu, and then click the Minimize link.
The control is minimized.
In the verbs menu, click Restore.
This demonstrates the different visual display states of Web Parts controls.