What is Navigation Menus in ASP.NET Core?. The Complete ASP.NET Core Developer Course 2023 [Videos]

The ASP.NET Core Menu Bar is a graphical user interface control that serves as a navigation header for your web application or site. It supports data binding, templates, icons, multilevel nesting, and horizontal and vertical menus.

Navigation-Menus in ASP.NET Core Application

In this Video, I am going to discuss how to create Responsive Navigation Menus in ASP.NET Core Application using bootstrap and JQuery. Please read our previous Video, where we discussed the Application.

On a large screen device, we want the navigation menus to look as shown below.

Large Device Navigation Menus in ASP.NET Core Application

On a small screen device, we want to show the navigation menus like below.

Small Device Navigation Menus in ASP.NET Core Application

Adding bootstrap and JQuery files:

The most important point that you need to remember is Bootstrap 4 has a dependency on jQuery. So, here we need to download both bootstraps as well as JQuery into our application. Here, we are going to use a tool called Library Manager (LibMan) to download the required bootstrap and JQuery files. If you are new to Library Manager then I strongly recommended you to read the following Video where we discussed how to use LibMan to download client-side libraries.

Adding images Folder:

Add a folder called images with the wwwroot folder and then paste two different images with the name Logo.png and Student.png.

Adding css Folder:

Again add a folder with the name css within the wwwroot folder and then add a css file with the name MyCustomStyleSheet.css. Once you create the css file, then copy and paste the following code in it.

.btn {
   width: 80px;
}

With the above files and folders in place, your wwwroot folder should looks as shown below.

Responsive Navigation Menus in ASP.NET Core Application

_ViewImports.cshtml file:

Please modify the _ViewImports.cshtml file as shown below.

@using FirstCoreMVCApplication.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_Layout.cshtml file:

Please modify the _Layout.cshtml file as shown below.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/css/MyCustomStyleSheet.css" rel="stylesheet" />
    <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>
</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/Logo.png" width="30" height="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>
                    <li>
                        <a class="nav-link" asp-controller="home" asp-action="about">About</a>
                    </li>
                    <li>
                        <a class="nav-link" asp-controller="home" asp-action="contact">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div>
            @RenderBody()
        </div>
    </div>
</body>
</html>

Note: On a small screen device, for the navbar toggle button to work, the jQuery reference must be loaded before loading the Bootstrap JavaScript file. If you change the order, then the navbar toggle button does not work as expected.

Creating Models:

First, we need to create two enums to store the Gender and Branch of a student. So, create two models within the Models folder with the name Gender and Branch and then copy and paste the following code.

Branch.cs

namespace FirstCoreMVCApplication.Models
{
    public enum Branch
    {
        None,
        CSE,
        ETC,
        Mech
    }
}

Gender.cs

namespace FirstCoreMVCApplication.Models
{
    public enum Gender
    {
        Male,
        Female
    }
}

Please add the following Student model with the Models folder.

Student.cs

using System.Collections.Generic;
namespace FirstCoreMVCApplication.Models
{
    public class Student
    {
        public int StudentId { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public Branch Branch { get; set; }
        public Gender Gender { get; set; }
        public string Address { get; set; }
        public IEnumerable<Gender> AllGenders { set; get; }
    }
}

Modifying the Home Controller:

Please modify the Home Controller as shown below.

using FirstCoreMVCApplication.Models;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCApplication.Controllers
{
    public class HomeController : Controller
    {
        private List<Student> listStudents = new List<Student>();
        public HomeController()
        {
            listStudents = new List<Student>()
            {
               new Student() { StudentId = 101, Name = "James", Branch = Branch.CSE, Gender = Gender.Male, Address = "A1-2018", Email = "James@g.com" },
               new Student() { StudentId = 102, Name = "Priyanka", Branch = Branch.ETC, Gender = Gender.Female, Address = "A1-2019", Email = "Priyanka@g.com" },
               new Student() { StudentId = 103, Name = "David", Branch = Branch.CSE, Gender = Gender.Male, Address = "A1-2020", Email = "David@g.com" }
            };
        }
        public ViewResult Index()
        {
            return View(listStudents);
        }
        public ViewResult Details(int Id)
        {
            var studentDetails = listStudents.FirstOrDefault(std => std.StudentId == Id);
            return View(studentDetails);
        }
    }
}

Index.cshtml file:

Please modify the Index view as shown below.

@model List<Student>
@{
    ViewBag.Title = "Student List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="card-deck">
    @foreach (var student in Model)
    {
        <div class="card m-3">
            <div class="card-header">
                <h3>@student.Name</h3>
            </div>
            <img class="card-img-top" src="~/images/Student.png" />
            <div class="card-footer text-center">
                <div class="card-footer text-center">
                    <a asp-controller="home" asp-action="details"
                       asp-route-id="@student.StudentId" class="btn btn-primary m-1">View</a>
                    <a href="#" class="btn btn-primary m-1">Edit</a>
                    <a href="#" class="btn btn-danger m-1">Delete</a>
                </div>
            </div>
        </div>
    }
</div>

Detail.cshtml file:

Please modify the Details view as shown below.

@model Student
@{
    ViewBag.Title = "Student Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row justify-content-center m-3">
    <div class="col-sm-8">
        <div class="card">
            <div class="card-header">
                <h2>@Model.Name</h2>
            </div>
            <div class="card-body text-center">
                <img class="card-img-top" src="~/images/Student.png" />
                <h4>Studnet ID : @Model.StudentId</h4>
                <h4>Email : @Model.Email</h4>
                <h4>Branch : @Model.Branch</h4>
                <h4>Gender : @Model.Gender</h4>
                <h4>Address : @Model.Address</h4>
            </div>
            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary">Back</a>
                <a href="#" class="btn btn-primary">Edit</a>
                <a href="#" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

Now run the application and see the navigation menus which should be responsive.

What is Navigation Menus in ASP.NET Core?. The Complete ASP.NET Core Developer Course 2023 [Videos].

Navigation-Menus in ASP.NET Core Application

Adding bootstrap and JQuery files:

Adding images Folder:

Adding css Folder:

_ViewImports.cshtml file:

_Layout.cshtml file:

Creating Models:

Modifying the Home Controller:

Index.cshtml file:

Detail.cshtml file:

Comments (258 Comments)

Submit Your Comment

Related Posts

What is ASP.NET Core?

What is ASP.NET Core Framework?

How to Setup ASP.NET Core Environment ?

What is Bitcoin and Cryptocurrency Technologies?

What is LINQ Extension Methods in C#?

What is Asynchronous Programming with Entity Framework?

The Pros of Selling on Amazon

Instagram SEO Tactics to Rank Higher in 2022

What is Differences between IEnumerable and IQueryable in C#?

ASP.NET Web API Test Questions and Answers

ASP.NET MVC Test Questions and Answers

How to Sell on Amazon International Marketplaces?