InputSelect not work in blazor .net 8

Question

Hi ,
in my project ,  use InputSelect
it's not work correctly , when refresh the book page it's ok but when navigate to other page and return to book page it's not work

 shown this problem in this video attached and share my codes
i think the javascript files must be call again to initialize select field 
please check this project

My Codes

My Problem Video

Answer 1

@Anonymous Thanks
but it's not worked , you can see my repo in git

Answer 2

Hi @Mahdi Elahi,

You need import the js file like below:

@rendermode @(new InteractiveServerRenderMode(prerender: false))
@inject IJSRuntime JS
@code
{
    public Book Book { get; set; } = new();
    public void HandleSubmit()
    {
    }
    protected override async Task OnInitializedAsync()
    {
        await JS.InvokeAsync<IJSObjectReference>("import", "https://code.jquery.com/jquery-3.6.0.min.js");
        await JS.InvokeAsync<IJSObjectReference>("import", "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js");
        await JS.InvokeAsync<IJSObjectReference>("import", "./admin-template/js/forms-selects.js");        
    }
}

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Answer 3

If the problem is the select2 JQuery plugin is not working as expected, then the problem has to do with understanding Blazor and JavaScript fundamentals. Blazor is an SPA. The Blazor application is downloaded to and runs in the browser. That's why a refresh works. The select2 is initialized when the HTML that has the select loads. You should find a Blazor solution to replace the select2 jQuery plugin or write your own autocomplete.

Secondly, do not use JavaScript to update the DOM in a Blazor application. Blazor tracks the DOM and if the DOM is updated outside of Blazor then Blazor will not be aware of the changes.

Reference documentation

Interaction with the DOM