CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc-4
MiaoWin
MiaoWin

Reputation: 475

JQuery Submit partial view's form shows blank page with Json result

I have a Edit function in MVC4

    public ActionResult Edit(UserGroup usergroup)
    {
            usergroup.created_date = DateTime.Now;
            usergroup.modified_date = DateTime.Now;
            db.Entry(usergroup).State = EntityState.Modified;
            db.SaveChanges();
            return Json(new { success = true });
    }

My Jquery button click event

    $(".edit-link").click(function () {
    var id = $(this).attr("id");
    $(".edit-dialog").dialog({
        width: 600,
        position: { my: "center", at: "center", of: window },
        title: "Edit User Group"
    }).load("/UserGroup/Edit/" + id);
    return false;
});

My Jquery form submit event

$("#frmEdit").submit(function () {
    var id = $(".edit-link").attr("id");
    $.ajax({
        url: "/UserGroup/Edit/" + id,
        type: "POST",
        data: $(this).serialize(),
        datatype: "json",
        success: function (result) {
            if (result.success) {
                window.alert("User group details modified successfully.");
                location.reload();
            } else {
                $(".edit-dialog").html(result);
                $.validator.unobtrusive.parse((".edit-dialog").dialog);
            }
        }
    }).load("/UserGroup/Edit/" + id);
    return false;
});

Edit: As a result, I get a blank page (URL example: localhost:1234/UserGroup/Edit/Admin) with only a line of text of {success = true} instead of executing window.alert.

Any idea on this? Seems like it did not even get to this line under jquery "success: function (result) { //code }"

Thanks.

Upvotes: 0

Views: 1027

Answers (1)

Rusty
Rusty

Reputation: 1303

You need to return the action result to jsonresult

Other thing is put the Httppost attribute over the Edit jsonresult like:

[HttpPost]
public JsonResult Edit(UserGroup usergroup)
{
        usergroup.created_date = DateTime.Now;
        usergroup.modified_date = DateTime.Now;
        db.Entry(usergroup).State = EntityState.Modified;
        db.SaveChanges();
        return Json(new { success = true });
}

Update: remvoe the load event after form submit event and then try

$("#frmEdit").submit(function () {
var id = $(".edit-link").attr("id");
$.ajax({
    url: "/UserGroup/Edit/" + id,
    type: "POST",
    data: $(this).serialize(),
    datatype: "json",
    success: function (result) {
        if (result.success) {
            window.alert("User group details modified successfully.");
            location.reload();
        } else {
            $(".edit-dialog").html(result);
            $.validator.unobtrusive.parse((".edit-dialog").dialog);
        }
    }
});
return false;
});

Upvotes: 1

Related Questions