可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I need to override some <style> elements within my Razor page so I've inserted the styles immediately after the opening code block:

@{
    ViewBag.Title = "New Account";
    Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
    #main
    {
        height: 400px;
    }
</style>

The page renders correctly in the browser but Visual Studio green squiggles at <style> complaining that:

<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>

I've doublechecked the master page - no problems highlighted there.

What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?

回答1:

The style element cannot be nested under the <body> or child elements of the <body>, instead it should go to the <head> element of the page.

If you try to override the styles like this, they get inserted into the default section of your layout page by @RenderBody(), which I assume is inside the <body> of the layout page, while the default styles still stay in the <head>.

The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:

_layout.cshtml

<head>
@if (IsSectionDefined("Style"))
{
    @RenderSection("Style");
}
else
{
    <style type="text/css">
    /* Default styles */
    </style>
}
</head>
<body>
@RenderBody()
...

page.cshtml

@{        
    Layout = "layout.cshtml";
}
@section Style
{
    <style type="text/css">        
    #main        
    {        
        height: 400px;        
    }
    </style>
}
<!-- Body content here -->
...

Now if the Style section is defined on the content page, its contents will override the defaults from the layout page.

I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.

Regarding Visual Studio markup validation warnings

Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.

Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).

If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.

回答2:

This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.

The trick I just figured out is to "hide" the <style> and </style> from the validator. Instead of:

<style>

use:

@MvcHtmlString.Create("<style type\"text/css\">")

And instead of:

</style>

use:

@MvcHtmlString.Create("</style>")

The validator doesn't understand these lines are generating <style> and </style>, so it stops complaining about them.

Make sure you're using a @section XXX around the <style> element where "XXX" is referencing a @RenderSection(name: "XXX", required: false) in a master file that is within the HTML <head> element. This is necessary to make sure the <style> element gets inserted in the <head> element where it belongs.

回答3:

I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.

Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.

If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.

回答4:

The style tag should be in the head tag, not in the body tag.

You should make a region in the head tag in your layout, and put the style tag in that region.

回答5:

If you ViewSource one the page as it appears in the browser have you got

<style type="text/css">
 //some other style stuff, then

 <style type="text/css">
  #main
  {
    height: 400px;
  }
 </style>
</style>

As that's what the validator implies.

If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.

回答6:

I think you should be set style in HeadContent

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
     <style type="text/css">
        .hideGridColumn {
            display: none;
        }
    </style>
    
</asp:Content>

That good for me.