對(duì)Asp.net MVC 架構(gòu)網(wǎng)站設(shè)計(jì)相關(guān)技術(shù)的探討

孫央麗

摘 要：本文簡(jiǎn)單介紹了基于 asp.net 環(huán)境下使用MVC 架構(gòu)設(shè)計(jì)一個(gè)網(wǎng)站所涉及的技術(shù)。并通過一個(gè)簡(jiǎn)單例子展示了設(shè)計(jì)一個(gè)網(wǎng)站涉及的數(shù)據(jù)庫(kù)設(shè)計(jì)、EDM 對(duì)象生成、控制器創(chuàng)建、視圖創(chuàng)建等內(nèi)容，并對(duì)關(guān)鍵代碼做了展示盒介紹。

關(guān)鍵詞：asp.net MVC EDM ORM 網(wǎng)站設(shè)計(jì)

網(wǎng)絡(luò)技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)發(fā)展初期只能簡(jiǎn)單共享一些文字圖片信息，現(xiàn)在是網(wǎng)頁(yè)圖文、聲音、視頻并茂。HTML5 標(biāo)簽直接提供了對(duì)音頻和視頻的支持。Css3技術(shù)使得現(xiàn)在的網(wǎng)站頁(yè)面能實(shí)現(xiàn)手機(jī)端，電腦端自適應(yīng)展示?，F(xiàn)在的網(wǎng)站系統(tǒng)可以通過網(wǎng)絡(luò)實(shí)現(xiàn)對(duì)各種后臺(tái)業(yè)務(wù)系統(tǒng)的接口調(diào)用和系統(tǒng)無(wú)縫集成，并可以感知用戶地理位置?，F(xiàn)在的網(wǎng)頁(yè)可以實(shí)現(xiàn)直接使用傳遞自定義數(shù)據(jù)模型（Model）到網(wǎng)頁(yè)中，生成html代碼來展示。現(xiàn)在的網(wǎng)站后臺(tái)系統(tǒng)可以實(shí)現(xiàn)使用新的數(shù)據(jù)查詢語(yǔ)言對(duì)自定義數(shù)據(jù)模型進(jìn)行查詢。

我們可能會(huì)問：使用20年前asp網(wǎng)站設(shè)計(jì)也可以將ADO Recordset自定義數(shù)據(jù)集嵌套在網(wǎng)頁(yè)中展示??？網(wǎng)上看看確實(shí)還有很多這樣的系統(tǒng)。

但查看這些網(wǎng)站系統(tǒng)后臺(tái)源代碼，會(huì)發(fā)現(xiàn)這些網(wǎng)頁(yè)往往將業(yè)務(wù)邏輯有關(guān)代碼以“意大利面條式”的方式嵌套在網(wǎng)頁(yè)HTML代碼中。無(wú)論是從軟件工程“高內(nèi)聚低耦合”原則角度看，還是從系統(tǒng)升級(jí)維護(hù)角度看，這種方式都存在很多問題，維護(hù)業(yè)務(wù)邏輯也很復(fù)雜，不利業(yè)務(wù)邏輯的擴(kuò)展。其實(shí)現(xiàn)在已經(jīng)有更好的設(shè)計(jì)方式供選擇，那就是基于asp.net MVC 架構(gòu)開發(fā)網(wǎng)站?？梢砸悦嫦?qū)ο蠓绞椒庋b業(yè)務(wù)邏輯，可以以強(qiáng)類型方式在網(wǎng)頁(yè)之間傳遞類型數(shù)據(jù)（model），可以用razor語(yǔ)法把數(shù)據(jù)模型循環(huán)方式生成HTML 頁(yè)面來展示從而實(shí)現(xiàn)對(duì)HTML 每一個(gè)元素操控，也可以使用微軟的EDM對(duì)象，實(shí)現(xiàn)概念層到數(shù)據(jù)層的映射。

業(yè)務(wù)層的代碼直接操控概念層數(shù)據(jù)模型（EF 實(shí)體模型）。可以使用linq 語(yǔ)法查詢數(shù)據(jù)集，而不是在程序代碼中嵌入sql 語(yǔ)句。業(yè)務(wù)層操控的不再是數(shù)據(jù)庫(kù)，而是直接操控概念層概念模型。系統(tǒng)會(huì)實(shí)現(xiàn)自動(dòng)完整概念層到數(shù)據(jù)庫(kù)的映射和存儲(chǔ)。

