toggle button not working in asp net core (Mobile View in browser).

Brijendra1

New member
Joined
Apr 26, 2020
Messages
1
Programming Experience
Beginner
here is my _Layout.cshtml file. What i am doing wrong? Please Help!



HTML:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <environment include="Development">
        <link href="~/css/bootstrap.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.js"></script>
        <script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>
        </environment>

    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
              integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
              crossorigin="anonymous">
        asp-fallback-href="~/css/bootstrap.min.css"
        asp-fallback-test-class="sr-only"
        asp-fallback-test-property="position"
        asp-fallback-test-value="absolute"
        asp-suppress-fallback-integrity="true"
       </environment>
    <link href="~/css/site.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <a class="navbar-brand" asp-controller="Home" asp-action="Index">
                <img src="~/images/employees.jpg" height="30" width="30" />
            </a>
            <button class ="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                       <a class="nav-link" asp-controller="Home" asp-action="Index">List</a>
                    </li>
                    <li class="nav-item">
                       <a class="nav-link" asp-controller="Home" asp-action="Create">Create</a>
                    </li>
                </ul>
            </div>
            </nav>
        <div>
            @RenderBody()
        </div>
        @if (IsSectionDefined("Scripts"))
        {
            @RenderSection("Scripts", required: true)
        }
    </div>
</body>
</html>
 
Last edited by a moderator:

Skydiver

Staff member
Joined
Apr 6, 2019
Messages
1,227
Location
Virginia Beach, VA
Programming Experience
10+
Does it work for other views in the browser?

Did you use the DevTools to see if the JavaScript event handling got setup correctly?

Anyway, this doesn't look like a C# or .NET Core issue, but a Bootstrap, JavaScript, HTML, and CSS issue.
 

Sheepings

Senior Programmer
Staff member
Joined
Sep 5, 2018
Messages
1,141
Location
UK
Programming Experience
10+
OP is using cshtml which includes server-side code for razor. That makes it a valid question to be asked. This forum has a section for design related questions. ;)

Follow the guide lines outlined here Navbar - ideally you want to read over the whole thing, but the end example will bring you closer to what you are trying to do.

In your code, your container needs something it can extend and collapse. The order of your child components are important, so be sure your markup is valid. Avoid putting your button inside the navigation you are trying to collapse. And also introduce flexbox to your code : CSS Flexbox (Flexible Box) as this will help you in cases where you want to collapse horizontal objects as well as vertical objects. - To get another example, see : Codeply and here Bootstrap Navigation Bar

Since you appear to be still in the early stages, I would opt for substituting your code for one of the working models in those links.

Moved topic to a more suitable forum.
 

Skydiver

Staff member
Joined
Apr 6, 2019
Messages
1,227
Location
Virginia Beach, VA
Programming Experience
10+
Yes the code presented in above was in Razor, which is server side, but as you pointed out the fix was in the HTML and CSS structure, not in the server side generated code. The OP would have had the same issue had he been using vanilla HTML, CSS and JavaScript.
 
Top Bottom