webPart的简单使用

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

1. <asp:WebPartManager ID="WebPartManager1" runat="server">
2.     </asp:WebPartManager>

    为了让程序更直观一些，我在这里加入一个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>

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

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

     我们为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里，是可以放四个的，是的，是可以放四个，另外二个我是留着，拖运用的。你直接在工具栏目里，往<td>里放二个WebPartZone,一个<td>一个。它为你提供了几种默认的样式，你可以选择一下。
       我们再往里面放点东西。下面是代码
    

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. #   <ZoneTemplate>
2. #                           <asp:Calendar ID="Calendar1" runat="server" Title="右上显示"></asp:Calendar>
3. #                       </ZoneTemplate>

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

1. <asp:CatalogZone ID="CatalogZone2" runat="server" BackColor="#EFF3FB" 
2.                      BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Padding="6">
3.                      <HeaderVerbStyle Font-Bold="False" Font-Size="0.8em" Font-Underline="False" 
4.                          ForeColor="#333333" />
5.                      <PartTitleStyle BackColor="#507CD1" Font-Bold="True" Font-Size="0.8em" 
6.                          ForeColor="White" />
7.                      <FooterStyle BackColor="#D1DDF1" HorizontalAlign="Right" />
8.                      <PartChromeStyle BorderColor="#D1DDF1" BorderStyle="Solid" BorderWidth="1px" />
9.                      <PartLinkStyle Font-Size="0.8em" />
10.                      <InstructionTextStyle Font-Size="0.8em" ForeColor="#333333" />
11.                      <ZoneTemplate>
12.                          <asp:PageCatalogPart ID="PageCatalogPart2" runat="server" />
13.                      </ZoneTemplate>
14.                      <LabelStyle Font-Size="0.8em" ForeColor="#333333" />
15.                      <SelectedPartLinkStyle Font-Size="0.8em" />
16.                      <VerbStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" />
17.                      <HeaderStyle BackColor="#D1DDF1" Font-Bold="True" Font-Size="0.8em" 
18.                          ForeColor="#333333" />
19.                      <EditUIStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" />
20.                      <PartStyle BorderColor="#EFF3FB" BorderWidth="5px" />
21.                      <EmptyZoneTextStyle Font-Size="0.8em" ForeColor="#333333" />
22.                  </asp:CatalogZone>

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

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

1. <asp:EditorZone ID="EditorZone1" runat="server" BackColor="#EFF3FB" 
2.                      BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Padding="6">
3.                      <FooterStyle HorizontalAlign="Right" BackColor="#D1DDF1"></FooterStyle>
4.                      <PartTitleStyle Font-Bold="True" Font-Size="0.8em" ForeColor="#333333">
5.                      </PartTitleStyle>
6.                      <PartChromeStyle BorderColor="#D1DDF1" BorderWidth="1px" BorderStyle="Solid">
7.                      </PartChromeStyle>
8.                      <PartStyle BorderColor="#EFF3FB" BorderWidth="5px"></PartStyle>
9.                      <LabelStyle Font-Size="0.8em" ForeColor="#333333"></LabelStyle>
10.                      <VerbStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333">
11.                      </VerbStyle>
12.                      <ErrorStyle Font-Size="0.8em"></ErrorStyle>
13.                      <EmptyZoneTextStyle Font-Size="0.8em" ForeColor="#333333"></EmptyZoneTextStyle>
14.                      <ZoneTemplate>
15.                          <asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />
16.                          <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
17.                          <asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" />
18.                          <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
19.                      </ZoneTemplate>
20.                      <EditUIStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333">
21.                      </EditUIStyle>
22.                      <HeaderStyle BackColor="#D1DDF1" Font-Bold="True" Font-Size="0.8em" ForeColor="#333333">
23.                      </HeaderStyle>
24.                      <HeaderVerbStyle Font-Bold="False" Font-Size="0.8em" Font-Underline="False" ForeColor="#333333">
25.                      </HeaderVerbStyle>
26.                      <InstructionTextStyle Font-Size="0.8em" ForeColor="#333333">
27.                      </InstructionTextStyle>
28.                  </asp:EditorZone>

   重点是
  

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.                 }

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