介紹ASP.NET 2.0 Web Parts架構

介紹ASP.NET 2.0 Web Parts架構Introducing the ASP.NET 2.0 Web Parts Framework

Stephen Walther

微軟公司

2004-10
2005-03針對Beta 2的變化進行更新

適用於：

ASP.NET 2.0 Beta 2
ASP.NET架構
Web Parts

 

概要：Web Parts全套控制項可以讓你創作出可自訂的Web應用，比如：企業網門戶應用。當你使用Web Parts建設一個網站，那麼不論是網站管理員，還是個別使用者都可以很輕易地自訂網站。Web Parts可以讓網站變得更有親和力。

源碼下載：

• WebPartsCS.msi 
• WebPartsVB.msi

目錄

• 介紹 
• 建立Web Parts（正在翻譯...）
• 個人化Web Parts（正在翻譯...）
• 建立一個自訂Web Parts菜單（正在翻譯...）
• Web Parts間傳遞資訊（正在翻譯...）
• 匯入匯出Web Part設定
• 總結（正在翻譯...）

介紹

ASP.NET 2.0中新的Web Parts架構給我們帶來很多的好處，你可以建立可以被使用者在運行時自訂的應用程式。使用者可以通過拖拽的方式來重排頁面各Web Parts元素；也可以通過一個或多個Web Parts分類控制項來添加刪除頁面元素。

這篇文章向你介紹Web Part架構。本文不僅向你介紹Web Parts的基礎內容，同時還討論一些它的進階特性。例如：你可以從本文學習到怎樣通過匯入匯出Web Parts而在應用程式間共用設定和怎樣添加自訂菜單動詞（verbs）到Web Parts；還可以學習到怎樣通過串連一個頁面中不同的Web Parts來實現它們之間的資訊傳遞。

匯入和匯出web part設定

 

這是最後一部分了，我們將試著完成最後一個web part進階特性：怎麼匯入和匯出web part設定。

在你想在不同web應用程式間，甚至是不同web網站間共用web part設定，那匯入和匯出web part設定將會是非常有用的。如果多於一個網站正使用著相當一致的web part（它不必是是完全一致的，但要有相同的屬性），你就可以跨網站應用程式設定了。

修改後的FeaturedProdecutPart程式清單（Listing 11）被配置為允許使用者匯出web part設定。

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 DataTable
            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 As _
          HtmlTextWriter)
            ' Load Products into DataTable
            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

看一下Listing 11裡構造器（constructor）部分，可以知道構造器將ExportMode設定為WebPartExportMode.All，也就是將這個屬性設定為就可以匯出，那麼web part就可以匯出了。

這裡還有另外一步要做，就是你必須完成web part的匯出工作。你必須把這個“可以匯出（enableExport）設定”添加到你的應用程式設定檔裡。下面Listing 12就是Web.Config檔案包含的屬性設定了。

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>

那麼修改一下首頁程式，就有了下面的Listing 13，可以用來放置可匯出的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>

當你開啟上面的那個頁面時，你可以點“自訂頁（Customize Page）”，並且加上一個或多個Featured Product web part到頁面中的Web Zones地區。在你添加一個web part以後，你可以通過選擇web part菜單裡匯出命令來匯出它的設定（見圖7）。

Figure 7. Exporting a Web Part

當你匯出一個web part時，一個名為FeaturedProduct.WebPart的檔案就被建立了，這個檔案你可以儲存到本地硬碟上，它所包含的內容都列在Listing 14中。注意這個檔案是一個XML檔案，簡單地羅列了web part屬性值，其中包括CategoryName這個屬性。

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>

你匯出一個web part以後，你可以通過點“自訂頁面”來匯入這個web part。其中一個顯示出的分類（catalogs）就叫做匯入web part分類。如果你選這個分類，你可以上傳你先前置出的那個web part（見圖8）。

Figure 8. Importing a Web Part