SharePoint 2010 - Client Object Model - ECMAScript

Creating a SharePoint Project

First, create an Empty SharePoint Project. Later, you will add an Application Page item to this project.

To create a SharePoint Project

Start Visual Studio 2010.
Open the New Project dialog box, expand the SharePoint node under the language that you want to use, and then click 2010.
In the Visual Studio Installed Templates pane, select Empty SharePoint Project. Name the project JSOMDemo, and then click OK.
Select Deploy as a farm solution, and then click Finish to accept the default local SharePoint site.

Creating an Application Page

To create an application page, add an Application Page item to the project.

To create an application page

In Solution Explorer, select the JSOMDemo project.
On the Project menu, click Add New Item.
In the Add New Item dialog box, select Application Page.
Name the page JSOM1.aspx, and then click Add.

The Visual Web Developer designer displays the application page in Source view where you can see the page's HTML elements. The designer displays the markup for several Content controls. Each control maps to a ContentPlaceHolder control that is defined in the default application master page.

Designing the Layout of the Application Page

The Application Page item enables you to use a designer to add ASP.NET controls to the application page. This designer is the same designer used in Visual Web Developer. Drag a label, a radio button list, and a table to the Source view of the designer and set properties just as you would design any standard ASP.NET page.

To design the layout of the application page

On the View menu, click Toolbox.
In the Toolbox, from the SharePoint Controls group, drag a ScriptLink onto the body of the PlaceHolderAdditionalPageHead content control. And add input button control onto the body of the PlaceHolderMain content control.
On the designer, set the value of the ScriptLink control as bellow.

<SharePoint:ScriptLink ID="ScriptLink1" runat="server" LoadAfterUI="true" Localizable="false" Name="sp.js"></SharePoint:ScriptLink>

And the input button as bellow.

<input id="Button1" type="button" value="Execute Client OM" onclick="execClientOM()" />

Adding Javascript Code to Get Server Information

Add bellow JS code beneath the ScriptLink control.

<script type="text/javascript">

function execClientOM() {

//get a client context

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

//load the current site(SPWeb)

web = context.get_web();

context.load(web);

//execute an async query

context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),

Function.createDelegate(this, this.onFailure));

}

function onSuccess(sender, args) {

alert("Site title: " + web.get_title() + ' Decription: ' + web.get_description());

}

function onFailure(sender, args) {

alert("Request failed " + args.get_message() + "\n" + args.get_stackTrace());

}

</script>

Testing the Application Page

When you run the project, the SharePoint site opens and the application page appears.

To test the application page

In Solution Explorer, right-click the application page, and then click Set as Startup Item.
Press F5.

The SharePoint site opens. The application page appears.

On the page, click the Button1 button.

The application page shows the site title and site description.

full code:

代码

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSOM1.aspx.cs" Inherits="JSOMDemo.Layouts.JSOMDemo.JSOM1" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" LoadAfterUI="true" Localizable="false" Name="sp.js">
</SharePoint:ScriptLink>
<script type="text/javascript">
function execClientOM() {
//get a client context
var context = new SP.ClientContext.get_current();

//load the current site(SPWeb)
web = context.get_web();
context.load(web);

//execute an async query
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFailure));

}

function onSuccess(sender, args) {
alert("Site title: " + web.get_title() + ' Decription: ' + web.get_description());

}

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

</script>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<input id="Button1" type="button" value="Execute Client OM" onclick="execClientOM()" />
</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
My Application Page
</asp:Content>

Load minimal data you need:

In the above code snippet, the Ctx.load method is invoked with only one parameter (web). The load method will load all properties of the web object. But we are only using Id, Title and Created Date properties. If you know which properties you are interested in, you can pass the properties names in the load method and only those properties will be loaded. For example the following load method will return only ID, Title and Created Date.

clientContext.load(this.web, 'Title', 'Id', 'Created');

Few points to notice about ECMAScript Client OM:

ECMAScript object model can only be used in SharePoint sites. So you can’t use this object model in an asp.net site to access SharePoint resources deployed in another url as this is cross-site scripting and not allowed.
You can’t use this object model in a SharePoint site to access resources in different SharePoint sites(i.e., different urls). For example, from mysite.mysp.com you can access resources in yoursite.yoursp.com using ECMAScript client OM. This is also cross-site scripting.
You can use JQuery with ECMAScript Client OM and for this you don’t need to do some extra work. All you need to do to use JQuery is to add reference to JQuery.js file and start using JQuery.
You can use this ECMAScript Client OM in web part pages or application pages (aspx pages) by referencing a javascript file (SP.js). You don’t need to add reference to the file manually rather use <SharePoint:ScriptLink Name=”sp.js” ………. />. The file is located on the path “Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS”
To update with JavaScript, you need to add a FormDigest tag in your page for security purpose.

reference: SharePoint 2010: Client Object Model for JavaScript (ECMAScript)