WebParts概述

本质:

WebParts把网页隔成了一个一个更小的空间。 /​​就是一个WebParts的例子。

VS2005控件图

  

 

 

我们发现WebParts有几个特点:

1.网页上WebPartZone块可以移动;      

2.网页上WebPartZone块可以最小化或是隐藏;   

3.网页上WebPartZone块可以编辑.

 

  

 

WebParts的生命周期

1.首先每个WebPartZone都要向WebPartManager注册

2.WebPartManager加载静态的WebPart

3. WebPartManager预订这些WebPart的生命周期

4. WebPartManager为每个WebPart调用TrackViewState

5. WebPartManager加载所有动态的WebPart内容并且加载WebPartConnection

6. WebPartManager调用WebPartPersonalization方法

7. WebPartManager保存WebPart的信息

 

 

 

实例:

1.       首先必须先拖一个WebPartManager到页面

2.       拖一个表格进来二行二列

        <table style="width: 100%; height: 100%">

            <tr>

                <td style="width: 50%;">

                </td>

                <td style="width: 50%;">

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

            </tr>

</table>

 

3.       加一个WebPartZone(id=“WebPartZone1”)到表的左上单元格,自动套用格式“简单”,并在WebPartZone中加一个Panel。

                    <asp:WebPartZone ID="WebPartZone1" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana"

                        Padding="6" Width="100%" Height="100%">

                        <PartChromeStyle BackColor="#EFF3FB" BorderColor="#D1DDF1" Font-Names="Verdana" ForeColor="#333333" />

                        <MenuLabelHoverStyle ForeColor="#D1DDF1" />

                        <EmptyZoneTextStyle Font-Size="0.8em" />

                        <MenuLabelStyle ForeColor="White" />

                        <MenuVerbHoverStyle BackColor="#EFF3FB" BorderColor="#CCCCCC" BorderStyle="Solid"

                            BorderWidth="1px" ForeColor="#333333" />

                        <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />

                        <MenuVerbStyle BorderColor="#507CD1" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />

                        <PartStyle Font-Size="0.8em" ForeColor="#333333" />

                        <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />

                        <MenuPopupStyle BackColor="#507CD1" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

                            Font-Size="0.6em" />

                        <PartTitleStyle BackColor="#507CD1" Font-Bold="True" Font-Size="0.8em" ForeColor="White" />

                        <ZoneTemplate>

                            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" title="左上">

                            </asp:Panel>

                        </ZoneTemplate>

                    </asp:WebPartZone>

4.       加一个WebPartZone(id=“WebPartZone3”)到表的右上单元格,自动套用格式“彩色”,并在WebPartZone中加一个Calendar。

                    <asp:WebPartZone ID="WebPartZone3" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana"

                        Padding="6" Width="100%" Height="100%" >

                        <PartChromeStyle BackColor="#FFFBD6" BorderColor="#FFCC66" Font-Names="Verdana" ForeColor="#333333" />

                        <MenuLabelHoverStyle ForeColor="#FFCC66" />

                        <EmptyZoneTextStyle Font-Size="0.8em" />

                        <MenuLabelStyle ForeColor="White" />

                        <MenuVerbHoverStyle BackColor="#FFFBD6" BorderColor="#CCCCCC" BorderStyle="Solid"

                            BorderWidth="1px" ForeColor="#333333" />

                        <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />

                        <ZoneTemplate>

                            <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC"

                                BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"

                                Font-Size="8pt" ForeColor="#003399" Width="100%" Height="100%"  title="左下">

                                <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />

                                <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />

                                <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />

                                <WeekendDayStyle BackColor="#CCCCFF" />

                                <OtherMonthDayStyle ForeColor="#999999" />

                                <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />

                                <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />

                                <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"

                                    Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />

                            </asp:Calendar>

                        </ZoneTemplate>

                        <MenuVerbStyle BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />

                        <PartStyle Font-Size="0.8em" ForeColor="#333333" />

                        <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />

                        <MenuPopupStyle BackColor="#990000" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

                            Font-Size="0.6em" />

                        <PartTitleStyle BackColor="#990000" Font-Bold="True" Font-Size="0.8em" ForeColor="White" />

                    </asp:WebPartZone>

注意一点,控件自动附加了一个属性title。原来的Panel和Calendar都没有title属性。

如果没有装SQL Server 2005 Express的同学有难了。WebPart是可以保存状态的,即如果你这个时候的布局是某个值(x),那么下次打开访问这个网站你的布局还是值(x)。

没有装SQL Server 2005 Express运行会有sql不能连接的问题,

出错提示:

在建立与服务器的连接时出错。在连接到 SQL Server 2005 时,在默认的设置下 SQL Server 不允许进行远程连接可能会导致此失败

WebPart的信息正是存储在App_Data文件夹中,所以SQL Server 2005 Express是必须的。

App_Data文件夹下有如下两个文件,看看自己的代码里有没有。

5.       好了,这个时候可以运行了。不过虽然可以最大化,最小化,但这并不是我们要的结果。我们需要加上 ​一样的效果,可以定制,可以拖动。先看看如何定制。加一个CatalogZone(id=“CatalogZone1”)到表的右下单元格,并在CatalogZone中加一个PageCatalogPart, PageCatalogPart用来显示本页中被关闭的WEBPART部件或是自定义的WEBPART部件。

6.       现在虽然不可以的使用PageCatalogPart,因为要让PageCatalogPart正常工作,要将WebPartManager的DisplayMode属性设为CatalogDisplayMode模式,现在为了达到设置的目的,在表的第三行第列中放置一个DropDownList。DropDownList的代码如下:

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        switch(DropDownList1.SelectedValue)

        {

            case "design":

                WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;

                break;

            case "e":

                WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

                break;

            case "b":

                WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

                break;

            case "ca":

                WebPartManager1.DisplayMode=WebPartManager.CatalogDisplayMode;

                break;

        }

    }

现在效果如下:

用鼠标点击DropDownList选择design.在DesignDisplayMode模式下可以实现拖动效果

  

7.       现在来实现定制功能

加入一个EditorZone,EditorZone中加入AppearanceEditorPart,PropertyGridEditorPart1,BehaviorEditorPart1,LayoutEditorPart1

在运行后,点击编辑就可以定制了。

 

  

当然更进一步的定制需要更进一步的编程。

 

另外提几个常用的概念:

 

WebPart个性化如何工作的?

-首先和一个用户登录的身份识别做绑定。

-用户的设定会被永久保存

-保存方式通过工厂模式设定,可以方便的更换保存的底层方法。

-个性化支持任何WebPartControl

 

关于个性化定制的说明

.个性化定制是WebPart的一个特性

.个性化不同于ViewState这种记录用户信息的技术

.个性化也不同于Profile

 

核心理念

.个性化页面包括两种区域,个人区域和共享区域,个人区域只对当前用户可见,共享区域对所有用户可见。

.用户控件同样具有这种可见度的概念。一个WebPart组件如果是由页面设计创建的,而且在共享区域内,那么它默认共享,如果是被代码创建或者是被Catalog创建则针对改用户。

 

WebPart的通讯问题

. WebPart可以进行动态通信和静态通信

.静态通信是使用WebPartManager调用相关的通信函数进行通信

.动态通信是通过使用ConnectionZone进行通信