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.

You're sending GroupData yet the argument is contributionGroupData. You also may not need that outer structure depending on what your C# class looks like. — Rory McCrossan
– Rory McCrossan, Commented Sep 12, 2018 at 9:05
@RoryMcCrossan I have set it to contributionGroupData, and it still doesn't work... — MIcheal David
– MIcheal David, Commented Sep 12, 2018 at 9:12
Its just data: GroupData, and remove the contentType option — user3559349
– user3559349, Commented Sep 12, 2018 at 9:14
And if you have generated you view correctly, then all you need to var GroupData = $(yourForm).serialize(); — user3559349
– user3559349, Commented Sep 12, 2018 at 9:15
And if you did use contentType: 'application/json (which is unnecessary), then it would be data: JSON.stringify({ GroupData: GroupData }), or data: JSON.stringify(GroupData); — user3559349
– user3559349, Commented Sep 12, 2018 at 9:17

Hossein · Accepted Answer · 2018-09-12 10:16:06Z

2

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

edited Sep 12, 2018 at 10:16

answered Sep 12, 2018 at 9:19

Hossein

3,1233 gold badges18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3559349 Over a year ago

Side note - content: "application/json;", is invalid - its contentType - but its fortunate that you have that typo because it would not work if you used contentType

Hossein Over a year ago

@StephenMuecke No. I test ,doesnt work with contentType .

user3559349 Over a year ago

Yes I know - that is exactly what I stated - but you have content: "application/json;", in your code (which fortunately is invalid and ignored - there is no ajax option named content)

RizkiDPrast · Accepted Answer · 2018-09-12 09:23:11Z

-1

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

answered Sep 12, 2018 at 9:23

RizkiDPrast

1,7251 gold badge15 silver badges22 bronze badges

1 Comment

user3559349 Over a year ago

The $.param is not necessary (and the DefaultModelBinder is not case sensitive)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related