Topic: jQuery

ASP.NET MVC with PAjax or PushState/ReplaceState and Ajax

In the recent episode of RailsCasts (highly recommended even if you have tiny bit of interest in Rails) Ryan Bates shows a nice little but very elegant trick to load different pages with Ajax request. The fundamental difference of this trick with the vanilla jQuery.ajax is that it keeps the browser history intact, the visitor of the page will see the regular url change in the browser location bar and it would even degrade gracefully if the browser JavaScript is turned off. Behind the scene it uses a jQuery plugin called pajax which does the heavy lifting, by default the plug-in comes with a Sinatra example, there is also a Rails integration gem which is written by the DHH(creator of Rails) himself. In this post I will use the same Sinatra example but ported to ASP.NET MVC.

Meet Spine.js – My framework of choice for client side MVC (Part 2)

In the last post, we have used Html5 local storage for persistence, in this post we are going to integrate it with ASP.NET MVC. Before moving forward, let me tell you that frameworks like backbone.js and spine.js expects your server endpoints are RESTful and do utilize the http verbs, for example the same endpoint can perform different things based upon the http verb. Unlike Rails, the default Controller and routes that ASP.NET MVC generates does not have those features. So we need to tweak the ASP.NET MVC to improve its “RESTful-ness”. In case, if you are wondering about the url structures, here is the list of defaults of ASP.NET MVC:

Meet Spine.js – My framework of choice for client side MVC (Part 1)

Take a cup of coffee or light up your smoke, this is going to be a lengthy post, I know this is long due to some of my friends over twitter and reading after Rob Conery’s “The BackboneJS and Knockout DanceOff” I decided to start writing it finally. This post will cover a basic introduction of Spine.js, the things you have to do to integrate it with ASP.NET MVC and finally why Spine.js is my framework of choice when there are other popular alternatives for the client side development.

I will be writing all of my client side codes in CoffeeScript, if you are new to CoffeeScript then do visit CoffeeScript official site (the previous link) and there are also few more free resource like little book of CoffeeScript, Smooth CoffeeScript or blog post series of Jan Van Ryswyck which you can check. In order to compile your CoffeeScript to JavaScript inside Visual Studio you can use the new tool Web Workbench from the good guys of Mindscape or the popular open source add-in Chirpy. You can of course use the plain old JavaScript but after writing CoffeeScripts in last four months I can only say I am not going back to the plain JavaScript unless the languages features that exists in CoffeeScript are introduced in JavaScript. In short, CoffeeScript is a tiny little language which brings most of the good stuffs from Ruby, Python and probably from Perl to write highly readable and beautiful codes that compiles down to JavaScript.

ASP.NET MVC + Sammy.js + Mustache.js = Crazy Delicious

As you know that I am a big fan of Ruby Sinatra and I was really amazed to learn that Sammy.js does exactly the same but in the client side. In this post, I will show you a fully functional application developed in Sammy.js. Before moving forward, let me tell you that Sammy.js is best suited for creating single page application like GMail, Pageflakes or any kind of Dashboard type application where SEO is not a concern . But for this post I will show you the Bakery sample in Sammy.js that I have previously converted to Sinatra from Microsoft WebPages (aka WebMatrix) and it is not an ideal candidate for Sammy.js but it covers the basics to get you started. I am also using ASP.NET MVC in the server side and JavaScript version of Mustache in the client side(though it is not as much as popular in .NET Community comparing to others) but you can use any other server side technology as well as different template engines including the jQuery template which Microsoft contributed to jQuery. You can see the Sammy Bakery live in action by clicking this link here, you can also download the complete source at the bottom of this post.

ASP.NET MVC3 Razor Script Loading Tips

Lately, I have been playing with few JavaScript frameworks and in today’s modern web applications it is very common that we are including tons of JavaScript files in our application. One of the thing that plays important role in application performance is how fast these script files are delivered into the browsers. I have extensively blogged on combining, compression and caching of JavaScript files in my old blog, in this post I will show you, how you can achieve parallelism in delivering the scripts in the browser with the Head JS library. If you do not know what parallel script downloading is and how does it impact on page speed, then I would suggest to read this article of the YSlow creator. In short, when a browser encounters a script tag in a page it halts its rending until it downloads the script file, the parallelism is actually archived by adding the script dynamically or by XHR depending upon the browser it is running.

Integrate Html5 Form in ASP.NET MVC (part 2)

I usually do not write multiple post in the same day, but as I was having some conversation with a folk in ASP.NET mailing list on Html5 specially on client side validation support in ASP.NET MVC3,  I decided to post the second part of the Html5 form Integration which I initially started in my old blog. In the previous post, I have shown you how you can emit standard HTML5 attributes from the ModelMetadata, I know the code is not what you like to see in production but it does show what I am trying to convey. In this post, I will take the jQuery validation adapter of ASP.NET MVC and fix it so that it follows the Html5 spec.