Question

I am trying to use .ajax() to post a People object to a MVC2 action that expects a ViewModel as parameter. The ViewModel has a People property.

The problem is that when the MVC action is activated, the ajax() postback People object is always null. I used Fiddler to diagnose the problem. The property values in the People object are all contained in the header. Here is my client jQuery script. Please note that I used three methods to stuff the property values into People object, but none of them works.

        StaffDlg.delegate("#SaveButton", "click",
        function (e) {
            e.preventDefault();

            People["PKey"] = $("#PKey").val();
            People["FName"] = $("#FName").val();
            People["LName"] = $("#LName").val();
            People["MName"] = $("#MName").val();
            People["SSN"] = $("#SSN").val();
            People["Gender"] = $("#Gender").val();
            People["DOB"] = $("#DOB").val();
            People["BirthPlace"] = $("#BirthPlace").val();
            People["NetworkAccount"] = $("#NetworkAccount").val();

            var pkey = $("#PKey").val();
            var action;

            if (!isNaN(parseFloat(pkey)) && isFinite(pkey)) {
                action = "Edit" + "/" + pkey;
            }
            else {
                action = "Create";
            }

            $.ajax({
                url: getRootUrl() + "/Staff/" + action,
                //data: { FName: $("#FName").val(), LName: $("#LName").val(), MName: $("#MName").val(),
                //  SSN: $("#SSN").val(), Gender: $("#Gender").val(), DOB: $("#DOB").val(),
                //  BirthPlace: $("#BirthPlace").val(), NetworkAccount: $("#NetworkAccount").val()
                //},
                //data: JSON.stringify(People),
                data: $("Form").serialize(),
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                success: function (result) {
                    $("#ajaxResponse").addClass("whiteOnGreen").html("Update succeeded");
                },
                error: function (qXHR, textStatus, errorThrown) {
                    $("#ajaxResponse").addClass("whiteOnRed").html("Failed to save the record!\r\n" +
                        textStatus + ": " + errorThrown + "\r\n" +
                        "data : " + JSON.stringify(People));
                }
            })
        } 
    );    

and here is the MVC action.

public ActionResult Edit(int id, StaffViewModel updatedStaff)
    {
        People staff = _staffService.GetStaff(id);

        if (updatedStaff == null)
            return View("NotFound");
        if (ModelState.IsValid)
        {
            TryUpdateModel<People>(staff, "staff"); 
            staff.RecordLastUpdated = DateTime.Now;
            staff.UpdatedBy = HttpContext.User.Identity.Name;
            _staffService.SaveStaff();
            //return RedirectToAction("Index", new { id = thisStaff.PKey });

            if (Request.IsAjaxRequest())
                return this.Json(staff, JsonRequestBehavior.AllowGet);
            else
            {
                if (string.IsNullOrEmpty(updatedStaff.previousURL))
                    return Redirect("/Staff/Startwith/" + staff.LName.Substring(1, 1));
                else
                    return Redirect(updatedStaff.previousURL);
            }
        }
        else
        {
            if (Request.IsAjaxRequest())
            {
                string errorMessage = "<div class='whiteOnRed error'>"
                    + "The following errors occurred:<ul>";
                foreach (var key in ModelState.Keys)
                {
                    var error = ModelState[key].Errors.FirstOrDefault();
                    if (error != null)
                    {
                        errorMessage += "<li>"
                            + error.ErrorMessage + "</li>";
                    }
                }
                errorMessage += "</ul></div>";
                return Json(new { Message = errorMessage });
            }
            else
                return View(updatedStaff);
        }
    }

Answer 1

I solved the problem with the .ajax() not posting the form values to the MVC Create(People person) action. It was the parameter type that this different than the one used in Edit(StaffViewModel). Now both action accept the same type of parameter, StaffViewMode.