How to use JayData with ASP.NET Web API – I

Author: Peter Aron Zentai December 10th, 2012

ASP.NET Web API vs OData

With the 1.2.6 release, JayData provides an ASP.NET Web API specific data provider to let you connect not only to OData enabled endpoints but simple ASP.NET Web API backed REST services too. Out of the box the ASP.NET Web API supports a truly REST approach for dealing with data and borrows some concepts from OData standard mainly on the query aspect of data. It’s important to note that ASP.NET Web API by default is not OData! It’s a much simpler thing for a list of simple use cases.

Our philosophy regarding our approach to support ASP.NET Web API was that the default controller templates, generated by the Visual Studio “Add controller” wizard should work WITHOUT any further ado. No additional server components and dll, no custom controller filters, no custom metadata services. This though keeping our server code simple definitely limits the capabilities of our endpoint on a way not all projects can accept. Read the list of limitations here. For those finding the basic Web API features insufficient the ultimate solution is to extend your project to support standard OData. This became increasingly easy and also powerful with the Microsoft ASP.NET Fall Update preview that arrived recently. An upcoming post will show you how to upgrade your simple Web API project into an OData V3 compliant solution.

Create the Todos Controller

Let’s start off with an ASP.NET Web API project with a simple Todo database in it. We use Entity Framework and SQL CE 4.0 to define a simple Todo entity and also to build up the database. Read this post for a step-by-step guide on creating the Todo test project.

Now right click on the Controllers folder and select Add Controller. Set “TodosController” as the controller name. Select the “API controller with read/write actions, using Entity Framework” as the scaffold template. For Model class select Todo and TodoModelContainer for data context class.

To test your controller launch your project with F5 and navigate to http://yoursite/api/todos . Depending on your Web API version you should see an XML feed or a JSON document with your Todo items listed.

Use the JayData ItemStore API with the webApiProvider

We will test drive our Web API based REST service from a single HTML5 page. In a real world scenario you would build these into MVC Views – but for the sake of simplicity let’s just have this code in a simple html file. So just add an html page to your MVC project, and call it application.html

Setup client

Scripts to include

<span class="kwrd">&lt;</span><span class="html">html</span> <span class="attr">xmlns</span><span class="kwrd">="http://www.w3.org/1999/xhtml"</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">head</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">src</span><span class="kwrd">="Scripts/jquery-1.8.3.js"</span><span class="kwrd">&gt;&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
    &lt;script src=<span class="str">"http://include.jaydata.org/jaydata.js"</span>&gt;&lt;/script&gt;
    &lt;script&gt;
        <span class="rem">//use $data here!</span>
    <span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>

<head>

//use $data here!

</script>

Define the Todo type on the client

The ASP.NET Web API provider does not use server generated metadata to setup the client. You need to provide the JayData library with some information about the data types your about to deal with. This at the moment you can only do manually. Version 1.2.7 of JayData brings Visual Studio development time support for autogenerating the client environment.

<span class="kwrd">var</span> Todo = $data.define(<span class="str">"Todo"</span>, {
            Task: String,
            DueDate: Date,
            Completed: Boolean
        });

Todo.setStore(<span class="str">'default'</span>, {
            provider: <span class="str">'webApi'</span>,
            dataSource: <span class="str">'/api/&lt;TodoControllerName&gt;'</span>
});

var Todo = $data.define("Todo", {

Task: String,

DueDate: Date,

Completed: Boolean

});

Todo.setStore('default', {

provider: 'webApi',

dataSource: '/api/<TodoControllerName>'

});

GET /api/Todos

List all Todo items.

    $(<span class="kwrd">function</span> () {
        <strong><span style="font-size: medium;">Todo.readAll()</span></strong>.then(<span class="kwrd">function</span> (items) {
            items.forEach(<span class="kwrd">function</span> (item) {
                console.log(JSON.stringify(item));
            });
        });
    });

