webPart的简单使用

    以前一直感觉，让用户在前台自己定义自己的页面是一件很高深的事，哪需求很强的javascript的能力，所以我一直也没有想过要去学一下。今天一个很偶然的机会，我在csdn上看到一个兄弟在问这个问题。而且有一个兄弟给出的答案就是webPart。我不知道这是什么，就去查了一下。才发现，原来是我一直在用的vs2005里自代的一个功能，唉。。。。。。。一直都没有使用。真是可悲啊。我就上网查了一下相关的资料，来看了一下，做了一个简单的例子。
    在vs2005左边的工具栏目里有一个webParts的工具组，里面全是相关的工具，大家可以去看一下。
    在使用web Part时，最重要的一个组件就是WebPartManager
    它相当于AJAX里面的ScriptManager，只在页面中加入它，你才可以使用相关的技术，不然，显示出来的，你可以在你的页面中拉出来一个。
    在页面中的显示就是     

1. "WebPartManager1" runat="server">
2.     

    为了让程序更直观一些，我在这里加入一个table并把border设置为1。这样我们就能看见我们是否可以拖运相应的信息了。
    这里我们建立一个三行二列的表
   

1. <table width="100%" border="1">
2.    <tr>
3.       <td colspan="2">这里我要入一个DropDownList控件，用来显示不同的模式td>
4.    tr>
5.    <tr>
6.       <td style="width:50%">这里要入一个控制来让它作为可拖运的东西td>
7.       <td style="width:50%">这里要入一个控制来让它作为可拖运的东西td>
8.    <tr>
9.    <tr>
10.       <td style="width:50%">这里要入一个控制来让它作为可拖运的东西td>
11.       <td style="width:50%">这里要入一个控制来让它作为可拖运的东西td>
12.    <tr>
13.    <tr>
14.       <td colspan="2">这里呢，是用来显示相应控制的信息(什么是控制信息呢，后面你就会知道了)td>
15.    tr>
16. table>

    我在第一个中放一个 DropDownList。为什么呢。因为webpart有五种模式，分别代码了不同的显示方式(这是我的理解)分别是：
    

1. "DropDownList1" runat="server" AutoPostBack="True" 
2.                      onselectedindexchanged="DropDownList1_SelectedIndexChanged">
3.                      "a">浏览模式
4.                      "b">布局模式
5.                      "c">编辑模式
6.                      "d">添加部件
7.                      "e">数据连接
8.                  

     我们为 onselectedindexchanged添加程序
     下面的代码，我不做过多的解释，就是为webpart设置不同的模式，它们的中文解释在前面有解释.

1. switch (this.DropDownList1.SelectedValue)
2.             {
3.                 case "a":
4.                     this.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
5.                     break;
6.                 case "b":
7.                     this.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
8.                     break;
9.                 case "c":
10.                     this.WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
11.                     break;
12.                 case "d":
13.                     this.WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
14.                     break;
15.                 case "e":
16.                     this.WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;
17.                     break;
18.             }

       下面我们来实现相应的webpart。这里有几个主要的控件：
       第一个：WebPartZone，你要在页面上显示的内容，全部要放到它的里，有一点要说明的，你分几部分，就放几个去。我们里一共是要显示二个。就放了二个。你可能要问了。你的table里，是可以放四个的，是的，是可以放四个，另外二个我是留着，拖运用的。你直接在工具栏目里，往里放二个WebPartZone,一个一个。它为你提供了几种默认的样式，你可以选择一下。
       我们再往里面放点东西。下面是代码
    

