ti-enxame.com

Por que recebo a mensagem de erro "O elemento 'estilo' não pode ser aninhado no elemento 'estilo'"?

Eu preciso substituir alguns <style> elementos dentro da minha página do Razor, então inseri os estilos imediatamente após o bloco de código de abertura:

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

A página é renderizada corretamente no navegador, mas o Visual Studio verde riscou em <style> reclamando que:

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

Verifiquei duas vezes a página principal - não há problemas destacados lá.

O que o Visual Studio espera neste momento? Qual é a maneira correta de substituir estilos em uma página por página? Via jQuery?

15
justSteve

O elemento de estilo não pode ser aninhado nos elementos <body> Ou filho do <body>; Em vez disso, ele deve ir para o elemento <head> Da página.

Se você tentar substituir os estilos como este, eles serão inseridos na seção padrão da sua página de layout por @RenderBody(), que eu assumo estar dentro do <body> Da página de layout, enquanto o padrão os estilos ainda permanecem no <head>.

A maneira correta de substituir parte da página de layout da página de conteúdo seria algo nesse sentido, usando as seções do Razor:

_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 -->
...

Agora, se a seção Style for definida na página de conteúdo, seu conteúdo substituirá os padrões da página de layout.

Sugiro que você leia mais sobre layouts e seções do Razor. Um bom artigo sobre isso por ScottGu pode ser encontrado aqui .

Em relação aos avisos de validação de marcação do Visual Studio

O Visual Studio tem um problema quando a marcação que compõe uma única página está sendo dividida entre arquivos diferentes como este. Na maioria dos casos, não há como o Visual Studio (ou qualquer um desses IDE para esse assunto)) saber como os diferentes fragmentos de página serão reunidos dinamicamente no final. Portanto, geralmente você não pode evite alguns desses avisos em um projeto.

Pessoalmente, eu ignoraria os avisos se soubesse o que estou fazendo e as páginas resultantes passassem na validação da marcação ( http://validator.w3.org/ ).

Se você realmente deseja ocultar os avisos, desabilite as opções de validação apropriadas no Visual Studio. Por exemplo. para HTML no Visual Studio 2012, isso pode ser feito em Ferramentas> Opções> Editor de texto> HTML> Validação.

26
famousgarkin

Parece ser uma peculiaridade do uso do Razor. O validador não pode "ver" o HTML geral porque está espalhado por vários arquivos usando a lógica Razor para juntar tudo novamente.

O truque que acabei de descobrir é "ocultar" o <style> E </style> Do validador. Ao invés de:

<style>

usar:

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

E em vez de:

</style>

usar:

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

O validador não entende que essas linhas estão gerando <style> E </style>; Portanto, para de reclamar sobre elas.

Verifique se você está usando um @section XXX Em torno do elemento <style> Em que "XXX" está referenciando uma @RenderSection(name: "XXX", required: false) em um arquivo mestre que está dentro do HTML <head> elemento. Isso é necessário para garantir que o elemento <style> Seja inserido no elemento <head> Ao qual ele pertence.

3
kburgoyne

Eu já vi isso acontecer nos meus projetos também. Felizmente, quando você executa o programa, ele se descobre e tudo deve render como esperado.

Devido à separação do conteúdo no momento do design, acredito que alguns dos avisos das páginas de barbear podem ser ignorados com segurança.

Se o CSS não estiver realmente sendo reconhecido, adicione isso à pergunta, mas se tudo o que você estiver fazendo é tentar obter uma compilação perfeita sem avisos, talvez seja necessário configurar o VS para ignorar erros do analisador, como estes.

1
IronicMuffin

Eu acho que você deve definir estilo no HeadContent

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

Isso é bom para mim.

0
ToanTV

A tag de estilo deve estar na tag head, não na tag body.

Você deve criar uma região na tag head no seu layout e colocar a tag style nessa região.

0
Guffa

Se você ViewSource uma página como aparece no navegador você tem

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

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

Como é isso que o validador implica.

Se a página passar em teste de validação W , ignore o VS. Eu acho que luta um pouco com o Razor.

0
Neil Thompson