第1章概述本章內(nèi)容1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)1.1.2安裝VS2013開(kāi)發(fā)環(huán)境1.1.3ASP.NETWeb應(yīng)用程序1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.1創(chuàng)建項(xiàng)目1.2.2使用NuGet更新程序包1.2.3修改項(xiàng)目配置1.2.4創(chuàng)建項(xiàng)目主頁(yè)和布局頁(yè)1.3本章示例的布局和創(chuàng)建辦法1.3.1創(chuàng)建多個(gè)區(qū)域公用的布局頁(yè)1.3.2創(chuàng)建本章示例使用的布局頁(yè)和導(dǎo)航頁(yè)1.3.3添加本章示例代碼1.4本書(shū)各章示例的運(yùn)行說(shuō)明1.4.1在桌面瀏覽器中觀察運(yùn)行結(jié)果1.4.2在手機(jī)和平板電腦模擬器中觀察運(yùn)行效果1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)1.B/S編程模型

B/S（Browser/Server，瀏覽器/服務(wù)器）編程模型是一種以HTTP為基本傳輸協(xié)議的體系結(jié)構(gòu)編程模式。在B/S編程模型中，開(kāi)發(fā)人員只需要編寫(xiě)部署在Web服務(wù)器上的應(yīng)用程序即可，而不需要編寫(xiě)專用的客戶端程序?；蛘哒f(shuō)，客戶端程序是一種通過(guò)HTTP實(shí)現(xiàn)數(shù)據(jù)傳輸?shù)耐ㄓ脩?yīng)用程序，即我們平常所說(shuō)的瀏覽器。1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)傳統(tǒng)B/S編程模型一般采用三層架構(gòu)設(shè)計(jì)。

傳統(tǒng)B/S編程模型三層架構(gòu)1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)是國(guó)際上通用的Web設(shè)計(jì)規(guī)范，凡是符合Web標(biāo)準(zhǔn)規(guī)定的設(shè)計(jì)規(guī)范的網(wǎng)站，都能用各種客戶端瀏覽器正常訪問(wèn)。

（1）W3C制定的Web設(shè)計(jì)標(biāo)準(zhǔn) Web設(shè)計(jì)標(biāo)準(zhǔn)也叫Web設(shè)計(jì)規(guī)范或者Web開(kāi)發(fā)規(guī)范，這些Web標(biāo)準(zhǔn)大部分都是由W3C和開(kāi)發(fā)商以及用戶等共同制定的，比如HTML、CSS、Graphics（SVG和CanvasAPI）、JavaScript、WebAPI、AudioandVideo以及MobileWeb等，W3C都制定了對(duì)應(yīng)的設(shè)計(jì)標(biāo)準(zhǔn)。（2）Web1.0和Web2.0 1999年，W3C制定了HTML4.01標(biāo)準(zhǔn)，隨后公布了CSS2.1標(biāo)準(zhǔn)和JavaScript標(biāo)準(zhǔn)。這種時(shí)代的HTML、CSS以及JavaScript標(biāo)準(zhǔn)統(tǒng)稱為Web1.0標(biāo)準(zhǔn)。 HTML5、CSS3、JavaScript、Canvas、SVG、WebGL以及移動(dòng)設(shè)備開(kāi)發(fā)規(guī)范等都是W3C發(fā)布的新一代Web開(kāi)發(fā)標(biāo)準(zhǔn)，為了將其和早期的設(shè)計(jì)標(biāo)準(zhǔn)區(qū)分開(kāi)，一般將這些新的設(shè)計(jì)標(biāo)準(zhǔn)統(tǒng)稱為Web2.0標(biāo)準(zhǔn)。

目前世界上流行的各種“現(xiàn)代瀏覽器”的最新版本都支持新的Web標(biāo)準(zhǔn)，例如，微軟公司的IE11.0瀏覽器、Mozilla基金會(huì)的FireFox瀏覽器、谷歌公司的Chrome瀏覽器以及Opera瀏覽器、Safari瀏覽器等.1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)

許多初學(xué)者都誤將包含各種動(dòng)畫(huà)、滾動(dòng)字幕等視覺(jué)上具有“動(dòng)態(tài)效果”的網(wǎng)頁(yè)認(rèn)為是動(dòng)態(tài)網(wǎng)頁(yè)，否則認(rèn)為是靜態(tài)網(wǎng)頁(yè)，其實(shí)這樣理解是不正確的。實(shí)際上，無(wú)論是動(dòng)態(tài)網(wǎng)頁(yè)還是靜態(tài)網(wǎng)頁(yè)，都可以展示文字、圖片、動(dòng)畫(huà)等動(dòng)態(tài)效果，但從網(wǎng)頁(yè)生成的內(nèi)部方式來(lái)看，靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)卻有著本質(zhì)的差別。

采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)比靜態(tài)網(wǎng)頁(yè)更多的功能。1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)

靜態(tài)網(wǎng)頁(yè)是指Web服務(wù)器發(fā)送到客戶端的靜態(tài)HTML頁(yè)面，其特點(diǎn)是URL固定、內(nèi)容相對(duì)穩(wěn)定、容易被搜索引擎檢索。在靜態(tài)網(wǎng)頁(yè)上，一樣可以出現(xiàn)各種動(dòng)態(tài)的效果，如動(dòng)畫(huà)、滾動(dòng)字幕等。靜態(tài)網(wǎng)頁(yè)工作原理1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.1B/S編程模型與Web標(biāo)準(zhǔn)靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)

動(dòng)態(tài)網(wǎng)頁(yè)是指Web服務(wù)器根據(jù)客戶端請(qǐng)求，隨不同用戶、不同時(shí)間的操作，動(dòng)態(tài)返回不同靜態(tài)內(nèi)容的網(wǎng)頁(yè)。換言之，當(dāng)客戶端向服務(wù)器發(fā)送請(qǐng)求時(shí)，服務(wù)器先對(duì)其進(jìn)行處理，然后再將處理結(jié)果轉(zhuǎn)換為靜態(tài)網(wǎng)頁(yè)發(fā)送到客戶端。動(dòng)態(tài)網(wǎng)頁(yè)工作原理1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.2安裝VS2013開(kāi)發(fā)環(huán)境安裝包含Update4的VS2013旗艦版下載和安裝IE11.0瀏覽器1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.3ASP.NETWeb應(yīng)用程序

ASP.NET是一個(gè)免費(fèi)的Web開(kāi)發(fā)平臺(tái)，是微軟公司在.NET框架的基礎(chǔ)上構(gòu)建的一種Web開(kāi)發(fā)架構(gòu)。OneASP.NETWeb窗體編程模型MVC編程模型1.1Web標(biāo)準(zhǔn)與VS2013開(kāi)發(fā)環(huán)境1.1.3ASP.NETWeb應(yīng)用程序MVC編程模型（1）MVC編程模型的特點(diǎn) 1）任務(wù)分離 2）基于測(cè)試驅(qū)動(dòng)的開(kāi)發(fā) 3）對(duì)HTML5和CSS3的操控能力高（2）ASP.NETMVC的版本發(fā)展 2008年，.NET框架3.5和VS2008。 2010年，.NET框架4.0和VS2010。 2012年，.NET框架4.5和VS2012（同時(shí)內(nèi)置了MVC3、MVC4以及ASP.NETWebAPI等架構(gòu)。 2013年，微軟推出了.NET框架4.5.1和VS2013，并在VS2013開(kāi)發(fā)環(huán)境中內(nèi)置了ASP.NETMVC5，同時(shí)將Web窗體、MVC、WebAPI、實(shí)時(shí)Web以及實(shí)體框架等架構(gòu)全部整合在一起。1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.1創(chuàng)建項(xiàng)目

新建項(xiàng)目運(yùn)行VS2013，單擊【新建項(xiàng)目】，在彈出的窗口中，選擇【ASP.NETWeb應(yīng)用程序】模板，修改項(xiàng)目名為Mvc5Examples，輸入或選擇一個(gè)合適的項(xiàng)目保存位置（例如E:\ls\），單擊確定在該模板中，身份驗(yàn)證默認(rèn)使用的是Owin中間件1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.1創(chuàng)建項(xiàng)目

