asp.net mvc + jEditable - save edited cell data in database

Question

I am trying to use jquery DataTables plugin to display details from my db table, and use the Jeditable to allow user edit each cell inline. The edited data should be post back and save in database. I came across an example which is quite similar to my scenario here: http://naspinski.net/post/Inline-AJAX-DropDown-and-Text-Editing-with-AspNet-MVC-and-jQuery.aspx and i tried to implement following that as a guide.

However, I face some problem here:

1. When and how should I use Url.Content() and what should be passed in and returned??

2. I get an error when trying to edit the table cell: [MissingMethodException]: No parameterless constructor defined for this object.

I knew I did something very wrong here but I just not able to clear my doubt. Here is the script i used to make my cell editable:

$(function () {

    // Initialize a data table
    var myTable = $('#example').dataTable({
        // To use themeroller theme
        "bJQueryUI": true
    });

    // Make every cell editable
    $('td', myTable.fnGetNodes()).editable('@(Url.Action("Edit", "Home"))',
    {
        indicator: 'saving...',
        tooltip: 'click to edit...',
        style: 'inherit',
        placeholder: 'click to edit'
    });
});

And the controller action i used to save the edited data into db:

[HttpPost]
    public void Edit(HttpContext context)
    {
        string elementId = context.Request.Form["id"];
        string fieldToEdit = elementId.Substring(0, 4);

        //now take anything after those 4 and it is the Id:
        int idToEdit = Convert.ToInt32(elementId.Remove(0, 4));

        // the value is simply a string:
        string newValue = context.Request.Form["value"].Trim();

        var food = dbEntities.Foods.Single(i => i.FoodID == idToEdit);

        switch (fieldToEdit)
        {
            case "name": food.FoodName = newValue; break;
            case "amnt": food.FoodAmount = Convert.ToInt32(newValue); break;
            case "sdat": food.StorageDate = Convert.ToDateTime(newValue); break;
            case "edat": food.ExpiryDate = Convert.ToDateTime(newValue); break;
            case "type": food.FoodTypeID = Convert.ToInt32(newValue); break;
            case "cont": food.ContainerID = Convert.ToInt32(newValue); break;
            default: throw new Exception("invalid fieldToEdit passed");

        }
        dbEntities.SaveChanges();


        context.Response.Write(newValue); 
    }

Really need some help here... Appreciate it...

Answer 1

First Question:

Url.Content() should be used for serving static files ie JS or CSS like

Url.Content("~/Scripts/jquery.js")

It will return a direct URL to this static file. Starting with a ~ will ensure, the usage of the correct base dir (i.e. if you are running you application in a virtual directory).

2nd Question:

Your action method has to return an ActionResult to be identified as an action. It can be parameter less, because you have access to the HttpContext as a property of your controller class.

[HttpPost]
public ActionResult Edit()
{
    string elementId = this.HttpContext.Request.Form["id"]; 
}

Answer 2

I somehow get it done although it still need A LOT of follow-up works.. I change my controller to return ActionResult and passing 2 parameters (id and value), and I stick to Url.Action at my View.. It works although I not sure am I doing something wrong..

Here is part of my controller:

[HttpPost]
    public ActionResult Edit(string id, string value)
    {
        string elementId = id;
        string fieldToEdit = elementId.Substring(0, 4);

        //now take anything after those 4 and it is the Id:
        int idToEdit = Convert.ToInt32(elementId.Remove(0, 4));

        // the value is simply a string:
        string newValue = value;

And the script:

// Make every cell editable
    $('td', myTable.fnGetNodes()).editable('@(Url.Action("Edit", "Home"))',
    {
        indicator: 'saving...',
        tooltip: 'click to edit...',
        style: 'inherit',
        placeholder: 'click to edit'
    });

Thanks!