Ajax won't call controller method mvc

Question

I am trying to do inline editing by cell, not by row, upon a double click. This much works but it won't update the record- the "SaveCustomer" call to controller isn't made. What is it that I'm doing wrong?

here is my index view file (part of it, the rest is irrelevant)

   @foreach (var item in Model.Drivers)
        {
            <tr id="@item.ID">
                <td id="id">
                     @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td id="lastName">
                    @Html.DisplayFor(modelItem => item.LastName)
                </td>
                <td id="firstName">
                    @Html.DisplayFor(modelItem => item.FirstName) 
                </td>
                <td id="seniority">
                  @if (item.Seniority != null) {@Convert.ToDateTime(item.Seniority).ToShortDateString()}                                      
                </td>
                <td>
                <td> //more go here </td>

Then here is the javascript file- sorry for the formatting, happens everytime I copy&paste

 $("td").dblclick(function () {
if (!$(this).hasClass("edit")) {
    var value = jQuery.trim($(this).html());
    $(this).html("<input id=\"txtEdit\" type=\"text\" class=\"textbox\" value=\"" + value + "\" onblur=\"SaveValue(this, '" + value + "')\" onfocus=\"PutCursorAtEnd(this)\" />");
    $(this).addClass("edit");
    $("#txtEdit").focus();
}
});

 function PutCursorAtEnd(obj) {
if (obj.value == obj.defaultValue) {
    $(obj).putCursorAtEnd(obj.length);
}
}

function SaveValue(obj, oldValue) {
var value = $(obj).val();
$(obj).parent().removeClass("edit");
if (value != oldValue) {
    var property = $(obj).parent().attr("id");
    var id = $(obj).parent().parent().attr("id");

    $.ajax({
        type: "POST",
        url: '@Url.Action("SaveCustomer", "save")',
        data: { ID: id, Property: property, Value: value },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: SaveCustomer_Success,
        error: Error
    });
 }
else {
    $(obj).parent().html(oldValue);
}
}

function SaveCustomer_Success(data, status) {
$(data.d.ID).parent().html(data.d.NewValue);
}

and lastly here is the controller method

    public object SaveCustomer(int ID, string Property, string Value)
    {
        Driver driver = unitOfWork.DriverRepository.GetByID(ID);
        switch(Property) {
            case "id":
                driver.ID = Convert.ToInt32(Value);
                break;
            case "firstName":
                driver.FirstName = Value;
                break;
            case "lastName":
                driver.LastName = Value;
                break;
            case "seniority":
                driver.Seniority = Convert.ToDateTime(Value);
                break;
        }
        unitOfWork.DriverRepository.Update(driver);
        unitOfWork.Save();

        return new
        {
            ID = ID,
            NewValue = Value
        };
    }

Much help appreciated, thanks!

Answer 1

Remove following line from your ajax options because you are not sending json type data.

contentType: "application/json; charset=utf-8"

Since you are sending a POST request you have to add HttpPost attribute to controller. And also you are expecting json result, so your controller should be like below.

[HttpPost]
public JsonResult SaveCustomer(int ID, string Property, string Value)
{
    /// ...
    return Json(new { ID = 1, NewValue = 1 }, JsonRequestBehavior.AllowGet);
}

Answer 2

Try removing data, contentType and dataType from Ajax call and change the url to:

url: 'save/SaveCustomer?ID=' + id + '&Property=' + property + '&Value=' + value,

put a break point in the controller to see if the call hits it. There is no reason why it will not.

Use Chrome browser and open JavaScript console. You will see why it doesn't work, if it doesn't work after this change.