Things you should know when debugging JQuery and Javascript inside your partial Views in ASP.NET MVC

Well, I’m heavily using JQuery now on a web application and I must say I’m very fond of this library.

It’s very easy to use, encapsulates quite a few cross browser compatibility issues so the developer doesn’t have the pain to check what browser the page will be displayed on. The ajax calls ($.get, $.ajax and $.post) work like a charm and the pages can have painless and cool animations and effects.

But, no matter how robust and sturdy a library is, we always need to debug. I must say Visual Studio 2008 is heaven to debug JavaScript code. I just have to put the debugger; keyword in front of the line to create a break point. The IDE shows the iexplorer.exe process and thread ID (you can also chose to debug on FF or your favorite browser). You can review your locals, add to the Watch Windows or just take a sneak peek with Quick Watch.

All the power of strongly type language debugging is now available for the type agnostic JavaScript and believe me, this is priceless when you debug JSON.

Happy JQuery debugging!

Oops, this post was about debugging JavaScript on the partial views in MVC…

Now I remember what I was suppose to comment on:

If you use your Model properties inside your JavaScript code, you won’t be able to put this code on a separate .js file and include it on your main view header or even include it on your partial view. It won’t work.

Unfortunately the javascript code should be embedded along with your MVC markup on your partial view. You see, the rendering of these HTML helpers happen first on the server side before the page is served, while the js include happens after. Maybe MVC will be smart enough to detect these js includes in the future and render any helper content inside the js includes, as of MVC 2.0 RTM, this is not possible.

Done!