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