Nowadays almost all EPiServer projects involves some kind of interactivity powered by jQuery and AJAX. When it come to frameworks, there are a lot of alternatives to choose from on both the client- and serverside. On the clientside, jQuery has emerged to be the alternative to use. On the serverside, Microsoft offers a couple of different alternatives and at a first glance one might think WCF is the way go. Personally I think WCF might be great for big distributed solutions but could be a bit to complex for just feeding jQuery with some simple data. Another strategy I’ve seen quite often is concatenation of strings to create simple JSON objects. Simple, but maybe not that good.

The most recent versions of EPiServer uses Microsoft .NET Framework 3.5 which includes some great stuff for writing services for scripting.

In this post I will add a simple service to the EPiServer Public Templates which will contain two methods, one for fetching a list of objects and one that accept an object as parameter and returns a string.

First we need to create a model object that we can serialize to JSON and send to the browser. Try to keep the model object as small as possible i.e. do not return the entire PageData object. Lets create a Person class.

public class Person
{
    public string Firstname { get; set; }
    public string Lastname { get; set; }
}

Next, create a new folder called Services under Templates/Public. Within the new folder, create a Web Service and name it to PersonService.asmx.

Uncomment the ScriptService attribute on the class, set a meaningful namespace and remove the HelloWorld method. We will add two methods and end up in a service class like this one:

[WebService(Namespace = "http://local.lab.com/services/personservice/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class PersonService : WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<Person> GetPersons()
    {
        return new List<Person>
            {
                new Person { Firstname = "Foo", Lastname = "Bar" },
                new Person { Firstname = "Bar", Lastname = "Foo" }
            };
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetFullname(Person person)
    {
        return string.Format("{0} {1}",
            person.Firstname, person.Lastname);
    }
}

With a default installation of EPiServer, web.config does not use the scripting goodies in .NET Framework 3.5. To use this for our services add the following configuration for our Services folder:

<location path="Templates/Public/Services">
    <system.web>
        <webServices>
            <protocols>
                <add name="HttpPost" />
            </protocols>
        </webServices>
    </system.web>
    <system.webServer>
        <handlers>
            <clear />
                <add name="ScriptHandlerFactory"
                     verb="*"
                     path="*"
                     perCondition="integratedMode"
                     type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        </handlers>
    </system.webServer>
</location>

Next, we need to add some jQuery code to consume our service. Add main.js to our project and make sure you include it in the header tag together with jQuery itself. Add the classic jQuery stub to main.js:

$(document).ready(function() {

});

Within the stub, add a handler for GetPersons

$("#GetPersons").click(function(event) {
    $.ajax({
        type: "POST",
        url: "/Templates/Public/Services/PersonService.asmx/GetPersons",
        cache: false,
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function(e) {
            alert("Error: " + e.responseText);
        },
        success: function(result) {
            var data = (typeof result.d == 'string' ? eval('(' + result.d + ')') : result.d);
            var listHtml = '<ul>';
            $.each(data, function() {
                listHtml += '<li>' + this.Firstname + ' ' + this.Lastname + '</li>';
            });
            listHtml += '</ul>';
            $("#result").empty().append(listHtml);
        }
    });
});

and a handler for GetFullname

$("#GetFullname").click(function(event) {
    $.ajax({
        type: "POST",
        url: "/Templates/Public/Services/PersonService.asmx/GetFullname",
        cache: false,
        data: "{'person':{'Firstname':'Marthin','Lastname':'Freij'}}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function(e) {
            alert("Error: " + e.responseText);
        },
        success: function(result) {
            $("#result").empty().append(result.d);
        }
    });
});

Next we need to add some html that jQuery can hook in to

<a href="#" id="GetPersons">GetPersons</a> |
<a href="#" id="GetFullname">GetFullanme</a>
<hr />
<div id="result"></div>

Ok, that should make it. Let’s test it by clicking the links

Great, it should work! Due to the hands-on nature of this post, some details are not covered. Don’t hesitate to ask if you want some details more explained.

This post was first published on EPiServer World, available here.