.Net DizzyCoding

Using jEditable with ASP.NET MVC (POSTing)

Problem :

I understand that with jEditable (http://www.appelsiini.net/projects/jeditable) you can do in-place editing and POST the changed information to a URL.

My ASP.NET MVC view is displaying a bunch of Model information which I’d like to make in-place editable. Currently, I have two views – one text representation and one edit view in which a form is entirely POSTed and then my controller action takes the entire object (assembled from the form element names) as a parameter, updating the object and returning to the text-only view.

However, when I switch to jEditable I would only use the text view and POST a single item at a time, and not the entire object. How could I build a single controller action that can take what jEditable is POSTing and then put it into the appropriate property of my object?

Solution :

There’s some pretty good sample code here:

$("#myTextBox").editable('<%=Url.Action("UpdateSettings","Admin") %>', {   
           submit: 'ok',   
           cancel: 'cancel',   
           cssclass: 'editable',   
           width: '99%',   
           placeholder: 'emtpy',   
           indicator: "<img src='../../Content/img/indicator.gif'/>"  

public ActionResult UpdateSettings(string id, string value)   
    // This highly-specific example is from the original coder's blog system,
    // but you can substitute your own code here.  I assume you can pick out
    // which text field it is from the id.
    foreach (var item in this.GetType().GetProperties())   

        if (item.Name.ToLower().Equals(id, StringComparison.InvariantCultureIgnoreCase))   
            item.SetValue(Config.Instance, value, null);   
    return Content(value);   

You might also need this:

Here is what I am doing through reflection:


$(".edit").editable('<%=Url.Action("UpdateEventData","Event") %>', {
                submitdata: {eventid: <%=Model.EventId %>},
                tooltip: "Click to edit....",
                indicator: "Saving...",
                submit : "Save",
                cancel : "Cancel"


public string UpdateEventData(int eventid, string id, string value)
        //load the event
        var evt = Repository.GetEvent(eventid);

        System.Reflection.PropertyInfo pi = evt.GetType().GetProperty(id);
        if (pi==null)
            return "";

            object newvalue = Concrete.HelperMethods.ChangeType(value, pi.PropertyType);

            pi.SetValue(evt, newvalue, null);

        catch (Exception ex)
            //handle errors here

        return pi.GetValue(evt, null).ToString();


The method “HelperMethods.ChangeType” is a more robust version of Convert.ChangeType (so it can handle nullables) that I got from http://aspalliance.com/author.aspx?uId=1026.

Exit mobile version