实现WebPart编辑功能

最新推荐文章于 2024-11-05 15:26:40 发布
最新推荐文章于 2024-11-05 15:26:40 发布
阅读量120 收藏
点赞数
分类专栏： net 文章标签： javascript ui xhtml ViewUI

实现WebPart的编辑功能需要用到VS2005提供的EditorZone控件和EditorPart系列控件。EditorPart系列控件包括AppearanceEditorPart、BehaviorEditorPart、LayoutEditorPart、PropertyGridEditPart。
要实现WebPart的编辑功能需要几个条件：（1）用户处于共享页面范围（2）显示模式为编辑模式。
对于（1）来说，只要在Web.config文件中配置一下就OK了。
<allowusers="Tom"verbs="enterSharedScope"/> 表示用户名"Tom" 被授权共享页面范围，否则切换成编辑模式会报错。

Web.config
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><?xmlversion="1.0"?>
<configurationxmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<appSettings/>
<connectionStrings/>
<system.web>
<compilationdebug="true"/>
<authorization>
<denyusers="?"></deny>
</authorization>
<authenticationmode="Forms">
<formsloginUrl="Login.aspx"></forms>
</authentication>
<webParts>
<personalization>
<authorization>
<allowusers="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
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="_Default"%>

<%@RegisterTagPrefix="cc1"Namespace="Samples.AspNet.CS.Controls"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<headid="Head1"runat="server">
<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>

