Building a Knockout.js based client for Web API services in an ASP.NET MVC app


ASP.NET MVC is now a popular web development platform and often first time users have questions regards to implementation of Data Bound behavior in MVC. This is understandably because most Customers at some point have used ASP.NET Web Forms earlier and are comfortable with the event driven model that it provides.

A common question is how to create an editable list of data allowing users to Edit and Save existing data. The default MVC scaffolding in Visual Studio provides us with a way to implement this where Create/Edit/Delete are implemented on the server side and each action has a separate UI. Today we will see how we can implement it using jQuery and a lightweight client side library knockout.js (also referred to as KO).

On the server, we will use ASP.NET Web API to expose the database services that will be accessed by JavaScript. Needless to say we will use AJAX to communicate with the backend Services.

For any ‘List’ of data there is a need for implementing some kind of template or repeater behavior so that we can define the UI for one row of data and the library/framework takes that template and repeats it for the entire list. We know how to do this in ASP.NET MVC using Razor syntax. Today we’ll see how implement the repeater UI using KO’s templating engine. We will also see how we can define separate templates for Display and Edit modes.

The Absolutely Awesome jQuery Cookbook Released


Howdy! I am writing this post to announce the release of my new eBook The Absolutely Awesome jQuery Cookbook at

This book covers the latest jQuery v1.11.1 or 2.1 and jQuery UI 1.11.2 versions and contains 120+ practical jQuery recipes (about 70 Recipes and 50+ sub-recipes) you can use in your websites and projects right away. Each recipe includes working code, a live demo and a discussion on why and how the solution works. This eBook is available in PDF, .ePub and .mobi formats.

This book is primarily targeted for the everyday jQuery developer and designer who wants to enhance his/her websites and projects or wants to focus on the practical features of jQuery, and how they can be applied to solving real-world problems. The book assumes you have some working knowledge of HTML, CSS, jQuery and JavaScript. Although the first chapter ‘Getting started with jQuery & jQuery UI’ and the fifth chapter ‘Getting started with $.ajax()’ is a crash course introduction to jQuery and Ajax, I have provided links to additional resources, if you are relatively new to jQuery and want to make the best of this book.

You can download sample chapters over here



Table Of Contents:

Section I - Some Concepts
Recipe 1 - Getting started with jQuery & jQuery UI
Recipe 2 - Using Content Delivery Network (CDN)
Recipe 3 - Feature detection with Modernizr
Recipe 4 - bind() vs live() vs delegate() vs on()
Recipe 5 - Getting started with $.ajax()
Recipe 6 - Exploring Mustache.js for Templating
Recipe 7 - Using jsPerf to Test jQuery Selectors
Recipe 8 - Important Concepts for jQuery Developers

Section II - Input Controls
Recipe 9 - Miscellaneous Input Control Operations
Recipe 10 - Clear all Form Fields
Recipe 11 - Detect if TextBox Contents Have Changed
Recipe 12 - Automatically add Commas to a Number
Recipe 13 - Allow only AlphaNumeric Values
Recipe 14 - Total the values of Multiple TextBoxes
Recipe 15 - Adding Watermark to a TextBox
Recipe 16 - TextBox AutoComplete
Recipe 17 - Select/Deselect All CheckBoxes

Section III - Tables, Panels and Tabs
Recipe 18 - Miscellaneous Table Operations
Recipe 19 - Reverse the Order of Table Rows
Recipe 20 - Add/Delete Rows in a Table
Recipe 21 - Show/Hide Columns using CheckBoxes
Recipe 22 - Show/Hide Columns using Header Index
Recipe 23 - Check All CheckBoxes in a Table
Recipe 24 - Dynamically Add Thousands of Rows
Recipe 25 - Add Sorting and Pagination to a Table
Recipe 26 - Performing Calculations in a Table
Recipe 27 - Filtering a Table
Recipe 28 - Display Master Details Records
Recipe 29 - Create a Testimonial Section
Recipe 30 - Create a Sliding Overlay Panel
Recipe 31 - Add Notifications to your site
Recipe 32 - Create a Simple FAQ Accordion
Recipe 33 - Using the jQuery UI Accordion
Recipe 34 - Extending the jQuery UI Accordion
Recipe 35 - Create a Simple Tab Control
Recipe 36 - Using the jQuery UI Tabs Widget
Recipe 37 - jQuery UI Tabs - Advanced Scenarios

Section IV - Unordered List and DropDown Control
Recipe 38 - Sort Unordered List Alphabetically
Recipe 39 - Search and Delete Duplicate Items
Recipe 40 - Populate DropDown using JavaScript Object
Recipe 41 - Create a MultiLevel DropDown List
Recipe 42 - Programmatically Select an Option
Recipe 43 - Move Items between MultiSelect Lists

Section V - Menus and TreeView
Recipe 44 - Creating a Simple Menu
Recipe 45 - Working with jQuery UI Menu
Recipe 46 - Disable Right Click Context Menu
Recipe 47 - Auto Collapsible Nested TreeView
Recipe 48 - Add Expand/Collapse Icons in TreeView

Section VI - Working with Images
Recipe 49 - Create a Simple Image Gallery
Recipe 50 - Create an Image Carousel
Recipe 51 - Image Carousel using Twitter Bootstrap
Recipe 52 - Create a Flickr Image Gallery with Lazyloading

