Introduction to ASP. NET 2.0 Web Parts framework

Introduction to ASP. NET 2.0 Web Parts Framework Introducing the ASP. NET 2.0 Web Parts Framework

Stephen Walther

Microsoft

2004-10
Update for changes in Beta 2

Applicable:

ASP. NET 2.0 Beta 2
ASP. NET Framework
Web Parts

 

Summary:The full set of Web Parts controls allows you to create customizable Web applications, such as enterprise network portal applications. When you use Web Parts to build a website, you can easily customize the website, regardless of the site administrator or individual users. Web Parts can make websites more friendly.

Download source code:

• WebPartsCS. msi
• WebPartsVB. msi

Directory

• Introduction
• Create Web Parts (Translating ...)
• Personalized Web Parts (Translating ...)
• Create a custom Web Parts menu (Translating ...)
• Transfer information between Web Parts (Translating ...)
• Import and Export Web Part settings
• Summary (Translating ...)

Introduction

The new Web Parts framework in ASP. NET 2.0 brings us a lot of benefits. You can build applications that can be customized at runtime. You can drag and drop the Web Parts elements on the page, or add or delete page elements through one or more Web Parts Classification controls.

This article introduces you to the Web Part framework. This article not only introduces you to the basic content of Web Parts, but also discusses some of its advanced features. For example, you can learn how to share settings between applications by importing and exporting Web Parts and how to add custom menu verbs to Web Parts; you can also learn how to transfer information between different Web Parts by connecting to a page.

Import and Export web part settings

 

This is the last part. We will try to complete the last advanced web part feature: How to import and export web part settings.

When you want to share web part settings between different web applications or even between different web sites, it is very useful to import and export web part settings. If more than one site is using a relatively consistent web part (it does not have to be completely consistent, but must have the same attributes), you can set cross-site applications.

The modified FeaturedProdecutPart program list (Listing 11) is configured to allow users to export web parts.