<scripttype="text/javascript">
//为每个className值为'EditorPartTitle'的标题头创建onclick处理程序
functionCreateExpandingTitles()
{
varelements=document.getElementsByTagName("LEGEND");
for(i=0;i<elements.length;i++)
{
if(elements[i].className&&elements[i].className=="EditorPartTitle")
{
elements[i].onclick=newFunction("toggle(this);");
}
}
}
//在onload发生时，调用CreateExpandingTitles方法
if(window.addEventListener)
{
window.addEventListener('load',CreateExpandingTitles,false);
}
elseif(window.attachEvent)
{
window.attachEvent('onload',CreateExpandingTitles);
}
//单击事件处理程序
functiontoggle(titleElement)
{
varfirstChild=(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>
<formid="Form1"runat="server">
<asp:WebPartManagerID="WebPartManager1"runat="server"/>
<asp:LinkButtonID="LinkButton1"runat="server"Text="浏览模式(BrowseMode)|"OnClick="LinkButton1_Click"
CssClass="commonText"></asp:LinkButton>
<asp:LinkButtonID="LinkButton2"runat="server"Text="编辑模式(EditMode)"OnClick="LinkButton2_Click"
CssClass="commonText"></asp:LinkButton>&nbsp;
<tableborder="0"cellpadding="0"cellspacing="0"style="width:547px;height:172px">
<tr>
<tdstyle="width:268px"valign="top">
<asp:WebPartZoneID="WebPartZone1"runat="server"title="Zone1"BorderColor="#CCCCCC"
Font-Names="Verdana"Padding="6">
<PartTitleStyleFont-Bold="true"ForeColor="White"BackColor="#5D7B9D"Font-Size="0.8em"/>
<PartStyleBorderWidth="1px"BorderStyle="Solid"BorderColor="#81AAF2"Font-Size="0.8em"
ForeColor="#333333"/>
<ZoneTemplate>
<cc1:TextDisplayWebPartrunat="server"ID="textwebpart"Title="TextContentWebPart"
AllowClose="False"/>
</ZoneTemplate>
<PartChromeStyleBackColor="#F7F6F3"BorderColor="#E2DED6"Font-Names="Verdana"ForeColor="White"/>
<MenuLabelHoverStyleForeColor="#E2DED6"/>
<EmptyZoneTextStyleFont-Size="0.8em"/>
<MenuLabelStyleForeColor="White"/>
<MenuVerbHoverStyleBackColor="#F7F6F3"BorderColor="#CCCCCC"BorderStyle="Solid"
BorderWidth="1px"ForeColor="#333333"/>
<HeaderStyleFont-Size="0.7em"ForeColor="#CCCCCC"HorizontalAlign="Center"/>
<MenuVerbStyleBorderColor="#5D7B9D"BorderStyle="Solid"BorderWidth="1px"ForeColor="White"/>
<TitleBarVerbStyleFont-Size="0.6em"Font-Underline="False"ForeColor="White"/>
<MenuPopupStyleBackColor="#5D7B9D"BorderColor="#CCCCCC"BorderWidth="1px"Font-Names="Verdana"
Font-Size="0.6em"/>
</asp:WebPartZone>
</td>
<tdstyle="width:204px">
<asp:EditorZoneID="EditorZone1"runat="server"BackColor="#EFF3FB"BorderColor="#CCCCCC"
BorderWidth="1px"Font-Names="Verdana"Padding="6">
<HeaderStyleBackColor="#D1DDF1"Font-Bold="True"Font-Size="0.8em"ForeColor="#333333"/>
<LabelStyleFont-Size="0.8em"ForeColor="#333333"/>
<HeaderVerbStyleFont-Bold="False"Font-Size="0.8em"Font-Underline="False"ForeColor="#333333"/>
<PartChromeStyleBorderColor="#D1DDF1"BorderStyle="Solid"BorderWidth="1px"/>
<ZoneTemplate>
<asp:AppearanceEditorPartID="AppearanceEditorPart1"runat="server"CssClass="EditorPartHidden"/>
<asp:BehaviorEditorPartID="BehaviorEditorPart1"runat="server"CssClass="EditorPartHidden"/>
<asp:LayoutEditorPartID="LayoutEditorPart1"runat="server"CssClass="EditorPartHidden"/>
<asp:PropertyGridEditorPartID="PropertyGridEditorPart1"runat="server"CssClass="EditorPartHidden"/>
</ZoneTemplate>
<PartStyleBorderColor="#EFF3FB"BorderWidth="5px"/>
<FooterStyleBackColor="#D1DDF1"HorizontalAlign="Right"/>
<EditUIStyleFont-Names="Verdana"Font-Size="0.8em"ForeColor="#333333"/>
<InstructionTextStyleFont-Size="0.8em"ForeColor="#333333"/>
<ErrorStyleFont-Size="0.8em"/>
<VerbStyleFont-Names="Verdana"Font-Size="0.8em"ForeColor="#333333"/>
<EmptyZoneTextStyleFont-Size="0.8em"ForeColor="#333333"/>
<PartTitleStyleFont-Bold="True"Font-Size="0.8em"ForeColor="#333333"CssClass="EditorPartTitle"/>
</asp:EditorZone>
</td>
</tr>
</table>
</form>
</body>
</html>

Default.aspx.cs
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;

publicpartialclass_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{

}
protectedvoidLinkButton1_Click(objectsender,EventArgse)
{
//进入浏览模式
WebPartManager1.DisplayMode=WebPartManager.BrowseDisplayMode;
}
protectedvoidLinkButton2_Click(objectsender,EventArgse)
{
//调用ToogleScope方法，修改页面个性化范围
if(WebPartManager1.Personalization.Scope!=PersonalizationScope.Shared)
{
WebPartManager1.Personalization.ToggleScope();
}
//进入编辑模式
WebPartManager1.DisplayMode=WebPartManager.EditDisplayMode;
}
}

StyleSheet.css
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->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;
}

效果图：

iteye_61
关注
专栏目录
（五）在webpart中实现SharePoint Online的增删查改（CRUD）操作
shrenk的专栏
03-14 1254
        在上一篇博客（四）修改webpart并在SharePoint Online中调试中，我们在SharePoint Online在线工作台中使用”this.context.pageContext.web.title“获取到了当前站点的名称，下面将介绍如何实现增删查改操作。微软提供了一个library pnp-js-core，封装了REST API，可以使用这个库来与SharePoint...
