ASP.NETMVC音樂商店-3.視圖與模型-創(chuàng)新互聯(lián)

上一篇中有同學(xué)提到為什么不使用視圖，而使用字符串，這一篇我們就開始使用視圖來處理。

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋效果圖設(shè)計(jì)等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身制作品質(zhì)網(wǎng)站。

我們已經(jīng)可以從控制器的 Action 中返回一個(gè)字符串，這可以幫助我們更好地理解 Controller 是如何工作的。但是對(duì)于創(chuàng)建一個(gè) Web 程序來說還是不夠的。下面我們使用更好的方法來生成 HTML，主要是通過模板來生成需要的 HTML，這就是視圖所要做的。

增加視圖模板

為了使用視圖模板，我們需要將HomeController 中的 Index 這個(gè) Action 的返回類型修改為 ActionResult，然后，讓它像下面一樣返回一個(gè)視圖。

public class HomeController : Controller
{
 //
// GET: /Home/
 public ActionResult Index()
      {
  return View();
      }
}

上面的修改表示我們將使用視圖來替換掉原來的字符串，以便生成返回的結(jié)果。

現(xiàn)在為我們的項(xiàng)目增加一個(gè)視圖，為達(dá)到這個(gè)目的，我們將光標(biāo)移到 Index 方法內(nèi)，然后，點(diǎn)擊鼠標(biāo)的右鍵，在右鍵菜單中選擇“添加視圖(D)…”，這樣將會(huì)彈出增加視圖的對(duì)話框。

添加視圖的對(duì)話框允許我們快速，簡單地創(chuàng)建一個(gè)視圖模板，默認(rèn)情況下，視圖的名稱使用當(dāng)前 Action 的名字。因?yàn)槲覀兪窃?Index 這個(gè) Aciton 上添加模板，所以添加視圖對(duì)話框中，視圖的名字就是 Index，我們不需要修改這個(gè)名字，點(diǎn)擊添加。

在點(diǎn)擊添加之后，Visual Studio 將會(huì)創(chuàng)建一個(gè)名為 Index.cshtml的視圖模板，放置在 ViewsHome 目錄中，如果沒有這個(gè)目錄，MVC 將會(huì)自動(dòng)創(chuàng)建它。

Index.cshtml 所在文件夾的名稱和位置是很重要的，它是根據(jù)ASP.NET MVC 的約定來指定的。目錄名稱 ViewsHome ，匹配的控制器就是 HomeController ，視圖模板的名字 Index，匹配將要使用這個(gè)視圖的 Action 方法的名字。

當(dāng)使用默認(rèn)的約定的時(shí)候，ASP.NET MVC 允許我們不用顯式設(shè)置這些名字和位置，當(dāng)我們的代碼如下所示的時(shí)候，將會(huì)默認(rèn)尋找 ViewsHomeIndex.cshtml。

public class HomeController : Controller
{
 //
// GET: /Home/
 public ActionResult Index()
      {
  return View();
      }
}

Visutal Studio 創(chuàng)建并打開了Index.cshtml 視圖模板，其中的內(nèi)容如下：

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

視圖使用了 Razor 語法，這比 Web Form 視圖引擎的語法更加簡單。

前三行使用 ViewBag.Title 設(shè)置了頁面的標(biāo)題，我們馬上就可以看到這樣做的效果，但是，首先，我們我們替換一下網(wǎng)頁的內(nèi)容，將 <h1> 標(biāo)記中的內(nèi)容修改為 This is the Home Page 。

@{
    ViewBag.Title = "Index";
}

<h2>This is the Home Page</h2>

現(xiàn)在，我們的首頁應(yīng)該變成下面的樣子。

為頁面的公共內(nèi)容使用布局

大多數(shù)的網(wǎng)站在頁面之間有許多共享的內(nèi)容：導(dǎo)航，頁首，頁腳，公司的 Logo，樣式表等等。Razor 引擎默認(rèn)使用名為 _Layout.cshtml 的布局來自動(dòng)化管理，它保存在 /Views/Shared 文件夾中。

