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, ??????)
    {

score 3 · Answer 1 · answered Feb 06 '14 at 10:24

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 -

enter image description here

Sample model which I have used is PersonViewModel -

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

many thanks its really helpfull.... managed to pass javascript array value but failing to pass now form value .... i am trying data: JSON.stringify({ newFeeSchemeData: $("#NewFeeSchemeForm").serialize(), ZonesList: selectedZonesList }), — K.Z, Feb 06 '14 at 13:29
in your example you have hardcoded person name rather then picking up from submitted form — K.Z, Feb 06 '14 at 13:58
@toxic, you can use $("#id of control").val() to get the data from form and use it to assign it to the property. — ramiramilu, Feb 06 '14 at 14:00
Why do you want to use Serialize() method of JQuery, it does standard URL-encoded notation. But we need Json. — ramiramilu, Feb 06 '14 at 14:07

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

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

Assign your object to a element in the form so when you post the form you ll get the object in controller.
Use Ajax post, attach your object with form data and send it to server.

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