Eric's Blog

有需求才有进步

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

用过baidu空间或者msn的朋友可能为其网站强大的个性化定制功能而耳目一新。其实这些东西并不神秘,在asp.net 2.0中依靠WebParts的灵活功能,我们也可以轻松实现同样的功能。

WebPart是vs2005的新控件,它的作用是可以使用户在页面上进行控件的拖放,调整位置内容,对控件进行增加,删除,修改等操作.和上节一样,WebParts依然需要SQL Server 2005 Express版本支持。

下面我们来创建一个简单的WebPart实例,Let's Go!

首先将左侧工具栏"WebParts" 工具列表中的"WebPartManager"空间拖曳至网页中: 精美商业网页模版下载http://www.it55.com

WebPartManager是一个WebPart的管理控制中心,通过它可以对WebPart的模式进行调整和操作,包括WebPart之间的通信.所以必须首先添加WebPartManager到页面中.WebPartManager在页面运行后不会在前台占用任何位置,他是隐藏的,虽然在设计模式下他是看得见的.

这里需要说说WebPartManager的五种模式(DisplayMode):

(1)BrowseDisplayMode:浏览器模式,是默认值.用户只能看不能对Web Part进行操作.

(2)EditDisplayMode:编辑模式.此模式的运行需要一个EditorZone,然后在EditorZone里可以放AppearanceEditorPart,BehaviorEditorPart,LayoutEditorPart,PropertyGridEditorPart这些控件,他们就是对Web Part进行编辑的控件,可以对Web Part的行为,外观等进行编辑.

(3)DesignDisplayMode:设计模式.在此模式下,用户就可以对控件的位置进行拖放了(在开始定义好的WebPartZone里)

(4)CatalogDisplayMode:目录模式.此模式的运行需要一个CatalogZone,CatalogZone有一个模版列,这个模版列里可以放开发人员预先定义好的控件,在HTML模式下在次模列里的控件加Title="需要显示的目录",然后用户就可以把在CatalogZone里的控件放到WebPartZone里. 精美商业网页模版下载http://www.it55.com

(5)ConnectDisplayMode:通讯模式.此模式可以让Web Part进行通讯.可以有两种通讯,静态和动态的.需要设定好提供者和监听者.

然后再拖曳2个WebPartZone控件到页面中:

45398 http://www.it55.com it55学习IT知识,享受IT生活 4dfkjn

WebPartZone是一个存放WebPart控件容器,有了它之后我们才能在页面中放置WebPart控件.

接着我们在WebPart控件1中放置一个Calendar日历控件(在工具栏"标准"工具列表中),系统自动将其封装为WebPart控件,这也就是我们网站的内容部分了.当然这里还可以放置服务器控件\用户自定义控件\Web自定义控件等: 免费资源http://www.it55.com

上面说了,WebPartZone是一个存放WebPart控件容器,那么WebPart编辑时的设置框应该放在哪个容器里呢?答案是EditorZone。

EditorZone是个容器,本身只提供存放区域,所以我们还需要向EditorZone里面添加AppearanceEditorPart、BehaviorEditorPart、LayoutEditorPart、PropertyGridEditorPart这些控件中的一个或多个。他们就是对Web Part进行编辑的控件,可以对Web Part的行为,外观等进行编辑.这里不做细讲。

先拖曳进来一个EditorZone,然后向EditorZone中添加一个AppearanceEditorPart:

http://www.it55.com在线教程

同理我们还需要一个CatalogZone控件来显示和管理页面中的控件列表。CatalogZone控件也是一个容器,所以我们还需要向它里面添加DeclarativeCatalogPart、PageCatalogPart、ImportCatalogPart控件中的至少一个.

这里我们添加一个PageCatalogPart控件到CatalogZone控件中: 45398 http://www.it55.com it55学习IT知识,享受IT生活 4dfkjn

PageCatalogPart控件将以列表显示当前页面剩余的可用WebPart控件并允许将其添加至页面中.

因为本例中只有1个WebPart控件,所以不存在WebPart控件之间的通讯问题,所以WebPartManager的ConnectDisplayMode模式本文就不涉及了.

最后我们需要做一个下拉菜单,方便我们选择WebPartManager的几种模式,以便查看以上各种控件的应用方式.

在工具栏"标准"工具列表中将DropDownList控件添加至页面,并为其添加4个Item项,分别对应WebPartManager的4种模式: 免费矢量图片素材下载http://www.it55.com  

DropDownList控件后台事件方法如下: 免费壁纸下载http://www.it55.com

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        switch (DropDownList1.SelectedValue)

        {

            case "Browse":

                this.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

                break;

            case "Edit":

                this.WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

                break;

            case "Design": sflj http://www.it55.com kg^&fgd

                this.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;

 break;

            case "Catalog":

                this.WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

                break;

            case "Connect":

                this.WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;

                break;

        }

    }

至此,我们的WebPart之旅就结束了,下面.aspx页面的部分代码: http://www.it55.com/

  免费网页模版下载http://www.it55.com

    <form id="form1" runat="server">

    <div>

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

        </asp:WebPartManager>

   

    </div>

        <asp:WebPartZone ID="WebPartZone1" runat="server">

            <ZoneTemplate>

                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

            </ZoneTemplate>

        </asp:WebPartZone>

        WebPartZone1

免费设计素材下载http://www.it55.com

        <br />

        <br />

        <asp:WebPartZone ID="WebPartZone2" runat="server">

        </asp:WebPartZone>

        WebPartZone2&nbsp;<br />

        <br />

        <asp:EditorZone ID="EditorZone1" runat="server">

            <ZoneTemplate>

                <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />

            </ZoneTemplate>

        </asp:EditorZone> http://www.it55.com/

        <br />

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

            <ZoneTemplate>

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

            </ZoneTemplate>

        </asp:CatalogZone>

        <br />

        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

            <asp:ListItem>Browse</asp:ListItem> http://www.it55.com/

            <asp:ListItem>Edit</asp:ListItem>

            <asp:ListItem>Design</asp:ListItem>

            <asp:ListItem>Catalog</asp:ListItem>

        </asp:DropDownList>

       

    </form> 免费网页模版下载http://www.it55.com

完整项目源代码打包:

upload/2007_05/07051600539435.rar 精美商业网页模版下载http://www.it55.com

以下是部分运行效果截图: 免费壁纸下载http://www.it55.com

IT资讯之家 http://www.it55.com

 

 
/* EDIT模式需要先选择DropDownList后再点击Web Part右上的Edit按钮 */ 

posted on 2008-02-13 15:04  Eric.Chai  阅读(1554)  评论(0编辑  收藏  举报