Nested javascript object properties are null when sent to the controller in MVC using AJAX

Question

I have the following entities in my model.

 public class Provider
{
    public int ProviderId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string SSN { get; set; }
    public string NPI { get; set; }
    public ProviderDetails ProviderDetails { get; set; }

}

public class ProviderDetails
{
    public int ProviderDetailsId { get; set; }
    public string Certification { get; set; }
    public string Specialization { get; set; }
    public string TaxonomyCode { get; set; }
    public string ContactNumber { get; set; }
    public string ContactEmail { get; set; }
    public int ProviderId { get; set; }
}

I have the following controller action method.

 [HttpPost]
    public ActionResult CreateProvider(Provider provider)
    {
        try
        {
            int providerCreationSuccessful = _repository.CreateProvider(provider);
            if (providerCreationSuccessful == 1)
                TempData["userIntimation"] = "Provider Registered Successfully";

            return RedirectToAction("ShowTheListOfProviders");
        }
        catch (Exception Ex)
        {
            _logger.Error(Ex.Message);
            return View("Error");
        }
    }

I am sending data to the controller using AJAX as shown.

self.createProviderDetails = function () {
    $.ajax({
        url: "/Provider/CreateProvider/",
        type: "POST",
        data: fillModel(),
        async: false,
        success: function (result) {
            if (result.url) {
                location.href = result.url;
            }
        }
    }).fail(
             function (xhr, textStatus, err) {
                 alert(err);
             });
};

fillmodel function is

var fillModel = function () {
    var providerData =
        {
            ProviderId: self.providerID(),
            FirstName: self.firstName(),
            LastName: self.lastName(),
            SSN: self.SSN(),
            NPI: self.NPI(),
            ProviderDetails: {
                ProviderDetailsId: 0,
                Certification: self.certification(),
                Specialization: self.specialization(),
                TaxonomyCode: self.taxonomyCode(),
                ContactNumber: self.contactNumber(),
                ContactEmail: self.contactEmail(),
                ProviderId: self.providerID()          
            }   
        }
    return providerData;
}

The object data is fine on the Javascript side but at the controller,the nested objects are null as shown here.

enter image description here

Please let me know,As to what I am doing wrong.I am not able to figure this one out.

The DefaultModelBinder will bind correctly if the names are in the following format ProviderDetails.ProviderDetailsId: 0, ProviderDetails.Certification: someValue etc (dot notation). But if you property construct your view using the strongly typed helpers, all you need is data: $(yourForm).serialize(), — user3559349
– user3559349, Commented Feb 23, 2015 at 12:06

Shahzad Khan · Accepted Answer · 2015-02-23 12:02:45Z

1

Pass the same name of columns and properties then pass into model then should be visible in you model when you pass into the controller ,

data: JSON.stringify({
     model: {
                 "Column1": $("#Column1").val(),
                 "Column2": $("#Column2").val(),
                 "Column3": $("#Column3").val(),
                 "Column4": $("#Column4").val(),
           }),

and pass the model like this because last time have find this type issue then i have fixed through this.

answered Feb 23, 2015 at 12:02

Shahzad Khan

5303 silver badges14 bronze badges

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

4 Comments

A NewBie Over a year ago

What about the nested model?Thats the one which is null.

Shahzad Khan Over a year ago

same implementation required ,make nested model in below column4 and map the same name model and as well column name it should be pass , if raise same issue see your coding with master mind.

A NewBie Over a year ago

Should I change the controller if I do like this or is some change required in the AJAX code.

Shahzad Khan Over a year ago

no changes required to passing you model to controller.

sakir · Accepted Answer · 2015-02-23 12:00:35Z

0

 self.createProviderDetails = function () {
        $.ajax({
            url: "/Provider/CreateProvider/",
            type: "POST",
            data: fillModel(),
            async: false,
datatype : "json",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                if (result.url) {
                    location.href = result.url;
                }
            }
        }).fail(
                 function (xhr, textStatus, err) {
                     alert(err);
                 });
    };

answered Feb 23, 2015 at 12:00

sakir

3,5228 gold badges36 silver badges54 bronze badges

Comments

rmorrin · Accepted Answer · 2015-02-23 12:00:48Z

0

Try specifying the dataType for your AJAX request as 'json':

self.createProviderDetails = function () {
    $.ajax({
        url: "/Provider/CreateProvider/",
        type: "POST",
        data: fillModel(),
        dataType: "json", // specify data type
        async: false,
        success: function (result) {
            if (result.url) {
                location.href = result.url;
            }
        }
    }).fail(
             function (xhr, textStatus, err) {
                 alert(err);
             });
};

answered Feb 23, 2015 at 12:00

rmorrin

2,5251 gold badge17 silver badges18 bronze badges

Comments

RogerEdward · Accepted Answer · 2016-11-21 09:05:41Z

0

ANOTHER very common error are square brackets []. Be careful when you are building your nested object.

 var object = {
     NestedObject: [{ Column1: "value1" }], //error
     NestedObject: { Column1: "value1" }, // Good.
 }

there is no difference if you use quotes for Name's columns and nested columns:

 var object = {
     "NestedObject": { "Column1": "value1" }, // Good.
 }

You'll have your object in the controller. But anyway, The most important thing is specify datatype: JSON

 $.ajax({
    url: "/Provider/CreateProvider/",
    type: "POST",
    data: fillModel(),
    dataType: "json", // specify data type JSON
    success: function (result) {

    }
})

answered Nov 21, 2016 at 9:05

RogerEdward

1311 silver badge7 bronze badges

Collectives™ on Stack Overflow

Nested javascript object properties are null when sent to the controller in MVC using AJAX

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related