學習ASP.NET MVC(三)——個人第一個ASP.NET MVC 視圖

 

今天我將對前一篇文章中的示例進行修改，前一篇文章中並無用到視圖，此次將用到視圖。對於前一個示例中的HelloWorldController類進行修改，使用視圖模板文件生成HTML響應給瀏覽器。

1、建立視圖文件

 

上一篇文章中的HelloWordController類中的Index方法返回了一串硬編碼的字符串消息。而這一次，我將新建一個List方法，用來返回一個View對象，以下面的代碼所示：

 

public ActionResult List()

{

    return View();

}

 

 

首先，建立一個使用Razor視圖引擎的視圖模板文件，Razor視圖模板文件的擴展名爲.cshtml，並提供一種比較優雅的方式使用C＃來建立HTML輸出。Razor視圖模板減小了編寫程序所須要輸入的字符數量和敲擊鍵盤的次數，並實現了快速、流暢的編碼工做。

如何來建立視圖呢？在Visual Studio中爲HelloWordController.cs的List控制器方法使用一個視圖模板來生成一個HTML的響應給瀏覽器。

控制器方法（也稱爲動做方法），如上面的List方法，一般返回一個ActionResult（或是ActionResult的派生類），而不是基本類型，如字符串，整形。
下面就是添加一個視圖方法的具體步驟：

1）先將光標置在List方法中，

2）單擊鼠標右鍵，Visual studio會彈出一個右鍵菜單，而後在彈出的右鍵菜單中，用鼠標左鍵單擊「添加視圖」菜單。以下圖。

 

其次，Visual Studio會彈出一個「添加視圖」對話框。其中「視圖名稱」默認爲List，其餘設置能夠修改，本文將保留默認設置，而後點擊「添加」按鈕：以下圖。

 

 

這樣會在MvcApplication1\Views\HelloWorld文件夾中建立一個List.cshtml文件。以下圖。

 

 

下圖顯示了所建立的List.cshtml文件的內容：

添加<H2>HTML標記到如下文件(MvcApplication1\Views\HelloWord\List.cshtml)中。

代碼以下。

@{

    ViewBag.Title = "List";

}

<h2>List</h2>

<p>Hello from our View Template!</p>

 

第三， 在Visual studio中按「F5」運行以後，ASP.NET MVC默認調用的是Index方法，而實際須要瀏覽到HelloWorld控制器的List方法，（如：http://localhost:xxxx/HelloWorld/List）。再來看一下控制器中的List方法，只有一行代碼return View()。因爲咱們沒有明確指定的視圖文件中使用的名稱，ASP.NET MVC默認爲使用\Views\HelloWorld\List.cshtml視圖文件。結果以下圖。

 

程序運行起，效果如上圖，看起來還不錯。可是，請注意瀏覽器的標題欄顯示「List——個人第一個ASP.NET MVC應用程序」和在頁面頂部的「將你的徽標放置在此處」有些不協調，再進行一些改動。

2、修改視圖文件和頁面佈局
首先，咱們要修改在頁面頂部的「將你的徽標放置在此處」這個標題。該文本每一頁都是相同的，它放在一個共享的視圖文件中，這個共享的視圖文件又稱爲佈局文件，它是一個公共佈局頁面，供其餘頁面使用。在解決方案資源管理器中打開/Views/Shared文件夾中的「_Layout.cshtml」文件。以下圖。

 

佈局模板文件容許你在一個地方填寫網站的佈局代碼以後，能夠在多個頁面中使用。在佈局模板文件中找到@ RenderBody（）行， RenderBody是一個佔位符，是用來顯示咱們所建立特定網頁視圖。例如，當你在頁面中擊「關於」連接時，\Home\ About.cshtml視圖文件就會顯示在RenderBody位置處。以下圖中的紅色方框部分就是。

從「將你的徽標放置在此處」更改佈局模板網站標題標題爲「個人第一個ASP.NET MVC 應用程序」。

     

  <div class="float-left">

                    <p class="site-title">@Html.ActionLink("個人第一個ASP.NET MVC 應用程序", "Index", "Home")</p>

                </div>

同時修改標題，把標題修改成以下內容：   

  <title>@ViewBag.Title - 個人第一個ASP.NET MVC 應用程序</title>

 

運行該應用程序，並注意瀏覽器中的標題，它會顯示爲「個人第一個ASP.NET MVC 應用程序」。點擊頁面上的全部連接，你會發現全部頁面的標題都是「個人第一個ASP.NET MVC 應用程序」。這說明，咱們只要對佈局模板文件進行了修改，那麼網站上的全部使用到佈局模板的其餘頁面都會跟着變動。以下圖。

 

