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

Question

question

19227595 asked May 15, '22 Sayviorc-2001 published 4 days ago

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

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>

  <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 -->

 </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>

dotnet-aspnet-core-general dotnet-aspnet-webpages

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-05-15T16:40:01.943Z

Bruce-SqlWork answered May 15, '22

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

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 2 · 2022-05-16T05:42:02.807Z

ZhiLv-MSFT answered May 16, '22 ZhiLv-MSFT edited May 16, '22

Hi @MuntakimurRahman-4621,

You can refer the following sample screenshots:

Bootstrap 4 style:

Bootstrap 5 style:

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

image.png (95.6 KiB)

image.png (103.1 KiB)

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 3 · 2022-08-14T19:30:03.537Z

Sayviorc-2001 answered 4 days ago Sayviorc-2001 published 4 days ago

thnk help me a lot

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question