Passing A Single Objects Into An MVC Controller Method Using jQuery Ajax

Question

I'm trying to post a single object data to an MVC Controler using JQuery, Below are my codes.

 //declare of type Object of GroupData
    var GroupData = {};
    //pass each data into the object 
    GroupData.groupName = $('#groupName').val(); 
    GroupData.narration = $('#narration').val();
    GroupData.investmentCode = $('#investmentCode').val();
    GroupData.isNew = isNewItem;
    //send to server
        $.ajax({
            url: "/Admin/SaveContributionInvestGroup",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json", 
            data: JSON.stringify({ GroupData: JSON.stringify(GroupData) }),

            success: function (res) {
                alertSuccess("Success", res.Message);

                //hide modal
                $('#product-options').modal('hide');

                hide_waiting();
            },
            error: function (res) {
                alertError("Error", res.Message);
            }
        });

Below is my controller.

[HttpPost]
    public JsonResult SaveContributionInvestGroup(ContributionInvestmentGroup GroupData)
    {
        ClsResponse response = new ClsResponse();
        ClsContributionInvestmentGroup clsClsContributionInvestmentGroup = new ClsContributionInvestmentGroup();

        var userID = (int)Session["userID"];
        var sessionID = (Session["sessionID"]).ToString();

        if (contributionGroupData != null)
        {
            //get the data from the cient that was passed
            ContributionInvestmentGroup objData = new ContributionInvestmentGroup()
            {
                contributionInvestmentGroupID = 0,
                groupName = GroupData.groupName,
                narration = GroupData.narration,
                investmentCode = GroupData.investmentCode,
                isNew = GroupData.isNew
            };

            response = clsClsContributionInvestmentGroup.initiateNewContributionInvestmentGroup(sessionID, objData);
        }
        else
        {
            response.IsException = true;
            response.IsSucess = false;
            response.Message = "A system exception occurred kindly contact your Administrator.";
        }


        return Json(new
        {
            response.IsSucess,
            response.Message
        });
    }

The issue is, the data is not been posted to the controller, the controller receives a null object. Kindly assist, would really appreciate your effort, thanks.

Answer 1

Try Like this:

//send to server
        $.ajax({
             type: "POST",
                url: "/Admin/SaveContributionInvestGroup",
                dataType: "json",
                data:  GroupData,
            success: function (res) {
                alertSuccess("Success", res.Message);

                //hide modal
                $('#product-options').modal('hide');

                hide_waiting();
            },
            error: function (res) {
                alertError("Error", res.Message);
            }
        });

Answer 2

in your controller your dont have custom binding to bind JSON to your model thats why you get null in you parameter. instead just post it as query, try simply changes your ajax option like so:

{
        ...
        contentType: "application/x-www-form-urlencoded", //default: 
        ..., 
        data: $.param(GroupData),

        ...
}

and perhaps property names are case sensitive so you will need to change your javascript model's name