Section VII - Ajax
Recipe 53 - A Simple JSON Example
Recipe 54 - A Simple JSONP Example
Recipe 55 - Dynamically Load Scripts in a Sequence
Recipe 56 - Chain AJAX Requests with Deferred
Recipe 57 - Submit a Form Using Ajax
Recipe 58 - Filter Empty Form Fields from Submitting
Recipe 59 - Abort Ajax Requests
Recipe 60 - Cascading DropDown using AJAX

Section VIII - Creating jQuery Plugins
Recipe 61 - Create a Simple jQuery Plugin
Recipe 62 - Create a Running Counter Plugin
Recipe 63 - Table Sorting and Pagination Plugin
Recipe 64 - jQuery Validation Plugin

Section IX - Some Generic Recipes
Recipe 65 - Styling a Specific Hyperlink
Recipe 66 - Add nofollow for External Hyperlinks
Recipe 67 - Using the jQuery UI DatePicker Widget
Recipe 68 - Search and Highlight Text in a Web Page
Recipe 69 - Generate Table Of Contents for a Page
Recipe 70 - Time Bound Animations

You can also download sample chapters over here.

If you have any comments or questions about the eBook, feel free to ask them in the comments section.

Thank you and make sure to check out


HTML5 Geolocation API - Getting Started


Geolocation is one of the first HTML5 features that has been embraced across all major browsers. In this article, we will look at the HTML5 Geolocation API to get/access a user’s Geolocation.

Using HTML5 Geolocation API, you can share your current location with trusted web sites or even use it to provide additional geo location features in your own website, like providing discounts to visitors of your city. Finding out a visitor’s current location can be done using various methods. For example –
  • Find location using IP address
  • Wireless network connection
  • Using GPS etc
In HTML5, we can fetch Latitude and Longitude using JavaScript. We can make use of the global “navigator.geolocation” object to do so. Using the latitude and longitude of Geolocation, you can then share your location for example with apps like Google Maps.

Tracing in ASP.NET Web API


Tracing plays an important part in keeping track of how things are flowing through in your Application Services. Configuring tracing to collate system output is invaluable in gathering correct information about what the service is actually doing other than throwing a HTTP 5xx or HTTP 4xx error.

If you want to implement a TraceWriter of your own, you can implement the ITraceWriter and register it as the required or you could use the Microsoft.AspNet.WebApi.Tracing package from Nuget and simply turn on Tracing.

Before we look into tracing let’s take a sneak peek behind the ‘interesting’ implementation of Tracing in Web API.

Backbone.js Handling DOM events and working with Collections


Backbone.js is a lightweight JavaScript library loosely based on the Model-View-Controller (MVC) pattern (it’s not an MVC framework) and it allows developers to create single-page web applications. We covered some basics of Backbone in a previous article

To manage data of web applications, Backbone provides a Model creation strategy. The model allows us to define properties to contain data and business logic. The Collection declaration allows to store collection of the data, which is later used by the view.

In Backbone, the View (UI) is generally rendered using HTML Templates, and elements declared in this Template are accessible to View, but it might be possible that the HTML page (or MVC view or .aspx) already contains HTML elements and you need to handle the DOM events for these elements. The question then is how to handle them?

In the following implementation we will see that the ‘click’ event for the html button element is handled inside the View object. The method which gets executed for the click event is used to add the model object into the collection and then the collection is rendered using HTML Table.

Validate a Form using jQuery and Bootstrap Validator


One of the typical tasks when developing a web site is building a form to accept information, feedback or comments from visitors. But before submitting the form, it becomes necessary for us to validate user input before submitting the data to the server. You can validate phone numbers, emails, addresses, dates, credit cards etc. depending on your requirements.

In this article, I will show you a simple way to validate a form. For this purpose, we will use a plugin called Bootstrap Validator (project on ).

This plugin is based on Twitter Bootstrap.js and offers some great and expanding list of features. Some of them are:
  • Bootstrap UI and web-fonts integration
  • Validator initialization based on plugin options or HTML data-attribute
  • Some built-in fields validators like: length of the content, date, credit card, IBAN, IMEI, phone, and some others
  • Custom fields validators
  • Possibility to add multiple validators to each field
  • Possibility to show a feedback icon on the field after its validation
  • Possibility to show the validation messages in a specific HTML element
  • Rich API’s to manipulate the plugin instance and behaviors
  • Some supported languages for localization

Using CSS Selection Pseudo-element to change the Default Selection Style of your WebPage


CSS Pseduo-elements allow you to style certain parts of a document. In this article, we will see how to change the default selection style of your web page contents using ::Selection PseudoElement.

Although you can use any webeditor of your choice, I am using Visual Studio 2013 for this demonstration. Let’s start by creating a new ASP.NET Web application. Start Visual Studio and click on New Project. Choose the Web Category and choose ASP.NET Web Application as shown below –


Load Dynamic Content in jQuery UI Tabs in an ASP.NET MVC 4 application


In this article we will see how to load the contents into Tabs dynamically using ASP.NET MVC 4.0.
Create a new ASP.NET MVC 4.0 application with the name “DynamicContentsTabs”. Choose Internet Application template as shown below –


Once the project is created, let’s add the latest version of jQuery script and jQuery UI using NuGet packages. Install the required jQuery Scripts.

Copyright © 2009-2014 All Rights Reserved for by Suprotim Agarwal | Terms and Conditions