Kendo Datasource & MVC4 WebApi, you broke my heart

 

So I’ve spend many a sleepless night this week knowing that the webapplication i was working was not doing server side paging…

This morning I decided I needed to remedy that and was I in for an experience Smile

At first I was thinking why oh why had the kendo guys not got the finger out and implemented WebApi support… and I’ve come to the conclusion that they didn’t waste any time on a moving platform…. in fact I'd go as far to say as the platform was actually removed with MVC4 RTM… let me explain….

OData support

 

I’ve previously mentioned that the MS guys are going to provide a more robust OData support, this is a good thing, there’s currently an alpha package for those who date http://www.nuget.org/packages/Microsoft.AspNet.WebApi.OData

However what I failed to notice was that they removed the existing OData support altogether!!
Don’t get me wrong i think this was a good decision not ot have a half implemented solution with a fuller one on the way, it’s just it’s gone and broken many of my WebApis Sad smile

Not to worry, we are where we are and now I need the WebApi to support paging, which previously relied on OData $top $skip $count.

So here is my current solution.

Server

Return:

My return values now have a Total and the Data, I used the following class to help me out here.

image

Parameters

I added some new classes for Pagable parameters, note the Take, Skip,Page,PageSize are sent with kendoui datasource (from fiddler)

image

ApiCall

Here is a sample API call, as previously mentioned I don’t like that I’ve cluttered it up with pagination, (maybe I should consider ModelBinders or MediaFormatters…..)

image

 

Client

Now for the Kendo javascript side:

image

The first important part I had was I had to map the parameters, the reason is that I’m updating the datasource via ajax and I call it like this:

ds.read(s0); I.e. I’m passing some parameters to the query ( i know there is mention of a query object in the kendo api but I failed to get this working),  in the javascript above I’m just setting these parameters again when the paging happens. Note this was where I could set e.g. $top = options.take; if odata was supported…. Sad smile

The next important part is that, I’m getting the result from the .Data field and I’m getting the total form the result.Total field (i also do a bit of mapping for some missing values but that’s application specific).

 

kr, Brian.

ASP MVC4 WebApi Delete 404

 

runAllManagedModulesForAllRequests

To support DELETE verbs in MVC4 the webconfig should have runAllManagedModulesForAllRequests defined

image

If you have an older project (like my project that I started in VS2012 RC) you may need to add this setting or else you’ll get 404 errors.

Here is where I found this info:
http://stackoverflow.com/questions/9692687/webapi-controller-is-not-being-reached-on-delete-command

Note: Make sure to read:
http://www.britishdeveloper.co.uk/2010/06/dont-use-modules-runallmanagedmodulesfo.html

KendoUi Web Grid and ASP MVC Web Api

 

I’ve just been through the mill trying to get kendo grid working with a ASP MVC Web Api Http Post Action.
I think it may help someone if I post my findings.

 

OData

If you use KendoUi you know that the datasource has v.good support of OData, but you’ll most likely also be aware that the WebApi currently is not fully OData compliant (did you notice i said currently!!! I’ve seen some heated discussions regarding OData support with WebApi, and it looks like some headway has been made http://blogs.msdn.com/b/alexj/archive/2012/08/15/odata-support-in-asp-net-web-api.aspx?CommentPosted=true). Now while I’m all on for living on the bleeding edge I’ve decided to give the alpha  a miss for now as I need to get this solution into production.

But we are, where we are.

So in the interim I needed to perform the simple task of getting the Kendo grid to

  • Use Http Post verb
  • Refresh when the async operation of loading data has finished.
    • How hard could that be?

    Well looking back, not all that difficult, but it’s easy when you know how.

Getting kendo dataset to use Http Post verb.


Lets first have a look at my MVC Action

image

 

Don’t get hooked up on the implementation or where I’ve put it for now, the important part is to notice the HttPostAttribute aspect. The endpoint url would be something like localhost/MyApp/api/Data/MyId where MyId would be the first parameter, the second parameter SearchOptionsFilters on the other hand are posted; here’s how:

image

Here we see we’re passing the sf object (that the model binder parses into it’s .net counterpart) to the read function of the dataset, AND we are explicitly setting the transport.options.read.type to “POST”.

Now I found a good few posts demonstrating how to do this but they mostly showed javascript object literals with the “POST” set on the transport which wouldn’t work for me, i.e.

image

Getting the grid to refresh once the data becomes available

Look in the screenshot above, I’ve already given this game away! The change callback refreshes the grid once the datasource changes underneath, this it appears is required when going down the ajax route.

Kr,
Brian.

Knockout.js accept terms and conditions checkbox and submit button

 

Here’s a nice way of enabling a button on a form IFF the Accept T&C checkbox has been clicked

Knockout script

image

So we have a simple acceptTerms variable that is observable

Markup

image

In the markup above you can see that the input of id “agree” has bound it’s checked state to the observable, we also see that the submit button has bound it’s enable state.

Pretty simple solution client side solution if you’re already using knockout in your application.

XCode disabling ARC for a single file in a project

 

So I’ll put it out there, I’m a novice Objective-C man, in fact I’m still sitting on the fence on whether I should write my iOS apps in C# (MonoTouch) or Objective-c (xcode), I’m leaning a little more towards the Monotouch approach and to be honest I’m just persevering with objective-c for a few reasons

  • It’s a different language, like a new toy I wanna play with it
  • I need to use XCode for interface designer anyway
  • It helps when reading sample code even if just to translate to c#.

So this morning I was trying to create an iPad app for a RestAPI I’m writing in MVC4 Web Api and I went with Objective-C.
I used AFNetworking to make my Rest calls but unfortunately this library was written before ARC (Automatic reference counting).
Now for some background: I came to iOS development after the fact and so far I have not had to write non-ARC code (that said I love c++ and deterministic destruction so it wouldn’t bother me that much).

So I was a little stumped when I encountered the following problem:

image

image

Basically this is telling me that the ARC doesn’t allow this pre-ARC code!

So how to solve?

Well the solution is somewhat simple, you just need to bring up the project properties Targets -> Build Phases -> Compile Sources and add the -fno-objc-arc compiler flag for those particular files.

image