MVC 3 Razor视图引擎 - 脚本块出现DOCTYPE

Question

之前，我有一个很奇怪的问题。我已将Webforms视图引擎的视图迁移到Razor。我现在发现，当我的页面的html被渲染时，它不会在顶部呈现DOCTYPE（它应该），而是在DOCTYPE标记之前呈现一些JavaScript脚本块。我不知道是什么原因造成的。结果是浏览器以怪癖模式显示页面。这通过我的表中的字体大小不符合为身体标记设置的字体大小来体现。

我还必须提到的是，我使用Telerik的MVC扩展版本2011Q1。

下面是从HTML页的开头到头部标签的端部的页源的一部分。任何帮助为什么发生这种情况将不胜感激。

<script type="text/javascript" src="/asset.axd?id=PQEAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Uevp3WxapuPRh-d82dL-uynf9E6r6-3d8f3x7vjn8Z31UePdn7JSL5t8zKvi7fjabVYVEv7_W73-zZ_106qd7bBXrfBRV3M7Lf3zLfS-fgyK4tZ1ua2wX709XxWtMXywra638MimzQtDdG2-PSXfP-XfH_00bTlRu_auz-dXWYNU4EaXNKnezu7uzTwe7v36YMpkerep_fpl48etfU6_yX_TwAAAP__IQbpFT0BAAA%3d"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
jQuery(document).ready(function(){ 
if (!jQuery.telerik) jQuery.telerik = {}; 
jQuery.telerik.cultureInfo={"shortDate":"dd/MM/yyyy","longDate":"dd MMMM yyyy","longTime":"HH:mm:ss","shortTime":"HH:mm","fullDateTime":"dd MMMM yyyy HH:mm:ss","sortableDateTime":"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss","universalSortableDateTime":"yyyy\u0027-\u0027MM\u0027-\u0027dd HH\u0027:\u0027mm\u0027:\u0027ss\u0027Z\u0027","generalDateShortTime":"dd/MM/yyyy HH:mm","generalDateTime":"dd/MM/yyyy HH:mm:ss","monthDay":"dd MMMM","monthYear":"MMMM yyyy","days":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"abbrDays":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"abbrMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"months":["January","February","March","April","May","June","July","August","September","October","November","December",""],"am":"AM","pm":"PM","dateSeparator":"/","timeSeparator":":","firstDayOfWeek":1,"currencydecimaldigits":2,"currencydecimalseparator":".","currencygroupseparator":",","currencygroupsize":3,"currencynegative":1,"currencypositive":0,"currencysymbol":"£","numericdecimaldigits":2,"numericdecimalseparator":".","numericgroupseparator":",","numericgroupsize":3,"numericnegative":1,"percentdecimaldigits":2,"percentdecimalseparator":".","percentgroupseparator":",","percentgroupsize":3,"percentnegative":0,"percentpositive":0,"percentsymbol":"%"}; 
jQuery('#CoursesGrid').tGrid({columns:[{"title":"Id","member":"Id","type":"Number","editor":null},{"title":"Course Title:","member":"Title","type":"String","editor":null},{"title":"Completion Category","member":"CompletionCategory","type":"String","editor":null},{"title":"Expiry Months (0 to 100):","member":"ExpiryMonths","type":"Number","editor":null},{"title":"Commands","commands":[{"name":"edit","buttonType":"Image"},{"name":"delete","buttonType":"Image"}]}], plugins:["editing"], editing:{"mode":"InForm","editor":"\r\n\r\n\u003cdiv\u003e\r\n \u003cfieldset class=\"editfieldset\"\u003e\r\n  \u003clegend class=\"titlelegend\"\u003eCourse Details\u003c/legend\u003e\r\n  \u003col\u003e\r\n   \u003cli\u003e\r\n    \u003clabel for=\"Title\"\u003eCourse Title:\u003c/label\u003e \r\n    \u003cinput id=\"Title\" name=\"Title\" type=\"text\" value=\"\" /\u003e \r\n    \u003cspan class=\"field-validation-valid\" id=\"Title_validationMessage\"\u003e\u003c/span\u003e \r\n   \u003c/li\u003e\r\n   \u003cli\u003e\r\n    \u003clabel for=\"Description\"\u003eDescription:\u003c/label\u003e \r\n    \u003ctextarea cols=\"20\" id=\"Description\" name=\"Description\" rows=\"2\"\u003e\r\n\u003c/textarea\u003e \r\n    \u003cspan class=\"field-validation-valid\" id=\"Description_validationMessage\"\u003e\u003c/span\u003e \r\n   \u003c/li\u003e\r\n   \u003cli\u003e\r\n    \u003clabel for=\"ExpiryMonths\"\u003eExpiry Months (0 to 100):\u003c/label\u003e \r\n    \u003cdiv class=\"t-widget t-numerictextbox\"\u003e\u003cinput class=\"t-input\" id=\"ExpiryMonths\" name=\"ExpiryMonths\" style=\"width:100%\" value=\"0\" /\u003e\u003ca class=\"t-link t-icon t-arrow-up\" href=\"#\" tabindex=\"-1\" title=\"Increase value\"\u003eIncrement\u003c/a\u003e\u003ca class=\"t-link t-icon t-arrow-down\" href=\"#\" tabindex=\"-1\" title=\"Decrease value\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\r\n\tjQuery(\u0027#ExpiryMonths\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\r\n\u003c/script\u003e\r\n \r\n    \u003cspan class=\"field-validation-valid\" id=\"ExpiryMonths_validationMessage\"\u003e\u003c/span\u003e \r\n   \u003c/li\u003e\r\n  \u003c/ol\u003e\r\n \u003c/fieldset\u003e\r\n\u003c/div\u003e\r\n","defaultDataItem":{"Id":0,"Title":null,"Description":null,"CompletionCategory":null,"ReminderId":0,"ExpiryMonths":0,"Deleted":false,"ScheduledCourses":[]}}, dataKeys:{"Id":"id"}, validationMetadata:{"Fields":[{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"Course Title is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"Description_validationMessage","ValidationRules":[]},{"FieldName":"ExpiryMonths","ReplaceValidationMessageContents":true,"ValidationMessageId":"ExpiryMonths_validationMessage","ValidationRules":[{"ErrorMessage":"The Expiry Months (0 to 100): field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Expiry Months (0 to 100): must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"CoursesGridform"}, pageSize:0, sortMode:'single', ajax:{"selectUrl":"/Course/_IndexAjax","insertUrl":"/Course/_InsertAjax","updateUrl":"/Course/_UpdateAjax","deleteUrl":"/Course/_DeleteAjax"}, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup"}, noRecordsTemplate:'No records to display.'}); 
jQuery('#TabStrip').tTabStrip();}); 
//]]> 
</script> 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1"> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Vigilaris Solutions</title> 
    <link rel="stylesheet" href="/Content/Themes/Shared/vway-backend.css" type="text/css" /> 
    <link rel="stylesheet" href="/Content/Themes/Green/branding.css" type="text/css" /> 

    <link rel="stylesheet" href="/Content/Themes/Shared/StatusBar.css.css" type="text/css" /> 
    <link type="text/css" href="/asset.axd?id=lAAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Ucn1bLNl-1Ho4_O-bMlfdbmZV4Xb8fTarGoluNp09DX1UePdn7JKGxwVSxn1VXzwDXZ_SXf_yXfH300bbnVu_aufHNJf-7t7O6Od8f3du_TB1PC4N6n9-mXjx619Tr_Jf9PAAAA__9JtaUdlAAAAA%3d%3d" rel="stylesheet"/> 

</head> 

Answer 1

好。我已经解决了这个问题。实际上，这是Telerik相关的问题。问题如下：

在我的布局来看，我迁移Razor视图引擎脚本注册机构代码看起来如下：

@{Html.Telerik().ScriptRegistrar() 
     .Globalization(true) 
     .DefaultGroup(g => g.Combined(true).Compress(true)) 
     .Render(); 
     } 

这是一个代码块的方法和结果在JavaScript脚本块被正确渲染在DOCTYPE声明之前的页面源代码的开始处，从而导致浏览器进入怪异模式（uggglllyyy！）。

于是，我改变了Telerik的代码在我的布局着眼于以下内容：

@(Html.Telerik().ScriptRegistrar() 
     .Globalization(true) 
     .DefaultGroup(g => g.Combined(true).Compress(true)) 
) 

脚本块现在可以正确地得到在页面源端渲染和浏览器不再怪癖模式运行。

我真的希望这可以帮助其他开发者。

Answer 2

这是由将某些脚本直接写入输出流（Response.Write）引起的。 Razor使用ViewContext的Writer属性进行输出，然后将所有内容都刷新到Response。

Answer 3

我想你使用的是Telerik的MVC组件，更具体的标签？

检查您的视图模板，具体_Layout.cshtml并确保您的标记之前，你的arent调用Telerik的库。