Asp.Net MVC4.0學習之三--添加一個視圖

在本節中,您需要修改HelloWorldController類,從而使用視圖模板文件,乾淨優雅的封裝生成返回到客戶端瀏覽器HTML的過程。

您將創建一個視圖模板文件,其中使用了ASP.NET MVC 3所引入的Razor視圖引擎。Razor視圖模板文件使用.cshtml文件擴展名,並提供了一個優雅的方式來使用C#語言創建所要輸出的HTML。用Razor編寫一個視圖模板文件時,將所需的字符和鍵盤敲擊數量降到了最低,並實現了快速,流暢的編碼工作流程。

當前在控制器類中的Index方法返回了一個硬編碼的字符串。更改Index方法返回一個View對象,如下面的示例代碼:

 public ActionResult Index()
 {
    return View();
 }

上面的Index方法使用一個視圖模板來生成一個HTML返回給瀏覽器。控制器的方法(也被稱爲action method(操作方法) ),如上面的Index方法,一般返回一個ActionResult(或從ActionResult所繼承的類型),而不是原始的類型,如字符串。

在該項目中,您可以使用的Index方法來添加一個視圖模板。要做到這一點,在Index方法中單擊鼠標右鍵,然後單擊“ 添加視圖“

出現添加視圖對話框。保留缺省值,並單擊添加按鈕

您可以在解決方案資源管理器中看到MvcMovie\Views\HelloWorld 文件夾和已被創建的MvcMovie\View\HelloWorld\Index.cshtml文件:

下圖顯示了已被創建的Index.cshtml文件:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

在<h2>標籤後面添加以下HTML:<p>從我們的視圖模板裏返回!</p>

完整的MvcMovie\HelloWorld\Index.cshtml文件如下所示。

@{     ViewBag.Title = "Index";   }   <h2>Index</h2>   <p>從我們的視圖模板裏返回!</p>

運行程序,訪問HellWorld控制器http://localhost:5279/HelloWorld/。控制器裏的Index方法並沒有做很多工作,僅僅是執行 return View()語句,指定使用模板文件來響應瀏覽器請求。因爲你沒有指定使用的模板文件名稱,ASP.NET MVC默認使用\Views\HelloWorld目錄下的Index.cshtml視圖文件。

看上去很不錯。然而,注意瀏覽器標題欄“Index- 我的 ASP.NET MVC 應用程序”,以及頁面頂部一個大號的鏈接“將你的徽標放置在此處”。鏈接下方是註冊和登錄鏈接,再往下是主頁、關於和聯繫方式的頁面鏈接。讓我們來修改這些。

修改視圖頁和佈局頁

首先,你想修改頁面頂部的標題“將你的徽標放置在此處”。該文本在每個頁面中通用。雖然出現在應用的每一個頁面,實際上在項目中只定義了一次,。在解決方案資源管理器中定位到/Views/Shared目錄下,打開 _Layout.cshtml文件。該文件稱爲佈局頁,共享爲外殼,被所有其他頁面使用。

佈局模板使你指定特定的HTML容器來佈局整個站點,在一處定義,在站點多個頁面應用。找到@RenderBody()行。RenderBody是一個你創建的視圖頁面中的佔位符,在佈局頁面中斷行。例如,如果你選擇“關於”鏈接,\Home\About.cshtml 視圖在RenderBody方法中呈現。

在佈局模板中修改站點標題行,由“將你的徽標放置在此處”改爲“MVC 電影”。

<divclass="float-left"><pclass="site-title">@Html.ActionLink("MVC 電影", "Index", "Home")</p></div>

使用以下標記替換標題內容:

<title>@ViewBag.Title - 電影應用程序</title>

運行程序,並注意現在顯示是“MVC 電影”。點擊“關於”鏈接,你會發現該頁面同樣顯示“MVC 電影”。我們在佈局模板中改變一次,站點中所有頁面都會變更爲新的標題。

 
現在,讓我們來修改Index視圖的標題。

打開MvcMovie\Views\HelloWorld\Index.cshtml文件。裏面有兩處地方需要修改:首先,在瀏覽器標題欄顯示的文本,其次是在二級標題(<H2>元素)處。你可以將兩處修改稍微不同,以便能區分出哪個地方分別對應應用程序的哪個部分。

