Home View specific css in Razor Pages with _Layout.cshtml
Reply: 1

View specific css in Razor Pages with _Layout.cshtml

CBreeze Published in 2017-11-14 14:15:56Z

I have a _Layout.cshtml file with a <head> secion that looks like so:

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/layout.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I have a View called Index.cshtml (that is using _layout.cshtml as a layout) with a <head> section that looks like so:

    <link rel="stylesheet" href="css/Home/Index.css"/>
    <script src="https://cdn.datatables.net/v/bs/jq-3.2.1/dt-1.10.16/datatables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Now this line in Index.cshtml is styling my DataTables correctly, but it is messing up my layout page even though it is located in the Index.cshtml and not the _Layout.cshtml:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

I must be getting a bit messed up with how my css is working throughout my web app. I have tried using @section but I couldn't get that to work either.

So my question is how can I make the css in Index.cshtml only apply to that page rather than also affecting the css in _Layout.cshtml?

mxmissile Reply to 2017-11-14 14:22:58Z

In your _layout use the RenderSection method with the required argument set to false:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

Then in your view that requires additional css:

@section head {      
  <link href="my view specific css" rel="stylesheet" />    
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.321654 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO