如何在ASP.NET MVC 2中使用jQuery UI控件
原創【51CTO獨家特稿】問：我想給我的ASP.NET MVC輸入表單添加一個日期選擇控件，但模型-視圖-控制器（MVC）并沒有提供這樣的輔助方法，我該如何添加控件？
答：和ASP.NET Web表單不一樣，MVC架構沒有提供可以在設計面板中拖放的有狀態的服務端控件，相反，MVC鼓勵使用簡單的HTML布局元素和基于數據的標簽作為頁面布局的要素，功能和最終的布局用客戶端JavaScript和CSS樣式表控制。
MVC提供了一套基于HtmlHelper的擴展方法渲染大部分HTML標簽，對于更復雜的功能，你需要自己編寫HTML/JavaScript代碼，購買第三方MVC控件包或使用開源的JavaScript庫，目前最流行的開源JavaScript庫是jQuery，當你在Visual Studio 2010中創建新的MVC 2項目時，實際上已經包括了jQuery核心庫。
jQuery架構一直遵循“不唐突JavaScript（Unobtrusive JavaScript）”的原則，它將HTML標簽和添加客戶端行為的JavaScript腳本分離開來，使用這個技術，開發人員可以使用簡單的<div>，<span>和<table>標簽及class屬性創建頁面布局，使用沒有連接JavaScript事件的HTML列表，錨和基于表單的標簽收集和顯示數據，最終的頁面將會很干凈，在任何瀏覽器中都能顯示，并且更適合搜索引擎機器人抓取。開發人員在文檔對象模型（DOM）中給選中的控件添加jQuery腳本，并添加屬性、事件和額外的標簽，這個腳本創建具體的外觀，對UI行為進行響應，執行動畫和管理遠程調用。
jQuery庫細分為核心庫和其它插件庫，包括一套UI小部件，核心庫提供選擇、設定樣式、DOM操作和Ajax功能，jQuery庫可以通過創建插件的形式進行擴展，jQuery UI是一套插件，它包括許多高級行為，如對話框、拖放和調整大小、主題部件，如自動完成，側邊欄，標簽和日期選擇器。
jQuery UI插件
如果要使用UI庫，必須先從jQuery UI網站下載它，在網站主頁你可以生成一個自定義版本下載，在準備好下載前，請注意選擇你要使用的組件（默認選中了所有組件），組件版本（通常應該選擇最新版本）和一個預配置的主題，然后下載并解壓.zip文件，在解壓后的文件夾下，你應該會看到多個文件夾，包括CSS和JS文件夾。
將你下載的自定義主題添加到項目中，從CSS目錄下將style文件夾復制到MVC項目的Content文件夾下，從js文件夾下將自定義jQuery UI腳本庫復制到項目的Script文件夾下。我下載了最新的1.8.4版本，如果你想使用Web部署包部署你的項目，一定要添加style文件夾和JavaScript文件到你的Visual Studio項目中，否則你會發現程序在本地環境中可以運行，但到了生產環境就會失敗。
ASP.NET MVC架構由模型、視圖和控制器組成，模型簡單說就是使用DataAnnotation屬性裝飾過的數據類，所有URL都轉換成調用控制器上的公共方法，控制器操作傳遞給它的數據，并創建視圖需要的數據，視圖的主要任務是渲染控制器創建的數據，視圖和ASP.NET頁面有點類似，但它后面沒有代碼，視圖可以是強類型，這意味著它們期望建立一個數據對象控件傳遞給它們進行渲染，這個對象在整個視圖中可以通過一個強類型模型變量訪問，為了渲染基于表單的控件，如文本框和單選按鈕變得更容易，視圖使用了一套HtmlHelper方法，通過一個叫做Html的變量訪問。這些擴展方法通常基于Model類和字段上的DataAnnotation屬性訪問模型的模型數據和元數據。
將下面的腳本添加到視圖頁面的Master頁面（默認是Site.Master），用你下載的jQuery UI庫替換<your style here>，我這里使用“微軟”風格。
- <link href="<%=Url.Content("~/Content/<your style here>
- /jquery-ui-1.8.4.custom.css")%>" rel="stylesheet" type="text/
- css" />
- <script type="text/javascript" src="<%=Url.Content("~/Scripts/
- jquery-1.4.1.min.js")%>" ></script>
- <script type="text/javascript" src="<%=Url.Content("~/Scripts/
- jquery-ui-1.8.4.custom.min.js")%>" >
確保jQuery核心庫（這里是jquery-1.4.1.min.js）的script標簽出現在jQuery UI庫的標簽前，否則當你運行程序時，你會收到一個類似于“jQuery未定義”的腳本錯誤。
為了給視圖頁面增加日歷控件，首先使用HtmlHelper TextBox擴展方法給視圖添加一個TextBox：
- <%= Html.TextBox("TestDatePicker"
- , Model.TestDatePicker.ToString("d"),
- new { @class = "myDatePickerClass" })%>
所有獲得代表一個C#類實例的Model變量的強類型視圖頁面通過控制器傳遞給視圖，在這個例子中，Model指的是包含一個DateTime字符（TestDatePicker）的類，注意TextBox使用ToString()方法為TestDate-Picker字段設置了一個初始格式化的值，這是必需的，因為jQuery DatePicker控件只有當你在日歷控件中選擇了一個日期后才會應用它的dateFormat選項。
接下來，向你的Master頁面添加下面的jQuery腳本，myDatePickerClass類必須和添加到TextBox的類匹配。
- <script type="text/javascript">
- $(document).ready(
- function () {
- $(".myDatePickerClass ").datepicker({
- buttonImage: '<%=Url.Content("~/Content/
- images/calendar.gif")%>',
- dateFormat: 'm/d/yy',
- showOn: 'button',
- buttonImageOnly: true
- })
- }
- );
- </script>
打開頁面，當你點擊文本框右側的日歷圖標時，將會看到一個如圖1所示的日歷控件，選擇一個日期填充到文本框中，你也可以修改文本框中的日期，彈出的日歷控件會做出相應的變化，注意jQuery不會允許你在文本框中輸入一個無效的日期。
【編輯推薦】
