[ASP.NET MVC]Twitter Bootstrap 專案-新增選單與相關頁面

[ASP.NET MVC]Twitter Bootstrap 專案-新增選單與相關View

前言

小弟前一陣子有寫過「[ASP.NET MVC]新增一個ASP.NET MVC 4的TWITTER BOOTSTRAP專案!」,以往建置企業化網站或個人網站往往會花很多時間在版面上,現在使用MVC至NuGet下載此套件來開發,則可很快速的可建置出個人化網站。今天要介紹如何定義自己的選單,及產生新的頁面。

Step 1 新增一個Controller

至Controller資料夾->點選加入->控制器,這邊建了一個CodeSkillController

2013-05-29_193419

移至Controller,將想增加的頁面加上,規劃為一個StartPage頁面,而底下有三個子頁面

image

Step 2 將四個頁面加入檢視(View)

再上面四個頁面點選右鍵->加入檢視,則會跳出下方視窗,我們點選使用配置或主版頁面

image

這邊會看到很多樣本可以選,最主要的差別在於版面的差異

image

加完後架構應該如下,CodeSkill下有四個頁面

image

Step 3 增加選單連結

在App_Start中,跟以往內建的MVC專案一樣會載入一些打包壓縮、路由規則、過濾器…等獨立檔案,在這邊不多做介紹,我們點選ExamplelayoutsRouteConfig.cs

 image

這邊是Sample Code幫我們產生的預設目錄,之後可以依需求更改,可設定Routes,來選擇要載入的頁面,即顯示名稱

image

我們在底下加入剛剛寫好的頁面,CodeSkillCntroller,及對應的View,StartPage為母選單,其他頁面使用.AddChildRoute加入

image

完成!Run看看吧

選單目錄

image

_BootstrapLayout.basic.cshtml 樣板

image

_BootstrapLayout.empty.cshtml樣板

image

_BootstrapLayout.narrow.cshtml樣板

image

後記

學新東西我覺得看Sample Code學習最快速,且現在資訊發達,很多事情都有人幫你架構好,所以建置一個新網站再也不是一件難事,希望能幫助到有打算剛要學習MVC或建需新網站的初心者一點忙。

 

相關文章

 

 

 

 

 

 

 

 

 

 

 

 

[ASP.NET MVC]新增一個ASP.NET MVC 4的TWITTER BOOTSTRAP專案!