Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Add active class to layout bootstrap navbar in MVC

How to add an active class to my bootstrap navbar in MVC with?

Hers is code example,

Whenever nav links clicked "navHelperExtension" class MakeActiveClass method adds active class to nav list item.

<ul id="topMenu" class="navbar-nav">
<li id="navHome" class="@navHelperExtension.MakeActiveClass("Index", "Home")">
<a id="acHome" class="nav-link" href="@Url.Action("Index", "Home")">Home </a>
</li>
<li id="navAbout" class="@navHelperExtension.MakeActiveClass("About","Home")">
<a id="acAbout" class="nav-link" href="@Url.Action("About", "Home")">About us </a>
</li>
<li id="navTeam" class="@navHelperExtension.MakeActiveClass("Team","Details")">
<a id="acTeam" class="nav-link" href="@Url.Action("Team", "Details")">Our Team</a>
 </li>
<li id="navContact" class="@navHelperExtension.MakeActiveClass("Contact","Details")">
<a id="acContact" class="nav-link" href="@Url.Action("Contact", "Details")">Contact </a>
 </li>
</ul>

C# static class and method to make current selected controller link active

public static class
navHelperExtension
    {
  public static string MakeActiveClass(string controller)
        {
            System.Web.Mvc.UrlHelper urlHelper= ((System.Web.Mvc.WebViewPage)WebPageContext.Current.Page).Url;
 
            string result = "nav-item active";
 
       string controllerName =urlHelper.RequestContext.RouteData.Values["controller"].ToString();
 
            if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
            {
                result = "nav-item";
            }
 
            return result;
        }
}

Display loading progress bar (or wait progress) for MVC server-side calls in jQuery

With following JavaScript call back function sample, you can display progress for .net MVC non ajax server calls.

Note: Add default “DisplayProgressClass” to div

JavaScript code example,

initializeCallAndProgres (userHideProgress);
function initializeCallAndProgres(callback) {
            setTimeout(function () {
                //page js logic
                JsPageData();
                if (typeof callback == 'function')
                   //call back to stop progress
                    callback();
            }, 1500);
        };

 

var userEndprogress = function () //here
to stop progress, remove progress class
    addOrRemoveClass(false, "#dvPageProgress", "DisplayPogressClass");
   

Creating class and objects in plain or classic JavaScript

In ECMAScript6(ES6) JavaScript Classes introduced and JavaScript Classes are templates or blueprint for JavaScript Objects.

Note: JavaScript can function as both a procedural and an object-oriented language.

Code example

//Class or blueprint 
class Car {
    constructor(name, model, year, cartype) {
        this.Name = name;
        this.Model = model;
        this.Year = year;
        this.CarType = cartype;
    }
    GetSafetyDetails() {
        var details = "Global NCAP 5-star rating in adult occupant";
        details += " 4-star in child safety, making it the top safest car";
        return details;
}
}

 

//real world instance(object) of car class or blueprint
let mahindraXUV300 = new Car("Mahindra XUV300", "XUV300 W8 Diesel", "2019", "SUV");
mahindraXUV300.GetSafetyDetails();