webpart教程 初学webpart的好帮手
01-19
本教程包含的可能章节可能包括：WebPart概述、WebPart开发环境搭建、WebPart基础类、WebPart设计与实现、WebPart连接、WebPart权限管理、Visual WebPart开发、WebPart调试与部署等。每章节都会通过实例来讲解相关...
SharePoint判断页面(或WebPart)是否处于编辑模式.
weixin_34148340的博客
07-04 105
相信大家经常进行编辑(配置)WebPart的属性等操作. 有些时候,在我们配置属性的时候,可能我们会希望这个时候,页面上的webpart区域显示其它内容或提示信息. 那我们如何判断我们是不是在编辑模式中呢? 可能大家知道这样一个小窍门:在URL中加上DisplayMode=Design就可以让当前页面进入设计模式. 那我们可以通过判断DisplayMode及其值来判断当前页面是否处于编辑模...
webpart制作教程
weixin_30556959的博客
07-24 119
sharepoint2003的webpart与sharpoint2007的webpart制作有所区别。这里主要讲sharpoint2007的webpart制作。步骤：1、安装vs2005.2、安装webpart模板：VSeWSS.exe3、创建项目，选择web part.如下图：4、创建完成后，会自动生成如下代码： usingSystem;usingSystem.Runtime.Intero...
编写一个简单的WebPart(1):创建工程
weixin_30323961的博客
09-09 95
摘要 　　在前面的文章中，我们讲解了很多基础的内容，主要包括安装配置、Form认证等。可能这些对很多朋友来说，是太轻易了。那么，从下一篇文章开始，就让我们进入SharePoint的高级课题之旅吧。　　本篇文章将介绍如何编写一个最简单的WebPart。　　跟所有的编程技术一样，都是从编写第一个Hello World程序开始的。笔者自叹也是一个俗人，所以当然也不能免俗，我们就也从编写一个Hello ...
对象不支持“attachEvent”属性或方法
热门推荐
keketrtr的专栏
03-03 3万+
IE11浏览器在访问我们的服务器的时候出现错误：对象不支持“attachEvent”属性或方法。网上说需要进入管理加载项禁用迅雷的某个组件。我试了一下，好像不管用。因为在IE9浏览器里不会报错，我就在jsp页面的头部加了，还是不管用。等一下，这个jsp包含一个公共的jsp，而且页面也加载的也是那个公共的jsp，于是我把这个meta加到了那个首先加载的jsp里面，搞定了！
WebPart（汇总）
adlihgh692910的博客
11-05 154
一、Web部件概述二、创建一个简单的WebPart应用示例三、创建自定义的WebPart四、实现WebPart编辑功能五、实现WebPart管理功能六、实现WebPart通信功能 转载于:https://www.cnblogs.com/hide0511/archive/2006/11/05/551020.html...
Sharepoint习题——Webpart
xiaxianglanyu的专栏
09-12 1123
Question28 You have a Microsoft Office SharePoint Server 2007 site. You upgrade the site to SharePoint Server 2010. You need to create a Feature that prevents site collection administrators from up
webpart
soloyhm的专栏
06-28 431
VS.NET2005中的WEBPART初步(一) 收藏VS.NET2005中的WEBPART初步(一)         VS.NET2005正式发行,给一帆的影响是什么呢?最大的收获就是可以做真正的.NET穷人了,一帆天生的就不是读书的料,可是又偏偏赶上了电脑的新潮...        VS.NET2005中的WEBPART初步(一)中,将让穷人们认识一下WEBPART,其实说白了很简单,WEBP
自定义webpart
08-21
在这个场景中，我们将深入探讨如何编辑Web Part的风格、增强其功能，并了解JavaScript在其中的作用。 1. **自定义Web Part** - **创建过程**: 开发者通常使用.NET Framework和Visual Studio来创建自定义Web Part，...
SharePoint 开发实录：5，WebPart 发布
03-27
在这个过程中，开发人员通常会使用Visual Studio创建WebPart项目，编写代码实现特定功能，然后将项目打包成WSP（SharePoint Solution Package）文件。这个过程可能涉及到对SharePoint的API，如Microsoft.Office....
webpart 教程
10-19
2. **WebPart连接**：WebParts可以通过连接机制共享数据，这使得它们之间可以通信，实现更复杂的功能。例如，一个搜索WebPart的结果可以显示在另一个WebPart中。 3. **WebPart zones**：Zone是WebPart布局的基础，...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 448
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 242
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
最新发布
ceshiren_com的博客
11-05 495
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 175
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 117
创建Vue实例 Vue指令
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值