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.
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>
...