[ASP.net WebForm] 讓Visual Studio 2010 新增的網頁項目自動加上<!DOCTYPE html> HTML5標記
在安裝完Web Standards Update for Microsoft Visual Studio 2010 SP1後，本來以為之後新增的項目都會有<!DOCTYPE html>的HTML5標記
結果
上網找其他網友的文章，看來Web Standards Update for Microsoft Visual Studio 2010 SP1這補丁只針對智能感知和驗證支援而已
安裝 HTML5 Support for Visual Studio 2010、介紹好用 Visual Studio 2010 擴充套件：Web Standards Update for Microsoft Visual Studio 2010 SP1
雖然是小細節，但每次新增的項目還要自己修改DOCTYPE屬性實在讓我的惰性發作Orz
所以研究一下怎麼在新增WebForm網頁、MasterPage、靜態網頁Html檔案時候，自動加上<!DOCTYPE html>
本人的環境為Windows XP
Visual Studio 2010 Pro SP1
先到C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE 此路徑下(64位元作業系統要到C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE底下)
有四個資料夾留意一下
在Visual Studio內對著專案右鍵>新增項目時，Visual Studio會去抓ItemTemplatesCache資料夾裡面的檔案，而ItemTemplatesCache裡的檔案來源來自ItemTemplates。
ProjectTemplates和ProjectTemplateCache則是以下範例的專案範本。
這裡就先把ItemTemplatesCache和ProjectTemplatesCache兩個資料夾刪除
※如果待會有修改「專案範本」的話，就連ProjectTemplatesCache刪除，
如果待會修改的對象只有「項目」的話，只要刪除ItemTemplatesCache資料夾就好
所謂「項目」指：
對著專案右鍵>加入新項目
以下這些東西
刪除後，如果這時開Visual Studio2010要加入新項目的話，可能會發生找不到項目的情況，不過別擔心，待會要下指令從ItemTemplates(和ProjectTemplates資料夾)更新產生檔案
以下開始如果擔心做錯的話，先準備好光碟片修復安裝或最下面有懶人包載點可以下載
接著進到ItemTemplates資料夾
會看到
如果要修改Web Site專案的話，由Web資料夾進入
如果要修改Web Application專案的話，由VisualBasic或CSharp進入
先從Web Site著手好了
進到
C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\Web\CSharp\1028路徑下
可以看到WebForm.zip檔案，把它解壓
用notepad打開WebForm.aspx和WebForm_cb.aspx
把原本的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改成<!DOCTYPE html>，之後存檔
再把修改完的WebForm.aspx和WebForm_cb.aspx丟回剛剛的WebForm.zip裡面更新
更新完，剛剛解壓後的檔案便可以刪除
同樣的步驟，接著解壓MasterPage.zip
用notepad打開MasterPage.master和MasterPage_cb.master
把原本的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改成<!DOCTYPE html>，之後存檔
MasterPage.master和MasterPage_cb.master丟回MasterPage.zip更新並刪除剛剛解壓完的檔案
還有解壓HTMLPage.zip
用notepad打開HTMLPage.htm
把原本的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改成<!DOCTYPE html>，之後存檔
再把HTMLPage.htm檔案用滑鼠拖回HTMLPage.zip做更新
C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\Web\VisualBasic\1028 這個路徑是VB語言，一樣的做法
再來修改Web Application專案
進到C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\1028路徑，並找到WebForm.zip解壓縮
(題外話，我自己測試發現雖然在Visual Studio2010新增項目時，若為WebSite的WebForm檔案預設檔名Default.aspx，若為WebApplication的WebForm檔案預設檔名WebForm.aspx
但在修改ItemTemplates時，邏輯要相反)
用notepad打開Default.aspx
把原本的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改成<!DOCTYPE html>，之後存檔
再把Default.aspx檔案用滑鼠拖回WebForm.zip做更新
MasterPage.zip則是修改Site.Master檔案
HTMLPage.zip修改HtmlPage.htm
C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\VisualBasic\Web\1028為WebApplication的VB語言，步驟一樣，就不累述
另外專案範本ProjectTemplates的做法和ItemTemplates的做法類似，進到C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplates此路徑下
有CSharp和VisualBasic(WebApplication從此進入)和Web資料夾(WebSite從此進入)，看到資料夾名稱和檔名大概就知道要改什麼，檔案很多這裡就不累述
檔案都更新後，接著要產生Cache檔讓Visual Studio2010抓取
進到Visual Studio 2010 命令提示字元
輸入
DevEnv /InstallVsTemplates
並按Enter執行
時間大概要花5分鐘左右，有點久建議讓它執行完
若執行一半關閉命令提示字元視窗的話，剛剛修改完的範本可能就不會套用或造成Visual Studio 2010之後新增項目會找不到
執行完畢後
會發現C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE此路徑下，先前刪除的ItemTemplatesCache(和ProjcetTemplatesCache)資料夾又回來了，而且檔案也都有更新
以上這樣就完成了(然後重新啟動Visual Studio 2010)
接著隨便開現有專案新增一個項目來驗證剛剛的修改
MasterPage和靜態網頁html檔案也是OK
然後建議Visual Studio 2010再搭配以下設定，效果更好
工具>選項
文字編輯器>HTML>驗證>目標改為HTML5
讓Visual Studio 2010出現HTML5的intellisense(可能需要安裝Visual Studio 2010 SP1)
既然展示了details元素，就順便聊一下最近看到知名影音網站ニコニコ動画的搜尋結果，使用了展開頁籤的寫法
點選「検索オプション」展開
如果用HTML5寫法的話
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<head>
<style type="text/css">
details div
{
background: #e3e3e3;
}
details summary
{
cursor: pointer;
}
</style>
</head>
<body>
<form runat="server">
<details>
<summary>検索オプション</summary><!--要Click的地方-->
<div>這裡放內容</div>
</details>
</form>
</body>
</html> 就不用寫任何的javascript語法了
點擊展開↓
(以上最好使用IE9+或Google Chrome執行，才會支持HTML5)
最後，月底要換新工作，如果進公司還要從頭設定大概要弄很久
這裡準備一個懶人包載點：https://dotblogsfile.blob.core.windows.net/user/shadow/1204/2012412231924552.rar
下載完解壓縮後把裡面的檔案放到C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates路徑下覆蓋
(64位元作業系統則放到C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates底下)
並從Visual Studio2010命令提示字元執行DevEnv /InstallVsTemplates 更新完即可
Visual Web Developer 2010因為沒有命令提示字元工具(？
有個折衷的辦法，先把檔案丟到C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\VWDExpress\ItemTemplates
再把C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\VWDExpress\ItemTemplatesCache刪除
把C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\VWDExpress\ItemTemplates
全部另外複制一份命名為C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\VWDExpress\ItemTemplatesCache
經測試
Windows XP+Visual Studio 2010 Pro SP1
Windows XP+Visual Web Developer 2010 SP1
Windows 7(64bit)+Visual Studio 2010 Ultimate
Windows 7(64bit)+Visual Studio 2010 Ultimate SP1
都可適用
※雖然MVC3的View預設就是<!DOCTYPE html>，但如果要在MVC3專案裡新增WebForm的話，還是更新一下懶人包裡的檔案
參考文章：
Changing the default HTML Templates to HTML5 in Visual Studio
HTML5 & CSS3 in Visual Studio 2010 SP1
How to Create HTML5 Website and Page Templates for Visual Studio 2010
