Glance at jEditable in ASP.NET MVC

Recently one of my colleagues suggested that I should take a look at Jeditable plugin. This plugin allows in place edition of XHTML elements content. I can imagine few interesting scenarios with this plugin, so I decide to put together a simple sample.
Let's start with some markup, which will represent an NorthWind employee details (you can download NorthWind database from here):

TitleOfCourtesy: <u><%: Model.TitleOfCourtesy %></u><br />
FirstName: <u><%: Model.FirstName %></u><br />
LastName: <u><%: Model.LastName %></u><br />
Title: <b class="edit" id="Title"><%: Model.Title %></b><br />
Address: <b class="edit" id="Address"><%: Model.Address %></b><br />
PostalCode: <b class="edit" id="PostalCode"><%: Model.PostalCode %></b><br />
City: <b class="edit" id="City"><%: Model.City %></b><br />
Country: <b class="edit-select" id="Country"><%: Model.Country %></b><br />
Notes: <i class="edit-area" id="Notes"><%: Model.Notes %></i><br />
<br /><br /><button id="Submit">Submit</button>

I would like to keep this sample a simple as possible, so there will be no fancy design or architecture:

fields which will be edited in standard text input are wrapped in <b> element with class 'edit'
fields which will be edited in select are wrapped in <b> element with class 'edit-select'
fields which will be edited in textarea are wrapped in <i> element with class 'edit-area'

After making that clear, we can add Jeditable functionality to those elements. First we should reference two scripts:

<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.jeditable.mini.js") %>" type="text/javascript"></script>

Now we can write some JavaScript:

$(document).ready(function () {
  //Standard 'text' inputs
  $('.edit').editable($.updateEmployee, {
    //Element tooltip
    tooltip: 'Click to edit...',
    //Input style
    style: 'display: inline'
  });
  //Selects
  $('.edit-select').editable($.updateEmployee, {
    //Options for select (you can use loadurl if you want to request data from server)
    data: "{'USA':'USA','UK':'UK'}",
    //Type
    type: 'select',
    //Text for accept button
    submit: 'Accept',
    //Element tooltip
    tooltip: 'Click to edit...',
    //Select style
    style: 'display: inline'
  });
  //TextAreas
  $('.edit-area').editable($.updateEmployee, {
    //Type
    type: 'textarea',
    //Text for cancel button
    cancel: 'Cancel',
    //Text for accept button
    submit: 'Accept',
    //Element tooltip
    tooltip: 'Click to edit...',
    //TextArea style
    style: 'display: inline'
  });
});

The first parameter of editable is usually an URL where browser posts edited content. In that situation, every field is being posted as soon as user finishes editing. There is also a possibility of passing function in first parameter. As you can see, I'm using second approach here. The $.updateEmployee function looks like this:

$.updateEmployee = function (value, settings) {
  //Based on the current element, we update the corresponding property of employee
  switch ($(this).attr('id')) {
    case 'Title':
      window.Employee.Title = value;
      break;
    case 'Address':
      window.Employee.Address = value;
      break;
    case 'PostalCode':
      window.Employee.PostalCode = value;
      break;
    case 'City':
      window.Employee.City = value;
      break;
    case 'Country':
      window.Employee.Country = value;
      break;
    case 'Notes':
      window.Employee.Notes = value;
      break;
  }
  //We have to return string, it will be put into element for displaying
  return (value);
}

You may wonder where the window.Employee object came from. It's being initialized like this (I know it's ugly, but it's only for sample purposes):

(function ($) {
  window.Employee = {
    EmployeeID: '<%: Model.EmployeeID %>',
    Title: '<%: Model.Title %>',
    Address: '<%: Model.Address %>',
    PostalCode: '<%: Model.PostalCode %>',
    City: '<%: Model.City %>',
    Country: '<%: Model.Country %>',
    Notes: '<%: Model.Notes %>'
  };
})(jQuery);

This object allows me to perform a single POST for all fields, when user clicks Submit button:

$('#Submit').click(function () {
  $.ajax({
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    url: '<%=Url.Action("Details", "Home") %>',
    dataType: 'json',
    data: $.toJSON(window.Employee)
  });
});

You can go ahead and click around on our editable elements:

Complete sample code can be downloaded here, enjoy.