drop down not working on cshtml page?

Article
2017-03-21

Question

_{Tuesday, March 21, 2017 8:24 PM}

Hello!

I have been trying to get this working but so far its not working. I'm trying to use the bootstrap dropdown button but what happens is that the button shows and when I "click" on it, it looks like its trying to animate/dropdown, the text "tutorials" and two downward arrows but it doesn't expand or seem to work.

I'm just trying to use this default code: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_comp_dropdown-menu&stacked=h

I have bootstrap.css, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme.min.css, bootstrap-slider.css styles added to bundleconfig.cs and I have other areas of the site that use bootstrap that are resolving okay. I've also added scripts bootstrap.js and bootstrap.min.js in my bundleconfig.cs. I noticed in the bootstrap.map file for the dropdown it references a location "less/dropdowns.less" and in my bootstrap folder where I have bootstrap.css, .map, etc I have a less folder and within that I have dropdowns.less.

any ideas on what I might be missing?

All replies (5)

_{Tuesday, March 21, 2017 8:48 PM}

Try creating a page that contains only the dropdown to see if you can get it to work, and then post only that page's code if you can't.

_{Tuesday, March 21, 2017 10:48 PM}

Same results. I did try a couple more things. Since I added a new view page I also tried disabling the @styles and @scripts that I had there and added this:

<link href="~/Content/Bootstrap-3.3.7/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap-3.3.7/bootstrap.js"></script>

I still had the same issue, so I moved that into the dropdowntest.cshtml page :

@{
    ViewBag.Title = "dropdowntest";
}
<link href="~/Content/Bootstrap-3.3.7/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap-3.3.7/bootstrap.js"></script>
<h4>dropdowntest</h4>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        Tutorials
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
    </ul>
</div>

_{Tuesday, March 21, 2017 11:13 PM}

I guess it looks like more was needed than the two lines I added but it also looks like this line was the issue, once I commented it out, the drop down appears to be working.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="####" crossorigin="anonymous">

but on my original page it doesn't. I need to tinker with this more but at least I know it works on the other page.

_{Wednesday, March 22, 2017 5:15 AM}

Ok now I'm a little confused. If I remove this line on my dropdowntest page it stops working:

<link href="~/Content/Bootstrap-3.3.7/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap-3.3.7/bootstrap.js"></script>

but in my bundleconfig.cs file I have the following:

//Bootstrap Scripts
bundles.Add(new ScriptBundle("~/bundles/Bootstrap-scripts").Include(
     "~/Scripts/Bootstrap-3.3.7/bootstrap.js",
     "~/Scripts/Bootstrap-3.3.7/bootstrap.min.js",
     "~/Scripts/Bootstrap-Misc/bootstrap-datetimepicker.js",
     "~/Scripts/Bootstrap-Misc/bootstrap-datetimepicker.min.js",
     "~/Scripts/Bootstrap-Misc/bootstrap-slider.js",
     "~/Scripts/Bootstrap-Misc/bootstrap-slider.min.js"
     ));

bundles.Add(new StyleBundle("~/Content/BootstrapCss").Include(
     "~/Content/Bootstrap-3.3.7/bootstrap.css",
     "~/Content/Bootstrap-3.3.7/bootstrap.min.css",
     "~/Content/Bootstrap-3.3.7/bootstrap-theme.css",
     "~/Content/Bootstrap-3.3.7/bootstrap-theme.min.css",
     "~/Content/Bootstrap-3.3.7/bootstrap-slider.css"
     ));

and on my _layout.cshtml page I have included these in the <head> of the page:

@Styles.Render("~/Content/BootstrapCss")
@Scripts.Render("~/bundles/Bootstrap-scripts")

I also have some others but I didn't include above. When I created the view I left the default layout (no entry) and in the views folder the _viewstart.cshtml file has the following (which is to my layout):

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

My layout page calls another one where I have the issue (the above is to the new page with the dropdowntest.cshtml i created earlier today):

@RenderSection("JumpList", false)

the jump list has the dropdown in there and I also included the dropdown default test on the layout page and it has the same issue despite the styles/scripts render sections added in the <head> of the layout page.

Shouldn't the jumplist (or even dropdowntest) page inherit it from the layout page automatically?

_{Friday, March 24, 2017 6:57 AM}

Hi MedievalPeanut,

Sections defined in a view are available only in its immediate layout page. They cannot be referenced from partials, view components, or other parts of the view system.

reference: /en-us/aspnet/core/mvc/views/layout

Best Regards,

Chris

Share via

drop down not working on cshtml page?

Question

All replies (5)

Additional resources