SharePoint 客户端对象模型 (一) ECMA Script

所谓的客户端对象模型就是调用了背后的WCF服务来提供数据,为了减轻数据的访问量数据包使用JSON,我们还可以看到对象模型的设计也加入了诸多对于减轻数据访问量的考量。技术上没有什么新意,你要愿意,在SharePoint2007里面也可以实现类似的功能,当然在使用上方便了我们不少

 
三种使用客户端模型的.NET托管、ECMA脚本,SilverLightClient.

本文讲阐述如何使用.NET托管代码来访问SharePoint对象模型。

ECMAScript Client OM需要注意的几个点

  • ECMAScript仅能够在SharePoint站点里面使用,不能够在其他的Asp.NET站点里使用ECMAScript来访问SharePoint站点资源,也不能够跨SharePoint站点访问资源;
  • JQuery和ECMAScript使用起来不会有冲突;
  • 为了安全的更新内容,在使用ECMAScript的画面里添加<SharePoint:FormDigest runat="server" />
  • 在随后你将会看到的代码里为了减轻加载的数据量,可以指定需要加载的内容,例如client.Context.load(this.web,'Title','Id','Created'), 这里的属性值名称使用和CAML一样的体系,对大小写敏感;
  • 为确保你的代码执行在SP.JS加载完之后再被调用,可以使用ExecuteOrDelayUntilScriptLoaded(myjsFunction, “sp.js”)。

我们看看SharePoint OM和客户端OM的一个简单的匹配关系:























服务器端OM 客户端OM
SPContext ClientContext
SPSite Site
SPWeb Web
SPList List
SPListItem ListItem
SPField Field

看看最后会呈现的效果,下图是初步计划的功能,主要设计列表的创建、查询以及管理,另外也涉及上传文件的Case,后续里如果有重要的也会逐步加进来。

里面的链接会调用UI方面的Javascript接口创建SharePoint2010风格的弹出窗口,弹出窗口的后台页面位于SitePage文档库内,请注意这个仅仅适用于打开的页面是WebPart page,如果不是打开的时候会报错误:“The Ribbon Tab with id: "Ribbon.Read" has not been made available for this page or does not exist”。

(注意,此Page在之后都不会被用到,留在这里仅为了解释Ribbon用)

创建列表:

首先,通过Designer,加入以下两个Script链接:

<SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false" />
<SharePoint:ScriptLink Name="SP.debug.js" runat="server" OnDemand="true" Localizable="false" />

ECMAScriptOM和.NET Managed ClientOM(随后会讲到)异曲同工,但也有几点需要注意的:

  1. 在ClientContext里面不能使用服务器端URLs;
  2. 不支持LINQ;
  3. 本质上ECMAScript OM是异步的

代码非常的简单易懂,里面有个好玩的东西SP.UI.Notify.addNotification,通过这个类可以在调用的画面里显示提示消息,非常的SharePoint。

演示结果如下:

在文本框里输入列表名字后,点击"Create List”按钮,生成列表后会在右上角提示“List test1 created”,本例中使用annoucement做为列表类型。

源代码如下:


代码如下:

<script type="text/javascript">
var messageId;
function createList(listName){
var clientContext = new SP.ClientContext();
var oWebSite = clientContext.get_web();
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title(listName);
listCreationInfo.set_templateType(SP.ListTemplateType.announcements);
listCreationInfo.set_quickLaunchOption(SP.QuickLaunchOptions.on);
var oList = oWebSite.get_lists().add(listCreationInfo);
clientContext.load(oList);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
//Remove the 'creating' event notification
if(messageId != null)
{
SP.UI.Notify.removeNotification(messageId);
}
//Add 'created' notification as non sticky
messageId = SP.UI.Notify.addNotification("List <b>" + oList.get_title() + "</b> created...", false, "", null);
}

function onQueryFailed(sender, args) {
//Remove the 'creating' event notification
if(messageId != null)
{
SP.UI.Notify.removeNotification(messageId);
}
//Shown in case of error on the JS OM call
messageId = SP.UI.Notify.addNotification("Operation was cancelled...", false, "", null);
}

</script>

获取所有列表:

同样,先看一下效果,点击“Get All List”按钮,会将当前站点下的所有列表都读取出来并设置了响应的超链接属性,点击“Hide List”按钮则将之隐藏(实际上就是个Div)

代码非常的直接,只说明一个点,getEnumerator()以及moveNexst(), get_current()等JavaScript函数的使用为遍历集合提供了很好的方法。

源代码:


代码如下:

