上一篇中有同學提到為什么不使用視圖,而使用字符串,這一篇我們就開始使用視圖來處理。
創新互聯專注于網站建設|網站維護|優化|托管以及網絡推廣,積累了大量的網站設計與制作經驗,為許多企業提供了網站定制設計服務,案例作品覆蓋效果圖設計等行業。能根據企業所處的行業與銷售的產品,結合品牌形象的塑造,量身制作品質網站。我們已經可以從控制器的 Action 中返回一個字符串,這可以幫助我們更好地理解 Controller 是如何工作的。但是對于創建一個 Web 程序來說還是不夠的。下面我們使用更好的方法來生成 HTML,主要是通過模板來生成需要的 HTML,這就是視圖所要做的。
為了使用視圖模板,我們需要將HomeController 中的 Index 這個 Action 的返回類型修改為 ActionResult,然后,讓它像下面一樣返回一個視圖。
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
上面的修改表示我們將使用視圖來替換掉原來的字符串,以便生成返回的結果。
現在為我們的項目增加一個視圖,為達到這個目的,我們將光標移到 Index 方法內,然后,點擊鼠標的右鍵,在右鍵菜單中選擇“添加視圖(D)…”,這樣將會彈出增加視圖的對話框。
添加視圖的對話框允許我們快速,簡單地創建一個視圖模板,默認情況下,視圖的名稱使用當前 Action 的名字。因為我們是在 Index 這個 Aciton 上添加模板,所以添加視圖對話框中,視圖的名字就是 Index,我們不需要修改這個名字,點擊添加。
在點擊添加之后,Visual Studio 將會創建一個名為 Index.cshtml的視圖模板,放置在 ViewsHome 目錄中,如果沒有這個目錄,MVC 將會自動創建它。
Index.cshtml 所在文件夾的名稱和位置是很重要的,它是根據ASP.NET MVC 的約定來指定的。目錄名稱 ViewsHome ,匹配的控制器就是 HomeController ,視圖模板的名字 Index,匹配將要使用這個視圖的 Action 方法的名字。
當使用默認的約定的時候,ASP.NET MVC 允許我們不用顯式設置這些名字和位置,當我們的代碼如下所示的時候,將會默認尋找 ViewsHomeIndex.cshtml。
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
Visutal Studio 創建并打開了Index.cshtml 視圖模板,其中的內容如下:
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
視圖使用了 Razor 語法,這比 Web Form 視圖引擎的語法更加簡單。
前三行使用 ViewBag.Title 設置了頁面的標題,我們馬上就可以看到這樣做的效果,但是,首先,我們我們替換一下網頁的內容,將 <h1> 標記中的內容修改為 This is the Home Page 。
@{
ViewBag.Title = "Index";
}
<h2>This is the Home Page</h2>
現在,我們的首頁應該變成下面的樣子。
大多數的網站在頁面之間有許多共享的內容:導航,頁首,頁腳,公司的 Logo,樣式表等等。Razor 引擎默認使用名為 _Layout.cshtml 的布局來自動化管理,它保存在 /Views/Shared 文件夾中。
打開之后,可以看到下列內容:
<!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>
@RenderBody()
</body>
</html>
來自內容視圖中的內容,將會被通過 @RenderBody() 來顯示,任何出現在網頁中的公共內容就加入到 _Layout.cshtml 中,我們希望我們的 MVC 音樂商店有一個公共的頁首,其中含有鏈接到我們的首頁和商店區域的鏈接,所以,我們將這些內容直接添加到這個布局中。
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<linkhref="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
<scriptsrc="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
<body>
<divid="header">
<h1>
ASP.NET MVC MUSIC STORE</h1>
<ulid="navlist">
<liclass="first"><ahref="/" id="current">Home</a></li>
<li><ahref="/Store/">Store</a></li>
</ul>
</div>
@RenderBody()
</body>
</html>
在創建項目使用的空項目模板中,僅僅包含很簡單的用來顯示驗證信息的樣式。我們的設計師提供了一些額外的 CSS 樣式和圖片來改進網站的觀感,現在我們就使用它們。
首先,到網站 mvcmusicstore.codeplex.com 下載 MvcMusicStore-v3.0.zip,這里面有一個文件夾 MvcMusicStore-Assets,將這個文件夾的Content 文件夾的內容復制到項目的 Content 文件夾中。
你會被詢問是否需要覆蓋存在的文件,選擇是。
現在,網站的 Content 文件夾中的內容如下所示:
重新運行程序,現在的頁面變成了這樣。
我們回顧一下,什么發生了變化:HomeController 的 Index 的 Action 方法尋找并通過 ViewsHomeIndex.cshtml 模板生成輸出結果,代碼中是通過 return View() 實現的,因為默認的命名約定,Index 這個 Action 方法將會默認使用 Index 視圖輸出。
而 Index 視圖使用了我們的 _Layout.cshtml 模板,所以,歡迎信息被包含在標準的 HTML 布局中。
僅僅使用硬編碼的 HTML 不能創建令人感興趣的網站,創建動態網站,我們需要從控制器的 Action 傳送信息給視圖模板。
在 MVC 模式中,術語 Model 表示應用表現的數據,通常,模型對象用來表示數據庫中保存在表中的數據,也不一定如此。
控制器的 Action 方法通過返回的 ActionResule 可以傳送模型對象給視圖。這就允許控制器可以將所有生成回應需要的數據打包,然會傳送給視圖模板,以便生成適當的 HTML 回應,在 Action 方法中可以很容易理解,讓我們開始吧。
首先,我們將創建一些模型類來表示商店中的唱片類型和專輯類型,從創建類型 Genre 類開始,在項目中,右擊模型 Models 文件夾,然后選擇增加類選項,然后命名為 Genre.cs。
在新創建的類中增加一個屬性。
public class Genre
{
public string Name { get; set; }
}
注意:這里的 { get; set; } 是 C# 的自動屬性特性,這使得我們不需要在創建屬性的時候,先創建一個成員字段
現在,用同樣的方法創建專輯類 Album,它有兩個屬性:Title 和 Genre .
public class Album
{
public string Title { get; set; }
public Genre Genre { get; set; }
}
現在,我們修改 StoreController 通過模型來使視圖顯示動態信息,為了演示方便,我們定義專輯基于一個唯一的標識 Id, 我們將在視圖中顯示這個標識。
我們從修改 Details 這個 Action 使得可以顯示單個的專輯開始,在 StoreController.cs 的開始部分增加一些 using 語句來包含 MvcMusicStore.Models 命名空間,這使得我們不用總是輸入這個命名空間。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
然后,我們更新 Details Action ,使得返回 ActionResult 類型的結果而不是字符串,就像在 HomeController 中的 Index 方法中做得一樣。
public ActionResult Details(int id)
現在,修改方法的處理邏輯,返回一個專輯對象到視圖中,在這個項目最后,顯示的數據將會來自數據庫,現在我們僅僅填充一些數據而已。
public ActionResult Details(int id)
{
var album = new Album { Title = "Album" + id };
return View(album);
}
如果你對 c# 不太熟悉,可能你會認為使用 var 定義變量使用了遲綁定,這是不正確的,C# 編譯器使用賦予變量的值來推定變量的類型,所以,實際上變量的類型就是 Album 類型,因此不僅在編譯時, Visual Studio 的代碼編輯器中也會有類型支持。
下面創建一個使用專輯來生成 HTML 的模板,在這樣做之前,我們需要編譯項目,以便增加視圖的對話框知道我們新創建的專輯類型。你可以通過菜單“生成”的“生成解決方案”來完成。
另外,也可以通過熱鍵 Ctrl – Shift – B 來編譯項目。
已經可以創建視圖模板了,在 Details 方法中右鍵選擇“增加視圖…”
像以前一樣,我們看到創建視圖的對話框,不一樣的是,我們要選中“創建強類型視圖”,然后在下面的列表中選擇“Album”類,這樣視圖將會期望得到一個 Album 類型的對象。
在點擊增加之后,我們的視圖模板 ViewsStoreDetails.cshtml 被創建了,其中包含的如下的代碼:
@model MvcMusicStore.Models.Album
@{
ViewBag.Title = "Details";
}
<h2>Details</h2>
注意第一行,表示視圖使用強類型的 Album 類。Rozer 視圖引擎理解傳送來的 Album 對象,所以我們可以容易地訪問模型的屬性,在 Visual Studio 中得到智能感知的幫助。
更新 <h2> 標記,使得可以顯示專輯的 Title 屬性
@model MvcMusicStore.Models.Album
@{
ViewBag.Title = "Details";
}
<h2>Album: @Model.Title</h2>
注意,智能感知使得可以提示 Album 的屬性和方法。
再次運行并訪問 /Store/Details/5,可以得到下面的結果。
現在,我們繼續修改 Browse 方法,更新方法返回 ActionResult 類型的結果,修改方法的處理,返回一個 Genre 類型的對象實例。
public ActionResult Browse(string genre)
{
var genreModel = new Genre { Name = genre };
return View(genreModel);
}
在方法上右擊,選擇“增加視圖…”,增加一個強類型的視圖。
修改 <h2> 標記顯示 Genre 的信息
@model MvcMusicStore.Models.Genre
@{
ViewBag.Title = "Browse";
}
<h2>Browsing Genre: @Model.Name</h2>
重新運行,訪問 /Store/Browse?Genre=Disco,可以看到如下的顯示
最后,將 Index 也修改為強類型的視圖,顯示所有唱片的類別,我們使用 Genre 的一個列表,而不是單個的 Genre 對象。
public ActionResult Index()
{
var genres = new List<Genre>
{
new Genre { Name = "Disco"},
new Genre { Name = "Jazz"},
new Genre { Name = "Rock"}
};
return View(genres);
}
創建一個強類型的視圖
首先,我們將期望得到多個 Genre 對象而不是一個,將第一行修改為如下內容。
@model IEnumerable<MvcMusicStore.Models.Genre>
這告訴視圖引擎模式是一個包含多個 Genre 對象的集合,我們使用 IEnumerable<Genre> 而不是 List<Genre>,因為這樣更通用,可以允許我們在以后改變集合為任何實現 IEnumerable 接口的集合。
現在,我們遍歷集合中的 Genre 對象進行處理。
@model IEnumerable<MvcMusicStore.Models.Genre>
@{
ViewBag.Title = "Store";
}
<h3>
Browse Genres</h3>
<p>
Select from @Model.Count() genres:</p>
<ul>
@foreach (var genre in Model)
{ <li>@genre.Name</li>
}
</ul>
注意,此時有完全的智能提示
在 foreach 循環中,也同樣有提示。
再次運行程序,我們可以看到如下的結果。
現在,我們的 /Store 可以使用純文本列出當前的分類名稱,下一步,我們將這些純文本替換成可以鏈接到瀏覽分類的鏈接 /Store/Browse 上,這樣,當用戶點擊音樂分類“Disco”將會被導航到 /Store/Browse?genre=Disco 的 URL 地址上。我們再次更新ViewsStoreindex.cshtml 視圖模板,先看一下,一會我們還會再次改進。
<ul>
@foreach (var genre in Model)
{
<li><ahref=/Store/Browse?genre=@genre.Name>@genre.Name</a></li>
}
</ul>
這樣就可以工作了,但是這里使用了硬編碼的字符串,如果我們希望修改控制器的名稱,那么,我們就要找到所有這樣的位置進行修改
更好的處理方式是使用 HTMLHelper 的助手方法,ASP.NET MVC 包含了一個 HTML 的助手類,其中的方法專門用于在視圖模板中完成多種常見的任務,其中的Html.ActionLink() 助手方法就是常用的一個,這使得可以容易地創建 <a> ,包括關于鏈接的一些細節處理,像地址需要進行 URL 編碼之類。
Html.ActionLink() 有多個重載用于多種情況,在簡單的情況下,你只需要提供提示的文本,以及指向的 Action 方法即可,在客戶端,舉個例子,我們希望鏈接到 /Store 的 Index 方法,提示文本為 Go to the Store Index,那么下面的代碼就可以。
@Html.ActionLink("Go to the Store Index", "Index")
注意:在這個例子中,我們不需要再特別指定控制器的名稱,因為我們在使用同一個控制器的不同 Action 方法。
我們的鏈接還需要一些參數,我們可以使用另外一種重載來傳遞三個參數。
1. 鏈接的提示文本,這里顯示分類的名稱
2. 控制器的名稱,Browse
3. 路由參數,提供名字 genre 和值,genre 的名字
合在一起,下面就是需要寫在視圖模板中的內容
<ul> @foreach (var genre in Model)
{
<li>@Html.ActionLink(genre.Name, "Browse", new { genre = genre.Name })</li>
}
</ul>
現在,當我們運行程序,訪問 /Store 的時候,將會看到一個分類的列表,每一個分類都是一個超級鏈接,當點擊鏈接的時候,將會被導航到 /Store/Browse?genre=[genre] 的地址
頁面中生成的分類鏈接如下:
<ul>
<li><ahref="/Store/Browse?genre=Disco">Disco</a></li>
<li><ahref="/Store/Browse?genre=Jazz">Jazz</a></li>
<li><ahref="/Store/Browse?genre=Rock">Rock</a></li>
</ul>
本文題目:ASP.NETMVC音樂商店-3.視圖與模型-創新互聯
文章鏈接:http://vcdvsql.cn/article24/eghje.html
成都網站建設公司_創新互聯,為您提供網站導航、全網營銷推廣、企業建站、做網站、面包屑導航、建站公司
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