SharePoint, WCF, Ajax, jQuery, client templates

Wow what a title eh? But it’s true I’m going to quickly show how we can use all of the above in a SharePoint page. Firstly you’ll need to check the previous blog post on how to build a WCF web service for the Business Data Catalog:

Business Data Catalog and WCF

Once you have built and deployed your WCF service we can get on with building the user view. Rather than building this as a web part – for the sake of a nicer size blog post and more readable code I’m going to do it as a SharePoint application page. So quickly lets go over the bits we are going to use:

ASP.NET Ajax – we’re going to use asp.net ajax to call our WCF service. Using the ScriptManager component we can easily add a reference to our service and call it very nicely.

Client Templates – this is part of the ASP.NET Ajax futures project. If you get JSON objects back from your web service you could iterate through them using the asp.net ajax stringbuilder and generate a HTML table of data bit by bit. This seems like hard work to me though so were going to use Client Templates. These allow you to define your display structure, which when combined with your JSON data can be rendered by the client templating engine and displayed nicely. No more loops or stringbuilders!

jQuery – rocks. Simple as that. Buy the book to learn more. We’re going to make use of one of the jQuery pluggins to allow us to sort our table dynamically with only a few lines of code and no postbacks. The jQuery plugin does all the hard work for us!

Ok, so here we go…

1, Within your ProductDisplay project we want to recreate the Layouts folder structure, so from the project file create folders to create a structure of

Template –> Layouts –> Products

image

2, We want to create our SharePoint application page in the Products folder. Right click on it and choose to Create a New Item. Select a text file from the choices and rename it to be Products.aspx

3, Now we want to download the MicrosoftAjaxTemplates.js scripts. You can get them from:

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=18801

Extract the zip file and add MicrosoftAjaxTemplates.js to the Products folder also.

So your project should now look like this:

image

4, Open up Products.aspx and add in the following code:

<%@ Assembly Name=”Microsoft.SharePoint,
Version=12.0.0.0, Culture=neutral, PublicKeyToken=71E9BCE111E9429C” %>
<%@ Page Language=”C#”
MasterPageFile=”~/_layouts/application.master”
Inherits=”Microsoft.SharePoint.WebControls.LayoutsPageBase” %>

<asp:Content ID=”Main” ContentPlaceHolderID=”PlaceHolderMain” runat=”server”>
<script type=”text/javascript”>

var products;

function getBDCData() {
BDCService.GetBusinessData(success, failure);
}

function success(results) {
products = $create(Sys.UI.DataView, {}, {}, {},
$get(“products”));

products.set_data(results);

}

function failure(message) {
alert(message.get_message());
}
</script>
<asp:ScriptManager ID=”ScriptManager” runat=”server”>
<scripts>
<asp:scriptreference path=”MicrosoftAjaxTemplates.js” />
</scripts>
<services>
<asp:ServiceReference Path=”_vti_bin/ProductDisplay/BDCService.svc”></asp:ServiceReference>
</services>
</asp:ScriptManager>
<button id=”clicker” onclick=”getBDCData()” value=”Hello!”>Click me.</button>

<table>
<thead>
<th>Product Name</th>
<th>Product Number</th>
<th>List Price</th>
</thead>
<tbody id=”products”>
<tr>
<td>{{Name}}</td>
<td>{{ProductNumber}}</td>
<td>{{ListPrice}}</td>
</tr>
</tbody>
</table>

</asp:Content>

There are a few important parts in here worth quickly going over.

i) ScriptManager – this is responsible for loading the MicrosoftAjax.js scripts and also adding the references to both MicrosoftAjaxTemplates.js and our BDCService.svc

ii) getBDCData() – because we have added a ServiceReference to BDCService.svc in the ScriptManager we can easily now call our WCFService by using BDCService.GetBusinessData(success, failure); The two paramaters passed in are the functions that should be called if the return result is a successful one, or if something didn’t work ie failure.

iii) {{Name}} – within our tbody element you’ll see the syntax for defining where you want the templating engine to insert data.

iv) function success(result) – the success function is called when our service has executed and passed data back, which is the result parameter. In this function we instantiate our products variable as a DataView and set it to use the products html element as the template. Finally we call the set_data method and pass in our JSON results.

5, Sweet, now lets deploy this and see if it works! Right click the ProductDisplay project file and choose Properties, then navigate to the Build Events tab again. Add the following extra line to our Post Build event:

xcopy “$(ProjectDir)Template” “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12template” /y /s

Build the project!

6, Now we can navigate to our page, for me the URL is:

http://localhost:81/_layouts/products/products.aspx

but remember your’s will be different depending on where you setup the .NET 3.5 and WCFVirtualPath provider features in the previous WCF article.

Here’s the page on opening

image

and here is is after clicking the button

image

See how fast the data loads wooohoooo! And of course no post back!

As you’ll see however in the first screenshot we have the template sections such as {{Name}} displayed. We’ll now go through the steps to get these hidden and also use the jQuery pluggin to allow our table to be sorted.

7, Download jQuery scripts from http://docs.jquery.com/Downloading_jQuery

I am using 1.2.6. Add it into our Products folder along with our aspx page and other js file.

8, In our ScriptManager add a ScriptReference to the jQuery script

<asp:scriptreference path=”jquery-1.2.6.min.js” />

9, Hide our template section, so change

<tbody id=”products”>

to

<tbody id=”products” style=”display:none”>

10, Now when our data is successfully returned we want to show tbody, so after

products.set_data(results);

add

$(“#products”).show();

which basically means jQuery will select the html element that has the ID of products, and using the show method, will display it.

Now if you run the project you’ll see our {{Name}} templates etc are hidden, but when we click the button and the data is returned our table is still nicely rendered for us!

11, Finally now we want to make use of the TableSorter jQuery plugin. This plugin is so cool you’ll want to ring your Mum and tell her all about it! You can get it from here:

http://tablesorter.com/docs/#Download

12, Add jquery.tablesorter.min.js into our Products folder with the other js scripts

13, Add a script reference to it in our ScriptManager:

<asp:scriptreference path=”jquery.tablesorter.min.js” />

14, The table that we want to sort we need to be able to select with jQuery, so we need to give it an id. Change

<table>

to

<table id=”table”>

15, Now add

$(“#table”).tablesorter();

as the last line in the success method

16, Build the project, reload the page, get the data – the click on a one of the table headers and you’ll see our table magically sorts!!!! WOW

Big thanks have to go to Christian Bach for writing that plugin!

Hopefully that has all made sense and worked. Just in case, here’s the complete project and code for you to download and try:

https://www.lightningtools.com/downloads/productdisplay.zip

I’m really looking forward to seeing what else we can do with jQuery, ASP.NET ajax and your business data! Any ideas or questions feel free to leave a comment!