We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
You can use the ValueChange event and NavigationManager to pass the selected value from one page to another. We have also prepared a sample for your requirement and shared it below for your reference.
[Page 1]
|
@page "/"
@using Syncfusion.Blazor.DropDowns @inject NavigationManager NavigationManager
<PageTitle>Page 1</PageTitle>
<div style="margin:130px auto;width:300px"> <h4>SfMultiSelect Page 1</h4> <SfMultiSelect Placeholder="e.g. Australia" TValue="string[]" TItem="Country" @bind-Value="@MultiVal" DataSource="@Countries"> <MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings> <MultiSelectEvents TItem="Country" TValue="string[]" ValueChange="@OnSelect" /> </SfMultiSelect> </div>
@code { public string[] MultiVal { get; set; } = new string[] { };
public void OnSelect(MultiSelectChangeEventArgs<string[]> args) { string selectedCountries = string.Join(",", args.Value); // Join the selected country names with a comma NavigationManager.NavigateTo($"multiselectdropdown-features?selectedCountries={selectedCountries}");
} } |
In the OnSelect method, the args.Value parameter is a string array that contains the selected country names. To pass this array as a query parameter in a URL, you can use the NavigationManager service to navigate to a new page and append the query parameter to the URL.
In the example above, we join the selected country names with a comma and pass it as a query parameter named selectedCountries. You can change the query parameter name and the delimiter to suit your needs. Note that the NavigationManager service is injected into the component using the @inject directive at the top of the component. This service provides methods to navigate to page 2 in the application.
To receive the selectedCountries as an array in the target page, you need to split the string value of the query parameter back into an array. You can use the Split method of the String class to split the comma-separated values into an array of strings.
Here's an example of how you can receive the selectedCountries parameter as an array in the target page:
[Page 2]
|
@page "/multiselectdropdown-features"
<PageTitle>Page 2</PageTitle>
@using Syncfusion.Blazor.DropDowns @inject NavigationManager NavigationManager @using System.Web
<div style="margin:130px auto;width:300px"> <h4>SfMultiSelect Page 2</h4> <SfMultiSelect Placeholder="e.g. Australia" TValue="string[]" TItem="Country" @bind-Value="@MultiVal" DataSource="@Countries"> <MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings> </SfMultiSelect> </div>
@code {
[Parameter] public string GarajId { get; set; }
public string[] MultiVal { get; set; } = new string[] { };
protected override void OnInitialized() { // parse the query string parameters var uri = new Uri(NavigationManager.Uri); var queryParams = HttpUtility.ParseQueryString(uri.Query);
// get the value of the selectedCountries parameter var selectedCountries = queryParams["selectedCountries"];
// split the comma-separated values into an array of strings MultiVal = selectedCountries?.Split(",");
// MultiVal will be null if the selectedCountries parameter is not present in the query string // or if its value is an empty string } } |
In the code above, we first parse the query string parameters using the HttpUtility.ParseQueryString method. Then, we retrieve the value of the selectedCountries parameter using the queryParams object. We then use the Split method to split the comma-separated values into an array of strings. Note that we use the null-coalescing operator (??) to handle the case where selectedCountries is null, which can happen if the parameter is not present in the query string.
Finally, we set the value of the MultiVal property to the array of selected countries. If selectedCountries is null or empty, MultiVal will be set to an empty string array.
 |
