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