打開之后，可以看到下列內(nèi)容：

<!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>

來自內(nèi)容視圖中的內(nèi)容，將會(huì)被通過 @RenderBody() 來顯示，任何出現(xiàn)在網(wǎng)頁中的公共內(nèi)容就加入到 _Layout.cshtml 中，我們希望我們的 MVC 音樂商店有一個(gè)公共的頁首，其中含有鏈接到我們的首頁和商店區(qū)域的鏈接，所以，我們將這些內(nèi)容直接添加到這個(gè)布局中。

<!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>

更新樣式表

在創(chuàng)建項(xiàng)目使用的空項(xiàng)目模板中，僅僅包含很簡單的用來顯示驗(yàn)證信息的樣式。我們的設(shè)計(jì)師提供了一些額外的 CSS 樣式和圖片來改進(jìn)網(wǎng)站的觀感，現(xiàn)在我們就使用它們。

首先，到網(wǎng)站 mvcmusicstore.codeplex.com 下載 MvcMusicStore-v3.0.zip，這里面有一個(gè)文件夾 MvcMusicStore-Assets，將這個(gè)文件夾的Content 文件夾的內(nèi)容復(fù)制到項(xiàng)目的 Content 文件夾中。

你會(huì)被詢問是否需要覆蓋存在的文件，選擇是。

現(xiàn)在，網(wǎng)站的 Content 文件夾中的內(nèi)容如下所示：

重新運(yùn)行程序，現(xiàn)在的頁面變成了這樣。

我們回顧一下，什么發(fā)生了變化：HomeController 的 Index 的 Action 方法尋找并通過 ViewsHomeIndex.cshtml 模板生成輸出結(jié)果，代碼中是通過 return View() 實(shí)現(xiàn)的，因?yàn)槟J(rèn)的命名約定，Index 這個(gè) Action 方法將會(huì)默認(rèn)使用 Index 視圖輸出。

而 Index 視圖使用了我們的 _Layout.cshtml 模板，所以，歡迎信息被包含在標(biāo)準(zhǔn)的 HTML 布局中。

使用模型為視圖傳遞信息

僅僅使用硬編碼的 HTML 不能創(chuàng)建令人感興趣的網(wǎng)站，創(chuàng)建動(dòng)態(tài)網(wǎng)站，我們需要從控制器的 Action 傳送信息給視圖模板。

在 MVC 模式中，術(shù)語 Model 表示應(yīng)用表現(xiàn)的數(shù)據(jù)，通常，模型對(duì)象用來表示數(shù)據(jù)庫中保存在表中的數(shù)據(jù)，也不一定如此。

控制器的 Action 方法通過返回的 ActionResule 可以傳送模型對(duì)象給視圖。這就允許控制器可以將所有生成回應(yīng)需要的數(shù)據(jù)打包，然會(huì)傳送給視圖模板，以便生成適當(dāng)?shù)?HTML 回應(yīng)，在 Action 方法中可以很容易理解，讓我們開始吧。

首先，我們將創(chuàng)建一些模型類來表示商店中的唱片類型和專輯類型，從創(chuàng)建類型 Genre 類開始，在項(xiàng)目中，右擊模型 Models 文件夾，然后選擇增加類選項(xiàng)，然后命名為 Genre.cs。

在新創(chuàng)建的類中增加一個(gè)屬性。

public class Genre
{
  public string Name { get; set; }
}

注意：這里的 { get; set; } 是 C# 的自動(dòng)屬性特性，這使得我們不需要在創(chuàng)建屬性的時(shí)候，先創(chuàng)建一個(gè)成員字段

現(xiàn)在，用同樣的方法創(chuàng)建專輯類 Album，它有兩個(gè)屬性：Title 和 Genre .

public class Album
{
  public string Title { get; set; }
  public Genre Genre { get; set; }
}

現(xiàn)在，我們修改 StoreController 通過模型來使視圖顯示動(dòng)態(tài)信息，為了演示方便，我們定義專輯基于一個(gè)唯一的標(biāo)識(shí) Id, 我們將在視圖中顯示這個(gè)標(biāo)識(shí)。

