Using jEditable with ASP.NET MVC (POSTing)

Question

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?

Answer 1

Here is what I am doing through reflection:

View:

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

Controller:

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

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

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

            pi.SetValue(evt, newvalue, null);
            Repository.Save();

        }
        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.

Answer 2

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'/>"  
       });  


[AcceptVerbs("POST")]   
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:
http://noahblu.wordpress.com/2009/06/17/jeditable-note-dont-return-json-and-how-to-return-strings-from-asp-net-mvc-actions/