Utilize ViewBag to dynamically add classes to <li> elements for navigation, incorporating a sub level dependency in MVC architecture

I admire the layout and design of the TFS website, so I decided to challenge myself by recreating it using ASP.NET MVC.

My current focus is on replicating the 2-tiered horizontal navigation bar from the TFS website. Despite my efforts, I am struggling to implement this correctly and have resorted to using ViewBag to apply the active class on the selected action.

Below is the code snippet that I currently have:

<ul id="myTab" class="nav nav-tabs">
    <li class="@(ViewBag.TopTabIndex == 0 ? "active" : "")"><a href="#home" data-toggle="tab">Home</a></li>
    <li class="@(ViewBag.TopTabIndex == 1 ? "active" : "")"><a href="#reportingsuite" data-toggle="tab">Reporting Suite</a></li>
    <li class="@(ViewBag.TopTabIndex == 2 ? "active" : "")"><a href="#pivotgrid" data-toggle="tab">Pivot Grid Analysis</a></li>
    <li class="@(ViewBag.TopTabIndex == 3 ? "active" : "")"><a href="#reportserver" data-toggle="tab">Report Server Management</a></li>
    <li class="@(ViewBag.TopTabIndex == 4 ? "active" : "")"><a href="#datawarehouse" data-toggle="tab">Data Warehouse</a></li>
</ul>

While this is functioning as intended, I now face the challenge of creating a sub-level navigation system aligned with my goals, but I'm currently stuck in achieving this.

Can someone provide guidance on how I should proceed to create a sub-level dependent navigation system while utilizing ViewBag to set it as active?

My initial thoughts are reflected in the following structure:

<div class="divide-nav">
    <div class="container-fluid">
        <ul id="myTab" class="nav nav-tabs">
            <li class="@(ViewBag.TopTabIndex == 0 ? "active" : "")"><a href="#home" data-toggle="tab">Home</a></li>
            <li class="@(ViewBag.TopTabIndex == 1 ? "active" : "")"><a href="#reportingsuite" data-toggle="tab">Reporting Suite</a></li>
            <li class="@(ViewBag.TopTabIndex == 2 ? "active" : "")"><a href="#pivotgrid" data-toggle="tab">Pivot Grid Analysis</a></li>
            <li class="@(ViewBag.TopTabIndex == 3 ? "active" : "")"><a href="#reportserver" data-toggle="tab">Report Server Management</a></li>
            <li class="@(ViewBag.TopTabIndex == 4 ? "active" : "")"><a href="#datawarehouse" data-toggle="tab">Data Warehouse</a></li>
        </ul>
    </div>
</div>
<div class="sub-nav">
    <div class="container-fluid">
        <ul id="myTab" class="nav nav-tabs">
            <li class="@(ViewBag.TopTabIndex == 0.1 ? "active" : "")"><a href="#home" data-toggle="tab">Overview</a></li>
            <li class="@(ViewBag.TopTabIndex == 1.1 ? "active" : "")"><a href="#reportingsuite" data-toggle="tab">Overview</a></li>
            <li class="@(ViewBag.TopTabIndex == 2.2 ? "active" : "")"><a href="#pivotgrid" data-toggle="tab">Overview</a></li>
            <li class="@(ViewBag.TopTabIndex == 3.3 ? "active" : "")"><a href="#reportserver" data-toggle="tab">Overview</a></li>
            <li class="@(ViewBag.TopTabIndex == 4.5 ? "active" : "")"><a href="#datawarehouse" data-toggle="tab">Overview</a></li>
        </ul>
    </div>
</div>

However, I require some logic to instruct the main navigation level to display the sub-level tabs based on the integer in the ViewBag.

Please refer to the image below for an example of my desired outcome.

Two Tiered Navigation Bar:

https://i.sstatic.net/jyYIi.jpg

cssasp.netasp.net-mvchtml-listsviewbag

Answer №1

It is assumed that the integer part of the number specifies the first level nav, while the number after the decimal point specifies the second level of nav. For example, if ViewBag.TopTabIndex is 0.2, then the first list item of the first level nav and the second list item of the second level nav will be active:

 <div class="divide-nav">
            <div class="container-fluid">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="@(Math.Floor(ViewBag.TopTabIndex) == 0 ? "active" : "")"><a href="#home" data-toggle="tab">Home</a></li>
                </ul>
            </div>
        </div>
        <div class="sub-nav">
            <div class="container-fluid">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="@(ViewBag.TopTabIndex == 0.1 ? "active" : "")"><a href="#home" data-toggle="tab">Overview</a></li>
                    <li class="@(ViewBag.TopTabIndex == 0.2 ? "active" : "")"><a href="#reportingsuite" data-toggle="tab">Overview</a></li>
                </ul>
            </div>
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Place an overlay element in the top-left corner of a perfectly centered image

Currently, there is an image that is centered on the screen using flexbox: .center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> An attempt is be ...

