Bootstrap Javascript does not work when using in an individual View

saf-itpro commented 7 years ago

In our ASP.NET Core MVC app inVS2015, we're using the default built-in jquery and Bootstrapconfiguration that VS2015 performs when you create a web app using default ASP.NET Core MVC template. We've latest version of VS2015 with UPDATE-3.

View [of our ASP.NET Core MVC app on VS2015 where clicking on menu items 1, 2 or 3 does NOT popup the alert('Test')]:

<div class="container-fluid">

    <div class="row">
        <nav>
            <ul id="menu" class="nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav>
    </div>
</div>
@section scripts
{
    <script>
        function initMenu() {
            $('#menu ul').hide();
            $('#menu > li > a').on('click', function () {
                alert('Test')
                $('#menu ul').slideUp();
                $(this).next().slideDown();
            });
        }
        $(document).ready(initMenu);
    </script>
}

The above behavior in the following standalone html file works [It can be tested by saving the file code as an .html file]:

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
  <nav>
    <ul id="menu" class="nav">
      <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
  </nav>    
</body>
</html>
<script>
function initMenu() {
    $('#menu ul').hide(); 
    $('#menu > li > a').on('click', function() {
    alert('Test')
        $('#menu ul').slideUp();
        $(this).next().slideDown();
    });
}
$(document).ready(initMenu);
</script>

_Layout.cshtml file [of our ASP.NET Core MVC app on VS2015]:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    @RenderSection("styles", required: false)
</head>
<body>
    <div class="container body-content">
        @RenderBody();
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
    @RenderSection("css", required: false)
</body>
</html>

The Generated html of the above ASP.NET View in Google Chrome:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <div class="container nav nav-pills" style="margin-top:4px;background-color:cornsilk;">

    <form method="post" id="logoutForm" action="/Account/LogOff">
        <ul class="nav navbar-nav navbar-left">
            <li><a title="Manage" href="/Manage">Welcome</a></li>                
         </ul>
        <ul class="navbar-right list-inline">
            <li><button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button></li>
        </ul>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8FckoDOKaO5KjdFC8YqHkY6PEkVCJ1dRxwyXJPq2o2TtnAo-A6Tyc6EjTBRBR2Vdm6_iNz5gdPlcEg9XEuFJgH5QzvNXe8PzVZMM7IkMADNaLcnKk6Qs7Dv0fwVtT6JQLgex2xC0K0CXcZ4rC4SrnhvUG0jNlRuFeIzYDAZi7EZNPyK-M_LTY6jtBbE50RRXZA" /></form>

    </div>
    <div class="container body-content">

<div class="row">
    <div class="col-sm-3">
        <a href="/">Home</a>
<div class="container-fluid">

    <div class="row">
        <nav>
            <ul id="menu" class="nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav>
    </div>
</div>

        <hr />
        <footer>
            <p class="text-center text-muted">Accessibility Statement</p>
        </footer>
    </div>

        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>    

</body>
</html>

chris-oswald commented 7 years ago

What does the console debugger window say in Chrome Tools? Are there any js files not getting loaded when you debug? I'm using Bootstrap V4.Alpha6 with zero issues.

Also, if you're running on "Development", which I'm assuming you are, your two test cases are apples and oranges. Meaning you're pointing to a CDN in one example (which works), and then locally in your example that doesn't.

saf-itpro commented 7 years ago

@chris-oswald I'm using Bootstrap 3.3.0 on Development. console debugger window in Chrome does not say anything - no complains/warnings there. Yes two cases are CDN vs. local. But it seems Bootstrap does not have to be > 3.3.0? for above example.

temilaj commented 7 years ago

@saf-itpro You seem to be using local files referencing the bower "/lib" when running on "Development". Try installing the bower packages using the bower install command. That should do the trick.

Eilon commented 7 years ago

Indeed, it sounds like the Bootstrap files just aren't getting loaded for some reason.

The tooling and templates in VS2015 are not supported (they were just preview versions), and there have since been many improvements, fixes, and changes to ASP.NET Core and the related tools, which I recommend you get. You can try out the latest templates by installing the .NET CLI, and you can use it with VS2017 (including Community Edition), VS Code, and VS for Mac.

Download details here: https://www.microsoft.com/net/download/core

aspnet / Mvc

Bootstrap Javascript does not work when using in an individual View #6443