Почему я получаю сообщение об ошибке "Стиль элемента" не может быть вложен в стиль элемента? "?

Мне нужно переопределить некоторые элементы <style> на моей странице Razor, поэтому я вставил стили сразу после открытия кода:

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

Страница отображается корректно в браузере, но зеленые кнопки Visual Studio в <style> жалуются, что:

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

Я дважды проверил главную страницу - там не было проблем.

Что Visual Studio ожидает в этот момент? Какой правильный способ переопределить стили на странице за страницей? Через jQuery?

ОТВЕТЫ

Ответ 1

Элемент стиля не может быть вложен под <body> или дочерними элементами <body>, вместо этого он должен перейти к элементу <head> страницы.

Если вы попытаетесь переопределить стили, подобные этому, они будут вставлены в раздел по умолчанию страницы компоновки на @RenderBody(), который, как я полагаю, находится внутри <body> страницы макета, в то время как стили по умолчанию все еще остаются в <head>.

Правильный способ переопределить часть страницы макета с страницы содержимого будет чем-то в этом направлении, используя разделы 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 -->
...

Теперь, если раздел Style определен на странице содержимого, его содержимое переопределит значения по умолчанию на странице макета.

Я предлагаю вам ознакомиться с макетами и разделами Razor. Хорошую статью об этом от ScottGu можно найти здесь.

Что касается предупреждений валидации разметки Visual Studio

У Visual Studio есть проблема, когда разметка, составляющая одну страницу, разделяется между различными файлами, такими как. В большинстве случаев нет возможности для Visual Studio (или любой такой IDE, если на то пошло) знать, как различные фрагменты страницы будут динамически объединены в конце. Поэтому обычно вы не можете избежать некоторых из этих предупреждений в проекте.

Лично я игнорировал бы предупреждения, если бы знал, что я делаю, и результирующие страницы передают проверку разметки (http://validator.w3.org/).

Если вы действительно хотите скрыть предупреждения, вам необходимо отключить соответствующие параметры проверки в Visual Studio. Например. для HTML в Visual Studio 2012 это можно сделать в Инструменты > Параметры > Текстовый редактоp > HTML > Проверка.

Ответ 2

Это кажется причудой использования Razor. Валидатор не может "видеть" общий HTML, потому что он разбросан по нескольким файлам с помощью логики Razor, чтобы снова объединить все это.

Трюк, который я только что понял, - это "скрыть" <style> и </style> от валидатора. Вместо:

<style>

использование:

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

И вместо:

</style>

использование:

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

Валидатор не понимает, что эти строки генерируют <style> и </style>, поэтому он перестает жаловаться на них.

Убедитесь, что вы используете @section XXX вокруг элемента <style>, где "XXX" ссылается на @RenderSection(name: "XXX", required: false) в главном файле, который находится внутри элемента HTML <head>. Это необходимо, чтобы убедиться, что элемент <style> вставлен в элемент <head>, где он принадлежит.

Ответ 3

Я видел, как это происходило и в моих проектах. К счастью, когда вы запускаете программу, она выделяется, и все должно отображаться так, как ожидалось.

Из-за разделения контента во время разработки, я считаю, что несколько предупреждений с бритвенных страниц можно смело игнорировать.

Если CSS на самом деле не распознается, обязательно добавьте это к вопросу, но если все, что вы делаете, пытается получить идеальную сборку предупреждений, тогда вам просто нужно будет установить VS для игнорирования парсера такие ошибки.

Ответ 4

Тег стиля должен находиться в теге head, а не в теге body.

Вы должны сделать область в теге head в своем макете и поместить тег style в этот регион.

Ответ 5

Если у вас есть ViewSource, страница, отображаемая в браузере, у вас есть

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

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

Как и то, что подразумевает валидатор.

Если страница проходит проверку W3, просто игнорируйте VS. Я думаю, что он немного борется с Razor.

Ответ 6

Я думаю, что вы должны установить стиль в HeadContent

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