我需要覆盖<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？
fam*_*kin 26
style元素不能嵌套在the <body>或element子元素下<body>,而是应该转到<head>页面元素.
如果你试图覆盖这样的样式,它们会被插入到布局页面的默认部分中@RenderBody(),我假设它位于<body>布局页面内部,而默认样式仍然保留在布局页面中<head>.
使用Razor部分,从内容页面覆盖布局页面的某些部分的正确方法将是这些内容:
<head>
@if (IsSectionDefined("Style"))
{
@RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
@RenderBody()
...
@{
Layout = "layout.cshtml";
}
@section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
现在,如果在Style内容页面上定义了该部分,则其内容将覆盖布局页面中的默认值.
我建议你阅读更多关于Razor布局和部分的内容.ScottGu的一篇很好的文章可以在这里找到.
当构成单个页面的标记在这样的不同文件之间拆分时,Visual Studio会出现问题.在大多数情况下,Visual Studio(或任何此类IDE)无法知道最终如何将不同的页面片段动态组合在一起.所以通常你无法避免项目中的某些警告.
我个人会忽略警告,如果我知道我在做什么,结果页面通过标记验证(http://validator.w3.org/).
如果您确实要隐藏警告,则需要在Visual Studio中禁用相应的验证选项.例如,对于Visual Studio 2012中的HTML,可以在工具>选项>文本编辑器> HTML>验证中完成.