How to pass array using asp-route?

Question

Form returns url format: localhost2343/index?Colors=red&Colors=blue&Colors=pink

asp-route return url format: localhost2343/index?Colors=red,blue,pink

If I use form submit button than everything seems good. But If i click on sort hyperlink than it will pass URL Colors=System.String%5B%5D

How can I pass value of Colors inside asp-route?

<form asp-page="./index" method="get">
     <select asp-for="Colors" asp-items="@Model.Colors_SELECT" class="MultiSelect" multiple>
        <option value="">All</option>
   </select>
    ...
</form>


<Table>
  ...
    <a  asp-page="./Index" method="get" 
        asp-route-SortOrder="@Model.Colors_Sort" 
        asp-route-SearchString="@Model.SearchString"
        asp-route-Colors="@Model.Colors">
           @Html.DisplayNameFor(model => 
    model.MyList[0].Colors)
     </a>
...
</table>


  [BindProperty(SupportsGet = true)]
    public string[]? Colors { get; set; }
    public SelectList? Colors_SELECT { get; set; }

public async Task OnGetAsync()
{
   // Form - URL Format 
   // get values from URL & set inside selectlist 
   var result = Request.Query["Colors"];
   var i = 0;
   foreach (string? item in result) {
          Colors[i] = item;
          i++;
   }
}

Update - I tried this but on sort link, it removes Sort variable & it picks only 1 Colors (not multi)

    <a  asp-page="./Index" method="get" 
        asp-route-SortOrder="@Model.Colors_Sort" 
        asp-all-route-data="@Model.routeData">
          
           [BindProperty(SupportsGet = true)]
           public Dictionary<string, string> routeData { get; set; }
             ....
           var routeData = new Dictionary<string, string>();
            routeData.Add("SortOrder", CurrentSort);
            routeData.Add("SearchString", SearchString);
            for (int i = 0; i < result.Count; i++)
            {
              var myParam = result[i];
             routeData.Add($"Colors{i}", myParam.ToString());
            }

Answer 1

This may help: To get the selected values from a select element in a Razor page, you can use the Request.Form["selectName"] collection. For example, consider the following select element:

@page "{Colors}"


<form method="post">
  <select multiple name="colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="pink">Pink</option>
  </select>
  <button type="submit" asp-page-handler="GetColors">Submit</button>
</form>

To get the selected values in the form submission handler and modify the query string in the URL and include the selected values (red, blue, pink), you can try the following code:

public IActionResult OnGet(string? Colors)
{
    if (string.IsNullOrWhiteSpace(Colors))
    {
        // do something
        return Page();
    }

    if (!string.IsNullOrWhiteSpace(Colors))
    {
        // Do something
        return Page();
    }

    return Page();
}


public IActionResult OnPostGetColors()
{
    IDictionary<string, string> params = new Dictionary<string, string>();
    var selectedColors = string.Join(",", Request.Form["colors"]);
    params.Add("Colors", selectedColors);
    string query = "";
    foreach (var p in params)
        query += $"{p.Key}={p.Value}";

    var url = $"{HttpContext.Request.Path}?{query}";
    return Redirect(url); // url : https://localhost:7272/index?Colors=red,blue,pink
}

This code will help you submit the selected values through the URL as a query string, and then will redirect the user to a new URL with the selected values added to the query string as multiple values for the colors parameter.