function getLists(){
var clientContext = new SP.ClientContext();
var oWebSite = clientContext.get_web();
listCollection = oWebSite.get_lists();
clientContext.load(listCollection);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onGetListsSucceeded), Function.createDelegate(this, this.onGetListsFailed));
}
function onGetListsSucceeded(){
var str = "";
var listsEnumerator = listCollection.getEnumerator();
while(listsEnumerator.moveNext()){
var objList = listsEnumerator.get_current();
str += "<a href='" + "http://localhost" + objList.get_parentWebUrl() + objList.get_defaultViewUrl() + "'>" + objList.get_title() + "</a>" + "<br/>";
}
document.getElementById("lists").innerHTML = str;
}
function onGetListsFailed(sender, args){
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

CAML查询:

这里面提供了两种方式查询,一个按DueDate,一种按Title,当然功能可以设计的更加有利于用户使用些,Demo里就不做过多渲染。点击Search就可以进行数据的查询,有一点小发现,如果使用<asp:calendar/>控件的时候选择好日期会导致页面postback,SharePoint里面至少有两种解决方案:

  1. 单独在某个页面里面放入calendar控件,然后添加以下代码:

    <input type="text" id="txtDate" name="txtDate" />
    <button value="lookup" onclick="document.all['txtDate'].value =
    window.showModalDialog( 'Calendar.aspx' );" >

  2. 使用SharePoint Calendar控件<SharePoint:DateTimeControl runat=server id="DateTimeControl1" DateOnly="True"></SharePoint:DateTimeControl>

做了一段对控件显示的控制,选择Date则出现输入Date的控件,选择Title则出现输入Title的控件,本来想用JQuery的方法,后来一下没想起来JQuery的Selector写法,半土不洋的用了下面的方法结合控制:


代码如下:

<script type="text/javascript">
function changeQueryMethod(){
var method = $("select[id='selectQueryMethod']").val();
if(method == 'Title'){
document.getElementById('querybytitle').style.display = "inline";
document.getElementById('querybyDate').style.display = "none";
}
else{
document.getElementById('querybytitle').style.display = "none";
document.getElementById('querybyDate').style.display = "inline";
}
}
</script>

关于CAML查询的细节本身也不做过多说明,如果有兴趣可以参见拙文(http://www.cnblogs.com/johnsonwong/archive/2011/02/27/1966008.html),这是一篇针对2007版本的CAML,在2010里有了很多增强,譬如跨列表Joint查询等,随后会发布相应2010的版本。

需要注意的知识是:

里面使用了对field的查询,注意相关API的调用;
ClientContext里面对若干个结果集进行操作,但需要调用Load对不同结果集进行加载:clientContext.load(fieldCollection);clientContext.load(listItemCollection);
如果有需要读取的字段值需要在CAML查询XML里面显示说明,否则不会返回到结果集里,这也是出于对性能的考虑


代码如下:

function search(){
var clientContext = new SP.ClientContext();
var oWebSite = clientContext.get_web();
var list = oWebSite.get_lists().getByTitle("Tasks");
fieldCollection = list.get_fields();
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml( "<View><Query><Where><Gt>" +
"<FieldRef Name='DueDate' />" +
"<Value Type='DateTime'>2008-01-1T00:00:00Z</Value>" +
"</Gt></Where></Query><ViewFields>" +
"<FieldRef Name=\"Title\" /><FieldRef Name=\"Body\" />" +
"<FieldRef Name=\"DueDate\" />" +
"</ViewFields></View>");
listItemCollection = list.getItems(camlQuery);
clientContext.load(fieldCollection);
clientContext.load(listItemCollection);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSearchListSucceeded), Function.createDelegate(this, this.onSearchListFailed));
}
function onSearchListSucceeded(){
var str = "";
var listItemEnumerator = listItemCollection.getEnumerator();
var fieldsEnumerator = fieldCollection.getEnumerator();
while(listItemEnumerator.moveNext()){
var oListItem = listItemEnumerator.get_current();
str += "Item " + oListItem.get_id() + ":"
while(fieldsEnumerator.moveNext()){
var oField = fieldsEnumerator.get_current();
str += oField.get_staticName() + "<br/>";
}
str += "<br/>";
}
document.getElementById("lists").innerHTML = str;
}

