怎么用Bootstrap前端視圖實現(xiàn)頁面內(nèi)容模塊化的隔離

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

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

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

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

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

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

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

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

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

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

答案是使用@RenderPage實現(xiàn)頁面內(nèi)容模塊化的隔離。

2、使用@RenderPage實現(xiàn)頁面內(nèi)容模塊化的隔離

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

而進一步，我們還可以在子頁面中使用@RenderPage來區(qū)分隔離不同業(yè)務(wù)界面的內(nèi)容的。

例如對于創(chuàng)建表單界面的視圖內(nèi)容。

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

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

當(dāng)用戶單擊【選擇流程處理人】的按鈕的時候，彈出一個p層，這個就是我們剛才使用@RenderPage實現(xiàn)的選擇用戶界面了，這種處理方式比較彈性化，在需要的時候，包含進來即可，不用把大段大段的代碼重復(fù)復(fù)制過來，方便了維護代碼。

同樣，對于查看表單界面來說，雖然它的界面內(nèi)容比新建業(yè)務(wù)表單的界面復(fù)雜很多，但是使用的是一樣的處理方式。

剛才我們看到了，在Winform界面里面，使用的是下面的視圖繼承的方式。

而在MVC視圖界面里面，采用的是@RenderPage實現(xiàn)頁面內(nèi)容的模塊化。

這樣主視圖和子視圖雖然同名，但是它們是在不同的控制器名下，這樣我們在父頁面視圖的ViewDetail.cshtml就可以封裝一些常見的處理界面內(nèi)容，而留下部分和具體業(yè)務(wù)表單相關(guān)的展示內(nèi)容放在子頁面的ViewDetail.cshtml里面即可。

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

我們來看看具體業(yè)務(wù)表單中的視圖頁面代碼，如下所示。

其中的不變的業(yè)務(wù)界面內(nèi)容（理解為父窗體也可以），我們通過引用頁面的方式把它包含進來。

<!--此處放置業(yè)務(wù)表單的數(shù)據(jù)呈現(xiàn)，方便隔離，減少復(fù)雜性-->
@RenderPage("~/Views/Apply/ViewDetail.cshtml", new { applyId = Request["id"] })

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

而這個共同的部分，則可以封裝常規(guī)的事件處理，和界面展示，如下是界面視圖的截圖說明。

其中我們還可以看到通用選擇用戶的視圖層界面

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

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

新建業(yè)務(wù)流程表單如下界面所示。

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

到此，關(guān)于“怎么用Bootstrap前端視圖實現(xiàn)頁面內(nèi)容模塊化的隔離”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>