Asp.net mvc 3.0入門教程之3.2————View視圖

本文摘自:http://www.cnblogs.com/libinlink/archive/2011/05/05/2037319.html

改變視圖和佈局頁

 

首先,您希望改變頁面上最上邊的標題"My MVC Application"。這些文字對每個

頁面來說是相同的。事實上,它在項目只被實現了一次,儘管它出現在每個頁面上。

在解決方案資源管理器中定位到/Views/Shared下的_Layout.cshtml文件。這個

文件被稱作爲佈局頁,它被共享爲所有頁面的“外殼”。

//譯者注:類似webform中的masterpage。

佈局模板允許您指明網站的HTML容器並應用到網址所有的頁面中。

注意文件底部的@RenderBody()行。RenderBody是一個所有視圖頁

的佔位符,包裹在佈局頁中。把佈局頁中的標題"My MVC Application"

改爲"MVC Movie App".

 
<div id="title">
    <h1>
        MVC Movie App</h1>
</div>


 
運行程序,注意它現在顯示的是"MVC Movie App".單擊About鏈接,
您可以看到頁面仍然顯示"MVC Movie App".我們在佈局頁中改變
一次之後在所有頁面中都輸出了新的標題。

模板頁完整的代碼如下:

 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>

            <div id="menucontainer">

                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>

            </div>
        </div>

        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>






現在,讓我們改變視圖Index頁的標題。
打開文件MvcMovie\Views\HelloWorld\Index.cshtml.有兩個地方需要
修改:首先,修改瀏覽器標題欄出現的文字,然後再修改標籤<h2>元素。您
將對代碼稍作調整,可以看到程序中的部分代碼發生了小的改變。
 
@{    ViewBag.Title = "Movie List";
}
<h2>
    My Movie List</h2>
<p>
    Hello from our View Template!</p>

 

爲了指明HTML的顯示標題,上邊的代碼設置了視圖模板Index.cshtml

ViewBag的Title屬性.如果您回頭看看佈局模板的源代碼,您將發現模板

使用<title>元素作爲<head>節的一部分(譯註:紅色部分)。使用

這種方法,您可以很容易的在視圖模板和佈局文件間來傳遞其他參數。

  

運行程序並瀏覽http://localhost:xx/HelloWorld.注意到瀏覽器的 標題,

主要的標題,次要的標題已經發生了 變化(如果您沒有看到變化,您可能

在查看瀏覽器在您機器本地的緩存內容。按Ctrl+F5強制刷新,強制從服務

器加載響應)。

  

還注意到視圖模板Index.cshtml  的內容被合併到佈局文件,一個HTML響應

被髮送到瀏覽器。佈局模板確保非常容易應用所有的變化到所有的頁面中。

 

雖說,我們的一點點“數據”("Hello from our View Template!"消息)

是硬編碼的。MVC應用程序已經有視圖"V"和控制器"C"了,但是仍然還沒有

模型"M".我們馬上學習如何從模型創建數據和獲取數據(譯註:使用codefirst技術)。

 

從控制器Controller傳遞數據給視圖View

 

雖然以前我們訪問數據庫、討論模型,但是這次我們討論從控制器傳遞數據給視圖。

您寫的一個控制器類是處理傳入參數、從數據庫獲取數據、最終決定以什麼類

型的響應返回給客戶端瀏覽器的一些代碼。視圖模板能夠被控制器用作生成和

格式化HTML響應給瀏覽器。

控制器負責提供各種形式的數據和對象,爲了在視圖模板呈送響應給瀏覽器。

視圖模板或許從來都不展現業務邏輯或和數據庫直接交互。反而僅僅對控制器

提供給它的數據工作。保持這種關注點分離("separation of concerns")可以

讓您的代碼整潔並且更容易維護。

目前,控制器HelloWorldController類的Welcome方法傳遞了參數name、

numTimes,並且在瀏覽器中直接輸出了他們的值。與其讓控制器呈送一個

字符串響應,還不如讓我們改變一下控制器來使用視圖模板取代。視圖模板

生成動態的響應,這意味着您需要從控制器傳遞適當的數據給視圖模板以便

生成響應。您可以在控制器放入動態數據來實現這個功能,視圖模板需要它

可以訪問的ViewBag對象。

回到HelloWorldController.cs文件改變它的Welcome,給ViewBag對象

增加Message和NumTimes值。ViewBag 是動態對象,這意味着您可以

放入任何您想放入的對象。ViewBag 對象沒有事先定義好屬性,直到

您在它裏邊放入一些對象。HelloWorldController.cs文件完整的代

碼如下所示:

 

using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;
            return View();
        }
    }
}


現在ViewBag 對象包含了將要傳遞給視圖的數據。

下一步,我們需要一個Welcome視圖模板!選擇“調試”菜單,選擇

生成MvcMovie確保項目被編譯。

右鍵Welcome方法,單擊添加視圖。添加視圖的界面看起來是這樣的:

 單擊添加。然後在文件Welcome.cshtml <h2>元素中添加如下代碼。您將創建
一個循環用來輸出"Hello",次數由用戶說了算。完整的代碼如下:
 
@{    ViewBag.Title = "Welcome";
}
<h2>
    Welcome</h2>
<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {       
        <li>@ViewBag.Message</li>    }
</ul>

 

運行應用程序瀏覽如下的URL:
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
現在數據通過URL自動地傳遞給控制器。控制器打包數據到ViewBag對象,並
傳遞ViewBag對象給視圖。視圖以HTML的實行顯示數據給用戶。
 
下一節:Asp.net MVC3.0 入門指南 4 模型 Model
 
原文網址:http://www.asp.net/mvc/tutorials/getting-started-with-mvc3-part3-cs

 




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章