MVC3 - 'Element' link 'не может быть вложен в элемент 'link" - попытка добавить CSS для конкретной страницы

у меня есть страница макета thusly

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
    @RenderSection("JS", required:false)
    @RenderSection("CSS", required:false)
</head>
<body>
    @RenderBody()
</body>
</html>

и затем вид, как так

@{
    ViewBag.Title = "Home";
    Layout = "~/views/shared/_layout.cshtml";
}
@using RS.Common.HtmlHelpers;
@section JS
{
    <script src="@Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
@section CSS 
{
    <link href="@Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}

<h4>Test!</h4>

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

Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'

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

это только действительно раздражение на этом этапе, но я задавался вопросом, какова причина (и, следовательно, решение) для этой ошибки может быть?

7
asp.net-mvc asp.net-mvc-3 razor

1 ответов

вы указали HTML5 DOCTYPE и все же пытаетесь проверить как XHTML 1.0 Transitional. Я полагаю, что окончательный визуализированный HTML выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
    <link href="/content/menu.css" rel="stylesheet" type="text/css" />

    <script src="/scripts/fue.js" type="text/javascript"></script>
    <script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>

    <link href="/content/hp.css" rel="stylesheet" type="text/css" />
    <link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
    <link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h4>Test!</h4>
</body>
</html>

вы можете инвертировать порядок двух RenderSection в вашем макете, чтобы ссылки и скрипты были сгруппированы вместе. Или вы также можете переместить объявления скрипта в конец страницы:

такой:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
    @RenderSection("CSS", required:false)
</head>
<body>
    @RenderBody()

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    @RenderSection("JS", required:false)
</body>
</html>
9