I recently came across a .NET utility called Jayrock, an open source implementation of JSON-RPC. The project was apparently started a few years ago by Atif Aziz, a guy whose work is definitely worth checking out if you’re a .NET web developer. Jayrock essentially makes it really easy to interoperate between client-side Javascript code and server-side ASP.NET code, without the need to construct bloated XML requests like traditional AJAX – it uses JSON notation. The thing I love about it is that it abstracts away the mapping between server-side business objects and javascript objects, as well as exposing business logic to the client in a way that is completely controlled by the developer.

An Example

I can think of a few areas of web development where Jayrock would come in handy – validation, partial page updates, dynamic form elements, capturing user interaction for stats – to name a few. I decided to make a demo of an accordian control to test it out. It’s a list of Frequently Asked Questions (FAQs) that loads answers on demand. When a user clicks on a question, the answer for that question only is fetched using JSON-RPC.

Though this is a trivial example, and in this case it would be more efficient to load all answers at once, it demonstrates how useful it would be if the content being loaded on demand was perhaps a video or large images.

Click here to try out the the accordian

The Code

The solution requires a jQuery <script> reference to be included. It also requires the Jayrock JSON-RPC utility to be included in the project. This requires a few additions to the Web.config, a DLL in the Bin folder and a <script> reference. Specifics here.

Javascript Includes in the web page

The first 2 references are to the jQuery library and the JSON utility library (distributed with Jayrock) that converts JavaScript values to JSON and vice versa. The 3rd script reference points to the JavaScript proxy that will be dynamically generated by Jayrock from the server so that we can call our service methods. The final script reference is to our custom JavaScript that will perform the client side interactions and invoke calls to our server-side code.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/json.js" type="text/javascript"></script>
<script src="jsonaccordianfunctions.ashx?proxy" type="text/javascript"></script>
<script src="js/accordian.js" type="text/javascript"></script>

ASP.NET ListView control to display the accordian

The only thing to note here is that we are assigning the ID of the FAQ to the “id” attribute of the <dt> tag that is generated (line 8). The assigned “id” will enable us to fetch the corresponding answer using our client-side code.

<asp:ListView ID="lvAccordian" runat="server">
    <LayoutTemplate>
    <dl class="accordian">
        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
    </dl>
    </LayoutTemplate>
    <ItemTemplate>
        <dt id="item<%# Eval("ID") %>"><%# Eval("Question") %></dt>
        <dd> </dd>
    </ItemTemplate>
</asp:ListView>

Binding the data on Page Load

For simplicity, I’m using Linq-to-XML to fetch all FAQs from an XML file stored in App_Data. These are data-bound to the ListView in the previous snippet.

protected void Page_Load(object sender, EventArgs e) {
        //open Faqs.xml
        XDocument doc = XDocument.Load(Server.MapPath("~/App_Data/Faqs.xml"));

        //bind the questions to the accordian
        lvAccordian.DataSource = from faq in doc.Descendants("faq")
                                 select new Faq
                                 {
                                     Id = Convert.ToInt32(faq.Attribute("id").Value),
                                     Question = faq.Element("question").Value
                                 };
        lvAccordian.DataBind();
}

Define service methods in our Json RPC Handler

This is where it gets interesting. We create an ASP.NET web handler that inherits from JsonRpcHandler (a Jayrock library class). In this handler we can declare service methods that may be called directly from our javascript code. We have one method, GetFaqById which fetches an Faq object based on it’s ID. The attribute JsonRpcMethod specifies the name of the method that can be accessed by JavaScript. This may be different to the C# method name.

The really useful thing about Jayrock is that it handles converting the custom complex type (Faq) to a JSON string that can be operated upon by JavaScript code.

Jayrock generates a simple JavaScript proxy using the <script> reference above (jsonaccordianfunctions.ashx?proxy) and this is how our JS code “talks” to our server side code.

<%@ WebHandler Language="C#" Class="JsonAccordianFunctions" %>

using System;
using System.Web;
using System.Linq;
using System.Xml.Linq;
using System.Data.Linq;
using Jayrock.Json;
using Jayrock.JsonRpc;
using Jayrock.JsonRpc.Web;

public class JsonAccordianFunctions : JsonRpcHandler {

    [JsonRpcMethod("getFaqById")]
    public Faq GetFaqById(int id) {
        //open Faqs.xml
        XDocument doc = XDocument.Load(Server.MapPath("~/App_Data/Faqs.xml"));

        //fetch Faqs that match the provided ID
        var faqs = from faq in doc.Descendants("faq")
                   where faq.Attribute("id").Value == id.ToString()
                   select new Faq
                   {
                       Question = faq.Element("question").Value,
                       Answer = faq.Element("answer").Value
                   };

        //return the first if found
        return faqs.FirstOrDefault();
    }
}

The Javascript

The code below may look a little convoluted (indeed it is, in parts). However most of it is there to provide the visual effects (toggling visibility, expand/collapse buttons, changing backgrounds etc).

The lines to look at are 22-36. Inside the click event handler, we fetch the desired FAQ from our service and display the answer to the user by calling faq.answer – properties of our C# class are auto-mapped to fields in a Javascript object! Nice.

$(document).ready(function () {
    //create a reference to the JavaScript proxy that interfaces with our handler
    var jf = new JsonAccordianFunctions();

    $(".accordian dd").hide();

    $(".accordian dt").hover(
            function () {
                var tip = "<span>expand</span>";
                if ($(this).next().is(":visible")) {
                    tip = "<span>collapse</span>";
                }
                $(this).prepend(tip);
            },
            function () {
                $(this).find("span:first").remove();
            }
        );

    $(".accordian dt").click(function () {
        if (!$(this).next().is(":visible")) {
            //get the ID of the <dt> the user has clicked
            var htmlId = $(this).attr("id");

            //extract the ID of the target FAQ from the HTML ID
            var id = htmlId.substring(4)

            //make a call to the service using the JavaScript proxy, generated by Jayrock
            //here we are fetching an FAQ by it's ID
            var faq = jf.getFaqById(id);            

            $(".accordian dd").hide();
            $(".accordian dt").css("background-image", "url('../img/backgrounds/grey-gradient.gif')");

            //populate the next html element (<dd>) with the answer of the FAQ
            $(this).next().html(faq.answer);

            $(this).next().show("fast");

            $(this).find("span:first").text("collapse");
            $(this).css("background-image", "url('../img/backgrounds/green-gradient.gif')");
        } else {
            $(".accordian dd").hide("fast");

            $(this).find("span:first").text("expand");
            $(this).css("background-image", "url('../img/backgrounds/grey-gradient.gif')");
        }
    });
});

Download the full source code here.