iT邦幫忙

DAY 5
3

使用ASP.NET MVC 實作購物網站系列 第 5

使用ASP.NET MVC 實作購物網站 (五) - 檢視(View)

檢視(View)

View主要是展示UI給使用者觀看及使用,以ASP.NET MVC來說,View Engine為Razor,其實沒什麼特別的,也就是在HTML中可以提供嵌入C#程式碼來完成頁面輸出,讓頁面可以動態生成,而不是死板板的靜態HTML檔案,附檔名是*.cshtml

新增一個View

1. 在RouteTest中的Index,修改為[return View()],並按下滑鼠右鍵點選[新增檢視]:

2. 選擇使用版面配置頁,按下加入:

3. 此時會新增並開啟一個Index.cshtml檔案:

新增檢視的檔案位於專案的Views資料夾的Controller對應名稱目錄下,例如本範例是在[Views/RouteTest/]下。

Razor語法格式是以@{}包住來達成在cshtml檔案中嵌入C#程式碼,以達到控制輸出的目的。例如可以C# foreach語法來輸出 HTML Table,看一個實際的例子,我們將View內容改為如下:

1. 製造一個產品列表假資料productList,並且塞入三筆商品:

2. 利用foreach將productList輸出為HTML Table:

3. 運行專案可以看到結果:

這樣就達到用C#透過Razor View Engine來動態輸出Html頁面,其實使用Razor有個很棒的好處是強型別模型(strongly typed Model),讓我們在開發時期就可以發現語法錯誤喔。

既然用了MVC架構,資料在View才生成似乎不恰當,明天講解Model時我們將會介紹如何透過model在controller將資料丟給View顯示喔

今天的原始碼請參考這裡


上一篇
使用ASP.NET MVC 實作購物網站 (四) - 路由簡介(Route) 與 控制器(Controller)
下一篇
使用ASP.NET MVC 實作購物網站 (六) - 模型(Model)
系列文
使用ASP.NET MVC 實作購物網站30

1 則留言

1
valerie18y
iT邦新手 5 級 ‧ 2015-03-09 23:49:22

您好,很感謝您的教學,我按照您的步驟做到這裡,但是重做幾次都會出現同樣的問題,

請問是不是哪個環節出錯了呢?再麻煩您回覆,謝謝!

jinnit iT邦新手 5 級‧ 2017-05-04 10:36:40 檢舉

我參考了作者給的原始檔,

發現Models資料夾內,需要再建立一個RouteTest資料夾

建立好後,再新增一個控制器叫 TempProducts

內容是:

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

namespace Carts.Models.RouteTest
{
    public class TempProducts
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

好像是 是取得ID、NAME跟Price ,然後設定給全域的ID、Name、Price三個變數。

我要留言

立即登入留言