I have updated the versions of bootstrap and other components in visual studio through nuget manager and it automatically updated the bundles as well. Now my navigation bar is not showing as intended
I updated the bundleconfig.cs section manually as well. Still it showing nothing. Please refer the following code and the images
I am using visual studio 2013 / visual studio 2017
Bundle.config
<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
<styleBundle path="~/Content/css">
<include path="~/Content/bootstrap.css" />
<include path="~/Content/Site.css" />
</styleBundle>
</bundles>
BundleConfig.cs
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery-{version}.js")
.Include("~/Scripts/jquery-ui.min.js"));
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
// Order is very important for these files to work, they have explicit dependencies
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/popper").Include(
"~/Scripts/popper.js"));
ScriptManager.ScriptResourceMapping.AddDefinition(
"respond",
new ScriptResourceDefinition
{
Path = "~/Scripts/respond.min.js",
DebugPath = "~/Scripts/respond.js",
});
}
}
}
_reference.js
/// <reference path="modernizr-2.8.3.js" />
/// <reference path="jquery-3.3.1.js" />
/// <autosync enabled="true" />
/// <reference path="bootstrap.js" />
/// <reference path="respond.js" />
/// <reference path="popper.js" />
site.master
[<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/jqueryui") %>
<%: Scripts.Render("~/bundles/popper") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<%--<asp:ScriptReference Name="jquery" />--%>
<%-- <asp:ScriptReference Name="bootstrap" />--%>
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>][1]
Expected Navigation bar with dropdown
HTML markup for navbar
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/Default"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav m-auto">
<li class="nav-item dropdown ">
<a id="menuTips" runat="server" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tips</a>
<div class="dropdown-menu dropdown-default" aria-labelledby="menuTips">
<a id="A1" class="dropdown-item " runat="server" href="~/">option1</a>
<a id="A2" class="dropdown-item " runat="server" href="~/">option2</a>
<a id="A3" class="dropdown-item " runat="server" href="~/">option3</a>
<a id="A4" class="dropdown-item " runat="server" href="~/">option4</a>
</div>
</li>
<li><a runat="server" href="~/Default">Inventory</a></li>
<li class="nav-item dropdown ">
<a id="menuHoliday" runat="server" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Holiday</a>
<div class="dropdown-menu dropdown-primary myMenu " aria-labelledby="menuHoliday">
<a id="A6" class="dropdown-item myDropDownItem" runat="server" href="~/">option1</a>
<a id="A7" class="dropdown-item myDropDownItem" runat="server" href="~/">option2</a>
</div>
</li>
<li><a runat="server" href="~/">Reports</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/">Follow</a></li>
<li><a runat="server" href="~/"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</div>