如今，讓咱們改變List 視圖的標題。
打開MvcApplication\Views\ HelloWorld\List.cshtml文件，作如下修改：

第一，   對於頁面的標題進行修改

第二，對頁面中的二級標頭（<h2>元素）進行修改。注意兩種的修改須要有點不一樣，以便能直觀的發現，咱們修改的是應用程序的哪一部分。

@{

    ViewBag.Title = "ASP.NET MVC 應用程序 List方法";

}

<h2>個人第一個ASP.NET MVC 應用程序 的方法 ——List</h2>

<p>Hello from our View Template!</p>

 

「ViewBag.Title = "ASP.NET MVC 應用程序 List方法"」，上面的代碼設置List.cshtml視圖文件中的ViewBag對象的Title屬性。爲何是ViewBag.Title屬性呢，你能夠打開_loyout.cshtml文件看看，你會發如今此文件中的<title>元素中會有ViewBag.Title。這樣就能夠方便的使用這種修改ViewBag屬性的方法，輕鬆修改視圖文件和佈局文件中的參數。
運行應用程序並瀏覽到http://localhost:36878/HelloWorld/list 。請注意，在瀏覽器中當前頁面的標題，次級標題已經改變。 （若是您瀏覽器中沒有發生變化，多是因爲瀏覽器緩存了以前的內容。請按Ctrl + F5讓瀏覽器強制從服務器加載響應。 ）瀏覽器頁面中顯示的標題與咱們在List.cshtml文件中設定的ViewBag.Title屬性的內容是同樣的。以下圖中的紅色方框所標示的。

 

上面的示例當中，咱們把全部要顯示的數據都是硬編碼在視圖文件中的。雖然這個MVC應用程序有一個「V」 （視圖） ，有一個「C」 （控制器） ，可是卻沒有「M」 （模型）。

 

3、從控制器傳遞數據到視圖

首先，從信息從控制器到視圖提及，控制器類經過接收瀏覽器傳入的URL請求，從數據庫中檢索數據，並最終決定以什麼類型的響應發回瀏覽器，視圖負責從一個控制器接收到的數據用於生成和格式化成HTML響應給瀏覽器。
控制器負責提供數據或對象給視圖模板，讓視圖模板來根據控制器提供的數據或對象呈現給瀏覽器。最佳的作法是：一個視圖模板不會執行業務邏輯或與數據庫直接交互。相反，一個視圖模板是否能正確工做是由給它提供數據的控制器所決定的。保持這種「關注點分離」有助於保持代碼乾淨，可測試，更易於維護。

下面的示例是，在HelloWorldController類中寫了一個WelcomName方法，這個方法須要兩個參數（name與numTimes），而後通過控制器處理以後直接輸出結果到瀏覽器。不是讓該控制器直接硬編碼爲一個字符串輸出，而是使用一個視圖模板來代替。該視圖模板將生成一個動態的響應，這意味着你須要從控制器傳遞相應的數據給視圖，以生成響應。

打開 HelloWorldController.cs文件而且修改WelcomName方法，將NumTimes與name值添加到ViewBag對象。 ViewBag是一個動態對象，這意味着你能夠把任何數據類型添加到ViewBag裏面。在ASP.NET MVC模型綁定系統會自動從地址欄中獲取方法參數的字符串，並映射命名參數（name和numTimes ） 。

 

        public ActionResult WelcomeName(string name, int numTimes = 1)
        {

            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;
            return View();

        }

 

上面的代碼中把要傳遞給視圖的數據包含在了ViewBag對象中了。
而後，你須要一個WelcomeName視圖模板​​！以下圖，新建一個新的視圖文件。

 

Visual Studio會彈出一個「添加視圖」對話框。按下圖所示，填寫相應數據。

 

而後單擊「添加」按鈕，Visual Studio會添加一個新的WelcomeName.cshtml文件，在此文件的<h2>元素的下方添加如下代碼。下面的完整WelcomeName.cshtml文件以下所示。

@{

    ViewBag.Title = "這是個人ASP.NET MVC世界的歡迎WelcomeName";

}

 

<h2>WelcomeName</h2>

<ul>

   @for (int i=0; i < ViewBag.NumTimes; i++) {

      <li>@ViewBag.Message</li>

   }

</ul>

 

1）運行應用程序並使用瀏覽器瀏覽如下網址：
http://localhost:xx/HelloWorld/WelcomeName?name=dotnet菜園&numtimes=8
2）URL中的數據是先從URL中傳遞給指定的控制器

3）指定的控制器將數據打包成一個ViewBag對象

4）控制器再把打包好的對象傳遞給視圖，而後該視圖顯示數據給用戶看。你會看到八條歡迎信息。

以下圖。

 

關於ASP.NET MVC中的視圖部分，就學習到這裏，下次再繼續。