Question

我有一个_Layout.cshtml文件，其<head>版似乎如此：

<head>
    <title>Dashboard</title>
    <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>
</head>

我有一个名为Index.cshtml的视图（使用_layout.cshtml作为布局），<head>部分看起来像这样：

<head>
    <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" />
</head>

现在Index.cshtml中的这一行正确地构建了我的DataTables样式，但它正在弄乱我的布局页面，即使它位于Index.cshtml而不是_Layout.cshtml：

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

我必须对我的CSS在我的网络应用程序中的工作方式感到有点混乱。我尝试过使用@section，但我也无法使用Index.cshtml。

所以我的问题是如何才能使_Layout.cshtml中的css仅适用于该页面，而不是影响{{1}}中的css？

Answer 1

在_layout中使用RenderSection方法，并将所需参数设置为false：

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    ....
    @RenderSection("head",false)
</head>

然后在您的视图中需要额外的css：

@section head {      
  <link href="my view specific css" rel="stylesheet" />    
}

使用_Layout.cshtml查看Razor Pages中的特定css

1 个答案: