Css – @media media query and ASP.NET MVC razor syntax clash

asp.net-mvc-3cssmedia-queriesrazor

I've got a large site that runs in ASP.NET MVC using the Razor view engine.

I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head> of the page – usually this is one or 2 lines.

I don't particularly like putting the CSS in <head> as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.

I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the @ symbol and brackets {} it's clashing with the razor syntax:

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}

Is there a way I can get around this?

Best Answer

use double @@ symbols. That will escape @ symbol and render @media correctly on client side

Related Solutions

Asp.net-mvc – Replace line break characters with
in ASP.NET MVC Razor view

Use the CSS white-space property instead of opening yourself up to XSS vulnerabilities!

<span style="white-space: pre-line">@Model.CommentText</span>

Asp.net-mvc – How to specify different Layouts in the ASP.NET MVC 3 razor ViewStart file

You could put a _ViewStart.cshtml file inside the /Views/Public folder which would override the default one in the /Views folder and specify the desired layout:

@{
    Layout = "~/Views/Shared/_PublicLayout.cshtml";
}

By analogy you could put another _ViewStart.cshtml file inside the /Views/Staff folder with:

@{
    Layout = "~/Views/Shared/_StaffLayout.cshtml";
}

You could also specify which layout should be used when returning a view inside a controller action but that's per action:

return View("Index", "~/Views/Shared/_StaffLayout.cshtml", someViewModel);

Yet another possibility is a custom action filter which would override the layout. As you can see many possibilities to achieve this. Up to you to choose which one fits best in your scenario.

UPDATE:

As requested in the comments section here's an example of an action filter which would choose a master page:

public class LayoutInjecterAttribute : ActionFilterAttribute
{
    private readonly string _masterName;
    public LayoutInjecterAttribute(string masterName)
    {
        _masterName = masterName;
    }

    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        base.OnActionExecuted(filterContext);
        var result = filterContext.Result as ViewResult;
        if (result != null)
        {
            result.MasterName = _masterName;
        }
    }
}

and then decorate a controller or an action with this custom attribute specifying the layout you want:

[LayoutInjecter("_PublicLayout")]
public ActionResult Index()
{
    return View();
}

Best Answer

Related Solutions

Asp.net-mvc – Replace line break characters with in ASP.NET MVC Razor view

Asp.net-mvc – How to specify different Layouts in the ASP.NET MVC 3 razor ViewStart file

Related Topic

Asp.net-mvc – Replace line break characters with
in ASP.NET MVC Razor view