Как передать форму, содержащую несколько PartialViews, в контроллер с помощью AJAX

Question

Мне нужна отправка данных в контроллер, но я использую кнопку «Добавить новый вопрос», которая добавляет новый модуль вопросов под именем _QuestionLayout .Я хочу, чтобы мой пользователь создавал вопросы столько, сколько он / она хочет - до 25 - [мой код может делать это до сих пор], а затем, когда он / она нажимает кнопку «Создать экзамен», яхочу, чтобы все данные формы, которые были созданы с использованием частичных представлений, были отправлены на контроллер.

Я не знаю, как, помощь приветствуется.

Мой главный вид:

@model OnlineSinav.Areas.Teacher.ViewModels.Questions
@{
    ViewBag.Title = "CreateExam";
}

<div class="col-lg-12" id="questions">
    <div id="abc">
        <form class="form-horizontal style-form" id="ourForm">
            <div class="form-panel">
                <button type="button" class="btn btn-success newQuest"><i class="fa-plus">  ADD NEW QUESTION</i></button>
                @Html.Partial("_QuestionLayout", Model)
            </div>
            <button type="button" class="btn btn-primary" id="submitForm">CREATE EXAM</button>
        </form>
    </div>
</div>

<script src="../../../Content/lib/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var max_fields = 25;
        var wrapper = $(".form-panel");

        var partialHTML = `@Html.Partial("_QuestionLayout", Model)`;

        var x = 1;

        $(wrapper).on("click", ".delete", function (e) {
            e.preventDefault();
            $(this).parent('div').parent('div').parent('div').remove();
            x--;
        });

        $(wrapper).on("click", ".newQuest", function (e) {
            e.preventDefault();
            if (x < max_fields) {
                x++;
                $(wrapper).append(partialHTML); //add input box
            } else {
                alert('You Reached the limits')
            }
        });


        $("#submitForm").click(function () {
           var formdata = $("#ourForm").serializeArray();
            $.ajax({
                type: "POST",
                url: "/Teacher/Exam/CreateExam",
                data: formdata,
                success: function (data) {
                    alert("DONE");
                    // Do something here when it is finished
                }
            });
        });
    });
</script>

Мой PartialView:

@model OnlineSinav.Areas.Teacher.ViewModels.Questions


<div id="newForm">
    <div class="form-group" style="margin-right: 0px;">
        <div class="col-lg-12">
            <hr />

            <button type="button" class="btn btn-danger delete pull-right"><i class="fa-plus">  DELETE ADDED QUESTION</i></button>
            <button type="button" class="btn btn-success newQuest pull-right"><i class="fa-plus">  ADD NEW QUESTION</i></button>
            @Html.LabelFor(m => m.question_string, new { @class = "control-label col-md-3" })
            @Html.TextAreaFor(m => m.question_string, new { @class = "form-control", placeholder = "Question text will be placed here.", style = "max-width:100%; min-width:100%" })

        </div>
    </div>
    <div class="form-group">

        <div class="col-md-8 col-xs-11">
            @Html.LabelFor(m => m.A, new { @class = "col-sm-2 col-sm-2 control-label" })
            @Html.TextBoxFor(m => m.A, new { @class = "col-sm-10" })
        </div>
    </div>
    <div class="form-group">

        <div class="col-md-8 col-xs-11">
            @Html.LabelFor(m => m.B, new { @class = "col-sm-2 col-sm-2 control-label" })
            @Html.TextBoxFor(m => m.B, new { @class = "col-sm-10" })
        </div>
    </div>
    <div class="form-group">

        <div class="col-md-8 col-xs-11">
            @Html.LabelFor(m => m.C, new { @class = "col-sm-2 col-sm-2 control-label" })
            @Html.TextBoxFor(m => m.C, new { @class = "col-sm-10" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-8 col-xs-11">
            @Html.LabelFor(m => m.D, new { @class = "col-sm-2 col-sm-2 control-label" })
            @Html.TextBoxFor(m => m.D, new { @class = "col-sm-10" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-8 col-xs-11">
            @Html.LabelFor(m => m.E, new { @class = "col-sm-2 col-sm-2 control-label" })
            @Html.TextBoxFor(m => m.E, new { @class = "col-sm-10" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-8 col-xs-11">
            @Html.LabelFor(m => m.correct_answer, new { @class = "col-sm-2 col-sm-2 control-label" })
            @Html.TextBoxFor(m => m.correct_answer, new { @class = "col-sm-1" })
        </div>
    </div>
</div>

Мой контроллер (сейчас ничего не делает, но я хочу получить данные в качестве параметра, я нене знаю как, тогда я напишу здесь код для отправки данных в базу данных)

[HttpPost]
public ActionResult CreateExam(string formdata) // 
{

      return RedirectToAction("index");
}

Мой ViewModel, если необходимо

public class Questions
    {        
        public IList<Questions> questions { get; set; }
        [Display(Name ="SORU ALANI")]
        public string question_string { get; set; }
        public string A { get; set; }
        public string B { get; set; }
        public string C { get; set; }
        public string D { get; set; }
        public string E { get; set; }
        [Display(Name ="DOĞRU CEVAP")]
        public string correct_answer { get; set; }
    }

Вопрос в том, как отправить вседанные в контроллер в виде массива.Было бы лучше, если бы он был в типе IList, но на самом деле это не имеет значения, простой строковый массив мог бы помочь мне, я могу работать с ним после этого, заранее спасибо, ребята.