Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page.

https://i.stack.imgur.com/J0hsp.png

  @{string classContent = Request.QueryString["routeName"] != "/Category" ? "container" : "";}; 
  <div id="Content" class="body-wrapper @classContent">

The issue I am facing is that Request.QueryString["routeName"] always returns empty and I cannot determine why.

Can anyone explain why it remains empty or suggest a better method for assigning a different class based on the current page?

htmlcssasp.net

Answer №1

I was able to resolve the issue using this code snippet:

   var segments = Request.Url.AbsolutePath.Split(new[] { '/' }, StringSplitOptions.RemoveEmptyEntries);
   string classContent = "container";
   if (segments.Count() > 1) { classContent = segments[1] != "category" ? "" : "container";}

The function Request.Url.AbsolutePath retrieves the complete URL.

https://i.stack.imgur.com/XtRbI.png

Next, I divided the URL into segments and stored them in a list.

Subsequently, I checked if the list is long enough to correspond to a different page rather than the homepage.

Finally, I verified if the second section of the URL is /Category and assigned the appropriate CSS class based on the URL output.

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

Is the expected outcome not accurate when Deserializing a Json Object?

As I work on a JSON example, I have encountered a situation where I need to bind a gridview to a JSON object as the datasource. The following code snippet shows how this can be achieved: protected void Page_Load(object sender, EventArgs e) { ...

c#asp.netjsongridview

Incorporating Ace Editor into a jQuery UI Resizable Element

I am attempting to create a resizable Ace editor by placing it inside a resizable component. Despite my efforts with the jQuery UI Resizable component, I am unable to get the ace editor to display within the resizable component. Code: <!doctype html> ...

jqueryhtmljquery-uiace-editor

Determine the precise location of a screen element with jQuery

Can anyone help me determine the precise position of an element on the current visible screen using jQuery? My element has a relative position, so the offset() function only gives me the offset within the parent. Unfortunately, I have hierarchical divs, ...

javascriptjqueryhtmlcss

What is the best way to alter the header in Django when a user is authenticated?

In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...

javascriptpythonhtmldjangovue.js

Refresh table in php without the need to reload the entire page

Currently, I am retrieving data in a table from the database and have three buttons - update, delete, and an active/inactive button. Each button has its own functionality, but I need to reload the updated data in the table after any event without refreshin ...

phphtmlmysql

How to Convert Pixel Units to Rem and Em in CSS?

Until recently, I developed my website exclusively using pixels, which has made it less responsive than I'd like. Is there a method to efficiently convert pixel measurements to rem/em units, allowing for quicker and easier modifications? ...

cssresponsive-design

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

To toggle the visibility of elements, I have created a unique function that accepts an object and a boolean. Depending on the boolean value, either 'none' or 'initial' is assigned to the 'display' property of the specified obj ...

javascripthtml

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

cssangularangular-material

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

javascriptjquerycsshtml

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5

Executing a YUI function via HTMLJSGlobal called is feasible

Recently, I stumbled upon the Dial example on the official YUI website and was thoroughly impressed. I managed to get the function working perfectly in a JS file, but now I am facing issues trying to call it within the HTML page with specific parameters su ...

htmlfunctionyui

How to merge text (string) with date in HTML using JavaScript

I am attempting to blend a day with the phrase "this is the day" in HTML. I gave it a shot, but the concatenation didn't work as expected. ...

javascripthtml

How to place a button in SwiperJs using React

Can anyone provide guidance on how to position the navigation buttons in a manner similar to the image below? The desired layout is for the buttons to appear on the outer edges of the swiper component. You can refer to this demo for more information. htt ...

cssreactjstailwind-cssswiper.js

How to create nested nav menus that are optimized for touch-screen devices?

When it comes to creating responsive websites, one challenge I frequently encounter is designing a multi-level nav menu that functions effectively for touch devices. Many plugins and methods exist, but most fall short because they do not allow a second-l ...

htmlcssresponsive-designnavigation

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...

cssangulartypescriptforms

Tips for renaming property names during JSON serialization in asp.Net

In my MVC Web API Controller, there is a method that I have exposed: [HttpPost] public JsonResult<CustomClass> Details(RequestClass request) { var encoding = Encoding.GetEncoding("iso-8859-1"); var settings = new ...

c#asp.netjsonasp.net-mvcasp.net-web-api

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

Using JavaScript's document.write method to display HTML code, along with a variable retrieved from a Flash application

Can I ask two questions at once? Firstly, how can I achieve the following? document.write(' <div id="jwplayer"> <center> <div id='mediaplayer'></div> <script type="text/javascript"> jwplayer('mediapl ...

javascripthtmljwplayerrtmp

My div is currently being concealed by a jQuery script that is hiding all of its

Below is the current code snippet: jQuery(document).ready(function($) { $("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() { $("#available-widgets-list div:not([id*='layers-widget']) ...

javascriptjqueryhtmlcss