Dropdown OnChange Event Not Triggering Server Calls After Migrating from Blazor Server to WebAssembly (.NET 6 to .NET 8

Question

I upgraded the application from blazor server .NET 6 to blazor web assembly .NET 8 with that update the blazorise version also and Server application is also upgrade to ASP.NET Core 8 application with API integration is loading proper on all page but , select/dropdown control onchange method is not triggering Server api calls also when i am trying to debug the frontend application then it is not hitting the break points and also api is not getting call with SelectList, Select and other dropdown controls and its not giving any error or warning.

In the below images, i have used selectList component control of blazorise library to show the dropdown and on changes of the options of dropdown changing the division and based on selected division filtering the records inside the DivisionChange method calling on trigger of SelectedValueChange event.

It is working properly on blazor server application but not working on web assembly application. I am new to blazor web assembly, Can anyone suggest how i can call the server call from on change event in web assembly and why the breakpoints are not hitting to this code ?

Answer 1

Hi Bharti Kushwaha,

Thank you for reaching out to Microsoft Q & A forum.  

The issue with Change events not triggering server calls in Blazor WebAssembly (WASM) after migrating from Blazor Server is likely due to differences in event handling between the two hosting models. 

1.Set the Correct Render Mode:

In .NET 8, Blazor introduces rendering modes to control event handling. Since WebAssembly runs entirely client-side, ensuring the component's render mode is set appropriately is essential. Misconfigured render modes can prevent events from firing. Here’s the guide on render modes for reference. 

2.Use HttpClient for API Calls:

Unlike Blazor Server, where events can trigger direct server calls via SignalR, WebAssembly requires using HttpClient to call server APIs. Update your OnChange event to use HttpClient as follows: 

private async Task DivisionChange(ChangeEventArgs e)
{
    selectedDivision = e.Value.ToString();
    var result = await httpClient.GetAsync($"api/divisions/{selectedDivision}");
    // Process result here
}

3.CORS Configuration:

Blazor WebAssembly runs on the client, so make sure your server’s CORS policy is configured to allow API calls from the WebAssembly client. Missing or restrictive CORS policies can block these requests. 

4.Debugging in Blazor WebAssembly:

Debugging in WebAssembly can be challenging since breakpoints might not trigger as they do in Blazor Server. Ensure your IDE is set up for WebAssembly debugging, and consider using Console.WriteLine to trace execution if breakpoints aren’t hitting. 

5.Check Blazorise Compatibility:

If you updated Blazorise, verify that SelectList or Select components are compatible with .NET 8, as breaking changes may affect event handling. 

Please feel free to contact us if you have any additional questions.    

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.