asp.net-coreblazorpopper.js

How to inject/insert/install popper js in Blazor app

I am developing my first Blazor application. I used a Bootstrap 5 DropDown Button.

<div class="dropdown">
    <button type="button" title="Print" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        <i class="bi bi-printer"></i>
    </button>
    <ul class="dropdown-menu">
        <li><button type="submit" id="print-1" class="btn btn-link border-0" @onclick="() => Print(AppliedReporting.ReportType.Preview)">Preview</button></li>
        <li><button type="submit" id="print-2" class="btn btn-link border-0" @onclick="() => Print(AppliedReporting.ReportType.PDF)">PDF</button></li>
        <li><button type="submit" id="print-3" class="btn btn-link border-0" @onclick="() => Print(AppliedReporting.ReportType.Excel)">Excel</button></li>
        <li><button type="submit" id="print-4" class="btn btn-link border-0" @onclick="() => Print(AppliedReporting.ReportType.Word)">Word</button></li>
        <li><button type="submit" id="print-5" class="btn btn-link border-0" @onclick="() => Print(AppliedReporting.ReportType.HTML)">HTML</button></li>
    </ul>
</div>

But the list of dropdown is not dropping as should be. After a long study. I realised that popper should be installed in the Blazor application. I have failed to install it after several attempts. like;

Copy a popper.js file from web to the location of the blazor app folder.

Add https://github.com/KristofferStrube/Blazor.Popper framework and

add

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"\>

But unfortunately I am failing to active the dropdown list.

what is the best and easiest way to solve this problem?

I am trying to install / inject / insert popper js in Blazor App in VS 2022 Community.

Solution

  • I have tested the code. You will not need install anything. Just add the script reference in the App.razor like following the dropdown will work.

    ...
<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
...

    enter image description here