Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve.

The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this view using the following:

<script src="assets/libs/jquery/dist/jquery.min.js"></script>

Everything seems to be working properly - the menu displays correctly, and I can render my Index.cshtml using @RenderBody().

The issue arises when I try to navigate to another page using either:

<a asp-area="" asp-controller="Home" asp-action="Privacy" aria-expanded="false"><span>Privacy</span></a>

or

<a href="@Url.Action("Privacy", "Home")"><span>Privacy</span></a>

The page tries to fetch the libraries from:

<script src="Home/assets/libs/jquery/dist/jquery.min.js"></script>

resulting in them not being found.

I would appreciate any insights on the best practices to avoid this issue.

Thank you for your assistance.

cssasp.netviewsrcshared

Answer №1

When working with asp .net core, it is important to remember that static files should be stored within the wwwroot folder. This ensures proper organization and accessibility of the files. To include static files in your project, simply place them inside the wwwroot folder and reference them in the _Layout.cshtml file like so:

<script src="~/JavaScript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/CSS/styles.css"/>

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

Combine two CSS effects in succession using Jquery

I am attempting to combine two CSS transition effects together. The first code snippet works well with 'animate': $('.txt').css({'transition': 'transform .5s ease-in-out ', 'transform': 'translate(3 ...

jquerycss

What causes the inability to separate the span size from the parent div when enlarging the span width?

Check out this Relevant Fiddle: https://jsfiddle.net/promexj1/1/ I'm working on adjusting the widths of two child spans within a parent div to be slightly smaller than the parent itself (due to starting translation 10px to the right for one of the sp ...

htmlcss

Is there a way to customize the background color when the Bootstrap 4 toggle switch is in the "checked" position?

I'm struggling to find a way to adjust the background color of the "checked" state for this toggle switch in Bootstrap 4. It utilizes an additional library for toggling between dark and light modes - you can find it here on github. While that function ...

csscheckboxbootstrap-4

Go to a different page section using MUI 5

I am currently working on a React application and I want to implement a functionality where pressing a button on my Nav Bar will navigate to a specific section on the first page. To achieve this, I have created an onClick function for my button: const onNa ...

javascripthtmlcssreactjsmaterial-ui

How do I create a sliding dropdown notification bar?

Can anyone provide some guidance on how to create a sliding dropdown section for my homepage, similar to the one on this website: . (Please note, be cautious of potential malware) I'm interested in replicating the dropdown section that says "call for ...

javascriptjqueryhtmlcss

Bootstrap: Altering grid column layout for medium and small/extra-small screens

Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width: <div class="row"> <div class="col-md-4" style="background:red;">logo</div& ...

htmlcssbootstrap-4

Creating a modal using JavaScript and CSS

When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...

javascripthtmlcssthree.js

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

htmlcss

Exploring techniques for creating realistic dimensions in CSS

My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...

javascripthtmlcssunits-of-measurementppi

Modify jQuery to update the background image of a data attribute when hovering over it

Something seems to be off with this topic. I am attempting to hover over a link and change the background image of a div element. The goal is to always display a different picture based on what is set in the data-rhomboid-img attribute. <div id="img- ...

javascriptjqueryhtmlcssmouseover

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

I am facing an issue with a button that I want to rotate upon mouse hover. The problem is, the rotation works perfectly when the mouse enters, but it continues spinning even after the mouse leaves. Here's the code snippet for better understanding: ...

csscss-animations

Can CSS be used to automatically focus on a div element?

Can CSS be used to set autofocus on a div element? <div class="form-group" style="margin-left:10px"> <label for="organizationContainer" class="nmc-label">@Res.GroupStrings.CreateNewGroupOrganization</label> <div id="organiza ...

javascripthtmlcss

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

jquery slider for inputting phone number on a mobile device

I am currently working on enhancing the user interface by implementing a feature where users can select a mobile number using a slider. The idea is that the user will choose a digit between 0 and 9 using the slider, then confirm their selection by pressing ...

jqueryhtmlcsseventsslider

Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this ca ...

javascriptjqueryhtmlcss

What is the best way to include some white space around a paragraph?

Can anyone help me figure out how to add margins to my paragraphs with borders on a website? I've tried using margin in CSS, but it's not working. Here is the HTML code I am using: body{ margin:0px; font-family:Calibri; background ...

htmlcss

Storing data using the ASP.NET state service

When operating in outproc mode with ASP.NET state service, the session values are stored in a Key-Value pair format. Have you ever wondered where these values are actually stored? Is there an in-memory database that facilitates this operation? ...

asp.net.netsession

What is the best way to rearrange the order of navbar items when working with two nav bars and a single toggle in bootstrap 4?

I am looking to implement a design with two navigation bars that share a single toggle. The first navbar should include the logo, email icon, and a search box, while the second navbar is reserved for additional links. On smaller screens, when the toggle ...

htmlcssbootstrap-4

What are some effective strategies for arranging multiple collapsible Bootstrap panels in an organized and visually appealing

I'm looking to use "collapsible bootstrap panels" to display a list, but I've run into an issue where certain panels don't align correctly when opened. For example, when I open the first panel in my code, all other panels shift down and sta ...

csstwitter-bootstrapgrid

What are the methods to ascertain whether an HTML element possesses a pseudo element?

Is there a method to identify whether an HTML element has a pseudo element (::before / ::after) applied to it without invoking the function: window.getComputedStyle(element, ":before/:after"); MODIFIED: the response is NEGATIVE The issue with getCompute ...

javascripthtmlcsspseudo-element