目錄===========================================
系列文章
[Asp.net MVC]Asp.net MVC5系列——第一個項目
概述===========================================
在這一部分我們添加一個新的控制器HelloWorldController類,以便使用視圖來向客戶端展示HTML格式的響應結果。
我們將使用Razor視圖引擎創建一個視圖。Razor視圖模板以.cshtml擴展名結尾,它提供了一種簡潔的方式來創建HTML輸出流。Razor視圖大大減少了在書寫視圖模板文件時所需要輸入的字符,提供了一個最快捷,最簡便的編碼方式。
(注意:之前版本的asp.net mvc,可以選擇視圖引擎,在Asp.net MVC5中,默認的只有一種方式,也就是會生成.cshtml的文件,這里也就稱為Razor視圖引擎了。)
添加視圖========================================
這里,我們在HelloWorldController類的Index方法中添加使用一個視圖。在修改前的Index方法中返回一個字符串,我們修改這個方法來使它返回一個視圖,代碼如下所示。
1 public class HelloWorldController : Controller 2 { 3 // 4 // GET: /HelloWorld/ 5 public ActionResult Index() 6 { 7 return View(); 8 } 9 }
這段代碼表示Index方法使用一個視圖模板來在瀏覽器中生成HTML格式的頁面文件。接着,讓我們來添加一個Index方法所使用的視圖模板。在Index方法中點擊鼠標右鍵,然后點擊“添加視圖”,將會彈出一個“添加視圖”對話框。
版本 ASP.NET mvc3添加視圖的方式(該圖來源於網絡)
ASP.NET MVC5添加視圖的方式
在該對話框中,不做任何修改,直接點擊添加按鈕,觀察解決方案資源管理器中,在項目下的Views文件夾下創建了一個HelloWorld文件夾,並且在該文件夾中創建了一個Index.cshtml文件,同時該文件呈打開狀態,如圖所示。
視圖模板文件被創建並呈打開狀態
讓我們在 Index.cshtml視圖模板文件中追加一些文字,代碼如下:
1 @{ 2 ViewBag.Title = "Index"; 3 } 4 5 <h2>首頁</h2> 6 <p>這是我的第一個視圖模版</p>
右鍵Index.cshtml文件,在瀏覽器中瀏覽。如圖
(注意:這地方跟之前版本也有區別,之前版本好像是不能直接右鍵在瀏覽器中查看的。印象中是,機子上只有一個版本,無法求證了。)
由於在Index方法中並沒有做任何事情,只是簡單地一行代碼—“return View()”,該行代碼表示我們使用一個視圖模板文件來在瀏覽器中展示響應結果。因為我們並沒有顯式指定使用哪個視圖模板文件,所以使用了默認的Views文件夾下的HelloWorld文件夾下的Index.cshtml視圖模板文件。該視圖模板文件中只有簡單的兩行文字,在瀏覽器中的顯示結果如圖所示。
看一下url,發現url直接把完整的路由給拼上去了。右鍵在瀏覽器中瀏覽還是非常方便的,畢竟之前一直在做webform項目,習慣了。
至於為什么顯示一個空按鈕和Application name,是因為創建視圖的時候,默認選擇了空的布局頁。
布局頁代碼:

修改視圖,修改應用程序的頁面布局
首先,讓我們修改頁面中的按鈕和Appliication name。這段文字是所有頁面中的公共大標題,在這個應用程序中,雖然所有頁面中都顯示了這個共同的大標題,但只有一處地方對其進行了設置。打開解決方案資源管理器中Views文件夾下的Shared文件夾下的_Layout.cshtml文件。該文件被稱為布局頁面,位於公有文件夾Shared下,被所有其他網頁所共用。
瀏覽結果
布局頁代碼

布局模板頁允許你統一在一個地方指定整個Web應用程序或Web網站的所有HTML頁面的布局方法。請注意文件底部的“@RenderBody()”代碼行。@RenderBody()是一個占位符,代表了所有你創建出來的實際應用的視圖頁面,在這里統一指定。
現在,讓我們修改Index視圖頁面的標題。
1 @{ 2 ViewBag.Title = "這是我的第一個視圖"; 3 } 4 5 <h2>首頁</h2> 6 <p>這是我的第一個視圖模版</p>
ViewBag對象的Title屬性代表了顯示該頁面時的瀏覽器中的標題文字。讓我們回頭看一下布局模板文件,在該文件的<head>區段中的<title>標簽中使用了這個值來作為瀏覽器中的網頁標題。同時,通過這種方法,你可以很容易地在你的視圖模板文件與布局模板文件之間進行參數的傳遞。
修改后瀏覽
為什么在上面標紅框的地方會出現兩個呢?
在_layout.cshtml中的title標簽中的代碼為
1 <title>@ViewBag.Title - My ASP.NET Application</title>
可見可以通過@ViewBag這種方法,你可以很容易地在你的視圖模板文件與布局模板文件之間進行參數的傳遞。
在頁面右鍵查看源代碼,你會發現在原來 @RenderBody()所在的地方被Index.cshtml的代碼所替代。
將控制器中的數據傳遞給視圖
在我們使用數據庫並介紹模型之前,首先我們介紹一下如何將控制器中的信息傳遞給視圖。調用控制器類來進行響應,接收到的URL請求。你可以在控制器類中進行對接收到的頁面參數進行處理的代碼,你可以在控制器類中書寫從數據庫中獲取數據的代碼,你也可以在控制器類中書寫代碼來決定返回給客戶端什么格式的響應文件。控制器可以利用視圖模板文件來生成HTML格式的響應文件並顯示在瀏覽器中。
控制器類負責提供視圖模板文件在生成HTML格式的響應文件時所需要的任何數據或對象。一個視圖模板文件不應該執行任何業務邏輯,也不應該直接和數據庫進行交互。它只能和控制器類進行交互,獲取控制器類所提供給它的數據,這樣可以使你的代碼更加清晰,容易維護。
現在在我們在HelloWorldController控制器類中添加一個帶有兩個參數的Welcome方法,Welcome方法直接向瀏覽器輸出這兩個參數的參數值。這里,我們修改該方法使其不再直接輸出數據,而是使用一個視圖模板。該視圖模板將生成一個動態的響應流,這意味着我們需要將數據從控制器類傳遞給視圖以便利用該數據來生成該響應流。我們在該控制器類中將視圖模板所需要的數據送入一個ViewBag對象中,該對象可以被視圖模板直接接收。
在Welcome方法中為ViewBag對象添加一個Message屬性與NumTimes屬性,並且將屬性值分別設定為經過處理后的name參數值與numTimes參數值。ViewBag對象是一個動態對象,你可以為它添加任何屬性並賦上屬性值。在未賦值之前該屬性是不生效的,直到你賦值為止。
public ActionResult Welcome(string name, int numTimes = 1) 2 { 3 ViewBag.Message = "Hello " + name; 4 ViewBag.NumTimes = numTimes; 5 return View(); 6 }
編譯,然后按照上面為index添加視圖的方式添加視圖。
找到Welcome.cshtml文件,打開,修改里面的代碼,讓瀏覽器顯示URL地址中傳入的name參數中設定的文字,顯示次數等於URL地址中傳入的numTimes參數中設定的次數。
修改后的代碼如下:
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Welcome</title> 11 </head> 12 <body> 13 <div> 14 <ul> 15 @for (int i = 0; i < ViewBag.NumTimes; i++) 16 { 17 <li> 18 @ViewBag.Message 19 </li> 20 } 21 </ul> 22 </div> 23 </body> 24 </html>
右鍵在瀏覽器中瀏覽,修改url地址為:http://localhost:4585/HelloWorld/Welcome?name=wolfy&numtimes=4
該地址欄中的頁面參數將會自動傳遞給控制器。控制器將會把這些參數值放入ViewBag對象中並且傳遞給視圖。視圖再在瀏覽器中顯示這些數據。
這里,我們使用了模型“M”的一種方式,但是不是數據庫的方式。在下一節中,我們將創建一個數據庫,並且介紹如何對該數據庫中的數據進行處理。
總結===========================================
在上面的示例中,我們使用ViewBag對象將控制器的數據傳遞給視圖。
ViewBag也可以在視圖模版和布局模版之間傳遞數據。
@RenderBody()占位符,相當於webform中contentplaceholder。
參考文章:
http://www.asp.net/mvc/tutorials/mvc-5/introduction/adding-a-view