在Bootstrap開發框架的前端視圖中使用@RenderPage實現頁面內容模塊化的隔離，減小複雜度

在不少開發的場景中，不少狀況下咱們須要考慮抽象、以及模塊化等方面的內容，其目的就是爲了使得開發的時候關注的變化內容更加少一些，總體開發更加簡單化，從而減小開發的複雜度，在Winform開發的時候，每每能夠經過定義基類模塊、用戶控件的方式實現這個目的，而在Web開發的時候，咱們是否也能夠利用這些特性呢？特別在MVC的視圖模板裏面的HTML，是否能夠利用這些特色，實現變化部分的隔離，從而減小整個頁面的複雜度，同時又能夠提升模塊的重用性呢？本篇隨筆介紹在Asp.NET的MVC視圖處理上，使用@RenderPage實現頁面內容模塊化的隔離，減小複雜度。

一、回顧Winform的界面處理方式

舉工做流表單處理爲例說明，因爲在處理流程的時候，對於表單的處理，大多數狀況下的規則和處理邏輯差很少，所以能夠把這些不變的內容抽離到基類界面裏面，對於Winform方式，咱們經過繼承不一樣的業務窗體對象就能夠實現了，以下處理方式所示。

因爲基類肯定了，封裝了大多數的處理規則，那麼在子類界面的時候，須要處理的只是和業務界面有關的賦值或者讀取值的操做了，咱們對於不一樣的業務表單，作起來就很容易了，只須要把變化的部份內容放在子窗體便可。

例如對於出差申請和會議室使用申請的表單，它們的窗體界面繼承關係以下所示。

這個就是Winform界面處理的方式， 對於在Bootstrap開發框架的前端視圖中，如何以相似的規則處理這些界面的分離操做呢？

答案是使用@RenderPage實現頁面內容模塊化的隔離。

 

二、使用@RenderPage實現頁面內容模塊化的隔離

通常在開始的時候，咱們注意到了，在MVC視圖中使用母版的操做中，已經隔離了頁面佈局相同部分，子窗體只須要定義不一樣部分的視圖代碼便可。

而進一步，咱們還能夠在子頁面中使用@RenderPage來區分隔離不一樣業務界面的內容的。

例如對於建立表單界面的視圖內容。

上面視圖分爲了幾個部分的內容，一個是建立表單的界面處理，其中涉及到的選擇用戶界面，是一個彈出的用戶選擇框，因爲選擇用戶處理是一個常見的操做，咱們須要把它抽離到一個視圖頁面裏面，能夠在須要的時候，直接經過使用@RenderPage實現頁面內容模塊化。

@RenderPage("~/Views/Apply/SelectUser.cshtml")

當用戶單擊【選擇流程處理人】的按鈕的時候，彈出一個DIV層，這個就是咱們剛纔使用@RenderPage實現的選擇用戶界面了，這種處理方式比較彈性化，在須要的時候，包含進來便可，不用把大段大段的代碼重複複製過來，方便了維護代碼。

 一樣，對於查看錶單界面來講，雖然它的界面內容比新建業務表單的界面複雜不少，可是使用的是同樣的處理方式。

 剛纔咱們看到了，在Winform界面裏面，使用的是下面的視圖繼承的方式。

而在MVC視圖界面裏面，採用的是@RenderPage實現頁面內容的模塊化。

這樣主視圖和子視圖雖然同名，可是它們是在不一樣的控制器名下，這樣咱們在父頁面視圖的ViewDetail.cshtml就能夠封裝一些常見的處理界面內容，而留下部分和具體業務表單相關的展現內容放在子頁面的ViewDetail.cshtml裏面便可。

在頁面地址中，獲得完整的頁面訪問路徑是：/Reimbursement/ViewDetail?id=8f32231d-852e-9f16-6e5a-79031c8ec995，這個URL其實就是訪問具體業務視圖下的內容，可是業務視圖已經引用了父頁面共同的部分。

咱們來看看具體業務表單中的視圖頁面代碼，以下所示。

其中的不變的業務界面內容（理解爲父窗體也能夠），咱們經過引用頁面的方式把它包含進來。

<!--此處放置業務表單的數據呈現，方便隔離，減小複雜性-->
@RenderPage("~/Views/Apply/ViewDetail.cshtml", new { applyId = Request["id"] })

這樣就把它們分開維護了，共同的部分就在這個 Views/Apply/ViewDetail.cshtml 視圖頁面裏面了。

而這個共同的部分，則能夠封裝常規的事件處理，和界面展現，以下是界面視圖的截圖說明。

其中咱們還能夠看到通用選擇用戶的視圖層界面

@RenderPage("~/Views/Apply/SelectUser.cshtml")

最後咱們來看看兩個不一樣的視圖界面效果，以烘托一下隔離界面也不影響總體效果，可是能夠下降代碼的維護複雜性。

新建業務流程表單以下界面所示。

查看具體流程表單明細的界面以下所示。