1. <tr>
2.               <td style="width:50%">
3.                   <asp:WebPartZone ID="leftTop" runat="server" BorderColor="#CCCCCC" Width
4.                   ="100%" Height="100%"
5.                       Font-Names="Verdana" Padding="6" CloseVerb-Text="X" CloseVerb-Visible="False" MinimizeVerb-Text="_" RestoreVerb-Text="囗">
6.                       <EmptyZoneTextStyle Font-Size="0.8em">EmptyZoneTextStyle>
7.                       <PartStyle Font-Size="0.8em" ForeColor="#333333">PartStyle>
8.                       <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White">
9.                       TitleBarVerbStyle>
10.                       <MenuLabelHoverStyle ForeColor="#D1DDF1">MenuLabelHoverStyle>
11.                       <MenuPopupStyle BackColor="#507CD1" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.6em">
12.                       MenuPopupStyle>
13.                       <MenuVerbStyle BorderColor="#507CD1" BorderWidth="1px" BorderStyle="Solid" ForeColor="White">
14.                       MenuVerbStyle>
15.                       <PartTitleStyle BackColor="#507CD1" Font-Bold="True" Font-Size="0.8em" ForeColor="White">
16.                       PartTitleStyle>
17.                       <ZoneTemplate>
18.                           <asp:Panel ID="Panel1" runat="server" title="左上信息显示">
19.                              <table width="100%" height="100%">
20.                                <tr>
21.                                  <td>信息显示出来吧td>
22.                                tr>
23.                                 <tr>
24.                                  <td>信息显示出来吧td>
25.                                tr>
26.                                 <tr>
27.                                  <td>信息显示出来吧td>
28.                                tr>
29.                                 <tr>
30.                                  <td>信息显示出来吧td>
31.                                tr>
32.                                 <tr>
33.                                  <td>信息显示出来吧td>
34.                                tr>
35.                                
36.                              table>
37.                           asp:Panel>
38.                       ZoneTemplate>
39.                       <MenuVerbHoverStyle BackColor="#EFF3FB" BorderColor="#CCCCCC" BorderWidth="1px" BorderStyle="Solid" ForeColor="#333333">
40.                       MenuVerbHoverStyle>
41.                       <PartChromeStyle BackColor="#EFF3FB" BorderColor="#D1DDF1" Font-Names="Verdana" ForeColor="#333333">
42.                       PartChromeStyle>
43.                       <HeaderStyle HorizontalAlign="Center" Font-Size="0.7em" ForeColor="#CCCCCC">
44.                       HeaderStyle>
45.                       <MenuLabelStyle ForeColor="White">MenuLabelStyle>
46.                       <EditVerb Text="编辑" />
47.                       
48.                   asp:WebPartZone>
49.                td>
50.               <td style="width:50%">
51.                   <asp:WebPartZone ID="rightTop" runat="server" BorderColor="#CCCCCC" Width="100%" Height="100%" 
52.                       Font-Names="Verdana" Padding="6">
53.                       <EmptyZoneTextStyle Font-Size="0.8em">EmptyZoneTextStyle>
54.                       <PartStyle Font-Size="0.8em" ForeColor="#333333">PartStyle>
55.                       <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White">
56.                       TitleBarVerbStyle>
57.                       <MenuLabelHoverStyle ForeColor="#FFCC66">MenuLabelHoverStyle>
58.                       <MenuPopupStyle BackColor="#990000" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.6em">
59.                       MenuPopupStyle>
60.                       <MenuVerbStyle BorderColor="#990000" BorderWidth="1px" BorderStyle="Solid" ForeColor="White">
61.                       MenuVerbStyle>
62.                       <PartTitleStyle BackColor="#990000" Font-Bold="True" Font-Size="0.8em" ForeColor="White">
63.                       PartTitleStyle>
64.                       <ZoneTemplate>
65.                           <asp:Calendar ID="Calendar1" runat="server" Title="右上显示">asp:Calendar>
66.                       ZoneTemplate>
67.                       <MenuVerbHoverStyle BackColor="#FFFBD6" BorderColor="#CCCCCC" BorderWidth="1px" BorderStyle="Solid" ForeColor="#333333">
68.                       MenuVerbHoverStyle>
69.                       <PartChromeStyle BackColor="#FFFBD6" BorderColor="#FFCC66" Font-Names="Verdana" ForeColor="#333333">
70.                       PartChromeStyle>
71.                       <HeaderStyle HorizontalAlign="Center" Font-Size="0.7em" ForeColor="#CCCCCC">
72.                       HeaderStyle>
73.                       <MenuLabelStyle ForeColor="White">MenuLabelStyle>
74.                   asp:WebPartZone>
75.                td>
76.            tr>

这里看起来代码很多，其实大多数都是它的样式代码，主要的代码就是
  

1. #   
2. #                           
3. #                       