我們從修改 Details 這個(gè) Action 使得可以顯示單個(gè)的專輯開始，在 StoreController.cs 的開始部分增加一些 using 語句來包含 MvcMusicStore.Models 命名空間，這使得我們不用總是輸入這個(gè)命名空間。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using MvcMusicStore.Models;

然后，我們更新 Details Action ，使得返回 ActionResult 類型的結(jié)果而不是字符串，就像在 HomeController 中的 Index 方法中做得一樣。

public ActionResult Details(int id)

現(xiàn)在，修改方法的處理邏輯，返回一個(gè)專輯對(duì)象到視圖中，在這個(gè)項(xiàng)目最后，顯示的數(shù)據(jù)將會(huì)來自數(shù)據(jù)庫，現(xiàn)在我們僅僅填充一些數(shù)據(jù)而已。

public ActionResult Details(int id)
{
  var album = new Album { Title = "Album" + id };
  return View(album);
}

如果你對(duì) c# 不太熟悉，可能你會(huì)認(rèn)為使用 var 定義變量使用了遲綁定，這是不正確的，C# 編譯器使用賦予變量的值來推定變量的類型，所以，實(shí)際上變量的類型就是 Album 類型，因此不僅在編譯時(shí)， Visual Studio 的代碼編輯器中也會(huì)有類型支持。

下面創(chuàng)建一個(gè)使用專輯來生成 HTML 的模板，在這樣做之前，我們需要編譯項(xiàng)目，以便增加視圖的對(duì)話框知道我們新創(chuàng)建的專輯類型。你可以通過菜單“生成”的“生成解決方案”來完成。

另外，也可以通過熱鍵 Ctrl – Shift – B 來編譯項(xiàng)目。

已經(jīng)可以創(chuàng)建視圖模板了，在 Details 方法中右鍵選擇“增加視圖…”

像以前一樣，我們看到創(chuàng)建視圖的對(duì)話框，不一樣的是，我們要選中“創(chuàng)建強(qiáng)類型視圖”，然后在下面的列表中選擇“Album”類，這樣視圖將會(huì)期望得到一個(gè) Album 類型的對(duì)象。

在點(diǎn)擊增加之后，我們的視圖模板 ViewsStoreDetails.cshtml 被創(chuàng)建了，其中包含的如下的代碼：

@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

注意第一行，表示視圖使用強(qiáng)類型的 Album 類。Rozer 視圖引擎理解傳送來的 Album 對(duì)象，所以我們可以容易地訪問模型的屬性，在 Visual Studio 中得到智能感知的幫助。

更新 <h2> 標(biāo)記，使得可以顯示專輯的 Title 屬性

@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>

注意，智能感知使得可以提示 Album 的屬性和方法。

再次運(yùn)行并訪問 /Store/Details/5，可以得到下面的結(jié)果。

現(xiàn)在，我們繼續(xù)修改 Browse 方法，更新方法返回 ActionResult 類型的結(jié)果，修改方法的處理，返回一個(gè) Genre 類型的對(duì)象實(shí)例。

public ActionResult Browse(string genre)
{
  var genreModel = new Genre { Name = genre };
  return View(genreModel);
}

在方法上右擊，選擇“增加視圖…”，增加一個(gè)強(qiáng)類型的視圖。

修改 <h2> 標(biāo)記顯示 Genre 的信息

@model MvcMusicStore.Models.Genre
@{
       ViewBag.Title = "Browse";
}

<h2>Browsing Genre: @Model.Name</h2>

重新運(yùn)行，訪問 /Store/Browse?Genre=Disco，可以看到如下的顯示

最后，將 Index 也修改為強(qiáng)類型的視圖，顯示所有唱片的類別，我們使用 Genre 的一個(gè)列表，而不是單個(gè)的 Genre 對(duì)象。

public ActionResult Index()
{
  var genres = new List<Genre>
        {
   new Genre { Name = "Disco"},
   new Genre { Name = "Jazz"},
   new Genre { Name = "Rock"}
        };
  return View(genres);
}