最后得到的開發(fā)體驗(yàn)是可以實(shí)現(xiàn)“關(guān)注點(diǎn)分離”，每一層只關(guān)注與自己有關(guān)的業(yè)務(wù)內(nèi)容，這樣的架構(gòu)才能適應(yīng)復(fù)雜的業(yè)務(wù)邏輯，才能不斷應(yīng)對(duì)持續(xù)變化的業(yè)務(wù)需求。

下面從實(shí)際應(yīng)用角度對(duì)有關(guān)技術(shù)作簡(jiǎn)單展示，希望對(duì)初學(xué)者有幫助。

一、asp.net MVC 架構(gòu)構(gòu)成

MVC全名是model view controller，是模型（model）-視圖（view）-控制器（controller）的縮寫，一種軟件設(shè)計(jì)典范，用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個(gè)部件里面，在改進(jìn)和個(gè)性化定制界面及用戶交互的同時(shí)，不需要重新編寫業(yè)務(wù)邏輯。mvc被獨(dú)特地發(fā)展起來用于映射傳統(tǒng)的輸入、處理和輸出功能在一個(gè)邏輯的圖形化用戶界面的結(jié)構(gòu)中。MVC 架構(gòu)系統(tǒng)工作流程：當(dāng)用戶輸入信息（瀏覽器中發(fā)送請(qǐng)求），首先獲得用戶輸入數(shù)據(jù)的是控制器（控制器就是后臺(tái)使用面向?qū)ο笤O(shè)計(jì)方法設(shè)計(jì)的類），然后控制器操控相應(yīng)的模型（模型是根據(jù)業(yè)務(wù)概念模型設(shè)計(jì)的強(qiáng)類型數(shù)據(jù)類型，比如一個(gè)學(xué)生，課程，視頻等）。接下來，模型的內(nèi)容可以傳遞給指定的視圖（使用razor 語(yǔ)法遍歷模型內(nèi)的數(shù)據(jù)轉(zhuǎn)換成HTML 頁(yè)面里的數(shù)據(jù)）返回給用戶，這時(shí)用戶在瀏覽器就看到了返回的信息。MVC雖然有很多技術(shù)細(xì)節(jié)，但是主要工作過程就如上所述。

二、使用MVC架構(gòu)設(shè)計(jì)一個(gè)網(wǎng)站主要步驟和代碼分析

下面以創(chuàng)建一個(gè)視頻網(wǎng)站查詢頁(yè)面為例來展示使用mvc 架構(gòu)創(chuàng)建網(wǎng)站方法的主要代碼原理。

1.創(chuàng)建MVC 項(xiàng)目

打開 vs2015 開發(fā)集成環(huán)境依次選擇新建項(xiàng)目---選擇web----選擇asp.net web 應(yīng)用程序-----輸入項(xiàng)目名稱---選擇MVC 項(xiàng)目類型---確定。操作到這里開發(fā)環(huán)境就能看到項(xiàng)目文件夾結(jié)構(gòu)。

各個(gè)文件夾功能做好標(biāo)注。沒有標(biāo)注的文件夾暫且放一放，可以先理解主要功能有關(guān)的文件夾，進(jìn)一步再研究其他相關(guān)文件夾。

2.創(chuàng)建數(shù)據(jù)庫(kù)并創(chuàng)建相應(yīng)表

為了簡(jiǎn)單步驟，筆者在sql server 創(chuàng)建了 videos 數(shù)據(jù)庫(kù)，并創(chuàng)建了如圖1所示video表，填充了6條記錄數(shù)據(jù)（如圖1）。

3.根據(jù)數(shù)據(jù)庫(kù)生成概念層數(shù)據(jù)實(shí)體

接下來一個(gè)重要步驟是根據(jù)創(chuàng)建的數(shù)據(jù)庫(kù)生成實(shí)體數(shù)據(jù)模型（edm模型，是微軟對(duì)ORM 思想的一種實(shí)現(xiàn)，創(chuàng)建好實(shí)體數(shù)據(jù)模型以后，應(yīng)用系統(tǒng)將操作實(shí)體數(shù)據(jù)模型實(shí)現(xiàn)業(yè)務(wù)實(shí)體的增刪改查，而不是直接使用SQL 語(yǔ)句操作數(shù)據(jù)庫(kù)）。