这里了。我想大家能看明白吧。
    这时，我们保存看一下，出来了，可是有一上问题，它根本就不能自由的移动，而且每个栏目的右上角的下拉倒三角，里面的删除，一旦点了，这个栏目就出来了。这怎么回事呢。我们在下拉框里选择一下布局，看到了吗，这下可以移动了，可是消失的还是没有出来，下面我们来完成添加功能。
    同上面一样，我们再加一个添加的，就是为了把删除的再找回来。这里的删除不是真的不要了，真是关闭。
    这里我们用到CatalogZone。它的用法与 WebPartZone差不多
   

1. "CatalogZone2" runat="server" BackColor="#EFF3FB" 
2.                      BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Padding="6">
3.                      "False" Font-Size="0.8em" Font-Underline="False" 
4.                          ForeColor="#333333" />
5.                      "#507CD1" Font-Bold="True" Font-Size="0.8em" 
6.                          ForeColor="White" />
7.                      "#D1DDF1" HorizontalAlign="Right" />
8.                      "#D1DDF1" BorderStyle="Solid" BorderWidth="1px" />
9.                      "0.8em" />
10.                      "0.8em" ForeColor="#333333" />
11.                      
12.                          "PageCatalogPart2" runat="server" />
13.                      
14.                      "0.8em" ForeColor="#333333" />
15.                      "0.8em" />
16.                      "Verdana" Font-Size="0.8em" ForeColor="#333333" />
17.                      "#D1DDF1" Font-Bold="True" Font-Size="0.8em" 
18.                          ForeColor="#333333" />
19.                      "Verdana" Font-Size="0.8em" ForeColor="#333333" />
20.                      "#EFF3FB" BorderWidth="5px" />
21.                      "0.8em" ForeColor="#333333" />
22.                  

    看到了，是不是差不多，唯一不同的是，在这里面我们要加的不是常用的控件，而是与它进行配套显示的 PageCatalogPart控件。它的用处就是为了把关闭的再显示出来
    保存，我们再试一下。选择添加模式，怎么样出来吧。

    如果我们要对相应的栏目进行修改，怎么办呢。这就要用到EditorZone了。用法都差不多
    下面的是代码
   

1. "EditorZone1" runat="server" BackColor="#EFF3FB" 
2.                      BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Padding="6">
3.                      "Right" BackColor="#D1DDF1">
4.                      "True" Font-Size="0.8em" ForeColor="#333333">
5.                      
6.                      "#D1DDF1" BorderWidth="1px" BorderStyle="Solid">
7.                      
8.                      "#EFF3FB" BorderWidth="5px">
9.                      "0.8em" ForeColor="#333333">
10.                      "Verdana" Font-Size="0.8em" ForeColor="#333333">
11.                      
12.                      "0.8em">
13.                      "0.8em" ForeColor="#333333">
14.                      
15.                          "BehaviorEditorPart1" runat="server" />
16.                          "LayoutEditorPart1" runat="server" />
17.                          "PropertyGridEditorPart1" runat="server" />
18.                          "AppearanceEditorPart1" runat="server" />
19.                      
20.                      "Verdana" Font-Size="0.8em" ForeColor="#333333">
21.                      
22.                      "#D1DDF1" Font-Bold="True" Font-Size="0.8em" ForeColor="#333333">
23.                      
24.                      "False" Font-Size="0.8em" Font-Underline="False" ForeColor="#333333">
25.                      
26.                      "0.8em" ForeColor="#333333">
27.                      
28.                  

   重点是
  

1. # <ZoneTemplate>
2. #                          <asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />
3. #                          <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
4. #                          <asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" />
5. #                          <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
6. #                      ZoneTemplate>

    它们四个分别代码了，不同的修改方式，你可以自己试一下，这里有一点要说明的是 BehaviorEditorPart 要想显示出来，我们必须要设置一下web.config不然是显示不出来的
    在web.config里添加如下代码
   

1. <system.web>
2.  <webParts>
3.       <personalization>
4.         <authorization>
5.           <allow users="*" verbs="enterSharedScope"/>
6.         authorization>
7.       personalization>
8.     webParts>
9.     system.web>

在page_load里添加
 

1. if (this.WebPartManager1.Personalization.Scope == PersonalizationScope.User && this.WebPartManager1.Personalization.CanEnterSharedScope)
2.                 {
3.                     this.WebPartManager1.Personalization.ToggleScope();
4.                 }

这回我们再看一下，感觉如何。