Guest Author: Lee Richardson
http://rapidapplicationdevelopment.blogspot.com/

ASP.Net AJAX Templating is a compelling new client side technology from Microsoft that allows developers to more quickly build responsive and maintainable AJAX applications.  Because ASP.Net AJAX Templating and SharePoint 2010 both support the oData protocol they are a powerful combination.  This post in the series will focus on saving data back to SharePoint using the ASP.Net AJAX templating live binding syntax.

One-Way, Two-Way, Live!

The read-only {{ [FieldName] }} type template syntax we’ve explored previously is far more maintainable than string concatenation, which is the primary alternative to converting JSON data into HTML.  But where ASPNet AJAX Templating really shines is in saving data back to SharePoint (or any oData provider for that matter).  The syntax is called live binding and it comes in two flavors: two-way, and one-way data binding.  We’ll explore two-way data binding first.

In order to implement two-way data binding we simply place an INPUT element on the page and set its value to { binding [FieldName] }.  When it renders, the templating engine will replace the binding syntax with the current JSON object, just as it did with one-way binding.  But now when the user changes the value, the templating engine will automatically update the in-memory JSON objects behind the scenes.

So if we replace the master-details popup we wrote previously with live bindings like this:

<div id="userStoryDetails" class="sys-template">
    <table class="ms-formtable" width="100%">
        <tr>
            <td class="ms-formlabel" width="190">Title:</td>
            <td class="ms-formbody">
              <input type="text" sys:value="{ binding Title }" />
            </td>
        </tr>
        ...

Then the user can change the title.  But it won’t be too impressive yet because they won’t see the results of their changes in the user story cards.  We can fix that by replacing the titles of the cards with the one-way live binding syntax:

<div class="userStoryTitle">
    { binding Title }
    <span class="userStoryButtons">
    ...

Note how the one-way live binding syntax above looks identical to the two-way binding syntax.  That’s because ASP.Net AJAX Templating automatically uses two-way binding when the binding is located in an input form element. 

Our popup now looks like this:

When we mouse out of any field with two way data binding any elements on the page with one-way binding automatically reflect the change.

Saving to SharePoint

What we have so far is nice, but as soon as the user refreshes the page the values are reverted.  That’s because we never saved the values back to SharePoint.  Fortunately this is extremely easy to do with a call to dataContext.saveChanges(). 

We want the save to occur when the user clicks the OK button.  Assuming we pass in the function onDialogClose to the dialogReturnValueCallback parameter when we called SP.UI.ModalDialog.showModalDialog, then our code would look like this:

function onDialogClose(dialogResult, returnValue) {
	if (dialogResult == SP.UI.DialogResult.OK) {
		dataContext.saveChanges();
	}
}

That’s it!  The value is saved back to SharePoint and when we refresh the page the value has been updated.  But what’s going on behind the scenes?

Batch Processing

If we open up Fiddler to watch the HTTP traffic and click OK, we’ll see a post to _vti_bin/ListData.svc/$batch.  The post data looks like this:

--batch_e9ea-1b95-0f95
Content-Type: multipart/mixed;boundary=changeset_973c-961a-5b1e

--changeset_973c-961a-5b1e
Content-Type: application/http
Content-Transfer-Encoding: binary

MERGE http://localhost/Demo/_vti_bin/ListData.svc/UserStories(12) HTTP/1.1
If-Match: W/"10"
Host: nic-lee7
Accept: application/json
Accept-Charset: utf-8
Content-Type: application/json;charset=utf-8

{
    "__metadata": {
    "uri":"http://localhost/Demo/_vti_bin/ListData.svc/UserStories(12)",
    "etag":"W/\"10\"",
    "type":"Microsoft.SharePoint.DataService.UserStoriesItem"
},
"ContentTypeID":"0x010800B0CD2DCB798D704EA602F275139B7056",
"Title":"Story #12 UPDATED!",
"Priority":{"__deferred":{"uri":"http://nic-lee7/Demo/_vti_bin/ListData.svc/UserStories(12)/Priority"}},
"PriorityValue":"(2) Normal",
...
}
 ...
--changeset_973c-961a-5b1e--
--batch_e9ea-1b95-0f95--

ASP.Net AJAX Templating has kept track of all changes to all JSON objects, and on the call to saveChanges() it’s batched them all up and sent them across the wire as one big JSON post.  This means we can write applications that are less chatty and more performant with absolutely no extra effort.  That’s powerful!

Reverting Changes

The only thing that really remains to complete our user story application is to revert changes if someone clicks Cancel.  Unfortunately there is no elegant way to accomplish this.  The best we can do is re-retrieve all data from the server with a call to dataView.fetchData().  So our final onCloseDialog looks like this:

function onDialogClose(dialogResult, returnValue) {
	if (dialogResult == SP.UI.DialogResult.OK) {
		dataContext.saveChanges();
	}
	if (dialogResult == SP.UI.DialogResult.cancel) {
		dataView.fetchData();
	}
}

Conclusion

So far we’ve seen that templating is a more maintainable approach to displaying multiple list items on a page.   And we’ve seen that the master-details feature simplifies the job of cleaning up the UI.  In this post we’ve seen that the live bindings feature allows us to save data back to SharePoint in batches with a small amount of effort.  Implementing this functionality by hand would otherwise have required far, far more code.

Guest Author: Lee Richardson
http://rapidapplicationdevelopment.blogspot.com/

Lee Richardson is a Senior Software Engineer at Near Infinity Corporation, an enterprise software development and consulting services company based in Reston, Virginia. He is a Microsoft Certified Solution Developer (MCSD), a Project Management Professional (PMP), a Certified SCRUM master and has over ten years of experience consulting for the public and private sector. You can follow Lee on Twitter at @lprichar