2012-05-03 34 views
7

Tôi có một trang bố trí thuslyMVC3 - liên kết 'tố '' không thể được lồng trong yếu tố 'liên kết'' - cố gắng để thêm trang cụ CSS

<!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> 

Và sau đó một cái nhìn như vậy

@{ 
    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> 

Trang tải tốt như tôi mong đợi. Tuy nhiên, tôi nhận được 3 cảnh báo:

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

Lỗi này, một cho mỗi thẻ trong phần CSS trên chế độ xem.

Nó chỉ thực sự là một khó chịu ở giai đoạn này, nhưng tôi tự hỏi nguyên nhân (và do đó giải pháp) cho lỗi này có thể là gì?

Trả lời

9

Bạn đã chỉ định DOCTYPE HTML5 và chưa xác thực là XHTML 1.0 Transitional. Tôi giả sử rằng HTML render cuối cùng trông như thế này:

<!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> 

Bạn có thể muốn đảo ngược thứ tự của hai RenderSection trong cách bố trí của bạn để liên kết và kịch bản được nhóm lại với nhau. Hoặc bạn cũng có thể cân nhắc việc di chuyển tờ khai kịch bản đến cuối trang:

Như thế này:

<!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> 
+0

Đó thực sự là nguyên nhân và cách bố trí trông rõ ràng hơn nhiều, quá. Cảm ơn Darin lần nữa. – glosrob

Các vấn đề liên quan