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):
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 />I would like to keep this sample a simple as possible, so there will be no fancy design or architecture:
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>
- 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'
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>Now we can write some JavaScript:
<script src="<%= Url.Content("~/Scripts/jquery.jeditable.mini.js") %>" type="text/javascript"></script>
$(document).ready(function () {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:
//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'
});
});
$.updateEmployee = function (value, settings) {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):
//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);
}
(function ($) {This object allows me to perform a single POST for all fields, when user clicks Submit button:
window.Employee = {
EmployeeID: '<%: Model.EmployeeID %>',
Title: '<%: Model.Title %>',
Address: '<%: Model.Address %>',
PostalCode: '<%: Model.PostalCode %>',
City: '<%: Model.City %>',
Country: '<%: Model.Country %>',
Notes: '<%: Model.Notes %>'
};
})(jQuery);
$('#Submit').click(function () {You can go ahead and click around on our editable elements:Complete sample code can be downloaded here, enjoy.
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '<%=Url.Action("Details", "Home") %>',
dataType: 'json',
data: $.toJSON(window.Employee)
});
});