How to pass a JavaScript Array to ASP.Net MVC Action as part of post

Question

I have a cshtml as follow,

DoPost.cshtml

@using (Html.BeginForm("Purchase", "PurchaseOrder", FormMethod.Post, new { @id = "frmPurchase" }))
{

// statements

// statements

<input type="button" id="submitPurchase" onclick = "myPurchase()" value="Select" />
}

In Javascript I have an array strings in variable "ExtraItems"

ExtraItems[0] ="123"
ExtraItems[1] ="124"
ExtraItems[2] ="125"

My Action which accept the data is as follows,

public ActionResult Purchase(PurchaseOrderModel model)
        {            
            //Do some stuff with the passed data
            return View("Purchase", model);
        }

In the above PurchaseOrderModel, I have the property

public string[] SelectedProducts { get; set; }

to accept the Javascript Array elements.

What I tried: The simple post did not work as the JavaScript array elements are not part of the Form elements,I couldn't use a @Html.HiddenFor because it is an array.

Hence tried to do an Ajax post under function myPurchase(),

$a.post('@Url.Action("Purchase", "PurchaseOrder")', { SelectedProducts: ExtraItems });

Here I did not get the ExtraItems details under model.SelectedProducts in the action. The biggest issue was i wanted to load the Purchase.cshtml View from the action, instead I got the controll back to the Jquery Post.

Please help me how can I solve this.

score 3 · Answer 1 · answered Jul 09 '14 at 12:08

3

You should post your javascript array as a json object. You use the JSON.stringify() method converts a value to JSON. Something like :

 $.ajax({
        url: '@Url.Action("Purchase", "PurchaseOrder")',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ 
            SelectedProducts: ExtraItems
        })
    });

answered Jul 09 '14 at 12:08

NicoD

1,141
8
18

Thanks, The problem is it is not doing the return View("Purchase", model); part. I came back to my success part of Ajax but no redirection. – TBA Jul 09 '14 at 12:21

score 2 · Answer 2 · answered Jul 09 '14 at 12:24

2

Here is my example for solving your issue
-----------------------------------------
//Script
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script>
    var ExtraItems = ["aa","bb","cc","ff"];
    function a()
    {
        $.ajax( {
            type: 'POST',
            url: '/Default1/Index',
            data: { SelectedProducts: ExtraItems },

            traditional: true,
            success: function ( response )
            {
                alert( 'Sucs' );


            }
        } );
    }

</script>
<button onclick="a();">click</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

//Controller

 [HttpPost]
        public ActionResult Index( string[] SelectedProducts )
        {
              return View();
        }

answered Jul 09 '14 at 12:24

ARUNRAJ

431
4
13

Thanks Arun But, I get the success and Alert too, however the return View(); part does't work?? – TBA Jul 09 '14 at 12:31
Do you want to redirect to another view? – ARUNRAJ Jul 09 '14 at 12:32
You cant redirect through return View() when using ajax.You should redirect from javascript.success: function ( response ) { window.location.href = "/controller/action" – ARUNRAJ Jul 09 '14 at 12:37
Sorry I have some model to be passed to the view which is pretty big. Return View("Purchase", model). I think then I should post this data right? – TBA Jul 09 '14 at 12:46
Ok then you use a hidden field.Save that array to hidden field and bind it to model – ARUNRAJ Jul 09 '14 at 13:17
How could I save the array to a hidden field? I thought that is not possible? – TBA Jul 09 '14 at 13:42
I tried with this this $("#SelectedProducts").val(SelectedItemIds); not working. – TBA Jul 09 '14 at 13:52

score 1 · Answer 3 · answered Jul 09 '14 at 11:32

1

Use $.ajax function with the option traditional:true for enabling ASP.NET MVC default model binding for the list of string items.

answered Jul 09 '14 at 11:32

anssi

699
7
9

Thanks, The problem is it is not doing the return View("Purchase", model); part. I came back to my success part of Ajax but no redirection. – TBA Jul 09 '14 at 12:22

Arjuna · Accepted Answer · 2014-07-09T12:39:09.767

1

Take a string property in your model and then send the data as comma separated string

var dataToSent = ExtraItems.join(',')

If you have a property named Datum of type string in your model Purchase then the data to be sent will be, passing model

data : 'Datum=' + dataToSent

In your action you can split data into array also for return response you have to redirect the page in the success function of your ajax call

$.ajax( {
        type: 'POST',
        url: '/Default1/Index',
        data: { SelectedProducts: ExtraItems },

        traditional: true,
        success: function ( response )
        {
            window.location.href = "/controller/action" <--your url


        }
    } );

edited Jul 09 '14 at 12:39

answered Jul 09 '14 at 12:33

Arjuna

324
1
17

No I need to pass a model too. return View("Purchase", model); The model is updated with the ExtraItems data. So it is not possible to pass using window.location, as the model has too much data. – TBA Jul 09 '14 at 12:47
@TBA write the response to the screen . .document.write(response) – Arjuna Jul 09 '14 at 12:58
you should consider this post : [Why is document.write considered a “bad practice”?](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) – NicoD Jul 10 '14 at 12:11

How to pass a JavaScript Array to ASP.Net MVC Action as part of post

4 Answers4