觀察項(xiàng)目結(jié)構(gòu)

在【解決方案資源管理器】中，觀察項(xiàng)目默認(rèn)自動(dòng)創(chuàng)建的文件夾，各文件夾的含義如表所示文件夾名稱說(shuō)

明App_Data保存數(shù)據(jù)庫(kù)、XML等數(shù)據(jù)文件App_Start保存項(xiàng)目啟動(dòng)時(shí)的功能配置文件Content保存項(xiàng)目中公用的CSS文件Controllers保存控制器文件，MVC要求所有控制器的名稱都必須帶有“Controller”后綴fonts保存Bootstrap自帶的圖標(biāo)文件Models保存模型文件(.cs文件)Scripts保存項(xiàng)目引用的腳本文件Views保存視圖文件Views/Shared保存可供多個(gè)視圖共享的頁(yè)面，例如布局頁(yè)、分部頁(yè)等1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.1創(chuàng)建項(xiàng)目修改項(xiàng)目啟動(dòng)頁(yè)

選擇主菜單的【項(xiàng)目】→【Mvc5Examples屬性】命令，如圖所示，即可打開(kāi)項(xiàng)目屬性配置。在屬性配置界面中，單擊【W(wǎng)eb】選項(xiàng)卡，將創(chuàng)建項(xiàng)目時(shí)系統(tǒng)默認(rèn)的【當(dāng)前頁(yè)面】更改為【特定頁(yè)】，特定頁(yè)右側(cè)的文本框內(nèi)不需要輸入任何內(nèi)容，直接按<Ctrl>+S鍵保存配置即可

（a）

選擇項(xiàng)目屬性

（b）修改啟動(dòng)操作1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.2使用NuGet更新程序包1．更新當(dāng)前項(xiàng)目的程序包

打開(kāi)Mvc5Examples項(xiàng)目，選擇主菜單的【項(xiàng)目】→【管理NuGet程序包】命令.在彈出的窗口中，先選擇左側(cè)【更新】選項(xiàng)卡下方的【全部】選項(xiàng)，然后單擊該窗口中的【全部更新】按鈕

（a）

利用NuGet管理程序包

（b）更新當(dāng)前項(xiàng)目的程序包1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.2使用NuGet更新程序包2．添加jQueryUI選擇主菜單的【項(xiàng)目】→【管理NuGet程序包】命令，添加如圖1-11所示的引用。3．添加MicrosoftjQueryUnobtrusiveAjaxMicrosoftjQueryUnobtrusiveAjax用于實(shí)現(xiàn)頁(yè)面局部更新。使用MVC提供的Ajax幫助器時(shí)，如果希望直接用jQueryajax實(shí)現(xiàn)局部更新的功能，或者希望看到頁(yè)面局部更新期間顯示的提示信息，必須添加對(duì)該腳本文件的引用，如圖1-12所示。圖1-11添加jqueryUI圖

1-12

添加MicrosoftjQueryUnobtrusiveAjax1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.3修改項(xiàng)目配置1．修改捆綁配置2．修改腳本引用配置

當(dāng)在項(xiàng)目中新建一個(gè)JavaScript文件或者添加一個(gè)現(xiàn)有的腳本文件時(shí)，系統(tǒng)都會(huì)自動(dòng)在_references.js文件中添加一個(gè)對(duì)該腳本文件的引用。優(yōu)點(diǎn)：不需要手工修改_references.js缺點(diǎn)：如果腳本文件非常多，會(huì)給智能提示帶來(lái)很大的性能問(wèn)題，甚至可能導(dǎo)致智能提示失效。

為了解決智能提示的問(wèn)題，打開(kāi)該文件，將下面的代碼：///<autosyncenabled="true"/>

修改為：///<autosyncenabled="false"/>

這樣修改以后，即使項(xiàng)目中的腳本文件再多，也不會(huì)影響智能提示。1.2創(chuàng)建和配置ASP.NETMVC5項(xiàng)目1.2.4創(chuàng)建項(xiàng)目主頁(yè)和布局頁(yè)1．添加布局頁(yè)（_MainLayout.cshtml文件）鼠標(biāo)右擊Views文件夾下的Shared子文件夾，選擇【添加】→【新建項(xiàng)】命令，在彈出的窗口中，選擇【MVC5布局頁(yè)（Razor）】模板，將文件名稱改為_(kāi)MainLayout.cshtml，如圖1-13所示，單擊【添加】按鈕。2．添加本書(shū)示例使用的主頁(yè)創(chuàng)建Mvc5Examples項(xiàng)目后，系統(tǒng)會(huì)自動(dòng)在項(xiàng)目根目錄下的Controllers文件夾下添加一個(gè)名為HomeController.cs的文件，并自動(dòng)在該文件中添加一個(gè)名為Index的操作方法。同時(shí)，系統(tǒng)還會(huì)自動(dòng)在項(xiàng)目根目錄下的Views文件夾下創(chuàng)建一個(gè)名為Home的子文件夾，該文件夾的名稱是HomeController去掉Controller后綴得到的結(jié)果。3．修改路由配置4．修改"/Views/Shared"文件夾下的"_ViewStart.cshtml"文件5.運(yùn)行應(yīng)用程序在快捷工具欄中，選擇【InternetExplorer】選項(xiàng)，然后按<F5>鍵在調(diào)試模式下運(yùn)行應(yīng)用程序，或者按<Ctrl>+<F5>鍵在非調(diào)試模式下運(yùn)行應(yīng)用程序，稍等片刻就會(huì)在IE11.0瀏覽器中看到程序運(yùn)行的效果，如圖1-15所示。1.3本章示例的布局和創(chuàng)建辦法1．添加區(qū)域在【解決方案資源管理器】中，鼠標(biāo)右擊項(xiàng)目名，單擊【添加】→【區(qū)域】命令，在彈出的窗口中，輸入?yún)^(qū)域名稱為“Chapter01”，單擊【添加】按鈕2．添加分部頁(yè)（_AreasPartialRef.cshtml文件）_AreasPartialRef.cshtml文件用于保存布局頁(yè)引用的CSS和腳本，這樣可避免在每個(gè)布局頁(yè)中都重復(fù)定義它3．添加分部頁(yè)（_AreasPartialAjax.cshtml文件）_AreasPartialAjax.cshtml文件用于保存各章示例導(dǎo)航頁(yè)調(diào)用的Ajax和jQueryUI的Accordion方法，這樣可避免在每個(gè)導(dǎo)航文件中都重復(fù)定義它。4．添加布局頁(yè)（_AreasLayout.cshtml文件）_AreasLayout.cshtml是本書(shū)所有區(qū)域（Areas）中的示例共同使用的布局頁(yè)。所有區(qū)域共用的布局頁(yè)一般保存在項(xiàng)目根目錄下的Views/Shared文件夾下，某個(gè)區(qū)域?qū)Ｓ玫牟季猪?yè)則保存在該區(qū)域內(nèi)的Views/Shared文件夾下。在某個(gè)區(qū)域中創(chuàng)建的視圖頁(yè)，既可以引用整個(gè)項(xiàng)目公用的布局頁(yè)，也可以引用本區(qū)域內(nèi)定義的布局頁(yè)。1.3.1創(chuàng)建多個(gè)區(qū)域公用的布局頁(yè)1.3本章示例的布局和創(chuàng)建辦法1．添加本章示例使用的默認(rèn)頁(yè)面當(dāng)首次轉(zhuǎn)到某一章的示例頁(yè)面時(shí)，當(dāng)用戶還沒(méi)有選擇某個(gè)例子時(shí)，可以先顯示一個(gè)默認(rèn)的頁(yè)面2．修改本章布局頁(yè)在區(qū)域中首次添加視圖時(shí)，系統(tǒng)會(huì)自動(dòng)在對(duì)應(yīng)區(qū)域的Shared文件夾下創(chuàng)建一個(gè)_Layout.cshtml文件，將該文件換名為_(kāi)ch01Layout.cshtml（這樣做的目的僅僅是為了能明確看出是哪一章使用的布局頁(yè)，但這并不是必需的步驟）。3．修改本章的_ViewStart.cshtml文件4．添加本章示例導(dǎo)航頁(yè)5．觀察本章導(dǎo)航頁(yè)和默認(rèn)頁(yè)面的運(yùn)行效果【例1-2】顯示承載當(dāng)前網(wǎng)頁(yè)的Web服務(wù)器環(huán)境信息，在IE11.0瀏覽器中運(yùn)行的效果如圖1-21所示。1.3.2添加本章示例使用的默認(rèn)頁(yè)面1.3本章示例的布局和創(chuàng)建辦法1.3.3添加本章示例代碼1．觀察各章示例的主頁(yè)布局

