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

孫央麗

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

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

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

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

但查看這些網(wǎng)站系統(tǒng)后臺源代碼，會發(fā)現(xiàn)這些網(wǎng)頁往往將業(yè)務(wù)邏輯有關(guān)代碼以“意大利面條式”的方式嵌套在網(wǎng)頁HTML代碼中。無論是從軟件工程“高內(nèi)聚低耦合”原則角度看，還是從系統(tǒng)升級維護(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)頁之間傳遞類型數(shù)據(jù)（model），可以用razor語法把數(shù)據(jù)模型循環(huán)方式生成HTML 頁面來展示從而實(shí)現(xiàn)對HTML 每一個元素操控，也可以使用微軟的EDM對象，實(shí)現(xiàn)概念層到數(shù)據(jù)層的映射。

業(yè)務(wù)層的代碼直接操控概念層數(shù)據(jù)模型（EF 實(shí)體模型）?？梢允褂胠inq 語法查詢數(shù)據(jù)集，而不是在程序代碼中嵌入sql 語句。業(yè)務(wù)層操控的不再是數(shù)據(jù)庫，而是直接操控概念層概念模型。系統(tǒng)會實(shí)現(xiàn)自動完整概念層到數(shù)據(jù)庫的映射和存儲。

最后得到的開發(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)對持續(xù)變化的業(yè)務(wù)需求。

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

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

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

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

下面以創(chuàng)建一個視頻網(wǎng)站查詢頁面為例來展示使用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)。

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

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

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

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

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

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

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

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

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

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

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

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

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

完成上面操作向?qū)В覀儾榭碫iews文件夾，可以看到多了一個videos 子文件夾，里面有一個名為 index.cshtml 文件。通過這一步驟應(yīng)該注意以下知識點(diǎn)。

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

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

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

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

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