Setting Up an Application Page for JavaScript

Applies to: SharePoint Foundation 2010

Available in SharePoint Online

You can include custom code that uses the ECMAScript (JavaScript, JScript) object model within a script block on an .aspx page, or you can create a separate .js file to include your code and reference it from the .aspx page. The following example assumes that you have created a SharePoint Foundation project with an application page in Microsoft Visual Studio 2010, as described in Creating Application Pages for SharePoint. Visual Studio creates the application page in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS.

To get IntelliSense for the SP namespace in the Visual Studio Code Editor, add <script> tags that reference the SharePoint Foundation .js files that are installed in the \LAYOUTS directory. Include references to SP.Core.Debug.js, SP.Debug.js, and SP.Runtime.Debug.js, as seen in the example.

Important

In Visual Studio 2010, the <script> tags that you add are a design time component that is used to provide IntelliSense for the SharePoint Foundation client object model. However, to build the project, you must comment out the <script> tags. Also, test your page on the server to make sure that the page has no errors.

If you are writing code that modifies SharePoint Foundation data, include a FormDigest control to create a digest for security validation of the page.

<%@ 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="TestServerOM1.aspx.cs" 
  Inherits="TestServerOM1.Layouts.TestServerOM1.TestServerOM1" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

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

          function onQuerySucceeded(sender, args) {
              alert('Title: ' + this.oWebsite.get_title() + ' Decription: ' + this.oWebsite.get_description());
          }

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

          function retrieveWebSite() {
              var clientContext = new SP.ClientContext.get_current();
              this.oWebsite = clientContext.get_web();
              clientContext.load(this.oWebsite);
              clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
          }
      </script>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>

    <input id="Button1" runat="server" Text="Retrieve Web Site" OnClick="retrieveWebSite()" />
  
</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>

For information about the debug .js files that are included in an installation of SharePoint Foundation, see Client Object Model Distribution and Deployment.

See Also

Concepts

How to: Work with Websites

Data Retrieval Overview

Common Programming Tasks in the Managed Client Object Model

Other Resources

Client Class Library

JavaScript Class Library