本書(shū)所有章節(jié)的示例源程序都采用以下的布局形式（根據(jù)需要，可以同時(shí)用兩個(gè)導(dǎo)航區(qū)，也可以只使用其中的一個(gè)導(dǎo)航區(qū)）。Demos導(dǎo)航區(qū)（左側(cè)導(dǎo)航區(qū)）：利用區(qū)域中的超鏈接導(dǎo)航到主窗口，即在主窗口中顯示基本用法示例的運(yùn)行結(jié)果。NavDemos導(dǎo)航區(qū)（上方導(dǎo)航區(qū)）：其結(jié)果也是在“主窗口”中顯示對(duì)應(yīng)示例的運(yùn)行效果，另外，在該導(dǎo)航區(qū)的右側(cè)，有一個(gè)可返回到主頁(yè)的鏈接。2．觀察承載當(dāng)前網(wǎng)頁(yè)的Web服務(wù)器環(huán)境信息

下面的例子演示如何通過(guò)System.Web.Helps命名空間下的ServerInfo方法，顯示當(dāng)前網(wǎng)頁(yè)使用的ASP.NETWebPages版本以及該頁(yè)面請(qǐng)求的Web服務(wù)器的環(huán)境信息。1.4本書(shū)各章示例的運(yùn)行說(shuō)明1.4.1在桌面瀏覽器中觀察運(yùn)行結(jié)果按<F5>鍵調(diào)試運(yùn)行應(yīng)用程序，逐漸縮短瀏覽器的寬度，模擬觀察主頁(yè)在手機(jī)、平板電腦等不同寬度的屏幕上顯示的頁(yè)面效果。默認(rèn)情況下，當(dāng)瀏覽器寬度縮小到一定程度后，會(huì)自動(dòng)折疊主菜單，并在右上方自動(dòng)顯示一個(gè)可在“折疊/展開(kāi)”之間自動(dòng)切換的按鈕，這是Bootstrap提供的功能，在小屏幕（如手機(jī)、平板）上顯示該網(wǎng)頁(yè)時(shí)，將自動(dòng)折疊菜單項(xiàng)，在大屏幕（如桌面計(jì)算機(jī)）上顯示時(shí)，將自動(dòng)展開(kāi)菜單項(xiàng)。1.4本書(shū)各章示例的運(yùn)行說(shuō)明1.4.2在手機(jī)和平板電腦模擬器中觀察運(yùn)行效果1．在手機(jī)模擬器中觀察運(yùn)行效果在模擬器頁(yè)面中，選擇【模擬手機(jī)】，單擊導(dǎo)航鏈接，即可觀察本書(shū)各章例子模擬手機(jī)運(yùn)行的效果。例如，導(dǎo)航到第10章的例子，將看到如圖1-23所示的模擬效果。2．在平板電腦模擬器中觀察運(yùn)行效果在模擬器頁(yè)面中，選擇【模擬平板電腦】，導(dǎo)航到本書(shū)某一章的某個(gè)例子，可觀察該例子模擬平板電腦運(yùn)行的效果。例如，導(dǎo)航到第10章的另一個(gè)例子，將看到如圖1-24所示的運(yùn)行效果。習(xí)題1．簡(jiǎn)要敘述Web窗體編程模型與MVC編程模型的特點(diǎn)和優(yōu)缺點(diǎn)。2．簡(jiǎn)要回答什么是區(qū)域，區(qū)域的作用是什么？如何從主頁(yè)導(dǎo)航到區(qū)域？第2章MVC編程預(yù)備知識(shí)本章內(nèi)容2.1創(chuàng)建本章示例導(dǎo)航2.2路由及其參數(shù)傳遞2.3Razor視圖引擎2.4用于頁(yè)面全部更新的Html幫助器2.5用于頁(yè)面局部更新的Ajax幫助器2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.1創(chuàng)建本章示例導(dǎo)航1．主要?jiǎng)?chuàng)建步驟（1）添加Chapter02區(qū)域（2）添加ch02Demos控制器（h02DemosController.cs文件）。修改自動(dòng)生成的ch02DemosController.cs文件中的Index方法這樣做的目的是為了讓一個(gè)操作方法控制ch02Demos文件夾下的多個(gè)視圖，而且同時(shí)支持對(duì)Ajax請(qǐng)求和同步請(qǐng)求的處理。（3）添加本章默認(rèn)頁(yè)面（ch02Index.cshtml文件。（4）修改本章默認(rèn)引用的布局頁(yè)（_ViewStart.cshtml文件）。2．觀察本章導(dǎo)航的運(yùn)行效果2.2路由及其參數(shù)傳遞2.2.1MVC模式的處理過(guò)程在MVC模式中，客戶端首先通過(guò)URL（UniversalResourceLocators，統(tǒng)一資源定位符）向服務(wù)器發(fā)出請(qǐng)求（Request），服務(wù)器解析URL，然后轉(zhuǎn)到相應(yīng)的控制器（Controller）進(jìn)行處理，控制器處理后，再將結(jié)果通過(guò)視圖（View）返回到客戶端，作為對(duì)客戶端請(qǐng)求的響應(yīng)（Response）2.2路由及其參數(shù)傳遞2.2.2ASP.NET路由1．基本概念路由（Route）是指映射URL到處理程序的模式。在ASP.NETMVC中，所有用戶請(qǐng)求都要先經(jīng)過(guò)ASP.NET路由系統(tǒng)，才能找到控制器中對(duì)應(yīng)的操作方法（ActionMethod）。對(duì)于ASP.NETMVC來(lái)說(shuō)，每個(gè)HTTP請(qǐng)求不再像ASP.NETWebForms那樣針對(duì)一個(gè)物理文件，而是一律針對(duì)控制器中的某個(gè)操作方法。2.2路由及其參數(shù)傳遞2.2.2ASP.NET路由2．注冊(cè)和定義路由ASP.NET定義了一個(gè)全局路由表（RouteTable），路由表中的每個(gè)Route對(duì)象都包含一個(gè)路由模板?？刂破鳎–ontroller）和操作方法（ActionMethod）的名稱既可以通過(guò)路由變量以占位符（比如“{controller}”和“{action}”）的形式定義在模板中，定義全局路由是在App_Start文件夾下RouteConfig.cs文件中實(shí)現(xiàn)的。在該文件中，通過(guò)routes.MapRoute方法指定默認(rèn)匹配的全局路由代碼publicstaticvoidRegisterRoutes(RouteCollectionroutes){routes.IgnoreRoute("{resource}.axd/{*pathInfo}");routes.MapRoute(name:"Default",url:"{controller}/{action}/{id}",defaults:new{controller="Home",action="MainIndex",id=UrlParameter.Optional});}}2.2路由及其參數(shù)傳遞2.2.2ASP.NET路由3．RouteData可在ch02DemosController.cs文件的Index方法中添加下面的代碼：varroute=RouteData.Values.ToArray();然后在該行代碼的下一行設(shè)置一個(gè)斷點(diǎn),來(lái)觀察路由數(shù)據(jù)2.2路由及其參數(shù)傳遞2.2.3URL模式中的參數(shù)傳遞URL模式是指服務(wù)器通過(guò)路由系統(tǒng)解析客戶端傳遞的URL（比如瀏覽器地址欄中顯示的地址），然后將其映射到Controller中某個(gè)ActionMethod的實(shí)現(xiàn)方式。兩種方式可以將參數(shù)傳遞給操作方法1．通過(guò)id將參數(shù)傳遞給操作方法2．通過(guò)查詢字符串將參數(shù)傳遞給操作方法2.2路由及其參數(shù)傳遞2.2.3URL模式中的參數(shù)傳遞2．演示URL模式的含義和參數(shù)傳遞方法（例2-1）1．演示如何通過(guò)id將參數(shù)傳遞給操作方法2．演示如何通過(guò)查詢字符串將參數(shù)傳遞給操作方法2.3Razor視圖引擎2.3.1Razor視圖引擎與ASP.NETWebPages31．Razor視圖引擎的特點(diǎn)Razor視圖引擎是通過(guò)System.Web.Mvc.RazorViewEngine類來(lái)實(shí)現(xiàn)的，其基本實(shí)現(xiàn)原理是：當(dāng)客戶端向服務(wù)器發(fā)送請(qǐng)求后，服務(wù)器首先分析請(qǐng)求的網(wǎng)頁(yè)，然后運(yùn)行該網(wǎng)頁(yè)中編寫(xiě)的服務(wù)器端代碼，以便動(dòng)態(tài)生成可被客戶端瀏覽器解析的代碼，然后再將生成的結(jié)果發(fā)送到客戶端，供瀏覽器解析和顯示。（1）混合編程。（2）語(yǔ)法簡(jiǎn)潔。（3）與.NET框架的融合。（4）有效防止腳本攻擊。2.3Razor視圖引擎2.3.1Razor視圖引擎與ASP.NETWebPages32．Razor視圖引擎的基本架構(gòu)Razor語(yǔ)法是ASP.NET的組成部分之一，而ASP.NET是.NET框架的組成部分之一，因此，在MVC項(xiàng)目中，除了用Razor語(yǔ)法設(shè)計(jì)視圖以外，還可以在控制器和模型中使用ASP.NET以及.NET框架的所有功能2.3Razor視圖引擎2.3.2Razor語(yǔ)法基本用法演示Razor的基本用法【例2-2】演示Razor語(yǔ)法@標(biāo)記的基本用法2.3Razor視圖引擎2.3.2Razor語(yǔ)法基本用法1．@標(biāo)記在視圖中，@標(biāo)記表示其后為C#代碼的一個(gè)內(nèi)聯(lián)表達(dá)式、單語(yǔ)句塊或者多語(yǔ)句塊，下面分別介紹具體用法。（1）@變量名、@(變量名)@標(biāo)記的作用之一是作為C#變量的開(kāi)始標(biāo)記（返回C#變量的值）。一般格式為：“@變量名”或者“@(變量名)”。換言之，對(duì)于單個(gè)變量來(lái)說(shuō)，如果能將變量名和其他符號(hào)區(qū)分開(kāi)，可省略@后的小括號(hào)，否則必須加小括號(hào)。例如：<h2>@ViewBag.ChapterMyTest</h2><h2>@(ViewBag.Chapter)MyTest</h2>2.3Razor視圖引擎2.3.2Razor語(yǔ)法基本用法（2）@(表達(dá)式)@標(biāo)記的另一個(gè)作用是返回C#內(nèi)聯(lián)表達(dá)式計(jì)算的結(jié)果。當(dāng)@符號(hào)的后面為C#的內(nèi)聯(lián)表達(dá)式時(shí)，必須用大括號(hào)將表達(dá)式括起來(lái)。一般格式為：“@(表達(dá)式)”。例如：@(i+j)（3）@單條語(yǔ)句、@{語(yǔ)句塊}如果C#代碼只有1條語(yǔ)句，在@符號(hào)的后面既可以不使用大括號(hào)，也可以使用大括號(hào)；但是，如果@后面的C#代碼包含多條語(yǔ)句，則必須用大括號(hào)將這些語(yǔ)句括起來(lái)。例如：@for(vari=0;i<10;i++){}@{intage=19;}<p>該學(xué)生的年齡是：@age</P>2.3Razor視圖引擎2.3.2Razor語(yǔ)法基本用法2．注釋標(biāo)記（@*……*@）在視圖中，@*…*@和<!--…-->的作用相同，都是用來(lái)給頁(yè)面代碼添加注釋3．文件路徑表示法（“/”、“～”）相對(duì)路徑（也叫虛擬路徑）和應(yīng)用程序絕對(duì)路徑中的分隔符都用正斜杠（“/”）分隔。用相對(duì)路徑表示時(shí)，“.”表示當(dāng)前目錄，“..”表示上層目錄。用應(yīng)用程序絕對(duì)路徑表示時(shí)，用“～”符號(hào)表示應(yīng)用程序的根目錄，或者用“/”開(kāi)頭表示應(yīng)用程序的根目錄。@{vara="~/images/img1.jpg";//應(yīng)用程序絕對(duì)路徑（從項(xiàng)目的根目錄開(kāi)始）varb="/images/img.jpg";//應(yīng)用程序絕對(duì)路徑，與"~/images/img1.jpg"的作用相同varc="./images/img1.jpg";//相對(duì)路徑，它等價(jià)于"images/img1.jpg"vard="../../images/img1.jpg";//相對(duì)路徑}2.3Razor視圖引擎2.3.2Razor語(yǔ)法基本用法4．@Html.Raw方法對(duì)于@符號(hào)本身以及雙引號(hào)等特殊符號(hào)，可通過(guò)@Html.Raw方法和轉(zhuǎn)義符將其原樣顯示出來(lái)。例如：<p>@Html.Raw("@標(biāo)記的用法")</p><p>@Html.Raw("張三說(shuō)：\"今天天氣真好！\"")</p>5．分支、循環(huán)、對(duì)象和集合操作由于在視圖中可以混編C#代碼和HTML代碼，因此在C#代碼塊中，還可以使用分支語(yǔ)句、循環(huán)語(yǔ)句、數(shù)組、泛型集合以及.NET類庫(kù)的所有功能。2.3Razor視圖引擎2.3.2Razor語(yǔ)法基本用法演示在視圖中使用泛型列表的基本用法【例2-3】演示在視圖中使用泛型列表的基本用法2.4用于頁(yè)面全部更新的Html幫助器2.4.1Url幫助器URL幫助器用于生成未經(jīng)編碼的URL字符串，在視圖或者控制器中，都可以通過(guò)該幫助器得到需要的字符串表示形式。Url幫助器包含了以下擴(kuò)展方法：Url.Action方法：生成映射到操作方法的URL字符串。Url.RouteUrl方法：生成映射到路由的URL字符串。Url.Content方法：將以波形符（~）開(kāi)頭的虛擬路徑字符串轉(zhuǎn)換為絕對(duì)路徑字符串。Url.Encode方法：將指定URL字符串中的特殊字符編碼為字符實(shí)體等效項(xiàng)。例如：<ahref="@Url.Action(...)">...<a>@{strings=Url.Action("Welcome","ch02Demos");}2.4用于頁(yè)面全部更新的Html幫助器【例2-4】演示Url幫助器的基本用法2.4用于頁(yè)面全部更新的Html幫助器2.4.2Html幫助器1．Html.ActionLink和Html.RouteLinkHtml.ActionLink方法用于呈現(xiàn)HTML的超鏈接元素（a元素），利用它可指定將要在控制器中執(zhí)行的操作方法。Html.RouteLink方法也是呈現(xiàn)超鏈接元素（a元素），但它鏈接到的URL與ASP.NET的路由配置（見(jiàn)App_Start文件夾下的RouteConfig.cs文件）有關(guān)。例如：<p>用ActionLink實(shí)現(xiàn)：</p><p>@Html.ActionLink("鏈接1","Hello","ch02Demos")</p><p>用RouteLink實(shí)現(xiàn)：</p><p>@Html.RouteLink("鏈接2",new{controller="ch02Demos",action="Hello"})</p>具體使用時(shí)，可根據(jù)需要任選其中的一種實(shí)現(xiàn)形式。在后面的章節(jié)中，我們?cè)僦鸩綄W(xué)習(xí)其他Html幫助器的具體用法2.5用于頁(yè)面局部更新的Ajax幫助器2.5.1UnobtrusiveJavaScriptAjax在視圖中用jQueryajax或者Ajax幫助器實(shí)現(xiàn)局部更新需要：UnobtrusiveJavaScriptEnabled的屬性必須設(shè)置為true在項(xiàng)目根目錄下的Web.config文件的appSettings配置<appSettings>

