ajax POST in .NET MVC 4 parameters are not resolved - ajax

Question

I have this function in my view:
function EditButtonClick(e1) {
var urlString = '#Url.Action( "Create", "Group")';
var groupItem = {
GroupCode: e1.getAttribute("data-GroupCode"),
GroupType: e1.getAttribute("data-GroupType"),
Description: e1.getAttribute("data-Description"),
InternalNotes: e1.getAttribute("data-InternalNotes"),
StatusCode: e1.getAttribute("data-StatusCode"),
Edit: "true"
};
$.ajax({
type: 'POST',
url: urlString,
data: { '': groupItem },
dataType: 'json'
}).fail(function () {
alert('Edit process failed');
});
}
My view model looks like this:
[Serializable]
public class GroupItem : ApplicationModel, IValidatableObject
{
public GroupItem() { }
[DisplayName("Group Code")]
public int GroupCode { get; set; }
public string GroupTypeDescription { get; set; }
[DisplayName("Group Type")]
public int GroupType { get; set; }
[DisplayName("Group Name")]
public string Description { get; set; }
[DisplayName("Internal Notes")]
public string InternalNotes { get; set; }
public string PartialInternalNotes { get; set; }
public string Status { get; set; }
[DisplayName("Status Code")]
public int StatusCode { get; set; }
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy HH:mm:ss}")]
public DateTime EnterTime { get; set; }
public string UserId { get; set; }
public string ActionType { get; set; }
public bool Edit { get; set; }
and, finally, my action looks like this:
[HttpPost]
public ActionResult Create(GroupItem groupItem)
{
if (ModelState.IsValid)
{
_groupService.SaveGroup(groupItem);
return RedirectToAction("List", "Group", new { showAll = false });
}
ViewBag.GroupTypeList = _MasterDataService.GetCodeMasterList((int)Constants.CodeType.GroupType);
ViewBag.StatusList = _MasterDataService.GetCodeMasterList((int)Constants.CodeType.GroupStatus);
if (groupItem.GroupCode > 0)groupItem.Edit = true;
return this.RazorView(groupItem);
}
Now, I put a break point in the view just before the ajax call, and another in the controller at the top of the action. The properties that I have set up in my groupItem object in the view are all populated as expected, according to an inspection just before the ajax call. However, at the breakpoint in the action, all the properties in the GroupItem argument are default values.
In other code in another view, I call this very same Action method via a form submit. In that case, all the properties are populated as expected. What am I missing in my ajax call?

Answer 1

You need to use JSON.stringify to first serialize your object to JSON, and then specify the contentType so your server understands it's JSON data.
So you complete AJAX function call would become,
$.ajax({
type: 'POST',
url: urlString,
data: JSON.stringify(groupItem),
contentType: "application/json",
dataType: 'json'
}).fail(function () {
alert('Edit process failed');
});

Answer 2

try this:
$.ajax({
type: 'POST',
url: urlString,
data: { 'groupItem': groupItem },
dataType: 'json'
}).fail(function () {
alert('Edit process failed');
});