SharePoint 2010中使用JavaScript进行客户端开发

 

    在SharePoint 2010新特性使用Client Object Model在客户端开发中，已经介绍了客户端对象模型--Client Object Model的基本概念及如何在我们的.Net应用程序中使用客户端对象模型来与服务器进行交互，同时，也提到，还可以在JavaScript和Silverlight中使用客户端对象模型，在这篇文章中，向大家介绍一下ECMAScript客户端对象模型。

通过ECMAScript客户端对象模型，我们可以在客户端使用JavaScript或Jscript与服务器交互，它在SharePoint 2010中被大量应用，比如Ribbon，增删改全部通过客户端对象模型实现，再比如弹出式的页面效果，等等。

为了使用ECMAScript Client OM，你可以再页面中添加一个自定义Ribbon(参考：SharePoint 2010自定义开发Ribbon)或Web Part(参考：SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发)，或者在自定义的Application Page中使用。

一.   添加引用。

ECMAScript客户端对象模型定义在SP.JS文件中，它的路径是“Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS”，注意，我们不需要像引用传统的JS文件那样来把它添加到页面中，而是这样来添加：

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

二.   请求数据。

类似于我们在ASP.NET中使用AJAX，其实这就是SharePoint 2010中集成的AJAX。

比如，我们取得当前站点的Title：

<script type="text/ecmascript" language="ecmascript">

function getWebURL()

 {

        var ctx = new SP.ClientContext.get_current();

        this.web = ctx.get_web();

        ctx.load(this.web);

        ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));

    }

function onSuccess(sender, args)

{

        alert('web title:' + this.web.get_title());

    }

function onFail(sender, args)

{

        alert(' Error:'+args.get_message());

    }

</script>

 

三.   延迟加载

如果你的JavaScript代码在page load时候就需要被执行，且使用了SP.JS，请使用这种方式来执行你的代码：

ExecuteOrDelayUntilScriptLoaded(ourjsfunction, "sp.js");

         因为SP.js延迟加载，在page load时还并没有被load到页面中。

四.   更新删除

更新删除操作需要你有对应的权限，因此页面中必须有FormDigest 这个Tag才能执行：

<SharePoint:FormDigest runat="server" />

更新站点Title：

       function updateTitle()

      {

            var ctx = new SP.ClientContext.get_current();

            this.web = ctx.get_web();

            web.set_title('KevinTest');

            this.web.update();

            ctx.executeQueryAsync(Function.createDelegate(this, this.onUpdate), Function.createDelegate(this, this.onFail));

        }

        function onUpdate(sender, args) {

            alert('title updated');

        }

        function onFail(sender, args) {

            alert('Error:' + args.get_message());

        }

五．对应关系

MSDN参考：http://msdn.microsoft.com/en-us/library/ee538253(office.14).aspx

六．注意事项

1. ECMAScript客户端对象模型只能在本站点集内使用，不能跨站点集调用。

2. 只能用在SharePoint站点里，不能在普通的ASP.net站点中使用。

3. 可以跟Jquery一起使用。

4. 有两个版本，SP.JS和SP.Debug.JS，顾名思义，后一个用于调试。