Dropdown button does not work in asp.net, but does in html

Question

I'm kind of new to web development in general, so this could be a simple problem.

I'm using ASP.NET Core 2.0, MVC.

As a bit of a learning exercise, I'm trying to implement a html template I found into ASP.NET (as in, making ASP.NET output the required html for the html template to work).

For the most part I have been successful. Except for the dropdown buttons. For the life of me I cant get these working.

The thing is, if I take the html it generates, and run that on its own, it works perfectly!!

So, I:

1. Run my ASP.NET app. The dropdown buttons dont work.
2. Run "View Page Source" on the asp.net page
3. Copy the page source into notepad, and save it as "test.html" into the wwwroot folder of my ASP.NET solution
4. Replace "/lib" with "lib" in the test.html (for all instances)
5. Open "test.html" in a browser. It works as expected (dropdown buttons work).

I'm not sure whats going on here - it seems to me the html in both instances is the same, except for the "/lib" vs "lib", but this seems to sort out the css files, so I am assuming it should work for the jquery stuff.

Been doing some researching into this, and none of the other issues I have found apply to me: jquery.min.js is being called before bootstrap.min.js The jquery calls are in the same view file that is producing the dropdowns.

What have I missed here? Why does it work in pure html, but not when part of an ASP.NET app?

-- EDIT -- I have been asked to include the different code. The body of the html is identical between the two. The only difference is the script sources at the end. ASP.NET:

<script src="/lib/jquery/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')
</script>

HTML:

<script src="lib/jquery/dist/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
</script>

The actual dropdown button is as such:

                    <div class="navbar-collapse collapse" id="navigation">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="javascript: void(0)" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="contact.html">Contact option 1</a>
                                    </li>
                                    <li><a href="contact2.html">Contact option 2</a>
                                    </li>
                                    <li><a href="contact3.html">Contact option 3</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

I'm pretty sure it is the jquery.min.js that is the key, as if I comment that out in the html, the dropdown stops working there too.

Answer 1

The problem ended up being I was loading the js files via http, while the asp.net app was https.

Once all the js files were loading via https, it started working better.