How to install Popper in Visual Studio 2019 locally
Question
Im trying to install popper.js in Visual Studio 2019. I'm making a .NET Core application with MVC. In one of my Views I need to use a dropdown menu from bootstrap, so I need to include Popper. When I use the <script> tag with a CDN link it works fine. The problem is that this application is going to be hosted on a private net. So I'm not sure if the computers that are going to use the application are going to be able to connect to the internet.
So I want to install these files locally and I've tried to use the lib manager from Visual Studio and I have installed popper.js@2.4.1
But when I try to include the files on my proyect it doesn't work. I have 3 subfolders inside the popper.js folder: cjs, esm and umd. In the Popper webpage it says that the one that works with the <script> tag is umd. So I have tried to include this reference in my html:
<script src="~-/lib/popper.js/umd/popper.js"><script>
But my dropdown menu still doesn't work. Is there something that I'm doing wrong? Is there any other way of installing Popper?
(The order of the references in the html is the correct one I think: jquery.js, popper.js, bootstrap.js)
1 answers
solution1
1 ACCPTED 2020-06-10 03:53:23
In the document ,
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap's JavaScript or use
bootstrap.bundle.min.js / bootstrap.bundle.jswhich contains Popper.js. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
And I find in my Shared/_layout.cshtml , <body></body> include the scripts:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
Then I add bootstrap.js to <body></body> like this:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
And then you can use dropdown in views. Here is a demo worked:
View:
<h1>TestDropDownList</h1>
<div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
Result:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.