<addkey="UnobtrusiveJavaScriptEnabled"value="true"/></appSettings>添加對(duì)jQuey的引用添加對(duì)jQueryUnobtrusiveAjax的引用2.5用于頁(yè)面局部更新的Ajax幫助器2.5.2jQueryajax有三種使用jQueryajax的辦法，不論使用哪種方式，這些方法中各個(gè)參數(shù)的含義都是相同的。$.ajax()、$.get()、$.getJSON()1.用法如下：$.ajax(url,[options]).fail(function(jqXHR,textStatus,errorThrown){}).done(function(data,textStatus,jqXHR){}).always(function(data|jqXHR,textStatus,jqXHR|errorThrown){});各參數(shù)的含義如下：1）url：客戶端請(qǐng)求的目標(biāo)URL。2）done：請(qǐng)求成功時(shí)執(zhí)行的回調(diào)函數(shù)。

3）fail：請(qǐng)求失敗時(shí)執(zhí)行的回調(diào)函數(shù)。4）always：請(qǐng)求完成時(shí)（可能成功也可能失?。﹫?zhí)行的回調(diào)函數(shù)。2.5用于頁(yè)面局部更新的Ajax幫助器2.5.2jQueryajax可選參數(shù)（options）中的常用選項(xiàng)及含義如下：1）data：指定隨請(qǐng)求一起發(fā)送到服務(wù)器的數(shù)據(jù)。數(shù)據(jù)類型可以是PlainObject、String或者Array。2）dataType：指定服務(wù)器響應(yīng)的數(shù)據(jù)類型（"xml"、"json"、"script"或者"html"），如果不指定該參數(shù)，默認(rèn)由jQuery自動(dòng)判斷是哪種數(shù)據(jù)類型。3）method：不指定時(shí)默認(rèn)為"GET"，還可以是"POST"、"PUT"等。4）context：要更新的目標(biāo)元素，一般用選擇器來(lái)指定。2．XMLHttpRequest在Ajax的回調(diào)函數(shù)中，利用XMLHttpRequest對(duì)象的responseText屬性、responseXML屬性以及responseJSON屬性，可分別獲取服務(wù)器返回的相應(yīng)數(shù)據(jù)格式的結(jié)果。2.5用于頁(yè)面局部更新的Ajax幫助器2.5.2jQueryajax3．直接用jQueryajax實(shí)現(xiàn)頁(yè)面局部更新<divid="div3"></div><script>$.ajax({url:'@Url.Action("Ajax1","ch02Demos")',success:function(result){$("#div1").html(result);},error:function(){alert("更新div1出錯(cuò)了");}});</script>控制器中對(duì)應(yīng)的Ajax1操作方法如下：publicActionResultAjax1(){strings=string.Format("{0:HH:mm:ss}",DateTime.Now);returnContent(s);}2.5用于頁(yè)面局部更新的Ajax幫助器2.5.3Ajax幫助器除了直接用jQueryajax實(shí)現(xiàn)“頁(yè)面局部更新”的功能外，還可以通過(guò)ASP.NETMVC提供的Ajax幫助器實(shí)現(xiàn)相同的功能。Ajax幫助器和Html幫助器的異同（1）使用Ajax幫助器只更新頁(yè)面中指定元素的內(nèi)容，而使用Html幫助器更新的是整個(gè)頁(yè)面。（2）使用Ajax幫助器需要通過(guò)AjaxOptions對(duì)象指定要更新的目標(biāo)元素的id和URL，而使用Html幫助器則不需要?！纠?-5】演示Ajax幫助器和jQueryajax的基本用法2.5用于頁(yè)面局部更新的Ajax幫助器2.5.3Ajax幫助器1．用Ajax幫助器，首先需要設(shè)置Ajax選項(xiàng)。屬性說(shuō)明UpdateTargetId獲取或設(shè)置服務(wù)器響應(yīng)后要更新的頁(yè)面元素的idHttpMethod獲取或設(shè)置發(fā)送HTTP請(qǐng)求的方法（“Get”或“Post”）Url獲取或設(shè)置發(fā)送請(qǐng)求的URLLoadingElementId獲取或設(shè)置加載Ajax時(shí)自動(dòng)顯示的HTML元素的id，Ajax完成后會(huì)自動(dòng)隱藏該元素LoadingElementDuration獲取或設(shè)置Ajax期間要顯示的HTML元素的動(dòng)畫(huà)持續(xù)毫秒數(shù)，如果不設(shè)置此屬性，Ajax期間將直接顯示用LoadingElementId指定的元素，而不對(duì)其進(jìn)行動(dòng)畫(huà)處理InsertMode獲取或設(shè)置使用哪種方式更新用UpdateTargetId指定的元素?cái)?shù)據(jù)，有3種可選方式：InsertAfter、InsertBefore和Replace。如果不指定該屬性，默認(rèn)為ReplaceConfirm獲取或設(shè)置在提交Ajax請(qǐng)求之前顯示的確認(rèn)對(duì)話框窗口中的消息，通過(guò)該屬性可自動(dòng)顯示確認(rèn)對(duì)話框，比如彈出“要保存所做的更改嗎？”O(jiān)nBegin獲取或設(shè)置要在更新頁(yè)面之前立即調(diào)用的JavaScript函數(shù)的名稱OnComplete獲取或設(shè)置在實(shí)例化響應(yīng)數(shù)據(jù)之后但在更新頁(yè)面之前要調(diào)用的JavaScript函數(shù)OnSuccess獲取或設(shè)置在成功更新頁(yè)面之后要調(diào)用的JavaScript函數(shù)OnFailure獲取或設(shè)置在頁(yè)面更新失敗時(shí)要調(diào)用的JavaScript函數(shù)2.5用于頁(yè)面局部更新的Ajax幫助器2.5.3Ajax幫助器有2種常見(jiàn)的用Ajax幫助器實(shí)現(xiàn)頁(yè)面局部更新的辦法一種是通過(guò)Ajax.ActionLink的參數(shù)設(shè)置局部更新選項(xiàng)Ajax.ActionLink幫助器返回一個(gè)超鏈接元素，其中包含指定操作方法的URL。單擊此超鏈接時(shí)，將自動(dòng)使用JavaScript異步調(diào)用控制器中的操作方法。通過(guò)Ajax.ActionLink發(fā)送異步請(qǐng)求時(shí)，既可以局部更新當(dāng)前頁(yè)面，也可以局部更新其他頁(yè)面。<divid="div1"></div>@Ajax.ActionLink("獲取當(dāng)前時(shí)間","Ajax1","ch02Demos",newAjaxOptions{UpdateTargetId="div1"})另一種是通過(guò)Ajax.BeginForm的參數(shù)設(shè)置局部更新選項(xiàng)。如果不指定URL，它默認(rèn)更新當(dāng)前表單（form元素）的內(nèi)容，除此之外，還可以通過(guò)Url.Action指定另一個(gè)URL。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念Bootstrap是Twitter公司的開(kāi)發(fā)人員研制的一種開(kāi)源的、移動(dòng)設(shè)備優(yōu)先的自適應(yīng)Web前端開(kāi)發(fā)框架，該架構(gòu)在jQuery的基礎(chǔ)上，實(shí)現(xiàn)了移動(dòng)設(shè)備優(yōu)先的自適應(yīng)界面顯示，其目標(biāo)是為Web開(kāi)發(fā)人員提供一個(gè)最簡(jiǎn)單的設(shè)計(jì)形式，來(lái)解決不同設(shè)備訪問(wèn)時(shí)所帶來(lái)的屏幕自適應(yīng)問(wèn)題。不論是手機(jī)、平板電腦，還是桌面計(jì)算機(jī)，它都能根據(jù)所訪問(wèn)設(shè)備的屏幕大小自動(dòng)調(diào)整界面布局，而不再需要開(kāi)發(fā)人員針對(duì)不同的設(shè)備分別設(shè)計(jì)不同的頁(yè)面。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念由于不同設(shè)備屏幕的大小和分辨率是不一樣的，為了能讓這些設(shè)備都能按最佳的方式顯示設(shè)計(jì)的網(wǎng)頁(yè)，存在兩種的解決方案：一種是針對(duì)不同的設(shè)備分別設(shè)計(jì)不同的頁(yè)面，這樣做會(huì)帶來(lái)很多重復(fù)工作，而且容易導(dǎo)致內(nèi)容的不一致；另一種是使用某種架構(gòu)，讓開(kāi)發(fā)人員只設(shè)計(jì)一個(gè)界面，即可同時(shí)自動(dòng)適應(yīng)不同的設(shè)備。Bootstrap正是為了解決設(shè)備自適應(yīng)性問(wèn)題而提供的一種解決方案。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念1．Bootstrap的主要設(shè)計(jì)思想Bootstrap的主要設(shè)計(jì)思想有兩點(diǎn)：一是移動(dòng)設(shè)備優(yōu)先的自適應(yīng)顯示模式，二是采用非介入式JavaScipt設(shè)計(jì)模式。（1）移動(dòng)設(shè)備優(yōu)先的自適應(yīng)顯示模式觀察_Layout.cshtml或者_(dá)AreasLayout.cshtml等布局頁(yè)文件的head部分。<head>

