ASP.NET MVC Razor and css block

Question

I want some flexibility in my css style block so i decide to inject some server side code, f.e.

#defaultGameContainer {
            position: relative;
            width: @(SiteConfig.Instance.Game.Width + "px");
            height: 600px;
            top: 100px;
            left: 50%;
            margin-left: -480px;
        }

But it seems not work, i have a error in VS like 'unexpected characters sequence...' Are we restricted to use Razor syntax in css? Thanks.

Mahdi Alkhatib · Accepted Answer · 2017-07-18 09:25:57Z

5

Actually, you can add a custom CSS block for a specific .cshtml View by following these instructions:

First off, Define in the .cshtml view your custom CSS block

@section CustomCSS{ 
<style>
    #floorsList > tbody > tr > td {
        vertical-align: middle
    }
</style>
}

Then, you need to embed this CustomCSS section in _layout.cshtml file:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Your Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Styles", false)
    <!--Consider the following line -->
    @RenderSection("CustomCSS", required: false)
 </head>
 <body>
 </body>
</html>

answered Jul 18, 2017 at 9:25

Mahdi Alkhatib

1,9821 gold badge32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CarComp Over a year ago

This is limited to layouts

Szakus · Accepted Answer · 2013-10-14 12:31:44Z

3

css/js files are not parsed by mvc razor views engine

you can create CssController (be sure you don't have Css folder in project directory) which returns plain text

controller:

public class CssController : Controller
{
    [OutputCache(Duration = 6000, VaryByParam = "l")]
    public ActionResult generatecss()
    {
        return View("generatecss");
    }
}

view: generatecss.cshtml

@{ Layout = ""; }
#defaultGameContainer {
        position: relative;
        width: @(SiteConfig.Instance.Game.Width + "px");
        height: 600px;
        top: 100px;
        left: 50%;
        margin-left: -480px;
    }

put it in layout as stylesheet

<link href="~/Css/generatecss" rel="stylesheet"/>

answered Oct 14, 2013 at 12:31

Szakus

813 bronze badges

1 Comment

Transformer Over a year ago

Hi your need to return the correct type/mime type in the controller

Edi Wang · Accepted Answer · 2013-10-14 08:35:42Z

1

I believe you can use LESS Css for .NET http://www.dotlesscss.org/

answered Oct 14, 2013 at 8:35

Edi Wang

3,6476 gold badges37 silver badges51 bronze badges

4 Comments

igorGIS Over a year ago

Thank you for response. I think it is little overhead to linking entire library to achieve so simple task, because i have only simple css block that not intended to grow later.

Edi Wang Over a year ago

@igorGIS humm.. then you can use ajax to retrive "SiteConfig.Instance.Game.Width" and assign it using jquery to your #defaultGameContainer: $("#defaultGameContainer").css("width", ajaxResult)

igorGIS Over a year ago

Sounds like a solution. Very strange, as i remember we can use <%= %> syntax in asp.net 4 in any part of page, including css bloks. Why we can't in MVC

Edi Wang Over a year ago

because CSS are not registered type to MVC's Razor engine, only cshtml are recognized. So you can only put css block into <style> tag within a cshtml page, this can work. But seperate .css file won't be processed by razor.

igorGIS · Accepted Answer · 2013-10-15 13:35:08Z

0

Thanks you guys! All you suggest is just fine! And at the end of experimenting i found that it works even with those annoying VS warnings. So we can just mix c# with css just in <style>...</style> block in main _layout.cshtml and ingore those warnings.

answered Oct 15, 2013 at 13:35

igorGIS

1,9565 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Razor and css block

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related