In this article, I am going to discuss how to create Responsive Navigation Menus in ASP.NET Core Application using bootstrap and JQuery. Please read our previous article, where we discussed the Environment Tag Helper in ASP.NET Core Application.
On a large screen device, we want the navigation menus to look as shown below.
On a small screen device, we want to show the navigation menus like below.
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 read the following article where we discussed how to use LibMan to download client-side libraries.
How to Install Bootstrap in ASP.NET Core MVC
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.
_ViewImports.cshtml file:
Please modify the _ViewImports.cshtml file as shown below.
Please modify the _Layout.cshtml file as shown below.
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
Student.cs
Please modify the Home Controller as shown below.
Please modify the Index view as shown below.
Please modify the Details view as shown below.
Summary:
I hope this post will be helpful to understand the concept of Navigation Menus in ASP.NET Core
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉
On a large screen device, we want the navigation menus to look as shown below.
On a small screen device, we want to show the navigation menus like below.
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 read the following article where we discussed how to use LibMan to download client-side libraries.
How to Install Bootstrap in ASP.NET Core MVC
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.
_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">
<h1>@Model.Name</h1>
</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. In the next article, I am going to discuss Form Tag Helpers in ASP.NET Core Application. Here, in this article, I try to explain how to create Responsive Navigation Menus in ASP.NET Core Application using bootstrap with some examples.
Summary:
I hope this post will be helpful to understand the concept of Navigation Menus in ASP.NET Core
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉
0 comments:
Post a Comment
If you like this website, please share with your friends on Facebook, Twitter, LinkedIn.