怎么用Bootstrap前端視圖實現頁面內容模塊化的隔離

這篇文章主要介紹“怎么用Bootstrap前端視圖實現頁面內容模塊化的隔離”，在日常操作中，相信很多人在怎么用Bootstrap前端視圖實現頁面內容模塊化的隔離問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用Bootstrap前端視圖實現頁面內容模塊化的隔離”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本篇文章給大家介紹一下Bootstrap前端視圖中使用@RenderPage實現頁面內容模塊化隔離的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

在很多開發的場景中，很多情況下我們需要考慮抽象、以及模塊化等方面的內容，其目的就是為了使得開發的時候關注的變化內容更加少一些，整體開發更加簡單化，從而減少開發的復雜度，在Winform開發的時候，往往可以通過定義基類模塊、用戶控件的方式實現這個目的。

而在Web開發的時候，我們是否也可以利用這些特性呢？特別在MVC的視圖模板里面的HTML，是否可以利用這些特點，實現變化部分的隔離，從而減少整個頁面的復雜度，同時又可以提高模塊的重用性呢？

本篇隨筆介紹在Asp.NET的MVC視圖處理上，使用@RenderPage實現頁面內容模塊化的隔離，減少復雜度。

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

舉工作流表單處理為例說明，由于在處理流程的時候，對于表單的處理，大多數情況下的規則和處理邏輯差不多，因此可以把這些不變的內容抽離到基類界面里面，對于Winform方式，我們通過繼承不同的業務窗體對象就可以實現了，如下處理方式所示。

由于基類確定了，封裝了大多數的處理規則，那么在子類界面的時候，需要處理的只是和業務界面有關的賦值或者讀取值的操作了，我們對于不同的業務表單，做起來就很容易了，只需要把變化的部分內容放在子窗體即可。

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

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

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

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

一般在開始的時候，我們注意到了，在MVC視圖中使用母版的操作中，已經隔離了頁面布局相同部分，子窗體只需要定義不同部分的視圖代碼即可。

而進一步，我們還可以在子頁面中使用@RenderPage來區分隔離不同業務界面的內容的。

例如對于創建表單界面的視圖內容。

上面視圖分為了幾個部分的內容，一個是創建表單的界面處理，其中涉及到的選擇用戶界面，是一個彈出的用戶選擇框，由于選擇用戶處理是一個常見的操作，我們需要把它抽離到一個視圖頁面里面，可以在需要的時候，直接通過使用@RenderPage實現頁面內容模塊化。

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

當用戶單擊【選擇流程處理人】的按鈕的時候，彈出一個p層，這個就是我們剛才使用@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")

最后我們來看看兩個不同的視圖界面效果，以烘托一下隔離界面也不影響整體效果，但是可以降低代碼的維護復雜性。

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

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

到此，關于“怎么用Bootstrap前端視圖實現頁面內容模塊化的隔離”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！