$(function () {

Todo.readAll().then(function (items) {

items.forEach(function (item) {

console.log(JSON.stringify(item));

});

Press F12 on most browsers to open up your console where the output is placed.

The result:

GET /api/Todos with filtering

To support server side filtering/querying for items, you have to modify your Controller code a bit.

Server code before:

<span class="rem">// GET api/Todos</span>
<span class="kwrd">public</span> IEnumerable&lt;Todo&gt; GetTodoes()
{
    <span class="kwrd">return</span> db.Todoes.AsEnumerable();
}

// GET api/Todos

public IEnumerable<Todo> GetTodoes()

{

return db.Todoes.AsEnumerable();

}

Server code After:

<span class="rem">// GET api/Todos</span>
<span class="kwrd">public</span> IQueryable&lt;Todo&gt; GetTodoes()
{
    <span class="kwrd">return</span> db.Todoes;
}

// GET api/Todos

public IQueryable<Todo> GetTodoes()

{

return db.Todoes;

}

Client code:

    <strong><span style="font-size: medium;">Todo.query</span></strong>(<span class="str">"it.Completed == true || it.DueDate.year == 2012"</span>)
        .then(<span class="kwrd">function</span> (items) {
            items.forEach(<span class="kwrd">function</span> (item) {
                console.log(JSON.stringify(item));
            });
        });

Todo.query("it.Completed == true || it.DueDate.year == 2012")

.then(function (items) {

items.forEach(function (item) {

console.log(JSON.stringify(item));

});

GET /api/Todos/id

Todo.read

(1)
        .then(<span class="kwrd">function</span> (todo) {
            console.log(JSON.stringify(todo));
        })
        .fail(<span class="kwrd">function</span> (err) {
            console.log(<span class="str">"item not found"</span>);
        });

(1)

.then(function (todo) {

console.log(JSON.stringify(todo));

})

.fail(function (err) {

console.log("item not found");

});

POST /api/Todos

To create a new item, use the save() method.

    <strong><span style="font-size: medium;">Todo.save</span></strong>({
        Task: <span class="str">"Build an HTML5 Application"</span>,
        DueDate: <span class="kwrd">new</span> Date(<span class="str">"2013-02-01"</span>)
    }).then(<span class="kwrd">function</span> (todo) {
        console.log(todo.Id);
    });

Todo.save({

Task: "Build an HTML5 Application",

DueDate: new Date("2013-02-01")

}).then(function (todo) {

console.log(todo.Id);

});

PUT /api/Todos/id

To update items use the save() method on an instance.

    Todo.read(1)
        .then(<span class="kwrd">function</span> (todo) {

Todo.read(1)

.then(function (todo) {

todo.Completed = true; return todo.save();

        })
        .then(<span class="kwrd">function</span> (todo) {
            console.log(<span class="str">"item updated"</span>);
        });

})

.then(function (todo) {

console.log("item updated");

});

DELETE /api/Todos/id

    <strong><span style="font-size: medium;">Todo.remove(4)</span></strong>
        .then(<span class="kwrd">function</span> (todo) {
            console.log(<span class="str">"item deleted"</span>);
        });

Todo.remove(4)

.then(function (todo) {

console.log("item deleted");

});

Alternatively:

    Todo.read(5)
        .then(<span class="kwrd">function</span> (todo) {
            <strong><span style="font-size: medium;"><span class="kwrd">return</span> todo.remove();</span></strong>
        })
        .then(<span class="kwrd">function</span> (todo) {
            console.log(<span class="str">"item deleted"</span>);
        });

Todo.read(5)

.then(function (todo) {

return todo.remove();

})

.then(function (todo) {

console.log("item deleted");

});

ASP.NET

JayData.org

How to use JayData with ASP.NET Web API – I

ASP.NET Web API vs OData

Create the Todos Controller

Use the JayData ItemStore API with the webApiProvider

Setup client

Scripts to include

Define the Todo type on the client

GET /api/Todos

GET /api/Todos with filtering

GET /api/Todos/id

POST /api/Todos

PUT /api/Todos/id

DELETE /api/Todos/id