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

A magical concoction Asp,WebApi,jQuery,KenodoUi,Knockout.js,WCF,Async,Moq

 

So the heading for this post is a little bit of a mouthful, but I want to tell you a story of how some of these technologies play together, so often in blog posts we are presented with a trivial example (I’m holding my hands up here too) and what we really want to see is that next step, i.e is the tech in question just a nice concept or can it be utilized practically?

Let me tell you what I’ve come up with, the application in question could be written with any web tech and just render some static html and we’re done. But we’re moving into web 3.0 (don’t google that I’ve just coined it!), where our ajax-ey applications are going to the new level.
We’ve all heard the stories of these 2.0 web applications that are many hundred thousand lines of code and hard to maintain, so can it be made easier? Of Course!

There are many new frameworks out these days, and to be hones it’s impossible to keep up with them all, the main thing to know is what they are for so you can investigate their effectiveness if needed; after your investigation you can decide if you want to continue the relationship a little further, in the post I will present some of the technologies I’ve encountered/like/love want to know better. I’ll explain where I used them and how,  hopefully you’ll see that they play quit well together.

WCF

I’m using WCF in the application to talk to some back end Java webservices, these webservices will supply the business objects that my web application is dealing with. I’m not sure I need to explain how I get a service reference but I’ll do so all the same, just right click on project References (or service references if that already exists) and choose the Add Service Reference Option

image

Type in the location the the webservice (a Soap webservice in my case) and press Go.

image

Give your service a meaningful namespace and click OK. That’s pretty much it, In my case I needed to perform addition Kerberos security configuration in the web.config but you’ll have to figure out what configuration you need for your own webservices yourself.

RavenDB or EF Code First (undecided)

Ok I really want to use RavenDB because I’ve used it in other project and I love the document database approach, it’s got some limitations for reporting etc, but it would be a good fit for our application. Also Entity Framework Code Fist is another good approach and we do already have SqlServer licenses so that’s pretty compelling… The great thing is i can pretty much decide later Smile for now I’m just writing my poco (Plain Old CLR ) objects.

WebApi

I love this tech, (btw: Microsoft if you’re listening please don’t break too much with the RTM version! please please). It allows me to offer a nice RESTFull service to my data (coming both from the WCF webservice and my application database), One of the beauties of this API is that it gives some clear direction on how to implement restfull services. MS developers previously we were faced with a decision between WCF and MVC Controllers, while it’s true now we are faced with a decision between Controllers and ApiControllers, for me it’s now clearer; I use my ApiControllers for data access, and I use my standard mvc controllers for rendering the view!

Confused? Look at this diagram

image

  • Here the browser makes a request, it gets routed to the MVC controller, this controller generates the html with with ever context is needed,
  • Once the browser loads the page we make a ajax request to the web api, the web api in turn makes an Async request to the java webservice thereby freeing up the ASP thread pool to service other requests and providing better scalability.
    How? : .net 4.5 async await

    image
  • When the response arrives back to the await the state machine restores the context and a (possibly) new thread picks up from where the first thread left off and returns the data to the browser.

To sum up, the advantages of the above approach are:

  1. A hugely more responsive experience for the end user, as compared with full page refreshes or even partial page refreshes (as in traditional Ajax).
  2. The server-side UI code is extremely simple, as it needs only to transmit an initial block of markup referencing the necessary JavaScript libraries. It doesn’t need to render data.
  3. Using WebAPI services as the basic data endpoint creates the opportunity to use multiple client technologies. For example, you could create a native smartphone application that connects to the same data endpoints without needing any additional server-side code.

 

jQuery

The data returned in in JSON format as we queries data via jQuery $.getJson() that sets the appropriate header (content negotiation is handled via Asp MVC4 for us).

image

Knockout.js

So this is one of the frameworks I knew about but had not used before. Those of you from a Silverlight/Wpf background will be familiar with the MVVM pattern and love the raw powerfull databinding capabilities. Knockout.js is one such javascript framework.

Markup

image

Javascript

image

Above you can see that I’ve got a DataFeedsViewModel, this is the top level view model ($root) that my html is databound to, looking at it with the markup you can see that I’m rendering an unordered list of suppliers IFF there are items in my array. The observable array is used so that the UX/GUI can update should the underlying list of array items change. Each list item has a click handler that is bound to the contentClick function in the $root view model, the beauty of this is the variable ‘e’ is just the single SupplierDetail object that was clicked!! nothing to do with any DOM elements…. nice..

 

KendoUI – by telerik

I’ve used telerik many times, silverlight/wpf/asp ajax etc, I also listen to lots of technical podcasts and had heard some interviews with the authors/designers of KendoUI so I decided to check it out for myself. The first control I used was the grid. Lets have a look at my markup and the associated javascript

Markup

image

Javascript

image

I’m using the revealing module pattern above to initialize my grid, you can see it’s using a kendoDataSource object to talk to the WebApi, the url parameter would be the url of my api,
/DataFeedApi for all records
/DataFeedApi?contentId=XXX for getting a subset of records from the WebApi

 

Moq

As I mentioned above I’m using WCF, WCF is composed of three concerns, the ABCs of WCF, (Address, Binding, Contract) is simple terms the Contract is the wsdl and when we add a service reference that a .net Interface gets generated for same.

The beauty of this is that in my Unit tests I can mock this interface so I don’t need a real connection to the webservice to test my concerns. For those of you that don’t use mocking frameworks, you should, it saves you creating endless dummy classes that implement interfaces just for testing.

 

