send javascript array in Ajax.BeginForm

Question

I am working on project and i got requirement to send javaScript array "selectedZonesList", holding data back to controller along with form data. I been given one suggestion to use Ajax.BeginForm ... but i am struggling to put all parts togather many thanks...

in partial view

@using (Html.BeginForm("CreateNewFeeScheme", "Qualification", FormMethod.Post, new { id = "NewFeeSchemeForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

   //rest of code to take user input for all variables ..

<input type="submit" value="Create" class="btn btn-default" />
}

JavaScript function

 <script type="text/javascript">

 var selectedZonesList = new Array();

 function AddFeeZoneToScheme(e)
 {

    var entityGrid = $("#FeeZoneGrid_02").data("kendoGrid");

    var selectedZone = entityGrid.dataItem(entityGrid.select());

    selectedZone = selectedZone.FeeZoneID;

    selectedZonesList.push(selectedZone); 
}

</script>

Controller

  [HttpPost]
    public ActionResult CreateNewFeeScheme(FeeScheme newSchemeData, ??????)
    {

Answer 1

You can do it with simple JQuery AJAX POST. You can pass Stirngly Typed model along with array of strings in a single AJAX JQuery post.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    function submitForm() {
        var roles = ["role1", "role2", "role3"];

        var model = new Object();
        model.Name = "Rami";

        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("AddUser")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ Roles: roles, person: model }),
            success: function (data) { alert(data); },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

<input type="button" value="Click" onclick="submitForm()"/>

And then the controller action -

    public ActionResult AddUser(string[] Roles, PersonViewModel person)
    {
        return null;
    }

When you hit the button, then you will get the values on server side like this -

Sample model which I have used is PersonViewModel -

public class PersonViewModel
{
    public string Name { get; set; }
}