操作步驟如下：將鼠標(biāo)停留在models 文件夾，然后右鍵鼠標(biāo)，在出現(xiàn)的菜單中依次選擇添加—新建項(xiàng)—ADO.NET 實(shí)體數(shù)據(jù)模型——來自數(shù)據(jù)庫(kù)的EF設(shè)計(jì)器——連接前面創(chuàng)建好的數(shù)據(jù)庫(kù)—選擇要映射的表—點(diǎn)擊完成。

操作到這里已經(jīng)完成數(shù)據(jù)實(shí)體的創(chuàng)建。接下來只要操作概念層數(shù)據(jù)實(shí)體就能完成對(duì)數(shù)據(jù)庫(kù)的增刪改查。而數(shù)據(jù)實(shí)體則是面向?qū)ο笤O(shè)計(jì)的，數(shù)據(jù)庫(kù)里面的表字段變成了對(duì)象的屬性，在程序業(yè)務(wù)代碼中，也是操縱控這些實(shí)體對(duì)象，而不是數(shù)據(jù)庫(kù)里面的表，他們之間的映射，系統(tǒng)會(huì)自動(dòng)完成。這就是微軟根據(jù)ORM 思想設(shè)計(jì)的實(shí)體數(shù)據(jù)模型，簡(jiǎn)稱EDM（詳細(xì)細(xì)節(jié)不展開介紹，請(qǐng)大家查找有關(guān)資料）。

從圖2可以看到 videos模型有Id，videoName，picture，creater，createDate 5個(gè)屬性，分別對(duì)應(yīng)著數(shù)據(jù)庫(kù)表5個(gè)字段。

打開代碼窗口可以看到實(shí)體數(shù)據(jù)模型其實(shí)就是一個(gè)類，和面向?qū)ο笤O(shè)計(jì)中的實(shí)體類沒有本質(zhì)區(qū)別。

操作到這里，筆者已經(jīng)準(zhǔn)備好了數(shù)據(jù)庫(kù)，也準(zhǔn)備好了概念層數(shù)據(jù)實(shí)體和數(shù)據(jù)實(shí)體模型對(duì)應(yīng)的數(shù)據(jù)上下文對(duì)象（數(shù)據(jù)上下文對(duì)象可以加載數(shù)據(jù)到實(shí)體數(shù)據(jù)模型中）。目前還缺一個(gè)動(dòng)作，就是調(diào)用該方法，得到數(shù)據(jù)并將這些數(shù)據(jù)顯示在頁(yè)面中。下面繼續(xù)完成這個(gè)動(dòng)作。

4.設(shè)計(jì)控制器，訪問到數(shù)據(jù)，將數(shù)據(jù)模型傳遞給視圖

將鼠標(biāo)停留在Controller 文件夾依次選擇：添加—控制——包含視圖的MVC5 控制器（使用Entity Framwork）——添加。完成上面操作在Controll 文件夾就多出了一個(gè)控制器文件。

5.設(shè)計(jì)視圖，將數(shù)據(jù)模型生成HTML 頁(yè)面

完成上面操作向?qū)?，我們查看Views文件夾，可以看到多了一個(gè)videos 子文件夾，里面有一個(gè)名為 index.cshtml 文件。通過這一步驟應(yīng)該注意以下知識(shí)點(diǎn)。

（1）razor語(yǔ)法其實(shí)就是c#語(yǔ)句前面加@就能將c# 語(yǔ)法和html 混合編寫，既能將模型數(shù)據(jù)轉(zhuǎn)換成HTML 頁(yè)面數(shù)據(jù)顯示。

（2）視圖文件的第一行有個(gè)IEnumerable接口類型的聲明，用接口類型就能接收控制器傳遞過來的模型數(shù)據(jù)。

（3）微軟已經(jīng)為我們?cè)O(shè)計(jì)了一套生成 HTML 標(biāo)簽的編程接口。

6.運(yùn)行網(wǎng)站

以上操作已經(jīng)完成后臺(tái)數(shù)據(jù)庫(kù)的創(chuàng)建、概念層EDM 到數(shù)據(jù)庫(kù)的映射數(shù)據(jù)模型的創(chuàng)建、控制器的創(chuàng)建、視圖的創(chuàng)建并且將網(wǎng)站頁(yè)面運(yùn)行起來了。雖然簡(jiǎn)單，希望對(duì)初學(xué)者有所幫助。