Sending array from URL.Action and getting null in controller

Question

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

Answer 1

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