Search code examples
c#asp.net-corerazorblazor

Blazor 8 web app interactive server problem in sidebar javascript

Problem:

  • I created new project using blazor web app template wuth global settings as interactive server and i used many html templates with same problem, current project i am using sneat free html template, after i run the project the side menu cannot be clicked

**project source **

https://github.com/egylinux/sweat_test

Attention i tried to use render mode as InteractiveServerRenderMode , an i already made it in app component , but useless

Solution

  • Blazor has it's own event handling mechanism which is different from basic JS.

    enter image description here

    In your demo application you have view

    <li class="menu-item active open">
    <a href="javascript:void(0);" class="menu-link menu-toggle">
        <i class="menu-icon tf-icons bx bx-home-circle"></i>
        <div data-i18n="Dashboards">Dashboards</div>
        <div class="badge bg-danger rounded-pill ms-auto">5</div>
    </a>
    <ul class="menu-sub">
        <li class="menu-item">
            <a
                href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/dashboards-crm.html"
                target="_blank"
                class="menu-link">

    Which should have a feature that when clicking the "Dashboards" blade, the sub ul should expand or collapse. But in blazor, we should add corresponding click event like codes below, shall be similar to React and anuglar which are data-based event handling but not DOM-based event handling.

    <li class="menu-item @DashboardLiStatus">
    <a href="javascript:void(0);" class="menu-link menu-toggle" @onclick="toggleDashboard">
        <i class="menu-icon tf-icons bx bx-home-circle"></i>
        <div data-i18n="Dashboards">Dashboards</div>
        <div class="badge bg-danger rounded-pill ms-auto">5</div>
    </a>
...

@code {

    private string DashboardLiStatus = "active open";

    private void toggleDashboard()
    {
        DashboardLiStatus =  DashboardLiStatus.Contains("open") ? "" : "active open";
    }
    
}