創(chuàng)建一個(gè)強(qiáng)類型的視圖

首先，我們將期望得到多個(gè) Genre 對(duì)象而不是一個(gè)，將第一行修改為如下內(nèi)容。

@model IEnumerable<MvcMusicStore.Models.Genre>

這告訴視圖引擎模式是一個(gè)包含多個(gè) Genre 對(duì)象的集合，我們使用 IEnumerable<Genre> 而不是 List<Genre>，因?yàn)檫@樣更通用，可以允許我們?cè)谝院蟾淖兗蠟槿魏螌?shí)現(xiàn) IEnumerable 接口的集合。

現(xiàn)在，我們遍歷集合中的 Genre 對(duì)象進(jìn)行處理。

@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>

注意，此時(shí)有完全的智能提示

在 foreach 循環(huán)中，也同樣有提示。

再次運(yùn)行程序，我們可以看到如下的結(jié)果。

增加頁面之間的鏈接

現(xiàn)在，我們的 /Store 可以使用純文本列出當(dāng)前的分類名稱，下一步，我們將這些純文本替換成可以鏈接到瀏覽分類的鏈接 /Store/Browse 上，這樣，當(dāng)用戶點(diǎn)擊音樂分類“Disco”將會(huì)被導(dǎo)航到 /Store/Browse?genre=Disco 的 URL 地址上。我們?cè)俅胃耉iewsStoreindex.cshtml 視圖模板，先看一下，一會(huì)我們還會(huì)再次改進(jìn)。

<ul>
    @foreach (var genre in Model)
    {
         <li><ahref=/Store/Browse?genre=@genre.Name>@genre.Name</a></li>
    }
</ul>

這樣就可以工作了，但是這里使用了硬編碼的字符串，如果我們希望修改控制器的名稱，那么，我們就要找到所有這樣的位置進(jìn)行修改

更好的處理方式是使用 HTMLHelper 的助手方法，ASP.NET MVC 包含了一個(gè) HTML 的助手類，其中的方法專門用于在視圖模板中完成多種常見的任務(wù)，其中的Html.ActionLink() 助手方法就是常用的一個(gè)，這使得可以容易地創(chuàng)建 <a> ，包括關(guān)于鏈接的一些細(xì)節(jié)處理，像地址需要進(jìn)行 URL 編碼之類。

Html.ActionLink() 有多個(gè)重載用于多種情況，在簡單的情況下，你只需要提供提示的文本，以及指向的 Action 方法即可，在客戶端，舉個(gè)例子，我們希望鏈接到 /Store 的 Index 方法，提示文本為 Go to the Store Index，那么下面的代碼就可以。

@Html.ActionLink("Go to the Store Index", "Index")

注意：在這個(gè)例子中，我們不需要再特別指定控制器的名稱，因?yàn)槲覀冊(cè)谑褂猛粋€(gè)控制器的不同 Action 方法。

我們的鏈接還需要一些參數(shù)，我們可以使用另外一種重載來傳遞三個(gè)參數(shù)。

1. 鏈接的提示文本，這里顯示分類的名稱

2. 控制器的名稱，Browse

3. 路由參數(shù)，提供名字 genre 和值，genre 的名字

合在一起，下面就是需要寫在視圖模板中的內(nèi)容

<ul> @foreach (var genre in Model)
{
  <li>@Html.ActionLink(genre.Name, "Browse", new { genre = genre.Name })</li>
}
</ul>

現(xiàn)在，當(dāng)我們運(yùn)行程序，訪問 /Store 的時(shí)候，將會(huì)看到一個(gè)分類的列表，每一個(gè)分類都是一個(gè)超級(jí)鏈接，當(dāng)點(diǎn)擊鏈接的時(shí)候，將會(huì)被導(dǎo)航到 /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.視圖與模型-創(chuàng)新互聯(lián)
文章鏈接：http://jinyejixie.com/article24/eghje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、全網(wǎng)營銷推廣、企業(yè)建站、做網(wǎng)站、面包屑導(dǎo)航、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容