HI WELCOME TO KANSIRIS

Navigation-Menus in ASP.NET Core Application

Leave a Comment

 

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.


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 article where we discussed how to use LibMan to download client-side libraries.

https://dotnettutorials.net/lesson/how-to-install-bootstrap-in-asp-net-core/

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

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.