@{
    ViewBag.Title = "首頁";
}

<h2>我的首頁</h2>

代碼通過設置ViewBagTitle屬性來指明HTML標題的顯示內容。如果你查看佈局模板的源碼,你會注意到模板在<title>元素中使用該值作爲 <head>的一部分。使用ViewBag,你可以容易地在視圖模板和佈局文件間傳遞其他參數。

運行程序,瀏覽 http://localhost:xx/HelloWorld。你會發現瀏覽頁面的標題、一級標題、二級標題已經發生改變(如果在瀏覽器中看不到改變,那麼可能你看到的是緩存內容,使用Ctrl+F5強制瀏覽器從服務器加載數據到客戶端)。瀏覽器標題由兩部分組成,首先是我們在Index.cshtml視圖模板裏設置的ViewBag.Title,然後是在佈局文件中設置的“-電影應用程序”。

同時注意Index.cshtml視圖模板文件內容是如何與 _Layout.cshtml視圖模板合併,形成單一的HTML響應返回給瀏覽器。佈局模板使修改應用到你的應用程序所有頁面變得容易。

上面例子中我們很少一點數據是硬編碼。此MVC應用程序有視圖,並且你已經創建了控制器,但是還沒有模型。很快,我們將涉及如何創建數據庫並從中取得模型數據。

 從控制器傳遞數據到視圖

在我們創建數據庫並談論模型之前,讓我們先談論下從控制器傳遞信息到視圖。控制器類被調用來響應輸入網址請求。在控制器類中編寫代碼,處理瀏覽器輸入請求,從數據庫獲取數據,並且決定什麼類型的響應被髮回瀏覽請求。來自控制器的視圖模板被用於生成和格式化HTML響應給瀏覽器。

控制器負責提供需要的任何數據或對象給視圖模板來生成響應給瀏覽器。最佳實踐是:視圖模板不應該處理業務邏輯或者直接與數據庫發生交互。視圖模板應該僅僅處理控制器提供給它的數據。保持關係的隔離,有助於使你的代碼乾淨、可測試和易於維護。

目前,HelloWorldController類中的Welcome方法是用name和num參數,直接輸出值到瀏覽器。讓我們改變控制器,使用視圖模板來替代控制器使用字符串響應請求。視圖模板將生產一個動態響應,意味着你需要傳遞一個視圖模板可訪問的ViewBag對象。

返回到 the HelloWorldController.cs文件,修改Welcome方法,爲ViewBag對象增加Message和Num值。ViewBag是一個動態對象,意味着你可以放任何你想放的東西進去;該對象在你放什麼進去之前,沒有定義的屬性。ASP.NET MVC 模型綁定機制自動將地址欄查詢字符串中的命名參數映射到你的方法中的參數。完整的HelloWorldController.cs如下圖所示: 

        public ActionResult Welcome(string message, int num = 1)
        {
            ViewBag.Message =  message;
            ViewBag.Num = num;
            return View();
        } 

現在包含數據的ViewBag對象將被自動傳遞到視圖。

接下來,你需要一個Welcome視圖模板。在生成菜單中,選擇生成MVCMovie來確保該工程被編譯。

然後在Welcome方法中右鍵單擊,選擇添加視圖,保持默認,添加。

Welcome.cshtml文件中的<h2>Welcome</h2>替換爲以下內容

複製代碼
<ul>
@for (int i = 0; i < ViewBag.Num; i++)
{
    <li>@ViewBag.Message</li>
}
</ul>
複製代碼

運行查看效果。

現在數據通過模型綁定從地址欄傳遞給控制器。控制器將數據打包放進ViewBag對象,並將該對象傳遞給視圖。視圖將數據顯示爲HTML給用戶。

在上面這個例子中,我們使用ViewBag對象從控制器傳遞數據到視圖。稍後的學習中,我們將使用視圖模型來傳遞數據。相對於ViewBag方式,視圖模型方式傳遞數據更加優秀

這是一種方式的模型,但不是數據庫方式。讓我們來學習和創建電影的數據庫。

發佈了27 篇原創文章 · 獲贊 11 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章