[ASP.NET学习笔记之二十]ASP_NET 2.0 中web part使用指南

ASP.NET 2.0中使用WebPart系列控件

WebPart系列控件的布局

在现在的网站设计中，更强调的是用户的个性化设置，让用户可以自由的设置符合自己喜好的页面成为网站开发人员的头号难题，不过现在看来这个难题微软帮我们解决了。在asp.net 2.0中新增加了一系列WebPart控件，可以让用户很方便地对网页的各区域布局进行调整。在一些web应用程序中，如果用户想自定义页面布局，比如一个新闻发布系统，想让左，中，右三栏的位置进行调换的话，就可以使用WebPart控件。

下面，我们来看下asp.net 2.0中WebPart系列控件的一些基本用法。

首先，在vs.net 2005 中的工具箱中，可以找到如下图所示的WebPart系列控件，有很多个，限于篇幅，本文介绍其中的一些重要的控件：

在WebPart系列控件中，其中的WebPartmanager控件用于统一管理各WebPart控件。而WebPartzone控件，则是提供了各区域划分，在这些区域中，用户可以往里面放置各式各样的控件，而当运行的时候，用户可以移动的就是这些WebPartzone控件所在的区域。

 

为增强认识，我们先做个简单的例子。

1、首先使用vs.net 2005新建一个web站点，

2、往窗体中拖拉一个WebPartmanager控件，再建一个3列1行的表格，分别往每个单元格里拖拉一个WebPartzone控件

3、往WebPartzone1中拖拉放一个日历控件，并为这个日历控件选择一个合适的样式

4、切换到代码视图状态，将日历控件的title属性改为：Calendar。注意的是，日历控件本身没有title属性，但当一个控件加入到WebPartzone区域中去后，则该控件被自动包装为GenericWebPart类型控件，这些类型的控件有title属性。

5、这时，我们可以按F5来运行该程序，运行如下图所示，可以看到，区域的右上角有最小化和关闭，恢复的按钮。

 

接下来，我们介绍如何在WebPart系列控件中，使用用户自定义的控件。

1、首先，我们为工程项目增加一个"google.ascx"的控件，并且在images目录下，添加google那张著名的logo图片。接着，往窗体中添加一个2*2行的表格，再往其中的一个单元格添加一个image图象控件，指定其图象为google.gif，再添加一个文本框，一个按钮

3、在btn_search按钮的click事件中写入如下代码：

protected void btn_search(object sender, EventArgs e)

{

    string queryStr = this.tb_search.Text.ToString();

    Response.Redirect("http://www.google.com/search?q="+queryStr);

}

4、这时，将写好的google.ascx控件，整个拖拉到我们刚才建立好的表格中的中间那个单元格，我们并且修改代码如下，修改其名称为google serach:

<uc1:google id="GoogleUserControl1" runat="server"></uc1:google>

手工添加必须注册用户控件：

<%@ Register Src="google.ascx" TagName="google" TagPrefix="uc1" %>

接下来，F5运行，可以看到，可以在googlesearch所在的WebPart里进行google搜索了。

同时，如果觉得WebPart的那些关闭，恢复，最小化的按钮不大好看，还可以自定义按钮，比如在images目录下，添加下面的图片：

然后，在WebPartzone1的属性中，指定如下的属性就可以了。　

CloseVerb.ImageUrl="Images/CloseVerb.gif"

EditVerb.ImageUrl="Images/EditVerb.gif"

MinimizeVerb.ImageUrl="Images/MinimizeVerb.gif"

RestoreVerb.ImageUrl="Images/RestoreVerb.gif" 

使WebPart动起来

上面设计的WebPart还没能动起来，要让WebPart动起来的话，必须要将WebPart设置为Design Display 模式。先为WebPart添加下面的RadioButton选择框：

<asp:RadioButtonList ID="rblMode" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rblMode_SelectedIndexChanged">

　<asp:ListItem> 浏览模式</asp:ListItem>

　<asp:ListItem>设计模式</asp:ListItem>

　<asp:ListItem>目录模式</asp:ListItem>

　<asp:ListItem>编辑模式</asp:ListItem>

</asp:RadioButtonList>

并且在Code-Behind的代码中，写入如下代码：

protected void rblMode_SelectedIndexChanged(object sender, EventArgs e)

{

    switch(rblMode.SelectedIndex)

    {

         case 0 :

            WebPartManager1.DisplayMode =WebPartManager.BrowseDisplayMode;

            break;

         case 1 :

            WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;

            break;

        case 2:

            WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

            break;

        case 3:

            WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

            break;

        default:

            break;

    }

}

运行上面代码，选择”设计模式”，则可以象下图那样，自由拖动WebPart,要注意的是，当移动各WebPart的位置后，即使关掉浏览器，下次重新打开时，依然可以看到各个控件保持原来的位置。其实，ASP.NET2.0是使用在aspnetdb.mdf中的一个叫aspnet_PersonalizationPerUser的表来保存数据的，表的结构如下所示：

 

