实现WebPart编辑功能
2007-09-19 14:44 Jacky_Xu 阅读(281) 评论(0) 编辑 收藏 举报
实现WebPart的编辑功能需要用到VS2005提供的EditorZone控件和EditorPart系列控件。EditorPart系列控件包括AppearanceEditorPart、BehaviorEditorPart、LayoutEditorPart、PropertyGridEditPart。
要实现WebPart的编辑功能需要几个条件：（1）用户处于共享页面范围（2）显示模式为编辑模式。
对于（1）来说，只要在Web.config文件中配置一下就OK了。
<allow users="Tom" verbs="enterSharedScope"/> 表示用户名"Tom" 被授权共享页面范围，否则切换成编辑模式会报错。
Web.config
<?xml version="1.0"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<appSettings/>
<connectionStrings/>
<system.web>
<compilation debug="true"/>
<authorization>
<deny users="?"></deny>
</authorization>
<authentication mode="Forms">
<forms loginUrl="Login.aspx"></forms>
</authentication>
<webParts>
<personalization>
<authorization>
<allow users="Tom" verbs="enterSharedScope"/>
</authorization>
</personalization>
</webParts>
</system.web>
</configuration>
对于（2），在页面中添加2个LinkButton，在cs文件中切换一下显示模式，也可以用DropDownList来实现。
EditorPart系列控件中的BehaviorEditorPart、PropertyGridEditPart需要特别说明一下。
BehaviorEditorPart控件看名字也知道大概能做什么了，它在默认情况下可能不会显示出来，实现这个控件需要2个步骤：一、配置Web.config文件，方法上面已经说了，二、以编程的方式将页从用户级别改为共享级别，可以通过使用ToggleScope方法实现。
PropertyGridEditPart：是对自定义属性的修改。
在EditorPart中实现折叠的功能
利用Css和JavaScript脚本来实现。初始情况下，让LEGEND的显示“＋”号，并隐藏区块中的内容，通过Click“＋”号改变Css。
示例代码如下：
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="cc1" Namespace="Samples.AspNet.CS.Controls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//为每个className值为'EditorPartTitle'的标题头创建onclick处理程序
function CreateExpandingTitles()
{
var elements = document.getElementsByTagName("LEGEND");
for(i=0; i<elements.length; i++)
{
if(elements[i].className && elements[i].className == "EditorPartTitle")
{
elements[i].onclick = new Function("toggle(this);");
}
}
}
// 在onload发生时，调用CreateExpandingTitles方法
if(window.addEventListener)
{
window.addEventListener('load', CreateExpandingTitles, false);
}
else if (window.attachEvent)
{
window.attachEvent('onload', CreateExpandingTitles);
}
//单击事件处理程序
function toggle(titleElement)
{
var firstChild = (titleElement.nextSibling.childNodes[0].id)
? titleElement.nextSibling.childNodes[0]
: titleElement.nextSibling.childNodes[1];
// 设置图片显示及显示状态
if (firstChild.style.display == "block")
{
firstChild.style.display = "none";
titleElement.style.backgroundImage = "url(images/plus.gif)";
}
else
{
firstChild.style.display = "block";
titleElement.style.backgroundImage = "url(images/minus.gif)";
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:WebPartManager ID="WebPartManager1" runat="server" />
<asp:LinkButton ID="LinkButton1" runat="server" Text="浏览模式(BrowseMode) | " OnClick="LinkButton1_Click"
CssClass="commonText"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" Text="编辑模式(EditMode)" OnClick="LinkButton2_Click"
CssClass="commonText"></asp:LinkButton>
<table border="0" cellpadding="0" cellspacing="0" style="width: 547px; height: 172px">
<tr>
<td style="width: 268px" valign="top">
<asp:WebPartZone ID="WebPartZone1" runat="server" title="Zone 1" BorderColor="#CCCCCC"
Font-Names="Verdana" Padding="6">
<PartTitleStyle Font-Bold="true" ForeColor="White" BackColor="#5D7B9D" Font-Size="0.8em" />
<PartStyle BorderWidth="1px" BorderStyle="Solid" BorderColor="#81AAF2" Font-Size="0.8em"
ForeColor="#333333" />
<ZoneTemplate>
<cc1:TextDisplayWebPart runat="server" ID="textwebpart" Title="Text Content WebPart"
AllowClose="False" />
</ZoneTemplate>
<PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6" Font-Names="Verdana" ForeColor="White" />
<MenuLabelHoverStyle ForeColor="#E2DED6" />
<EmptyZoneTextStyle Font-Size="0.8em" />
<MenuLabelStyle ForeColor="White" />
<MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" ForeColor="#333333" />
<HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />
<MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />
<TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />
<MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.6em" />
</asp:WebPartZone>
</td>
<td style="width: 204px">
<asp:EditorZone ID="EditorZone1" runat="server" BackColor="#EFF3FB" BorderColor="#CCCCCC"
BorderWidth="1px" Font-Names="Verdana" Padding="6">
<HeaderStyle BackColor="#D1DDF1" Font-Bold="True" Font-Size="0.8em" ForeColor="#333333" />
<LabelStyle Font-Size="0.8em" ForeColor="#333333" />
<HeaderVerbStyle Font-Bold="False" Font-Size="0.8em" Font-Underline="False" ForeColor="#333333" />
<PartChromeStyle BorderColor="#D1DDF1" BorderStyle="Solid" BorderWidth="1px" />
<ZoneTemplate>
<asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" CssClass="EditorPartHidden" />
<asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" CssClass="EditorPartHidden" />
<asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" CssClass="EditorPartHidden" />
<asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" CssClass="EditorPartHidden" />
</ZoneTemplate>
<PartStyle BorderColor="#EFF3FB" BorderWidth="5px" />
<FooterStyle BackColor="#D1DDF1" HorizontalAlign="Right" />
<EditUIStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" />
<InstructionTextStyle Font-Size="0.8em" ForeColor="#333333" />
<ErrorStyle Font-Size="0.8em" />
<VerbStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" />
<EmptyZoneTextStyle Font-Size="0.8em" ForeColor="#333333" />
<PartTitleStyle Font-Bold="True" Font-Size="0.8em" ForeColor="#333333" CssClass="EditorPartTitle" />
</asp:EditorZone>
</td>
</tr>
</table>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
//进入浏览模式
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
protected void LinkButton2_Click(object sender, EventArgs e)
{
//调用ToogleScope方法，修改页面个性化范围
if (WebPartManager1.Personalization.Scope != PersonalizationScope.Shared)
{
WebPartManager1.Personalization.ToggleScope();
}
//进入编辑模式
WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
}
}
StyleSheet.css
body
{}{
}
.mainTitle
{}{
font-size: 12pt;
font-weight: bold;
font-family: 宋体;
}
.commonText
{}{
font-size: 10pt;
font-family: 宋体;
text-decoration:none;
}
.littleMainTitle
{}{
font-size: 10pt;
font-weight: bold;
font-family: 宋体;
}
.EditorPartHidden
{}{
display: none;
}
.EditorPartTitle
{}{
background-position: left;
background-repeat: no-repeat;
background-image: url(images/plus.gif);
cursor: pointer;
padding-left: 14px;
}
效果图：
有2个问题：（1）点编辑模式需要点2次才有反映（2）IE老是莫名其妙的发生错误，让你发送错误报告。
要实现WebPart的编辑功能需要几个条件：（1）用户处于共享页面范围（2）显示模式为编辑模式。
对于（1）来说，只要在Web.config文件中配置一下就OK了。
<allow users="Tom" verbs="enterSharedScope"/> 表示用户名"Tom" 被授权共享页面范围，否则切换成编辑模式会报错。
Web.config<?xml version="1.0"?><configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0"> <appSettings/> <connectionStrings/> <system.web> <compilation debug="true"/> <authorization> <deny users="?"></deny> </authorization> <authentication mode="Forms"> <forms loginUrl="Login.aspx"></forms> </authentication> <webParts> <personalization> <authorization> <allow users="Tom" verbs="enterSharedScope"/> </authorization> </personalization> </webParts> </system.web></configuration>对于（2），在页面中添加2个LinkButton，在cs文件中切换一下显示模式，也可以用DropDownList来实现。
EditorPart系列控件中的BehaviorEditorPart、PropertyGridEditPart需要特别说明一下。
BehaviorEditorPart控件看名字也知道大概能做什么了，它在默认情况下可能不会显示出来，实现这个控件需要2个步骤：一、配置Web.config文件，方法上面已经说了，二、以编程的方式将页从用户级别改为共享级别，可以通过使用ToggleScope方法实现。
PropertyGridEditPart：是对自定义属性的修改。
在EditorPart中实现折叠的功能
利用Css和JavaScript脚本来实现。初始情况下，让LEGEND的显示“＋”号，并隐藏区块中的内容，通过Click“＋”号改变Css。
示例代码如下：
Default.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_Default" %><%@ Register TagPrefix="cc1" Namespace="Samples.AspNet.CS.Controls" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head id="Head1" runat="server"> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">//为每个className值为'EditorPartTitle'的标题头创建onclick处理程序function CreateExpandingTitles(){ var elements = document.getElementsByTagName("LEGEND"); for(i=0; i<elements.length; i++) { if(elements[i].className && elements[i].className == "EditorPartTitle") { elements[i].onclick = new Function("toggle(this);"); } }}// 在onload发生时，调用CreateExpandingTitles方法if(window.addEventListener){ window.addEventListener('load', CreateExpandingTitles, false);}else if (window.attachEvent){ window.attachEvent('onload', CreateExpandingTitles);}//单击事件处理程序function toggle(titleElement){ var firstChild = (titleElement.nextSibling.childNodes[0].id) ? titleElement.nextSibling.childNodes[0] : titleElement.nextSibling.childNodes[1]; // 设置图片显示及显示状态 if (firstChild.style.display == "block") { firstChild.style.display = "none"; titleElement.style.backgroundImage = "url(images/plus.gif)"; } else { firstChild.style.display = "block"; titleElement.style.backgroundImage = "url(images/minus.gif)"; }} </script></head><body> <form id="Form1" runat="server"> <asp:WebPartManager ID="WebPartManager1" runat="server" /> <asp:LinkButton ID="LinkButton1" runat="server" Text="浏览模式(BrowseMode) | " OnClick="LinkButton1_Click" CssClass="commonText"></asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server" Text="编辑模式(EditMode)" OnClick="LinkButton2_Click" CssClass="commonText"></asp:LinkButton> <table border="0" cellpadding="0" cellspacing="0" style="width: 547px; height: 172px"> <tr> <td style="width: 268px" valign="top"> <asp:WebPartZone ID="WebPartZone1" runat="server" title="Zone 1" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6"> <PartTitleStyle Font-Bold="true" ForeColor="White" BackColor="#5D7B9D" Font-Size="0.8em" /> <PartStyle BorderWidth="1px" BorderStyle="Solid" BorderColor="#81AAF2" Font-Size="0.8em" ForeColor="#333333" /> <ZoneTemplate> <cc1:TextDisplayWebPart runat="server" ID="textwebpart" Title="Text Content WebPart" AllowClose="False" /> </ZoneTemplate> <PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6" Font-Names="Verdana" ForeColor="White" /> <MenuLabelHoverStyle ForeColor="#E2DED6" /> <EmptyZoneTextStyle Font-Size="0.8em" /> <MenuLabelStyle ForeColor="White" /> <MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" /> <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" /> <MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" /> <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" /> <MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.6em" /> </asp:WebPartZone> </td> <td style="width: 204px"> <asp:EditorZone ID="EditorZone1" runat="server" BackColor="#EFF3FB" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Padding="6"> <HeaderStyle BackColor="#D1DDF1" Font-Bold="True" Font-Size="0.8em" ForeColor="#333333" /> <LabelStyle Font-Size="0.8em" ForeColor="#333333" /> <HeaderVerbStyle Font-Bold="False" Font-Size="0.8em" Font-Underline="False" ForeColor="#333333" /> <PartChromeStyle BorderColor="#D1DDF1" BorderStyle="Solid" BorderWidth="1px" /> <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" CssClass="EditorPartHidden" /> <asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" CssClass="EditorPartHidden" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" CssClass="EditorPartHidden" /> <asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" CssClass="EditorPartHidden" /> </ZoneTemplate> <PartStyle BorderColor="#EFF3FB" BorderWidth="5px" /> <FooterStyle BackColor="#D1DDF1" HorizontalAlign="Right" /> <EditUIStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" /> <InstructionTextStyle Font-Size="0.8em" ForeColor="#333333" /> <ErrorStyle Font-Size="0.8em" /> <VerbStyle Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333" /> <EmptyZoneTextStyle Font-Size="0.8em" ForeColor="#333333" /> <PartTitleStyle Font-Bold="True" Font-Size="0.8em" ForeColor="#333333" CssClass="EditorPartTitle" /> </asp:EditorZone> </td> </tr> </table> </form></body></html>Default.aspx.csusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void LinkButton1_Click(object sender, EventArgs e) { //进入浏览模式 WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode; } protected void LinkButton2_Click(object sender, EventArgs e) { //调用ToogleScope方法，修改页面个性化范围 if (WebPartManager1.Personalization.Scope != PersonalizationScope.Shared) { WebPartManager1.Personalization.ToggleScope(); } //进入编辑模式 WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode; }}StyleSheet.cssbody{}{}.mainTitle{}{ font-size: 12pt; font-weight: bold; font-family: 宋体;}.commonText{}{ font-size: 10pt; font-family: 宋体; text-decoration:none;}.littleMainTitle{}{ font-size: 10pt; font-weight: bold; font-family: 宋体;}.EditorPartHidden{}{ display: none;}.EditorPartTitle{}{ background-position: left; background-repeat: no-repeat; background-image: url(images/plus.gif); cursor: pointer; padding-left: 14px; }效果图：
