Data-toggle and Data-taget are not working in asp.netcore

Muntakimur Rahman 1 Reputation point
2022-05-15T12:56:04.147+00:00

I am learning developing responsive websites in ASP.NET and Bootstrap and here I tried to develop a basic navigation bar. But I couldn't collapse it as the 'data-toggle' and 'data-target' are not working. Please help me and also give suggestion if there is any other issue in my code.

Here is the code

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<environment include="Development">

 <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
 <script src="~/lib/jquery/jquery.js"></script>
 <script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>
</environment>
<environment exclude="Staging,Production">
    <!-- CSS only -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="se-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" >

</environment>


<title>@ViewBag.Title</title>

</head>
<body>
<nav class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" asp-action ="Index" asp-controller="Home">
<img src="~/images/employees.png" height="30" width="30"/>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-action ="Index" asp-controller="Home" class="nav-link" >List</a>
</li>
<li class="nav-item">
<a asp-action ="Create" asp-controller="Home" class="nav-link" >Create</a>
</li>
</ul>
</nav>
</nav>
<div >
@RenderBody()
</div>
@RenderSection("newsec",false)
</nav>
</body>
</html>

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,196 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,278 questions
0 comments

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 56,846 Reputation points
    2022-05-15T16:40:01.943+00:00

    You are including the bootstrap css twice. Which version of bootstrap is in -/lib.

    Looks like you are using bootstrap 4 syntax with bootstrap 5 or bootstrap 5 css with bootstrap 4

    0 comments
  2. Zhi Lv - MSFT 32,016 Reputation points Microsoft Vendor
    2022-05-16T05:42:02.807+00:00

    Hi @MuntakimurRahman-4621,

    You can refer the following sample screenshots:

    Bootstrap 4 style:
    202096-image.png

    Bootstrap 5 style:
    202175-image.png

    As we can see that, when using Bootstrap 4, it will use the data-toggle and data-target to collapse The Navigation Bar. But if use Bootstrap 5, it will use the data-bs-toggle and data-bs-target attribute.

    From your code, it seems that you are using the Bootstrap 4 syntax, if that is the case, first, check the installed bootstrap, make sure it's using the Bootstrap 4. Then, rebuild your application and in the debug mode use F12 developer tools to check whether the Bootstrap reference add success.

    Or you can use the following CDN reference: (There is a space after <, please remember to delete it.) 

      < link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">  
  < script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>  
  < script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>  
  < script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    0 comments
  3. Sayviorc 1 Reputation point
    2022-08-14T19:30:03.537+00:00

    thnk help me a lot

    0 comments