<metaname="viewport"content="width=device-width,initial-scale=1.0">

</head>2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念另外，Bootstrap還將網(wǎng)頁(yè)中顯示的內(nèi)容包含在一個(gè)或多個(gè)稱為container的容器中。用HTML的class特性聲明某個(gè)HTML元素是一個(gè)容器后（例如div），它就能按照以下分類自動(dòng)調(diào)節(jié)該容器中內(nèi)容的顯示方式。超小屏幕：屏幕寬度小于768px。小屏幕：屏幕寬度大于等于768px且小于992px。中等屏幕：屏幕寬度大于等于992px且小于1200px。大屏幕：屏幕寬度大于等于1200px。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念（2）非介入式JavaScriptBootstrap框架本質(zhì)就是利用CSS和JavaScript以及jQuery代碼，為Web開(kāi)發(fā)人員提供不同的自適應(yīng)界面樣式控制。開(kāi)發(fā)人員只需要利用Bootstrap自定義的data特性（"data-…"），就可以實(shí)現(xiàn)不同的功能而用JavaScript實(shí)現(xiàn)的代碼則是通過(guò)Bootstrap框架自動(dòng)調(diào)用的，因此也稱這種設(shè)計(jì)模式為“不顯眼的JavaScript”或者稱為“非介入式JavaScript”2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念2．在MVC項(xiàng)目中引用BootstrapBootstrap架構(gòu)主要由css文件、js文件和圖標(biāo)字體文件組成。在MVC項(xiàng)目中，與Bootstrap相關(guān)的文件夾有：Scripts、Content、fonts。Scripts文件夾包含了bootstrap提供的JavaScript文件。其中，bootstrap.js為未壓縮的JavaScript文件，bootstrap.min.js為壓縮后的JavaScript文件。Content文件夾包含了bootstrap提供的CSS樣式文件（bootstrap.css文件）和主題文件（bootstrap-theme.css文件）。fonts文件夾包含了Bootstrap提供的4個(gè)圖標(biāo)文件。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.1基本概念下面的代碼演示了在MVC項(xiàng)目的布局頁(yè)中引用Bootstrap：<html><head>

