Sending array from URL.Action and getting null in controller-CodePudding

I have a function that after adding items in a for loop calls the controller through the action URL sending the arr parameter (array), I see that it sends the data but null appears in the controller parameter. I wanted to know what could be wrong?

Javscript Function

    function Submit() {

QRCodeval.forEach((code) => arr.push(code.innerHTML));
window.location.href = "@Url.Action("ReceivedFromBarCode","PurchaseOrder")?"  arr;

    }

Link generated by the controller:

http://localhost:56978/PurchaseOrder/ReceivedFromBarCode?JJJKP,RRPRQ,PPLQR

Controller where I get null in the arr parameter.

  public async Task<ActionResult> ReceivedFromBarCode(string []  arr  )
        {

            return View();

        }

CodePudding user response：

The MVC model binder expects arrays to be passed in the following format: arr=value1&arr=value2&...

You can use map() and join() to create the correct format. But you'll also need to encode the values since they are parameters in a URL. encodeURIComponent can help with that:

let urlParams = array.map((val) => { 
                         return `arr=${encodeURIComponent(val)}` 
                     }).join('&');

window.location.href = "@Url.Action("ReceivedFromBarCode","PurchaseOrder")?" 
                           urlParams;

And append the urlParams to your URL. Example output in snippet below:

let array = ["value1", "http://example.com?x=1", "<script>alert('')</sctipt>"];

let urlParams = array.map((val) => { 
                       return `arr=${encodeURIComponent(val)}` 
                     }).join('&');

console.log(urlParams);