The Dropdownlist menu from Metro UI CSS does not function properly when placed in an ASP page within a subfolder

I'm currently facing an issue with my asp.net application in C# that utilizes Metro UI CSS for the Dropdownlist menu. The problem arises when the Dropdownlist menu works properly on pages within the same folder as the master page, but fails to function when the master page is used with a subfolder ASP page.

Specifically, I receive an error in Google Chrome stating: "Failed to load resources, the server responded with a status of 404 (not found)." This error pertains to all the .js and .css files.

Any assistance or guidance would be greatly appreciated.

Below is the script that I have included in the head section of my master page:

<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/jquery-ui.min.js"></script>
<script src="Scripts/js/jquery.min.js"></script>
<script src="js/docs.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.widget.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/metro.min.js"></script>

<link href="css/metro-bootstrap.css" rel="stylesheet" />
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="css/iconFont.css" rel="stylesheet" />
<link href="css/docs.css" rel="stylesheet" />
<link href="fonts/iconFont.dev.svg" rel="stylesheet"/>
<link href="fonts/iconFont.eot" rel="stylesheet"/>
<link href="fonts/iconFont.json" rel="stylesheet"/>
<link href="fonts/iconFont.svg" rel="stylesheet"/>
<link href="fonts/iconFont.ttf" rel="stylesheet"/>
<link href="fonts/iconFont.woff" rel="stylesheet"/>

<link href="fonts/" rel="stylesheet"/>
<link href="fonts/metroSysIcons.svg" rel="stylesheet"/>
<link href="fonts/metroSysIcons.ttf" rel="stylesheet"/>
<link href="fonts/metroSysIcons.woff" rel="stylesheet"/>

The issue persists in that while I can use the Dropdownlist menu in .aspx pages located in the main directory where the Master page is situated, I encounter problems when attempting to use the same menu on another .aspx page in a subfolder that uses the same master page. This issue is related to the Metro UI CSS.

Thank you for any assistance provided.

jqueryhtmlcssasp.net

Answer №1

Try using the ResolveClientUrl method to dynamically link your JavaScript files in your master page. Simply place all your js files in one folder and reference them in the following manner:

<script src="<%: ResolveClientUrl("~/Scripts/jquery-2.0.3.min.js") %>" type="text/javascript"></script>

This concept can also be applied to CSS files:

<link href="<%: ResolveClientUrl("~/css/metro-bootstrap.css") %>" rel="stylesheet" />

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

Troubleshooting issues with the sidebar navigation in Laravel project using Vue and AdminLTE

I successfully installed AminLte v3 via npm in my Laravel + vue project and everything is functioning properly. However, I am facing an issue when I attempt to click on the main menu item in the Side navbar that is labeled as <li class="nav-item has-tr ...

javascriptcsslaravelvue.jsadminlte

Leveraging the power of HTML5's details element for optimized printing

The <details> HTML5 element is used to provide a simple show/hide functionality. While this feature works well on-screen, it poses an issue when printing as any closed <details> elements disappear in the printed version. I attempted to fix th ...

cssprinting

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes

The function PageMethod will provide the complete page content

Our team is currently utilizing jQuery to make AJAX requests, but we are encountering an issue where the page's content is being returned every time. We are working within the .NET Framework version 2 environment. $.ajax({ type: "POST", url: "ajaxPa ...

jqueryasp.netajax

Executing JavaScript function by clicking on <img>

I've been developing a website similar to YouTube, and I'm facing difficulties with the Like/Dislike feature for comments. Currently, I have implemented it in the following way: when a user clicks on an image (thumbsUp.png or thumbsDown.png), a ...

javascriptphphtmlajax

Tips for integrating YouTube links into PHP

As someone who is relatively new to PHP, I am currently working on pulling information from an AirTable database and displaying it on a webpage, which I have successfully done. Now, I need to include a video along with the numerical data, with each set of ...

phphtml

Optimal method for organizing REST URIs

Let's consider the scenario where we have the following classes and need to establish REST URIs: class Profile{ IList<Upload> Uploads{get;} } class Upload{ int ProfileId; int CategoryId; } class Category{ IList<Upload> Uploads{ ...

asp.net.netrestasp.net-core-webapi

Set up a jquery code that ensures a loading effect will only be displayed one time

After clicking on a specific icon, I dynamically add a loading message to the DOM. The issue arises when the user clicks twice, resulting in two instances of the loading message appearing simultaneously. How can I ensure that only one "loading..." message ...

javascriptjquery

Creating HTML within a Servlet by incorporating additional quotation marks

Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class=&quot;myDiv&quot;>"); This code snippet ends up generating the following HTML source in the brows ...

javahtmlspringjsp

Error: The input value provided does not match the expected format

After examining the code below, I encountered an issue where attempting to add an item to an ASP DropDownList resulted in a System.FormatException: Input string was not in a correct format error being generated. using System; using System.Collections.Gene ...

asp.netexceptiondrop-down-menuadditionformatexception

Sticky CSS - A guide to making aside elements fill the entire available height

How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...

csscss-positionsticky

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

jquerycssjquery-uijquery-pluginsfullcalendar

How to implement the onRowClick event in ASP.NET Gridview to show record details without using a Details/Select button

I'm currently working with a gridView and have configured a button within it to display detailed information when clicked. This button calls the DetailsView() function, which executes an SQL command and binds the data to a repeater for a custom detail ...

jqueryasp.netvb.netgridviewwebforms

Upon loading the page, trigger the controller method by utilizing the information from the query string

Can query string data be retrieved on page load with javascript? Here is how I am attempting to achieve this in my project: The view page displays tabular data. When a button is pressed, it retrieves the row's id and invokes a javascript function. ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

Individuals have the capability to utilize .php as an image extension

It seems that someone is able to use any type of extension as long as they add .png at the end of the link. is currently being used, causing users on my website to log out when visiting the homepage. I tried to stop this issue, but unfortunately, my sol ...

phphtmlmysql

Modify the appearance of the datepicker and set the field to be view-only

As a beginner in jquery and the date picker, I'm struggling to change the date format to YYYY-MM-DD and restrict users from typing in the field, allowing only date selection. I have tried various methods without success. Any help or guidance would be ...

javascriptjqueryhtmljquery-ui

Curious as to why JavaScript restricts the use of two variables entering at the same time

Currently, I am tackling an Ajax-php livesearch programming challenge. I am facing an issue where JavaScript is unable to receive the values of 2 parameters that I want to input in HTML input boxes. Any idea why this might be happening? This is my HTML co ...

javascripthtmlajax

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

javascripthtmlcss

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui