[Asp.net MVC]Asp.net MVC5系列——添加視圖

時間 2019-11-11

標籤 asp.net asp mvc mvc5 系列添加視圖欄目 ASP 简体版

原文原文鏈接

系列文章

[Asp.net MVC]Asp.net MVC5系列——第一個項目數據庫

概述

在這一部分咱們添加一個新的控制器HelloWorldController類，以便使用視圖來向客戶端展現HTML格式的響應結果。bootstrap

咱們將使用Razor視圖引擎建立一個視圖。Razor視圖模板以.cshtml擴展名結尾，它提供了一種簡潔的方式來建立HTML輸出流。Razor視圖大大減小了在書寫視圖模板文件時所須要輸入的字符，提供了一個最快捷，最簡便的編碼方式。瀏覽器

（注意：以前版本的asp.net mvc，能夠選擇視圖引擎，在Asp.net MVC5中，默認的只有一種方式，也就是會生成.cshtml的文件，這裏也就稱爲Razor視圖引擎了。）網絡

添加視圖

這裏，咱們在HelloWorldController類的Index方法中添加使用一個視圖。在修改前的Index方法中返回一個字符串，咱們修改這個方法來使它返回一個視圖，代碼以下所示。mvc

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

版本 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，是由於建立視圖的時候，默認選擇了空的佈局頁。

佈局頁代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>@ViewBag.Title - My ASP.NET Application</title>
 7     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
 8     <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
 9     <script src="~/Scripts/modernizr-2.6.2.js"></script>
10 </head>
11 <body>
12     <div class="navbar navbar-inverse navbar-fixed-top">
13         <div class="container">
14             <div class="navbar-header">
15                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                     <span class="icon-bar"></span>
17                     <span class="icon-bar"></span>
18                     <span class="icon-bar"></span>
19                 </button>
20                 @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
21             </div>
22             <div class="navbar-collapse collapse">
23                 <ul class="nav navbar-nav">
24                 </ul>
25             </div>
26         </div>
27     </div>
28 
29     <div class="container body-content">
30         @RenderBody()
31         <hr />
32         <footer>
33             <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
34         </footer>
35     </div>
36 
37     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
38     <script src="~/Scripts/bootstrap.min.js"></script>
39 </body>
40 </html>

View Code

修改視圖，修改應用程序的頁面佈局

首先，讓咱們修改頁面中的按鈕和Appliication name。這段文字是全部頁面中的公共大標題，在這個應用程序中，雖然全部頁面中都顯示了這個共同的大標題，但只有一處地方對其進行了設置。打開解決方案資源管理器中Views文件夾下的Shared文件夾下的_Layout.cshtml文件。該文件被稱爲佈局頁面，位於公有文件夾Shared下，被全部其餘網頁所共用。

瀏覽結果

佈局頁代碼

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>@ViewBag.Title - My ASP.NET Application</title>
 7     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
 8     <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
 9     <script src="~/Scripts/modernizr-2.6.2.js"></script>
10 </head>
11 <body>
12     <div class="navbar navbar-inverse navbar-fixed-top">
13         <div class="container">
14             <div class="navbar-header">
15                 <button type="button"  class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
16                    這是佈局頁的按鈕
17                 </button>
18                 @Html.ActionLink("個人應用程序", "Index", "Home", null, new { @class = "navbar-brand" })
19             </div>
20             <div class="navbar-collapse collapse">
21                 <ul class="nav navbar-nav">
22                 </ul>
23             </div>
24         </div>
25     </div>
26 
27     <div class="container body-content">
28         @RenderBody()
29         <hr />
30         <footer>
31             <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
32         </footer>
33     </div>
34 
35     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
36     <script src="~/Scripts/bootstrap.min.js"></script>
37 </body>
38 </html>

View Code

佈局模板頁容許你統一在一個地方指定整個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對象是一個動態對象，你能夠爲它添加任何屬性並賦上屬性值。在未賦值以前該屬性是不生效的，直到你賦值爲止。

1         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>