Friday, 13 July 2012 MVC 4 application with Flexigrid, jQuery UI, and jQuery validation

Almost all applications expose four fundamental operations on entities such as Create, Read, Update, and Delete (CRUD). In general terms these will relate to:

  • Create new entities
  • List, search, or view existing entities
  • Update existing entities
  • Delete existing entities

  • Building a web application using Asp.Net MVC framework with CRUD operations will result in a separate view for each operation (except delete). Also controller classes will have a set of action methods (http get / post) for each view.

    It is a quick and straightforward to implement such CRUD pattern. But this pattern is not user friendly and results in the bigger code base and the higher bandwidth consumption.
    The other approach to implement CRUD UI is using AJAX with jQuery based components. This should make user experience is more enjoyable and the much better technologies utilization. I have created a simple DEMO application called “Job Market” using following technologies:

  • Asp.Net MVC 4
  • Flexigrid (jQuery based rich data grid)
  • jQuery UI
  • jQuery Validation
  • Linq to XML

  • This application built with standard Asp.Net MVC 4 template. A Jobs section lists job posts using Flexigrid. The Flexigrid control provides all required functionality such as paging, sorting, column resizing / hiding, and many more. Adding and editing facilities are implemented using jQuery UI dialog forms with jQuery validation plugin for client side validation. This combination (grid with dialogs) is utilizing AJAX techniques with JSON to query or post data. A data repository for this sample is stored in xml file and using LINQ to XML interface for CRUD operations.

    The code from this demo can be used as a pattern for building repetitive tasks in CRUD web applications.

    Check the demo source code here (built with Visual Studio 2012).