<linkhref="~/Content/bootstrap.css"rel="stylesheet"/><linkhref="~/Content/bootstrap-theme.css"rel="stylesheet"/>

@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/bootstrap")</head><body>

</body></html>2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.2常用的布局容器和對(duì)齊方式CSS類1．布局容器（1）【.container】類：用于固定寬度并支持響應(yīng)式布局的容器，這種容器在瀏覽器界面的左右都留有一定的內(nèi)邊距。例如：<divclass="container">

</div>（2）【.container-fluid】類：這是一種占瀏覽器寬度的100%，左右內(nèi)邊距（padding）均為零的容器。例如：<divclass="container-fluid">

</div>2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.2常用的布局容器和對(duì)齊方式CSS類2．橫向?qū)R方式Bootstrap提供了以下橫向?qū)R的CSS類：【.text-center】類：居中【.text-left】類：左對(duì)齊【.text-right】類：右對(duì)齊【.text-justify】類：兩端對(duì)齊【.text-nowrap】類：不自動(dòng)換行例如：<divclass="text-primarytext-center">Hello</div><divclass="center-blocktext-primarytext-center">Hello</div>2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.3常用的顏色組合CSS類Bootstrap提供了以下語(yǔ)義化的CSS名稱類：【.primary】類：藍(lán)色基調(diào)，表示主要的信息或動(dòng)作?！?success】類：綠色基調(diào)，表示成功或積極的信息或動(dòng)作。【.info】類：淺藍(lán)色基調(diào)，表示普通信息或動(dòng)作?！?warning】類：黃色基調(diào)，表示警告信息或動(dòng)作?！?danger】類：紅色基調(diào)，表示危險(xiǎn)或帶有負(fù)面效果的信息或動(dòng)作下面的代碼演示了這些語(yǔ)義化組合色的基本用法：<divclass="btn-primarytext-center">白色前景紅色背景居中顯示</div><divclass="text-primary">藍(lán)色前景（text-primary）</div>2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.3常用的顏色組合CSS類1．“text-”前綴“text-”前綴用來(lái)表示文本的前景色，這些預(yù)定義的顏色有：text-muted、text-primary、text-success、text-info、text-warning、text-danger。例如：<divclass="text-primarytext-center">藍(lán)色前景，居中顯示</div>【例2-6】演示不同“text-”前綴的顏色效果。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.3常用的顏色組合CSS類2．“bg-”前綴具有“bg-”前綴的顏色由固定的前景色和背景色組合而成：bg-primary、bg-success、bg-info、bg-warning、bg-danger例如：<divclass="bg-primarytext-center">白色前景淺藍(lán)色背景，居中顯示</div>【例2-7】演示不同“bg-”前綴的顏色效果2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.3常用的顏色組合CSS類3．“btn-”前綴具有“btn-”前綴的顏色也是由固定的前景色和背景色組合而成：btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger。另外，還可以利用btn-lg、btn-sm、btn-xs控制字體大小，例如：<pclass="btn-lgbtn-default">（btn-lgbtn-default）</p>【例2-8】演示不同“btn-”前綴的顏色組合效果2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)1．基本概念Bootstrap柵格系統(tǒng)通過(guò)一系列的行（row）與列（column）的組合創(chuàng)建流式頁(yè)面布局，其中，行（row）必須包含在【.container】類（左右有內(nèi)邊距）或者【.container-fluid】類（占瀏覽器寬度的100%，左右無(wú)內(nèi)邊距）的容器中。這樣要求是為了讓柵格系統(tǒng)能根據(jù)屏幕大小，自動(dòng)為行內(nèi)元素賦予合適的排列方式（aligment）和內(nèi)邊距（padding）<divclass="container"><divclass="row"><divclass="col-md-8">Hello1</div><divclass="col-md-4">Hello2</div></div></div>2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)按照屏幕大小，柵格系統(tǒng)用以下前綴表示不同的訪問(wèn)設(shè)備：col-xs-：表示超小屏幕設(shè)備（寬度小于768px），例如手機(jī)。col-sm-：表示小屏幕設(shè)備（寬度大于768px小于992px），例如平板電腦。col-md-：表示中等屏幕設(shè)備（寬度大于等于992px小于1200px），例如桌面計(jì)算機(jī)。col-lg-：表示大型屏幕設(shè)備（寬度大于等于1200px），例如大屏幕桌面計(jì)算機(jī)。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)Bootstrap柵格系統(tǒng)默認(rèn)具有以下行為：對(duì)超小屏幕（手機(jī)）來(lái)說(shuō)，這些列總是縱向排列（縱向堆疊）。對(duì)其他屏幕（小屏幕、中等屏幕、超大屏幕）來(lái)說(shuō)，當(dāng)超過(guò)屏幕所規(guī)定的相應(yīng)寬度閾值時(shí)，則自動(dòng)將其變?yōu)闄M向排列。柵格系統(tǒng)都具有以下特征：（1）槽寬（gutter-width）：默認(rèn)都是30px，即每列左右均保留15px的內(nèi)邊距（padding），一定要特別注意這一點(diǎn)，因?yàn)檫@會(huì)影響絕對(duì)定位顯示的位置。（2）嵌套：在一個(gè)柵格行的某列內(nèi)，可嵌套另一個(gè)柵格行。（3）如果沒(méi)有指定大于寬度閾值的設(shè)備配置，當(dāng)屏幕寬度大于閾值時(shí)，柵格系統(tǒng)將自動(dòng)按較小的閾值分配來(lái)處理。2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)Bootstrap柵格系統(tǒng)在不同屏幕大小的工作方式：特征超小屏幕設(shè)備手機(jī)(<768px)小屏幕設(shè)備平板(≥768px)中等屏幕設(shè)備桌面(≥992px)大屏幕設(shè)備桌面(≥1200px)最大容器寬度None（自動(dòng)）750px970px1170pxclass前綴.col-xs-.col-sm-.col-md-.col-lg-最大列數(shù)12121212每列寬度自動(dòng)62px81px97px2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)（1）桌面設(shè)備橫向排列、移動(dòng)設(shè)備縱向堆疊使用單一的一組【.col-md-*】柵格類，就可以創(chuàng)建一個(gè)基本的柵格系統(tǒng)?；镜臇鸥裣到y(tǒng)在手機(jī)和平板設(shè)備上將自動(dòng)縱向堆疊在一起（超小屏幕到小屏幕這一范圍），在桌面（中等屏幕、大屏幕）設(shè)備上將自動(dòng)變?yōu)樗脚帕小！纠?-9】演示僅使用一組【.col-md-*】類來(lái)定義柵格布局的情況2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)（2）移動(dòng)設(shè)備和桌面都橫向排列如果不希望在小屏幕設(shè)備上讓所有列都縱向堆疊在一起，則需要用【.col-xs-*】類、【.col-md-*】類分別指定橫向排列時(shí)各列的比例因子?！纠?-10】演示使用【.col-xs-*】類、【.col-md-*】類來(lái)定義柵格布局的情況2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)（3）手機(jī)、平板、桌面分別處理如果希望針對(duì)平板設(shè)備指定布局方式，可在grid2.cshtml的基礎(chǔ)上，僅使用【.col-sm-*】類來(lái)創(chuàng)建各列，此時(shí)桌面和大屏幕設(shè)備也將按平板設(shè)備的列分配辦法來(lái)配置列。【例2-11】演示手機(jī)、平板、桌面分別處理來(lái)定義柵格布局的情況2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)3．列偏移列偏移（offsets）是指可以根據(jù)需要向右偏移指定的列數(shù)，例如：<divclass="row"><divclass="col-md-6col-md-offset-3">col-md-6、col-md-offset-3</div></div>表示將class為【.col-md-6】的元素向右偏移3列。這是除了讓某個(gè)區(qū)塊居中以外，指定區(qū)塊位置的另一種方便的常用方式。【例2-12】演示不同的列偏移位置的變化情況2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.4Bootstrap柵格系統(tǒng)4．綜合示例下面通過(guò)一個(gè)綜合例子，演示柵格布局的基本用法?！纠?-13】演示柵格布局的綜合用法2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.5Bootstrap包含的圖標(biāo)和基本用法1．可用的圖標(biāo)CSS類Bootstrap包含的圖標(biāo)全部通過(guò)CSS類來(lái)定義和使用?！纠?-14】顯示Bootstrap提供的可在MVC項(xiàng)目中直接使用的圖標(biāo)2.6Web前端開(kāi)發(fā)架構(gòu)（Bootstrap）2.6.5Bootstrap包含的圖標(biāo)和基本用法2．圖標(biāo)基本用法使用Bootstrap提供的圖標(biāo)CSS類時(shí)，必須單獨(dú)將其class聲明包含在span元素中，不能和其他CSS類混用。例如：<buttontype="button"class="btnbtn-primary"data-toggle="tooltip"title="按鈕1"><spanclass="glyphiconglyphicon-star"></span></button>【例2-15】演示圖標(biāo)的基本用法習(xí)題習(xí)題1習(xí)題2第3章控制器、視圖和模型本章內(nèi)容3.1控制器和操作方法3.1.1創(chuàng)建本章導(dǎo)航3.1.2操作方法的返回類型3.1.3控制器中常用的屬性和對(duì)象3.2視圖（Views）及其分類3.2.1如何添加視圖文件3.2.2布局頁(yè)（LayoutPage）3.2.3視圖頁(yè)（ViewPage）和視圖（View）3.2.4分部頁(yè)（PartialPage）和分部視圖（PartialView）3.3模型和輸入驗(yàn)證3.3.1定義和引用模型3.3.2綁定模型對(duì)象3.3.3利用jQueryValidate實(shí)現(xiàn)客戶端驗(yàn)證3.3.4利用模型實(shí)現(xiàn)服務(wù)器驗(yàn)證3.1控制器和操作方法在ASP.NETMVC中，所有客戶端請(qǐng)求都要先經(jīng)過(guò)控制器中的某個(gè)操作方法來(lái)處理。添加控制器實(shí)際上就是添加一個(gè)用C#代碼編寫(xiě)的自定義的類。本節(jié)主要內(nèi)容（1）創(chuàng)建本章所有示例的導(dǎo)航（2）介紹控制器中的操作方法的各種返回類型（3）給出控制器中常用的屬性和對(duì)象3.1.1創(chuàng)建本章導(dǎo)航為了方便演示本節(jié)的各個(gè)示例，同時(shí)演示如何創(chuàng)建導(dǎo)航，本節(jié)學(xué)習(xí)如何為第3章的示例創(chuàng)建導(dǎo)航頁(yè)面。創(chuàng)建導(dǎo)航頁(yè)的步驟添加導(dǎo)航頁(yè)。修改默認(rèn)布局頁(yè)添加控制器ch03Controller.cs，修改Index頁(yè)添加控制器ch03DemosController.cs和ch03DemosController.cs添加CSS樣式表及downloadFiles文件夾，添加相關(guān)文件。3.1.1創(chuàng)建本章導(dǎo)航圖3-1本章默認(rèn)導(dǎo)航頁(yè)3.1.2操作方法的返回類型操作方法：控制器中定義的響應(yīng)客戶端請(qǐng)求的方法C#代碼編寫(xiě)定義在Controller類中Controller的功能查找要調(diào)用的操作方法，并驗(yàn)證是否可以調(diào)用該操作方法。獲取操作方法參數(shù)的值。處理在執(zhí)行操作方法期間所有可能發(fā)生的錯(cuò)誤。提供呈現(xiàn)視圖的默認(rèn)引擎?？刂破?、方法、和視圖的關(guān)系一個(gè)控制器可以定義1或多個(gè)方法一個(gè)方法可以控制1或多個(gè)視圖3.1.2操作方法的返回類型操作方法返回類型及對(duì)應(yīng)的幫助器方法返回類型幫助器方法功能描述ViewResultView將視圖呈現(xiàn)為網(wǎng)頁(yè)P(yáng)artialViewResultPartialView呈現(xiàn)分部視圖，該分部視圖定義可呈現(xiàn)在另一視圖內(nèi)的某視圖的一部分RedirectResultRedirect使用URL重定向到另一個(gè)操作方法RedirectToRouteResultRedirectToActionRedirectToRoute重定向到另一個(gè)操作方法ContentResultContent返回用戶定義的內(nèi)容類型JsonResultJson返回序列化的JSON對(duì)象JavaScriptResultJavaScript返回可在客戶端執(zhí)行的腳本FileResultFile返回要寫(xiě)入響應(yīng)中的二進(jìn)制輸出EmptyResult（None）表示沒(méi)有返回值（void）的操作方法，即返回null3.1.2操作方法的返回類型ActionResult是所有操作方法返回類型的基類，是對(duì)Action執(zhí)行結(jié)果的封裝當(dāng)對(duì)返回類型不清楚時(shí)，可以直接定義為ActionResult當(dāng)返回類型為Void或返回值為null時(shí)，最終生成一個(gè)EmptyResult對(duì)象?！纠?-1】常用的操作方法返回類型及其幫助器方法的基本用法3.1.2操作方法的返回類型ViewResultView方法返回類型為ViewResult的對(duì)象，該方法會(huì)自動(dòng)調(diào)用Razor視圖引擎將處理的數(shù)據(jù)呈現(xiàn)到視圖中，并將最終結(jié)果返回給客戶端。View有多種重載形式：(1)View()不帶參數(shù)的View方法返回與當(dāng)前操作方法同名的視圖。例如：publicActionResultIndex(){returnView();//返回與Index方法同名的視圖，即

