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.

NicoD · Accepted Answer · 2014-07-09 12:08:22Z

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 9, 2014 at 12:08

NicoD

1,1998 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TBA Over a year ago

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.

ARUNRAJ · Accepted Answer · 2014-07-09 12:24:41Z

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 9, 2014 at 12:24

ARUNRAJ

4896 silver badges16 bronze badges

7 Comments

TBA Over a year ago

Thanks Arun But, I get the success and Alert too, however the return View(); part does't work??

ARUNRAJ Over a year ago

Do you want to redirect to another view?

ARUNRAJ Over a year ago

You cant redirect through return View() when using ajax.You should redirect from javascript.success: function ( response ) { window.location.href = "/controller/action" <--your url }

TBA Over a year ago

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?

ARUNRAJ Over a year ago

Ok then you use a hidden field.Save that array to hidden field and bind it to model

|

nraina · Accepted Answer · 2014-07-09 12:39:09Z

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 9, 2014 at 12:39

answered Jul 9, 2014 at 12:33

nraina

3542 silver badges21 bronze badges

3 Comments

TBA Over a year ago

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.

nraina Over a year ago

@TBA write the response to the screen . .document.write(response)

NicoD Over a year ago

you should consider this post : Why is document.write considered a “bad practice”?

anssi · Accepted Answer · 2014-07-09 11:32:19Z

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 9, 2014 at 11:32

anssi

7397 silver badges9 bronze badges

1 Comment

TBA Over a year ago

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.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

7 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

7 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related