How to pass Nested JSON to controller in MVC5?

Question

I'm beginner to develop MVC Web Application. I try to pass nested Json to controller in MVC, but I have problem that pass json file.

My models are like that;

public  class SurveyViewModels
    {
        public string Question { get; set; }
        public bool IsMultipleChoice { get; set; }
        public bool IsSelectOneMoreThan { get; set; }
        public List<string> Options { get; set; }
    }

    public  class SurveyItems
    {
        public string SurveyTitle { get; set; }
        public List<SurveyViewModels> SurveyViewModel { get; set; }
    }

My controller is like that ;

    [HttpPost]
    public JsonResult PostQuestionAndOptions(SurveyItems SurveyItems)
    {

    }

Adding SurveyViewModels class in array:

        var SurveyViewModels= new Array();        
         $("#getButtonValue").click(function () {
           ......
            var Options = new Array();
            for (i = 1 ; i < counter; i++) {
                Options[i - 1] = $('#textbox' + i).val();
            }
            var Data= {
                "Question": Question,
                "IsMultipleChoice": MultipleChoice,
                "IsSelectOneMoreThan": SelectOneMoreThan,
                "Options": Options
            };
            SurveyViewModels.push(Data);

Publish Button function :

$("#publishButton").click(function () {
                var Title = $('#Title').val();
                var SendingData = {
                    "SurveyTitle": Title,
                    "SurveyViewModel": SurveyViewModels
                };
                alert(Title);
                alert(SurveyViewModels);
                $.ajax({
                    type: "POST",
                    url: "/Surveys/PostQuestionAndOptions",
                    data:SendingData,
                    success: function (data) {
                        alert();
                    },
                    dataType: "json",
                    traditional: true
                });
            });

But List SurveyViewModel is null . Why List of SurveyViewModel don't pass to controller.

Could any one help me?

Answer 1

I think this is what ur looking for

var SurveyViewModels= new Array();   
  $("#getButtonValue").click(function () {
           ......
            var Options = new Array();
            for (i = 1 ; i < counter; i++) {
                Options[i - 1] = $('#textbox' + i).val();
            }
            var Data= {
                "Question": Question,
                "IsMultipleChoice": MultipleChoice,
                "IsSelectOneMoreThan": SelectOneMoreThan,
                "Options": Options
            };
            SurveyViewModels.push(Data);


 $("#publishButton").click(function () {
                  var Titleobj = {"SurveyTitle": Title }; 

var SurveyViewModelsobj = {"SurveyViewModel":SurveyViewModels}  
                  var SendingData = $.extend({}, Titleobj , SurveyViewModelsobj );
                    console.log(Title);
                    console.log(SurveyViewModels);
                    $.ajax({
                        type: "POST",
                        url: "/Surveys/PostQuestionAndOptions",
                        data:SendingData,
                        success: function (data) {
                            alert();
                        },
                        dataType: "json",
                        traditional: true
                    });
                });

Check all the open and closeing of braces of code, Mark answer as accepted if it helps u