Index.cshtml}3.1.2操作方法的返回類型(2)View(stringviewName)帶viewName參數(shù)的View方法返回名稱為viewName的視圖。例如：publicActionResultIndex(stringid){returnView(id);//返回用id指定的視圖}(3)View(objectmodel)View(objectmodel)方法返回包含要呈現(xiàn)的模型的視圖，參數(shù)model表示在控制器中創(chuàng)建的模型對(duì)象。(4)其他重載形式protectedinternalViewResultView(stringviewName,objectmodel)//返回指定視圖名稱和模型的視圖protectedinternalViewResultView(stringviewName,stringmasterName)//返回指定視圖名稱和母版頁(yè)的視圖3.1.2操作方法的返回類型2.ContentResultContent方法返回類型為ContentResult的對(duì)象，該方法先利用ControllerContext對(duì)象得到當(dāng)前HttpContext的HttpResponse對(duì)象，然后借助該對(duì)象將指定的內(nèi)容按照希望的編碼和媒體類型響應(yīng)客戶端請(qǐng)求。(1)利用該方法可動(dòng)態(tài)地返回文本內(nèi)容publicActionResultContentResultDemo(){strings=string.Format("返回結(jié)果：{0:HH:mm:ss}",DateTime.Now);returnContent(s);}@Ajax.ActionLink("ContentResult示例1","ContentResultDemo1","ch03Demos",newAjaxOptions{UpdateTargetId="div1"})<divid="div1"></div>3.1.2操作方法的返回類型2.ContentResult(2)除了返回字符串以外，在Content方法的重載參數(shù)中，還可以使用ContentEncoding和ContentType指定字符編碼方式和媒體類型（MIME類型）publicActionResultContentResultDemo2(){strings="alert('Hello');";returnContent(s,"text/javascript");}@Ajax.ActionLink("ContentResult示例2","ContentResultDemo2","ch03Demos",newAjaxOptions())3.1.2操作方法的返回類型3.JavaScriptResult在控制器中直接調(diào)用JavaScript方法，通過(guò)該方法在服務(wù)端動(dòng)態(tài)地生成一段JavaScript腳本，并以此作為對(duì)客戶端請(qǐng)求的響應(yīng)。示例：publicActionResultJavaScriptResultDemo(){returnJavaScript("alert('Hello')");}@Ajax.ActionLink("JavaScriptResult示例","JavaScriptResultDemo“,"ch03Demos",newAjaxOptions())3.1.2操作方法的返回類型4.JsonResultJSON（JavaScriptObjectNotation）是一種輕量級(jí)的數(shù)據(jù)交換格式。ASP.NETMVC提供一種機(jī)制將CLR對(duì)象轉(zhuǎn)換成JSON格式并予以響應(yīng)，這種轉(zhuǎn)換機(jī)制可以通過(guò)JsonResult來(lái)解決。示例：[HttpPost]publicActionResultJsonResultDemo1(){strings=string.Format("返回結(jié)果：{0:HH:mm:ss}",DateTime.Now);returnJson(s);}3.1.2操作方法的返回類型4.JsonResultJsonResult默認(rèn)采用的媒體類型為“application/json”，利用JsonResult對(duì)象，可返回不大于4MB的Unicode字符串?dāng)?shù)據(jù)。為了安全，默認(rèn)情況下該對(duì)象不能響應(yīng)HTTP-GET請(qǐng)求?；蛘哒f(shuō)，對(duì)于HTTP-GET請(qǐng)求來(lái)說(shuō)，操作方法會(huì)拋出一個(gè)InvalidOperationException異常。為了解決這個(gè)問(wèn)題，可以在操作方法的上面通過(guò)HttpPost特性指定它響應(yīng)的是HTTP-POST請(qǐng)求，如上面的代碼所示。在視圖中，可通過(guò)Ajax幫助器獲取該操作方法返回的結(jié)果：@Ajax.ActionLink("JsonResult示例1","JsonResultDemo1","ch03Demos“,newAjaxOptions{UpdateTargetId="div2",HttpMethod="POST"})<divid="div2"></div>3.1.2操作方法的返回類型5.FileResultFileResult是一個(gè)基于文件的ActionResult，利用FileResult可以很容易地將某個(gè)物理文件的內(nèi)容作為對(duì)請(qǐng)求的響應(yīng)返回給客戶端。ASP.NETMVC定義了3個(gè)FileResult，分別是FilePathResult、FileContentResult和FileStreamResult。(1)FilePathResultFilePathResult是一個(gè)根據(jù)物理文件路徑創(chuàng)建的FileResult，適用于從物理文件中讀取內(nèi)容的場(chǎng)合。例如，在控制器中編寫(xiě)下面的操作方法：publicActionResultFileResultDemo(){vardownloadFile=File("/Areas/Chapter03/Files/a1.doc“,"application/vnd.ms-word");returndownloadFile;}3.1.2操作方法的返回類型5.FileResult(2)FileContentResult用于將字節(jié)數(shù)組轉(zhuǎn)換為文件內(nèi)容返回給客戶端，該類型適用于需要?jiǎng)討B(tài)生成文件內(nèi)容（而不是從物理文件中讀取內(nèi)容）的場(chǎng)合。例如，在控制器中編寫(xiě)下面的操作方法：publicActionResultFileResultDemo(){byte[]fileContents=System.IO.File.ReadAllBytes(Server.MapPath("~/Areas/Chapter03/Files/a1.docx"));returnFile(fileContents,"application/vnd.ms-word","a1.docx");}在視圖中獲取該操作方法返回的結(jié)果：@Html.ActionLink("FileResult示例","FileResultDemo","ch03Demos")3.1.2操作方法的返回類型5.FileResult(3)FileStreamResult先將文件全部讀入到服務(wù)器內(nèi)存中緩存，然后再將其發(fā)送到客戶端。例如，在控制器中編寫(xiě)下面的操作方法：publicActionResultFileResultDemo(){byte[]fileContents=System.IO.File.ReadAllBytes(Server.MapPath("~/Areas/Chapter03/Files/a1.rar"));varfileStream=newSystem.IO.Memory