javascripthtmlcss

What is the best way to deactivate a hyperlink on a widget sourced from a different website?

Is there a way to remove the link from the widget I embedded on my website without access to other editing tools besides the HTML code provided? For instance, we have a Trustpilot widget at the bottom of our page that directs users to Trustpilot's web ...

javascriptjqueryhtmlcss

Inserting a distinct row in the gridview following each set of x rows

Introduction I want to include a custom row every 25th row (25, 50, 75...). The custom row should contain: (start sale button)(create customer button)(textbox)(textbox)(textbox)(textbox)(textbox) This setup is meant to replicate the format of the sample ...

c#asp.netgridview

Challenges with C# extension methods for generics

I have recently delved into creating generic transform model extensions, and I managed to successfully convert a model to an Azure service bus message. However, I am now faced with the challenge of reversing this process to convert a message back to a spec ...

c#asp.net.netgenericsmodel

Adjusting the width of titles in a CSS menu upon hover

I am currently creating a basic CSS menu. However, I am facing an issue where selecting a menu title in the menu bar causes the width of the title to extend to match the width of the associated menu, which is not my desired outcome (the title's width ...

cssmenuwidthtitle

Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this ma ...

javascripthtmlcsssvg

The CSS transition feature does not seem to be functioning properly when it comes to displaying

In my Next.js application, I am using a card component with a "read more" link that should expand the card when clicked. To achieve this behavior, I integrated the "react-show-more" library from https://github.com/One-com/react-show-more. I tried to add ...

htmlcssreactjsnext.js

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling ...

htmlcss

Having trouble getting CSS hover to work on hidden elements?

I am having trouble getting the rollover effect to work correctly on this page, and I can't seem to figure out what's causing the issue. My CSS is quite basic: open{visibility:hidden;} open:hover{visibility:visible;} If you would like to take ...

cssimagestyling

Tips for directing specific mouse interactions to the underlying elements within an SVG

I'm working with a scatterplot that includes a brush layer for zooming in on the data and voronois for mouse hover snapping. However, I've encountered an issue where the click event doesn't fall through to the brush layer when the voronoi pa ...

javascriptjquerycssd3.jssvg

Is there a way to open multiple modals from various product tiles that share the same DOM structure?

I have implemented a customized boostrap modal in a single product on the PLP of my site. The HTML for this modal is as follows: <div class="modal size-variants fade pr-0" id="tumbler-size-modals" role="dialog"> <div class="modal-dial ...

htmlcsssassbootstrap-4

Tips for integrating Angular 4 with SASS

As I embark on my inaugural project utilizing Angular4 and sass, I am grappling with the best approach for working with sass. My setup involves using angular-cli with a default style configuration set to utilize scss syntax. I have also configured the comp ...

cssangularsassangular-cli

The javascript function in my file isn't being triggered by jquery

In my ASP.NET MVC project, I am facing an issue with a jQuery function in a JavaScript file located under the Scripts folder. This function is supposed to fill a textbox with the selected value upon clicking a dropdown, but for some reason it is not workin ...

javascriptjqueryasp.net-mvc

Find the exact location of the cursor on an item

I am looking to integrate an interactive map feature on my ASP page where users can click on specific locations where accidents have taken place. I have successfully added an image to the page, but I am encountering challenges in capturing mouse click ev ...

asp.net

Unable to transform Table layout into DIVs

My form for data input consists of labels with inputs, but the labels are localized so I am not sure about the length of text for different languages. To tackle this issue, I initially used a table layout: <table> <tr> <td> ...

htmlcsshtml-table

The pagination styles in Bootstrap are refusing to be overwritten by custom CSS variables

Incorporating Bootstrap version 5.3.3, I have implemented a customized WordPress theme where I have specified a range of color overrides. The custom WordPress theme stylesheet is loaded last, following the Bootstrap stylesheet. At the beginning of my the ...

csswordpressbootstrap-5css-variables

Generating JSON dynamically in C#

I am looking to dynamically create a Json object by iterating through columns, starting with an empty json object and then adding elements to it as needed. For example: List<String> columns = new List<String>{"FirstName","LastName"}; var jso ...

c#asp.netjsonc#-4.0json.net

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

Having a background in PHP, I am accustomed to using a PHP file to handle all of my ajax calls. Recently, I have been introduced to ASP.NET controls and the overall environment. I am curious about the correct method for handling ajax requests when they n ...

javascriptasp.netajaxwebforms

Examining the performance of the user interface on a web application

In my current project, I am working on optimizing the user interface of a web application used exclusively by company staff. Since the server-client connection speed is significantly faster within our internal network compared to external internet usage, m ...

javascripthtmlcssperformance

Filtering a Gridview by checking multiple checkboxes

I've taken on the challenge of creating a custom registration web application for work during my free time, and I'm encountering an issue. Essentially, I'm working on getting the Gridview to display content based on checkbox selections. I&a ...

c#asp.netgridview