Ajax不会调用控制器方法mvc

时间:2014-08-06 16:48:50

标签: javascript jquery ajax asp.net-mvc inline-editing

我试图通过单击进行内联编辑,而不是按行进行双击。这很有用,但它不会更新记录 - " SaveCustomer"打电话给控制器是不是。我做错了什么?

这是我的索引视图文件(部分内容,其余部分无关紧要)

   @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>

然后这里是javascript文件 - 抱歉格式化,每次复制和粘贴时都会发生

 $("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);
}

最后这里是控制器方法

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

非常感谢,谢谢!

2 个答案:

答案 0 :(得分:0)

从您的ajax选项中删除以下行,因为您没有发送json类型数据。

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

由于您要发送POST请求,因此必须向控制器添加HttpPost属性。而且你期望得到json结果,所以你的控制器应该如下所示。

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

答案 1 :(得分:0)

尝试从Ajax调用中删除data,contentType和dataType,并将url更改为:

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

在控制器中放置一个断点,看看是否有来电。没有理由不这样做。

使用Chrome浏览器并打开JavaScript控制台。如果在此更改后它不起作用,您将看到它无效的原因。