Using WCF Data Service and JQuery together to support CRUD

Question

It seems that WCF data service will create a great extensibilty in web applications. I'm testing and working with it as shown in here.

I know that I can use the result of WCF data service in the other .NET based applications (Silverlight, WebForm,...).

Is there any framework to work with in HTML directly (using JQuery,...)?

For example, if I want to submit a form (Create, Update, Delete), I should write lots of JS code. But it seems that it could be easier to define everything.

In this sample I should write the block below:

$("#btnAdd").click(function () {
    // Convert the form into an object
    var data = { Title: $("#title").val(), Director: $("#director").val() };

    // JSONify the data
    var data = JSON.stringify(data);

    // Post it
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "MovieService.svc/Movies",
        data: data,
        dataType: "json",
        success: insertCallback
    });
});

function insertCallback(result) {
    // unwrap result
    var newMovie = result["d"];

    // Show primary key
    alert("Movie added with primary key " + newMovie.Id);
}

And the other thing is querying data: WCF data service support ODATA querying signature and it's great, but is there any JQuery based grid which can support ODATA based paging, sorting, filtering, ...?

All the grids supports JSON remote data, but I want to execute pagination and sorting with WCF Data Service directly. I mean that the grid create the URL based on user action and send it to the WCF Data Service.

Answer 1

'Or you can even try http://jaydata.codeplex.com that builds on top of datajs and provides JavaScript Language Query capabilities plus some very basic jqGrid example is presented at http://jaydata.org/examples

Your above example would look like this with JayData

var movies = new MoviesContext(...);

$('#btnAdd').click(function() {
   var movie = new Movie( { Title: {} Director:{} });
   movies.add(movie);
   movies.saveChanges( function() {
     alert("Movie saved with id: " + movie.Id);
   })
});

There is also a couple of videos online presenting the usage

Answer 2

Try datajs: http://datajs.codeplex.com/ It will probably not solve all of the above, but it should be a good start.

Answer 3

If commercial products are an option there is

Infragistics Grid

Kendo UI Grid

Both jQuery based.