ASP.Net MVC Empty - CSS won't be applied

Question

Currently I'm trying to learn some HTML and ASP.Net and I'm prette confused.

I've created a new empty project with MVC settings and I can't get styling with css-files to work.

My Index-file uses a Layout-Page which itself (should) consume the css-file. I'm using the following "Syntax":

<link href=@Url.Content("~/Views/Common/Style.css") rel="stylesheet" />

At this point I don't know if you need furher informations (I really don't know what informations you could need) - please let me know.

You should read a bit about @Styles.Render() and how to declare the paths into the BundleConfig.cs that you have inside the App_Start folder. This question must be useful: http://stackoverflow.com/questions/12028401/styles-render-in-mvc4 — Mauro Bilotti, Mar 16 '15 at 13:52
There is no such file called BundleConfig.cs inside the App_Start folder. I havn't got any Content folder, too (it's an empty Web-App) — Th1sD0t, Mar 16 '15 at 14:09
You cannot put anything in the Views folder and expect the browser to download it. MVC explicitly denies any access to this folder to prevent anyone from downloading the view files directly. You need to put a folder in your root directly, such as /CSS or /Content/CSS (which is the typical location). — Erik Funkenbusch, Mar 16 '15 at 14:17

score 3 · Answer 1 · edited Oct 22 '20 at 22:18

3

To Render Styles in MVC, it's best to use Bundle Config.

In your solution you should have a folder App_Start

If you open BundleConfig.cs file you will see the Script and Style Bundles.

something like this:

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/STYLE.css"));

The Name of your Bundle above is: "~/Content/css".

To include style sheets from this Bundle you include it in the Header/Footer or anywhere in your View.

<head>
@Styles.Render("~/Content/css")
</head>

If you don't want to use the Bundle you can use Url.Content

<head>
    <link href="@Url.Content("~/Content/STYLE.css")" rel="stylesheet"/>
</head>

OR you can use the Simple HTML:

<head>
    <link href="~/Content/STYLE.css" rel="stylesheet" />
</head>

EDIT:

If you don't have the App_Start Folder you can use this:

Create App_Start Folder
Create a New Class Name it: BundleConfig.cs

        public class BundleConfig
        {
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/site.css"));
            }
        }

In your Global.asax.cs File add this Line, at the end of Application_Start Method

BundleConfig.RegisterBundles(BundleTable.Bundles);

edited Oct 22 '20 at 22:18

Mahdi Dahouei

1,588
2
12
32

answered Mar 16 '15 at 14:05

Dawood Awan

7,051
10
56
119

Thanks for your response. 1. I'm using an empty Web-App File. There is no BundleConfig.cs (I want to learn ASP thoroughly without any pre-created code). 2. I already tried to apply my css-file using @Url.Content(...) combined with your second mentioned method - no success. – Th1sD0t Mar 16 '15 at 14:13
Is your CSS file in Content or Views Folder? – Dawood Awan Mar 16 '15 at 14:17
If I inspect my Page using FIrebug there is no css applied - and if I try to access my css file directly typing in the address it can not be found. 2. I tried both, putting my css file in the Views folder and putting the css file in a self created folder Content (Root/Content). I also tried to put the css files into a Content folder in the Views folder (Root/Views/Content). No success. – Th1sD0t Mar 17 '15 at 06:18
It won't work if you put in the Views Folder. But if you could post a snapshot of the Folder Structure of your solution in the question I might be able to help. Also post the HTML you are using to load the CSS file – Dawood Awan Mar 17 '15 at 08:43

score 1 · Answer 2 · answered Mar 16 '15 at 13:55

1

Have you verified the folder location of your stylesheet? Putting them in the views folder is usually somewhat uncommon. Though its up to the developers discretion they would usually reside in /Content or something similar, but not in your views folder usually.

Is the link tag inside the head tag of the layout page?

answered Mar 16 '15 at 13:55

Dillon

687
6
9

I also tried to use a self-created Content-Folder - still does not work. Yes, the link-tag is located inside the head section. – Th1sD0t Mar 16 '15 at 14:07

score 1 · Answer 3 · answered Mar 18 '15 at 10:18

Ok, now I "solved" the mystery.

Creating a new folder "Content" and creating the css files in it did the trick - also Layout-files have to be created inside the Views folder.

Layout.cshtml implements the stylesheet

<link rel="stylesheet" href="~/Content/Style.css" />

score 0 · Answer 4 · edited Jun 29 '18 at 12:52

0

Just to add up you should also create _ViewStart.cshtml in Views folder and set there @{Layout="_Layout"} there to enable it to all views.

edited Jun 29 '18 at 12:52

Derrick

3,669
5
35
50

answered Jun 29 '18 at 12:30

nono

243
2
5

score 0 · Answer 5 · answered Oct 23 '20 at 09:05

This worked for me:

Make a wwwroot(it's a standard folder) folder at the root of project and make a css folder inside of it.
Move your .css file into css folder.
Specify the path of .css file in cshtml like so:

<head>
    <link rel="stylesheet" href="~/css/style.css" />
</head>

Notice the path is NOT ~/wwwroot/css/style.css!

ASP.Net MVC Empty - CSS won't be applied

5 Answers5