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

Answer 2

You can pass your javascript object to server by two ways.

1. Assign your object to a element in the form so when you post the form you ll get the object in controller.

2. Use Ajax post, attach your object with form data and send it to server.

Similar question on SO

Posting JS Array object to mvc via ajax post

Answer 3

i have issue of send both data together but thanks to ramiramilu guide, i have figure out the solution ....

Get SerializeObject plugin

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
   if (o[this.name]) {
       if (!o[this.name].push) {
           o[this.name] = [o[this.name]];
       }
       o[this.name].push(this.value || '');
   } else {
       o[this.name] = this.value || '';
   }
});
return o;
};

script

    function submit_createNewFeeScheme()
{

    $.ajax({
        type: "Post",
        url: "/Qualification/CreateNewFeeScheme",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ ZonesList: selectedZonesList, newFeeSchemeData:  $("#NewFeeSchemeForm").serializeObject() }),
        success: function (data) {
            alert(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}