function onSearchListFailed(sender, args){
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

操作文件:

遗憾的是在ECMAScript里面无法上传文件,虽然有SP.File对象,但更多的是对获取回来的SP.File对象进行操作。

(0)

相关推荐

  • 解决asp.net Sharepoint无法连接发布自定义字符串处理程序,不能进行输出缓存处理的方法

    问题描述: 无法连接发布自定义字符串处理程序,不能进行输出缓存处理.IIS 实例 ID 为"1772638466", URL 为"http://XXXX.XXX.XXX/EnglishWorld/Default.aspx". 有关更多信息,请参阅在 http://go.microsoft.com/fwlink/events.asp 的帮助和支持中心. 在系统日志大片出现(除了URL不同),但貌似对系统没什么影响,能正常使用. 此问题不会影响正常使用,但日志很快就满了

  • 删除 Windows SharePoint Services的三种方法

    可以用 HTML 管理或命令行管理工具从虚拟服务器中删除 Microsoft Windows SharePoint Services.这两种工具都可以在删除 Windows SharePoint Services 时保留或删除内容. 用 HTML 管理网页从虚拟服务器中删除 Windows SharePoint Services 单击"开始",指向"所有程序",再指向"管理工具",然后单击"SharePoint 管理中心". 

  • 在Javascript里访问SharePoint列表数据的实现方法

    在SharePoint2010里有了很好的解决方案(详见拙文SharePoint客户端编程系列http://www.jb51.net/article/27198.htm),但是在SharePoint2007里就没那么好用,具体问题具体分析,本文要解决的是如何在JavaScript里通过WebService访问SharePoint数据的问题. 首先需要从此处(http://darrenjohnstone.net/download/12)下载JavaScript API包 引用次JS,里面有两个库,

  • 使用jQuery实现dropdownlist的联动效果(sharepoint 2007)

    使用场景,比如,选中某个省份,然后下级列表中会显示对应的城市. 1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js. 2.创建主表和子表,建立对应关系. 3.在List的NewItem或者EditItem page中添加Content Editor Webpart,然后在其中添加脚本代码. 4.实现, dropdownObj控件: cascadeDropdownObj控件(该控件是通过脚本附加的): 该方法是通过传入参数,来返回对于字表的记录 复制代码

  • sharepoint 2010版本图文安装教程

    软件程序:Microsoft Perject Server2010 Microsoft Share Point2010(中文版) 操作系统:windows server 2008 sp1 64位 数据库:SQL Server 2008 sp1 内存:最低8G 硬盘:200GB(硬盘太小后续会造成驱动器空间不足) 数据库:SQL Server 2008 sp1(需要存放在独立的服务器上运行) 安装Microsoft Perject Server2010 的前置条件是必须先成功安装且部署 Share

  • ASP.NET、SharePoint中另存文件的长文件名被截断的原因及解决办法

    一个Word文档,或者是什么文件,文件名称超过15个汉字,或者一定长度的字母之后,上传到文档库是没有问题的,但是如果你想下载,使用[右键]-[另存为],就会发现保存框的文件名一栏中,就剩下15个汉字了,其他的都被省略了. 我就开始寻找解决的办法,直接点击文件,默认会用客户端程序打开,例如word文档,会使用word打开,发现文件名是正常的,然后使用word的另存为,正常. 使用moss的资源管理器视图,从视图中直接复制文件出来,正常. 唯独另存不正常,以上都是在IE6的环境测试的. 上网goog

  • SharePoint 客户端对象模型 (一) ECMA Script

    所谓的客户端对象模型就是调用了背后的WCF服务来提供数据,为了减轻数据的访问量数据包使用JSON,我们还可以看到对象模型的设计也加入了诸多对于减轻数据访问量的考量.技术上没有什么新意,你要愿意,在SharePoint2007里面也可以实现类似的功能,当然在使用上方便了我们不少  三种使用客户端模型的.NET托管.ECMA脚本,SilverLightClient. 本文讲阐述如何使用.NET托管代码来访问SharePoint对象模型. ECMAScript Client OM需要注意的几个点 EC

  • 一篇文章带你入门Java Script

    目录 概述 特点 和Java的区别 弱类型语言 强类型语言 书写位置 数组 函数 JS中的自定义对象(扩展内容) Object形式的自定义对象 JS中的事件 常用的事件: 动态注册基本步骤: DOM模型 总结 概述 JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码. JS组成部分: 组成部分 作用 ECMA Script 构成了JS核心的语法基础 BOM Browser Object Model 浏览

  • Windows Script Host终止的解决方法

    RG-SA安全客户端出现"由于Windows Script Host终止或崩溃,主机完整性检查失败"的问题.     答:当使用SA安全客户端时出现"由于Windows Script Host终止或崩溃,主机完整性检查失败",请使登陆GSN软件维护区域http://nic.hnu.cn/images/stories/soft/scripchs.rar下载scripchs.rar,进行安装修复.

  • Javascript 面向对象特性

    1. JavaScript中的类型 -------- 虽然JavaScript是一个基于对象的语言,但对象(Object)在JavaScript中不是第一型的.JS 是以函数(Function)为第一型的语言.这样说,不但是因为JS中的函数具有高级语言中的函 数的各种特性,而且也因为在JS中,Object也是由函数来实现的.--关于这一点,可以在 后文中"构造与析构"部分看到更进一步的说明. JS中是弱类型的,他的内置类型简单而且清晰: ------------------------

  • MSScriptControl.ScriptControl组件的用法实例

    Microsoft(R) Script 控件使用户可以创建运行任何 ActiveX(R) scripting 引擎,例如 Microsoft(R) Visual Basic (R) Scripting Edition 或Microsoft(R) JScript(TM) 的应用程序.用户可以将任何 Automation 对象的对象模型添加到 Script 控件中,这样该对象的方法和属性就可以为 scripting 引擎所使用.通过将某个应用程序的对象模型和某个scripting 引擎加以综合,用户

  • 表单上传功能实现 ajax文件异步上传

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一.jQuery官方下载地址:https://jquery.com/download/ 一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-d

  • 用jQuery与JSONP轻松解决跨域访问的问题

    时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以的

  • AJAX跨域请求之JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该

  • 深入分析JSONP跨域的原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same- Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的 页面中包含的JavaScript

随机推荐