image

Above you can see I’m mocking the interface DataContentActionsServiceType so that when I call the (It’s java hence the non standard .net naming convention IXxx)

  • getAllDataSupplierInfos method that I return ECB and APX.
  • getDataSupplierForCode(“APX”) returns the Netherland Stuff record.

That about sums up what I wanted to show, hope it encourages someone to start playing with any of the above technologies and see if you can leverage them in your own applications.

Brian.

Using DataTables.net with Asp MVC Web Api

 

So I’ve been working on Web application that uses the ASP MVC4 Web API. I like this approach especially as it will easily allow me to support other clients I/others may write in future, in so far as, it returns Json and is a RestAPI.

Now I’ve never used DataTables before so I’m trialling it as my client side html grid. However I quickly ran into problems with it and the expected Json Payload.

 

If you are familiar with the various .net Json serializers you’ll get some Json back with Key value pairs.

image

e.g.  {[“Name” : “Brian”, “Age” : “35”], [“Name” : “Brian1”, “Age” : “36”]}

This causes a major problem for DataTables in that it expects (by default)

e.g. {“Brian”, “35”], [“Brian1”,“36”]}

I say by default because maybe there is a way to configure this out of the box with column mappings and what not, however I can’t see the wood for the trees so my first approach will be to perform this data mapping myself, I’ll RTFM at a later date Smile

 

So where can I plug into the pipeline and map this data? fnServerData ! This function allows me to manage how I get and format the data, exactly what I need.

Here’s how I’ve implemented it.

image

 

I’m not saying it’s the best solution! May even have a few bugs, but it appears to do the trick for me for now.

Update:

I’ve now read the documentation: and it’s oh so simple to handle the ASP MVC Json array.

 

image

Moral of the story

Read the manual Smile

Ninject Dependency Resolution in ASP MCV4 WebApi

 

Ok so you’ve been using ASP MVC3+ and using Ninject as your Dependency Injection resolver. Now you want to start leveraging the Asp.WebApi and continue to use Ninject.

I was surprised to find it wouldn’t work out of the box! Ok I’m using the “out of the box” term a little lightly here as you have to (one approach) use Nuget to install some assemblies and generate some code

image

 

A little extra effort

Brad Wilson has provided an implementation of the IDependencyResolver for WebApi that you can use for now.

https://gist.github.com/2417226

What you need to do is copy that code into a file and then call it from your current NinjectWebCommon.cs by adding the highlighted line below:

image

 

Brian.

Pry it from my cold dead fingers

 

I usually try avoid getting into the OS / Browser etc drama, yawn….

But I found this blog post on Pluralsite tonight, and I can help but laugh, I’m with the 72% it turns out, I am asking myself did I pick that option because it was just funny however Smile

image

A little drama

Q: Will I use Windows8?  A: Yes I’ve been using it since developer preview.
Q: Am I bothered? A: Not really, it’s a new opportunity so I’m getting on board.
Q: Would I like the option to switch off Metro? A: Hell ya! (but I’m then back in Win7 ain’t I? maybe I sub consciously picked the correct answer).

Authenticate, Authorise WebApi with HttpClient

 

Hi all, I said I’d post this because I didn’t manage to find a suitable blog post or documentation indicating how to do this with the HttpClient (beta).  (bleeding edge again ey).

This post outlines how to create a simple test server that has a Json Logon endpoint.
Then it shows how to login with the .net 4.5 HttpClient class. Lots of other post I saw were trying to set Channels on this HttpClient, I’ll have to assume this was from the developer preview or the Wcf predecessor. It appears now the solution comes in the form of a HttpClientHandler!

It’s been a long day, up at 4am for a flight and then a long day at work, so lets cut to the chase…

Server

For setup, create a new MVC4 internet application

image

Why? because it gives me a AccountController with a JsonLogin action

image

Add a new ApiController

image

image

Add the Authorize attribute

image

Now we have a simple server setup for testing (no https etc, but lets not overcomplicate this just now).

Client

I just created a WPF client and called the following function on a button click.

private async void Login()
{
    var handler = new HttpClientHandler();
    CookieContainer cookieContainer = new CookieContainer();
    handler.CookieContainer = cookieContainer;
 
    var client = new System.Net.Http.HttpClient(handler);
 
    var content = new FormUrlEncodedContent(new Dictionary<string, string>
    {
        {"UserName", "brianbruff1"},
        {"Password", "password"}
    });
 
    var response = await client.PostAsync("http://localhost:2122/account/jsonlogin", content);
    response.EnsureSuccessStatusCode();
    var msg = await response.Content.ReadAsStringAsync();
 
    // just get the default value from the starter project
    response = await client.GetAsync("http://localhost:2122/api/values");
    response.EnsureSuccessStatusCode();
    var list = await response.Content.ReadAsAsync<List<string>>();
 
 
}

 

That’s it, next steps to clean up this code are all yours,  but hopefully I’ve helped someone out.
Remember to register the user the first time your run your MVC app, or your msg variable will indicate you couldn’t be logged on.


Remember to include Http.Formatters for the ReadAsAsync extension.

Brian.

Credit to @tomasmcguinness for pointing me in the right direciton (my other approach was to use PKI).
Credit to Microsoft for releasing the source so I could figure this out!

Recent Tweets

Note: For Customization and Configuration, CheckOut Recent Tweets Documentation

Calendar

<<  August 2018  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar

Month List