Field	Value
Id	928e 121a -4042-4fb4-9520-21210b9b 37c 1
PathId	7c 3b5dc0-04d0 -48a 2-bbb2-2b 70286f 22fe
UserId	9bff14df -024f -4bda -9a 0a -b 4a 19ab9e387
PageSettings	<Binary data>
LastUpdatedDate	10/06/2005 4:44:05 AM

 

如果想恢复各控件的原来位置，只需要将该数据表中相应的行删除掉就可以了。但有个问题是，如果使用每一个WebPart的关闭按钮，则很难再将其恢复（当然删除数据表中的行，但十分麻烦）。在asp.net 2.0中，提供了另一种WebPart，叫做CatalogZone控件，下面介绍其用法

1、往窗体中拖拉一个CatalogZone控件，如下图所示。

2、往该CatalogZone控件区域中，再拖放三个WebPart系列的控件，分别是DeclarativeCatalogPart，PageCatalogPart和ImportCatalogPart。其中DeclarativeCatalogPart控件的作用是，显示目前页面上有哪些可以用的WebPart控件；PageCatalogPart的作用是，可以让用户通过勾选的方式，选定将哪些控件添加转移到其他WebPart区域中去。ImportCatalogPart则可以通过外部磁盘文件的方式，加载其他做好了的WebPart部件。

3．在Code-Behind的代码中对应的代码是：

WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

4、在DeclarativeCatalogPart任务菜单上，点击右上角的智能感知按钮，然后选"自动套用格式"的链接，进入模版编辑状态，如下图：

再往其中的WebPartsTemplate区域中拖拉一个google.ascx控件，如下图，这将允许用户在运行时，可以自由地往页面增加这样的google搜索控件。

5、观察修改后的代码如下：

<asp:CatalogZone ID="CatalogZone1" runat="server">

<ZoneTemplate>

<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">

<WebPartsTemplate>

<uc1:googleUserControl ID="GoogleUserControl2" runat="server" />

</WebPartsTemplate>

    </asp:DeclarativeCatalogPart>

    <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />

    <asp:ImportCatalogPart ID="ImportCatalogPart1" runat="server" />

</ZoneTemplate>

</asp:CatalogZone>

6、运行程序，可以看到，当选择catalog display mode时，会显示如下图所示的catalog zone,其中列出了当前可用的有哪些webpart控件，我们可以把这个google的控件加到其他的webpart区域，也可以尝试将已经存在的webpart控件关闭，然后在catalog zone区域中的控件列表中，把它们再加回到页面中去。

修改WebPart的外观模式

此外，在运行期间，还可以动态地修改webpart控件的外观等属性，如下：

1. 往窗体中添加一个editor zone的区域控件，往其中再拖放一个appearanceEdiotrPart控件，该控件可以在运行时，让用户动态改变各webpart控件的属性。

2. 我们再修改radiobutton选择框的代码如下，则加一个编辑模式：

<asp:ListItem>编辑模式</asp:ListItem>

3．在Code-Behind的代码中对应的代码是：

WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

4. 运行程序，选择edit display mode模式，这时，会发现每个控件的右上角，会多了一个"edit"的按钮，点该按钮，弹出如下图的窗体，用户可以修改每个控件的外观等属性。

WebPart之间的通讯

下面的例子中，要实现的是，在一个日历控件中点选某一个日期，会在已经做好的googlesearch的webpart控件的文本框中显示其日期，达到通信的目的，下面介绍其实现步骤：

1、为了使两个webpart控件之间进行通信，必须先声明一个公共的接口。往工程项目里增加一个叫ISelectedDate.cs的类文件，放在App_Code目录下，写入如下代码：

using System;

using System.Data;

 

public interface ISelectedDate

{

    DateTime SelectedDate

    {

        get;

    }

}

这里，我们返回一个只读的日期属性SelectedDate.

2、再创建一个日历控件CalendarUC.ascx，其中拖拉一个普通的日历控件即可。然后写入如下代码：

[ConnectionProvider("SelectedDate")]

public ISelectedDate GetSelectedDate()

{

    return this;

}

 

public DateTime SelectedDate

{

    get

    {

        return this.Calendar1.SelectedDate;

    }

}

3、接下来，我们在已经做好的google.ascx控件的代码中，编写如下代码：

[ConnectionConsumer("SelectedDate")]

public void SetMessage(ISelectedDate SelectedDate)

{

    this._SelectedDate = SelectedDate;

}

 

protected override void OnPreRender(EventArgs e)

{

    if (_SelectedDate != null)

        this.TextBox1.Text = _SelectedDate.SelectedDate.ToString();

    base.OnPreRender(e);

}

4. 最后，为了使两者能互相通信，必须在default.aspx页中修改如下代码：

<asp:WebPartManager ID="WebPartManager1" runat="server" >

    <StaticConnections>

        <asp:WebPartConnection ID="DataConnection" ProviderID="CalendarUC1" ConsumerID="GoogleUserControl1" />

    </StaticConnections> 

</asp:WebPartManager>

下面看一下测试结果：