SharePoint Client Object Model (1) ECMA Script_javascript skills

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

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

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

ECMAScript Client OM需要注意的几个点

• ECMAScript仅能够在SharePoint站点里面使用，不能够在其他的Asp.NET站点里使用ECMAScript来访问SharePoint站点资源，也不能够跨SharePoint站点访问资源；
• JQuery和ECMAScript使用起来不会有冲突；
• 为了安全的更新内容，在使用ECMAScript的画面里添加
• 在随后你将会看到的代码里为了减轻加载的数据量，可以指定需要加载的内容，例如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

Look at the final effect. The following picture is the preliminary planned function, which mainly designs the creation, query and management of lists. It also involves the case of uploading files. If there are any important ones, they will be gradually added in the future.

The link inside will call the UI Javascript interface to create a SharePoint2010 style pop-up window. The background page of the pop-up window is located in the SitePage document library. Please note that this only applies to the opened page if it is a WebPart page. If it is not opened, it will Error reported: "The Ribbon Tab with id: "Ribbon.Read" has not been made available for this page or does not exist".

(Note that this Page will not be used in the future, it is left here only to explain the use of Ribbon)

Create a list:

First, through Designer, add the following two Script links:

ECMAScriptOM and .NET Managed ClientOM (which will be discussed later) have the same purpose, but there are a few points to note:

1. Server-side URLs cannot be used in ClientContext;
2. LINQ is not supported;
3. Essentially ECMAScript OM is asynchronous

The code is very simple and easy to understand. There is a fun thing in it, SP.UI.Notify.addNotification. Through this class, prompt messages can be displayed in the calling screen, very SharePoint.

The demonstration results are as follows:

After entering the list name in the text box, click the "Create List" button. After the list is generated, "List test1 created" will be prompted in the upper right corner. In this example, annoucement is used as the list type.

The source code is as follows:

Copy code The code is as follows:

Get all lists:

Similarly, take a look at the effect first. Click the "Get All List" button to read all the lists under the current site and set the corresponding hyperlink attributes. Click the "Hide List" button to hide them ( It’s actually a Div)

The code is very straightforward and only explains one point. The use of JavaScript functions such as getEnumerator() and moveNexst(), get_current() provides a good way to traverse the collection.

Source code:

Copy code The code is as follows:

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 = "" objList.get_title() "" "
";
}
document.getElementById(" lists").innerHTML = str;
}
function onGetListsFailed(sender, args){
alert('Request failed. ' args.get_message() 'n' args.get_stackTrace());
}

CAML query:

There are two ways to query, one by DueDate and one by Title. Of course, the function can be designed to be more user-friendly, and there will be no excessive rendering in the Demo. Click Search to query the data. I made a small discovery. If you select a date when using the control, it will cause the page to postback. There are at least two solutions in SharePoint:

1. Put the calendar control in a separate page, and then add the following code:

   
   

2. Use the SharePoint Calendar control

I did a section to control the display of controls. Select Date and a control for inputting Date will appear. Select Title and a control for inputting Title will appear. I originally wanted to use the JQuery method, but then I suddenly didn’t remember how to write JQuery’s Selector. I was confused. The foreign ones use the following method to combine control:

Copy code The code is as follows:

< 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";
}
}

The details of CAML query itself are not explained too much. If you are interested, you can refer to my article (http://www.cnblogs.com/johnsonwong/archive/2011/02/27/1966008.html). This is This article is for the 2007 version of CAML. There have been many enhancements in 2010, such as cross-list Joint query, etc. The corresponding 2010 version will be released later.

The knowledge that needs to be paid attention to is:

uses field query, pay attention to the relevant API calls;
ClientContext operates on several result sets, but needs to call Load to Load different result sets: clientContext.load(fieldCollection); clientContext.load(listItemCollection);
If there are field values ​​that need to be read, a description needs to be displayed in the CAML query XML, otherwise it will not be returned to the result set. This Also for performance reasons

Copy the code The code is as follows:

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( ""
""
"2008-01-1T00:00:00Z"
""
""
""
"");
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 () "
";
}
str = "
";
}
document.getElementById("lists").innerHTML = str;
}

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

Operating files:

Unfortunately, files cannot be uploaded in ECMAScript. Although there is an SP.File object, most of the operations are on the obtained SP.File object.