久久精品精选,精品九九视频,www久久只有这里有精品,亚洲熟女乱色综合一区
    分享

    ASP.NET MVC3快速入門——第三節、添加一個視圖

     昵稱10504424 2013-07-24
    3.1 添加一個視圖
    在本節中我們修改HelloWorldController類,以便使用視圖來向客戶端展示HTML格式的相應結果。
    我們使用ASP.NET MVC3中新增的Razor視圖引擎來創建視圖。Razor視圖模板文件的后綴名為.cshtml,它提供了一種簡潔的方式來創建HTML輸出流。Razor視圖大大減少了在書寫視圖模板文件時所需要輸入的字符,提供了一個最快捷,最簡便的編碼方式。
    這里,我們在HelloWorldController類的Index方法中添加使用一個視圖。在修改前的Index方法中返回一個字符串,我們修改這個方法來使它返回一個視圖,代碼如下所示。
    public ActionResult Index()
    {
    return View();
    }
    這段代碼表示Index方法使用一個視圖模板來在瀏覽器中生成HTML格式的頁面文件。
    接著,讓我們來添加一個Index方法所使用的視圖模板。在Index方法中點擊鼠標右鍵,然后點擊“添加視圖”,將會彈出一個“添加視圖”對話框。

    圖 3-1 添加視圖

    圖 3-2 添加視圖對話框
    在該對話框中,不做任何修改,直接點擊添加按鈕,觀察解決方案資源管理器中,在MvcMovie項目下的Views文件夾下創建了一個HelloWorld文件夾,并且在該文件夾中創建了一個Index.cshtml文件,同時該文件呈打開狀態,如圖3-3所示。

    圖 3-3 視圖模板文件被創建并呈打開狀態
    讓我們在該文件中追加一些文字,代碼如代碼清單3-1所示。
    代碼清單3-1 Index.cshtml視圖模板文件
    @{
    ViewBag.Title="首頁";
    }
    <h2>首頁</h2>
    <p>這是我的第一個視圖模板</p>
    運行應用程序,輸入地址"http://localhost:xxxx/HelloWordl"。由于在Index方法中并沒有做任何事情,只是簡單地一行代碼——“return View()”,該行代碼表示我們使用一個視圖模板文件來在瀏覽器中展示響應結果。因為我們并沒有顯示指定使用哪個視圖模板文件,所以使用了默認的Views文件夾下的HelloWorld文件夾下的Index.cshtml視圖模板文件。該視圖模板文件中只有簡單的兩行文字,在瀏覽器中的顯示結果如圖3-4所示。

    圖 3-4 在瀏覽器中顯示視圖
    看上去還不錯,但是請注意,該網頁的標題為“首頁”,但是網頁中的大標題文字卻為“我的MVC應用程序”,需要修改一下。


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

    圖 3-5 公有布局頁面
    布局模板頁允許你統一在一個地方指定整個Web應用程序或Web網站的所有HTML頁面的布局方法。請注意文件底部的“@ReaderBody()”代碼行。@RenderBody()是一個占位符,代表了所有你創建出來的實際應用的視圖頁面,在這里統一指定。將布局模板文件中的“我的MVC應用程序”修改為“我的MVCMovie應用程序”。代碼如下所示。
    <div id="title">
    <h1>我的MVCMovie應用程序</h1>
    </div>
    運行應用程序,注意網頁中的大標題被修改為“我的MVCMovie應用程序”。點擊“關于”鏈接,你可以看見“關于”頁面中的大標題也被修改為“我的MVCMovie應用程序”。由此可以看出一旦修改了布局頁面中的某處地方,該修改將會被應用到所有頁面中。

    圖 3-6 在布局頁面中修改了網頁中顯示的大標題
    完整的_Layout.cshtml文件中的代碼如代碼清單3-2所示。
    代碼清單3-2 _Layout.cshtml文件中的完整代碼
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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>我的MVCMovie應用程序</h1>
    </div>
    <div id="logindisplay">
    @Html.Partial("LogOnPartial")
    </div>
    <div id="menucontainer">
    <ul id="menu">
    <li>@Html.ActionLink("主頁","Index","Home")</li>
    <li>@Html.ActionLink("關于","About","Home")</li>
    </ul>
    </div>
    </div>
    <div id="main">
    @RenderBody()
    <div id="footer"></div>
    </div>
    </div>
    </body>
    </html>


    現在,讓我們修改Index視圖頁面的標題。
    打開Views文件夾下的HelloWorld文件夾下的Index.cshtml文件。這里我們修改兩處地方:
    首先,修改瀏覽器中的標題,然后修改<h2>標簽中的小標題文字。修改后代碼如代碼清單3-3所示。
    代碼清單3-3修改后的Index.cshtml視圖模板文件
    @{
    ViewBag.Title="電影清單";
    }
    <h2>我的電影清單</h2>
    <p>這是我的第一個視圖模板</p>


    ViewBag對象的Title屬性代表了顯示該頁面時的瀏覽器中的標題文字。讓我們回頭看一下布局模板文件,在該文件的<head>區段中的<title>標簽中使用了這個值來作為瀏覽器中的網頁標題。同時,通過這種方法,你可以很容易地在你的視圖模板文件與布局模板文件之間進行參數的傳遞。
    運行應用程序,在地址欄中輸入“http://localhost:xxxx/HelloWordl”,注意瀏覽器中的網頁標題,頁面中的小標題文字都變味修改后的標題文字(如果沒有發生變化的話,則可能你的網頁被緩存住了,可以按Ctrl+F5鍵來在重新刷新頁面時取消緩存)。
    同時也請注意_Layout.cshtml文件中的占位符中的內容被替換城了Index.cshtml視圖模板中的內容,所以瀏覽器中展示的是一個單一的HTML文件。瀏覽器中的運行結果如圖3-7所示。

    圖 3-7 修改了標題后的Index視圖模板文件
    此處,我們的數據(“這是我的第一個視圖模板”文字)是被直接書寫在文件中的,也就是說我們使用到了MVC應用程序的“V”(視圖View)與“C"(控制器Controller)。接下來,我們講解一下如何創建一個數據庫并從該數據中獲取模型數據。
    3.3 將控制器中的數據傳遞給視圖
    在我們使用數據庫并介紹模型之前,首先我們介紹一下如何將控制器中的信息傳遞給視圖。瀏覽器接收到一個URL請求后,將會調用控制器類來進行響應。你可以在控制器類中進行對接收到的頁面參數進行處理的代碼,你可以在控制器類中書寫從數據庫中獲取數據的代碼,你也可以在控制器類中書寫代碼來決定返回給客戶端什么格式的響應文件。控制器可以利用視圖模板文件來生成HTML格式的響應文件并顯示在瀏覽器中。
    控制器列負責提供視圖模板文件在生成HTML格式的響應文件時所需要的任何數據或對象。一個視圖模板文件不應該執行任何業務邏輯,也不應該直接和數據庫進行交互。它只能和控制器類進行交互,獲取控制器類所提供給它的數據,這樣可以使你的代碼更加清晰,容易維護。
    現在在我們的應用程序中,HelloWorldController控制器類中的Welcome方法帶有兩個參數-name與numTimes,Welcome方法直接向瀏覽器輸出這個兩個參數的參數值。這里,我們修改該方法使其不再直接輸出數據,而是使用一個視圖模板。該視圖模板將生成一個動態的響應流,這意味著我們需要將數據從控制器類傳遞給視圖以便利用該數據來生成該響應流。我們在該控制器類中將視圖模板所需要的數據送入一個ViewBag對象中,該對象可以被視圖模板直接接收。
    打開HelloWorldController.cs文件,修改Welcome方法,在該方法中為ViewBag對象添加一個Message屬性與NumTimes屬性,并且將屬性值分別設定為經過處理后的name參數值與numTimes參數值。ViewBag對象是一個動態對象,你可以為它添加任何屬性并賦上屬性值。在未賦值之前該屬性是不生效的,直到你賦值為止。修改后的HelloWorldController.cs文件中的代碼如代碼清單3-4所示。
    代碼清單3-4修改后的HelloWorldController.cs文件
    using System.Web;
    using System.Web.Mvc;
    namespace MvcMovie.Controllers
    {
    public class HelloWorldController:Controller
    {
    //GET:/HelloWorld/
    public ActionResult Index()
    {
    return View();
    }
    //GET:/HelloWorld/Welcome/
    public ActionResult Welcome(string name,int numTimes=1)
    {
    ViewBag.Message="Hello"+name;
    ViewBag.NumTimes=numTimes;
    return View();
    }
    }
    }
    現在ViewBag對象中已經包含了數據,它將自動傳遞給視圖。
    接下來,我們需要創建一個Welcome視圖模板。在“調試”菜單中,點擊“生成MvcMovie”將應用程序進行編譯,如圖3-8所示。

    圖 3-8 編譯應用程序
    接下來,在Welcome方法中點擊鼠標右鍵,然后點擊“添加視圖”,彈出對話框如圖3-9所示。

    圖 3-9 為Welcome方法添加視圖
    在該對話框中不做任何修改,直接點擊添加按鈕,View文件夾下的HelloWorld文件夾中自動被創建一個Welcome.cshtml文件,打開該文件,在<h2>元素下添加代碼,讓瀏覽器顯示URL地址中傳入的name參數中設定的文字,顯示次數等于URL地址中傳入的numTimes參數中設定的次數。修改后的Welcome.cshtml文件中的代碼如代碼清單3-5所示。
    代碼清單3-5修改后的Welcome.cshtml文件
    @{
    ViewBag.Title="Welcome";
    }
    <h2>Welcome</h2>
    <ul>
    @for(int i=0;i<ViewBag.NumTimes;i++)
    {
    <li>@ViewBag.Message</li>
    }
    </ul>
    運行應用程序,并且在地址欄中輸入
    “http://localhost:xx/HelloWorld/Welcome?name=Scott&numTimes=4”,該地址欄中的頁面參數將會自動傳遞給控制器。控制器將會把這些參數值放入ViewBag對象中并且傳遞給視圖。視圖在在瀏覽器中顯示這些數據。

      本站是提供個人知識管理的網絡存儲空間,所有內容均由用戶發布,不代表本站觀點。請注意甄別內容中的聯系方式、誘導購買等信息,謹防詐騙。如發現有害或侵權內容,請點擊一鍵舉報。
      轉藏 分享 獻花(0

      0條評論

      發表

      請遵守用戶 評論公約

      類似文章 更多

      主站蜘蛛池模板: 中文字幕日韩国产精品| 在线日韩日本国产亚洲| 亚洲gay片在线gv网站| 久久香蕉国产线看观看怡红院妓院| 久久精品岛国AV一区二区无码| 亚洲精品国产精品乱码视色| 精品一区二区亚洲国产| 啊轻点灬大JI巴太粗太长了欧美| 人人妻人人澡人人爽人人DVD| 日韩精品亚洲专在线电影| 久久久国产精品VA麻豆| 亚洲精品国产免费av| 色伦专区97中文字幕| 中文字幕亚洲人妻系列| 日本大胆欧美人术艺术| XXXXXHD亚洲日本HD| 久久丫精品国产亚洲AV不卡| 亚洲男女羞羞无遮挡久久丫 | 东京热人妻无码一区二区av| 免费VA国产高清大片在线| 国产精品自产拍在线观看中文| 亚洲国产良家在线观看| 国产成人精品午夜福利| 人人超人人超碰超国产| 白嫩少妇无套内谢视频| 国产欧美日韩一区二区三区| 两个人看的视频WWW在线高清| 国产精品久久久久7777| 久热爱精品视频线路一| 黄又色又污又爽又高潮| AV无码小缝喷白浆在线观看| 巨茎中出肉欲人妻在线视频| 日韩中文字幕人妻精品| 无码人妻蜜肉动漫中文字幕| 另类国产精品一区二区| 精品视频在线观看免费观看| 99久久精品国产一区二区蜜芽| 东北女人毛多水多牲交视频| 日本高清视频色欧WWW| 少妇人妻偷人精品免费| 国产真人无码作爱视频免费|