InputSelect not work in blazor .net 8

Mahdi Elahi 31 Reputation points
2024-01-09T04:07:09.8766667+00:00

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

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,779 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,664 questions
0 comments No comments
{count} votes

3 answers

Sort by: Most helpful
  1. AgaveJoe 29,786 Reputation points
    2024-01-09T13:54:50.2433333+00:00

    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

    0 comments No comments

  2. Ping Ni-MSFT 4,890 Reputation points Microsoft Vendor
    2024-01-10T03:56:54.13+00:00

    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

    0 comments No comments

  3. Mahdi Elahi 31 Reputation points
    2024-01-11T09:16:08.87+00:00

    @Ping Ni-MSFT Thanks
    but it's not worked , you can see my repo in git


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.