Listing 11. FeaturedProductPart5.cs (C #)

Using System;
Using System. Collections;
Using System. Data;
Using System. Data. SqlClient;
Using System. Web. UI;
Using System. Web. UI. WebControls. WebParts;
Namespace myControls
{
Public class FeaturedProductPart5: WebPart
{
Const string connectionString =
"Server = localhost; Trusted_Connection = True; Database = Northwind ";
Const string selectString = "SELECT * FROM Products" +
"JOIN Categories ON Products. CategoryID = Categories. CategoryID ";
Private string _ categoryName = "Beverages ";

Public FeaturedProductPart5 ()
{
This. title = "Featured Product (Visual Studio 2005 Technical Articles )";
This. ExportMode = WebPartExportMode. All;
}
[Personalizable, WebBrowsable]
Public string CategoryName
{
Get {return _ categoryName ;}
Set {_ categoryName = value ;}
}
Protected override void RenderContents (HtmlTextWriter writer)
{
// Load Products into able
DataTable productTable = new DataTable ();
SqlDataAdapter dad = new SqlDataAdapter (selectString,
ConnectionString );
Dad. Fill (productTable );
// Filter the DataTable with a Category
DataView productView = productTable. DefaultView;
ProductView. RowFilter = "CategoryName = '" +
_ CategoryName + "'";
If (productView. Count = 0)
Return;
// Randomly select a row
Random rnd = new Random ();
DataRowView row = productView [rnd. Next (productView. Count)];
// Render the row
Writer. Write (string) row ["ProductName"]);
Writer. Write (String. Format ("-{0: c}", row ["UnitPrice"]);
}
}
}

Listing 11. FeaturedProductPart5.vb (Visual Basic. NET)

Imports System. Collections
Imports System. Data
Imports System. Data. SqlClient
Imports System. Web. UI
Imports System. Web. UI. WebControls. WebParts
Namespace myControls
Public Class FeaturedProductPart5
Inherits WebPart
Const connectionString As String = _
"Server = localhost; Trusted_Connection = True; Database = Northwind"
Const selectString As String = "SELECT * FROM Products "&_
"JOIN Categories ON Products. CategoryID = Categories. CategoryID"
Private _ categoryName As String = "Beverages"
Public Sub New ()
MyBase. Title = "Featured Product"
MyBase. ExportMode = WebPartExportMode. All
End Sub
<Personalizable (), WebBrowsable ()> _
Public Property CategoryName () As String
Get
Return _ categoryName
End Get
Set (ByVal value As String)
_ CategoryName = value
End Set
End Property
Protected Overrides Sub RenderContents (ByVal writer _
HtmlTextWriter)
'Load Products into able
Dim productTable As New DataTable ()
Dim dad As New SqlDataAdapter (selectString ,_
ConnectionString)
Dad. Fill (productTable)
'Filter the DataTable with a Category
Dim productView As DataView = productTable. DefaultView
ProductView. RowFilter = "CategoryName = '"&
_ CategoryName &"'"
If productView. Count = 0 Then
Return
End If
'Randomly select a row
Dim rnd As New Random ()
Dim row As DataRowView = _
ProductView (rnd. Next (productView. Count ))
'Render the row
Writer. Write (row ("ProductName"). ToString ())
Writer. Write (String. Format ("-{0: c}", row ("UnitPrice ")))
End Sub
End Class
End Namespace

Take a look at the constructor section in Listing 11. You can see that the constructor sets the ExportMode to WebPartExportMode. all, that is, you can set this attribute to export, then the web part can be exported.

Another step is to export web parts. You must add the "enableExport Settings" to your application configuration file. The following Listing 12 is the attribute settings in the Web. Config file.

Listing 12. Web. Config

<? Xml version = "1.0"?>
<Configuration xmlns = "http://schemas.microsoft.com/.NetConfiguration/v2.0">
<System. web>
<WebParts enableExport = "true"/>
</System. web>
</Configuration>

Modify the home page program and the following Listing 13 can be used to place the exported web part.

Listing 13. Home5.aspx (C #)

<% @ Page Language = "C #" %>
<% @ Register TagPrefix = "custom" Namespace = "myControls" %>
<Script runat = "server">

Void CustomizePage (Object s, EventArgs e)
{
WebPartManager1.DisplayMode =
WebPartManager. CatalogDisplayMode;
}
Void EditWebParts (Object s, EventArgs e)
{
WebPartManager1.DisplayMode = WebPartManager. EditDisplayMode;
}

</Script>
<Html>
<Head id = "Head1" runat = "server">
<Title> Home Page </title>
</Head>
<Body bgcolor = "gray">
<Form id = "form1" runat = "server">
<Asp: WebPartManager
ID = "WebPartManager1"
Runat = "Server"/>

<Table width = "100%" Height = "100%" cellpadding = "5" cellspacing = "10">
<Tr height = "50">
<Td colspan = "3" align = "right" bgcolor = "white">
<Asp: LinkButton ID = "LinkButton1"
Text = "Customize Page"
OnClick = "CustomizePage"
Runat = "Server"/>
|
<Asp: LinkButton ID = "LinkButton2"
Text = "Edit Web Parts"
OnClick = "EditWebParts"
Runat = "Server"/>
</Td>
</Tr>
<Tr>
<Td valign = "top" bgcolor = "white" width = "40%">
<Asp: WebPartZone
ID = "WebPartZone1"
Width = "100%"
HeaderStyle-BackColor = "lightblue"
PartTitleStyle-BackColor = "silver"
MenuStyle-BackColor = "# eeeeee"
MenuStyle-BorderStyle = "solid"
MenuStyle-BorderWidth = "1"
MenuStyle-BorderColor = "black"
Runat = "Server"/>
</Td>
<Td valign = "top" bgcolor = "white" width = "40%">
<Asp: WebPartZone
ID = "WebPartZone2"
Width = "100%"
HeaderStyle-BackColor = "lightblue"
PartTitleStyle-BackColor = "silver"
MenuStyle-BackColor = "# eeeeee"
MenuStyle-BorderStyle = "solid"
MenuStyle-BorderWidth = "1"
MenuStyle-BorderColor = "black"
Runat = "Server"/>
</Td>
<Td valign = "top" width = "20%" bgcolor = "white">
<Asp: CatalogZone
ID = "CatalogZone1"
Runat = "server">
<ZoneTemplate>
<Asp: DeclarativeCatalogPart
ID = "DeclarativeCatalogPart1"
Runat = "server">
<WebPartsTemplate>
<Custom: FeaturedProductPart5
ID = "myFeaturedProduct"
Runat = "Server"/>
</WebPartsTemplate>
</Asp: DeclarativeCatalogPart>
<Asp: ImportCatalogPart
ID = "ImportCatalogPart1"
Runat = "server"/>
</ZoneTemplate>
</Asp: CatalogZone>

<Asp: EditorZone
ID = "EditorZone1"
Runat = "Server">
<ZoneTemplate>
<Asp: PropertyGridEditorPart
Id = "PropertyGridEditorPart1"
Runat = "Server"/>
</ZoneTemplate>
</Asp: EditorZone>
 
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

Listing 13. Home5.aspx (Visual Basic. NET)

<% @ Page Language = "vb" %>
<% @ Register TagPrefix = "custom" Namespace = "myControls" %>
<Script runat = "server">

Sub CustomizePage (ByVal s As Object, ByVal e As EventArgs)
WebPartManager1.DisplayMode = WebPartManager. CatalogDisplayMode
End Sub
Sub EditWebParts (ByVal s As Object, ByVal e As EventArgs)
WebPartManager1.DisplayMode = WebPartManager. EditDisplayMode
End Sub

</Script>
<Html>
<Head id = "Head1" runat = "server">
<Title> Home Page </title>
</Head>
<Body bgcolor = "gray">
<Form id = "form1" runat = "server">
<Asp: WebPartManager
ID = "WebPartManager1"
Runat = "Server"/>

<Table width = "100%" Height = "100%" cellpadding = "5" cellspacing = "10">
<Tr height = "50">
<Td colspan = "3" align = "right" bgcolor = "white">
<Asp: LinkButton ID = "LinkButton1"
Text = "Customize Page"
OnClick = "CustomizePage"
Runat = "Server"/>
|
<Asp: LinkButton ID = "LinkButton2"
Text = "Edit Web Parts"
OnClick = "EditWebParts"
Runat = "Server"/>
</Td>
</Tr>
<Tr>
<Td valign = "top" bgcolor = "white" width = "40%">
<Asp: WebPartZone
ID = "WebPartZone1"
Width = "100%"
HeaderStyle-BackColor = "lightblue"
PartTitleStyle-BackColor = "silver"
MenuStyle-BackColor = "# eeeeee"
MenuStyle-BorderStyle = "solid"
MenuStyle-BorderWidth = "1"
MenuStyle-BorderColor = "black"
Runat = "Server"/>
</Td>
<Td valign = "top" bgcolor = "white" width = "40%">
<Asp: WebPartZone
ID = "WebPartZone2"
Width = "100%"
HeaderStyle-BackColor = "lightblue"
PartTitleStyle-BackColor = "silver"
MenuStyle-BackColor = "# eeeeee"
MenuStyle-BorderStyle = "solid"
MenuStyle-BorderWidth = "1"
MenuStyle-BorderColor = "black"
Runat = "Server"/>
</Td>
<Td valign = "top" width = "20%" bgcolor = "white">
<Asp: CatalogZone
ID = "CatalogZone1"
Runat = "server">
<ZoneTemplate>
<Asp: DeclarativeCatalogPart
ID = "DeclarativeCatalogPart1"
Runat = "server">
<WebPartsTemplate>
<Custom: FeaturedProductPart5
ID = "myFeaturedProduct"
Runat = "Server"/>
</WebPartsTemplate>
</Asp: DeclarativeCatalogPart>
<Asp: ImportCatalogPart
ID = "ImportCatalogPart1"
Runat = "server"/>
</ZoneTemplate>
</Asp: CatalogZone>

<Asp: EditorZone
ID = "EditorZone1"
Runat = "Server">
<ZoneTemplate>
<Asp: PropertyGridEditorPart
Id = "PropertyGridEditorPart1"
Runat = "Server"/>
</ZoneTemplate>
</Asp: EditorZone>
 
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

When you open the Page above, you can click "Custom Page" and add one or more Featured Product web parts to the Web Zones Area of the Page. After you add a web part, you can select the Export command in the web part menu to export its settings (see figure 7 ).

Figure 7. Exporting a Web Part

When you export a web part, the name is FeaturedProduct. the WebPart file is created. You can save the file to a local hard disk. The content contained in the file is listed in Listing 14. Note that this file is an XML file that lists the web part attribute values, including the CategoryName attribute.

Listing 14. FeaturedProduct. WebPart

<? Xml version = "1.0" encoding = "UTF-8"?>
<WebParts>
<WebPart>
<MetaData>
<Type name = "myControls. FeaturedProductPart5"/>
<ImportErrorMessage> Cannot import this Web
Part. </importErrorMessage>
</MetaData>
<Data>
<Properties>
<Property name = "TitleIconImageUrl"/>
<Property name = "AllowClose"> True </property>
<Property name = "ChromeState"> Normal </property>
<Property name = "CategoryName"> Beverages </property>
<Property name = "TitleUrl"/>
<Property name = "AllowZoneChange"> True </property>
<Property name = "Hidden"> False </property>
<Property name = "Direction"> NotSet </property>
<Property name = "HelpMode"> Navigate </property>
<Property name = "ChromeType"> Default </property>
<Property name = "CatalogIconImageUrl"/>
<Property name = "Height"/>
<Property name = "Description"/>
<Property name = "AllowHide"> True </property>
<Property name = "AllowMinimize"> True </property>
<Property name = "AllowEdit"> True </property>
<Property name = "Title"> Featured Product </property>
<Property name = "Width"/>
<Property name = "ExportMode"> All </property>
<Property name = "HelpUrl"/>
</Properties>
</Data>
</WebPart>
</WebParts>

After exporting a web part, you can click "Custom page" to import the web part. One of the displayed categories is called the imported web part category. If you select this category, you can upload the previously exported web part (see figure 8 ).

Figure 8. Importing a Web Part