標籤

ASP.NET MVC (29) Visual C# (15) JQuery (10) Plugins (8) JQuery Plugins (6) JavaScript (6) MySQL (5) CSS (4) LinQ (4) Mac OS (4) CentOS (3) Design Pattern (3) Entity Framework (3) IIS (3) Python (3) Windows (3) php (3) Docker (2) LAMP (2) SQL Server (2) WCF (2) .NET (1) .NET Core (1) AWS (1) Browser (1) GIS (1) IE (1) Internet Security (1) Linux (1) Platform (1) React (1) SEO (1) Testing (1) VMware (1) Windows 7 (1) cookie (1) curl (1) laravel (1) phpBB (1) session (1) 中古屋 (1) 透天 (1) 閒言閒語 (1) 面試 (1) 鳥松 (1)

2014年10月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顯示喔

今天的原始碼請參考這裡









5 則留言:

  1. Model 資料夾下也要新增RouteTest資料夾,然後加入TempProducts.cs吧?不然編譯一直過不了

    回覆刪除
    回覆
    1. 原始碼範例中的確是Models資料夾新增RouteTest資料夾

      刪除
    2. 不知道是哪裡出錯了....按步驟弄...然後我也新增了MODELS裡面資料夾的CLASS....仍然無法...我是從教學一做到這裡來的....請問是否有哪裡沒有講到....舉例MODELS資料夾裡面要新增CLASS教學裡面就沒教到...我也是看留言才知道要加的???

      錯誤訊息大概都是
      the type or namespace name XXXXX' could not be found. are you missing an assembly reference

      XXXXX可能是MODELS(這是在還沒有在MODEL下新增資料夾的時候)
      等到新增了MODELS的資料夾後
      XXXXX就變成可能是ENITY、ASPNET....等等

      請問這樣子是顯是哪裡出了問題嗎
      或是我哪裡沒有注意到的嗎?

      刪除
  2. 你可以在Models底下Create一個RouteTestViewModels.cs並建立一個TempProduct class 應該也可以~ 不知道這樣做法正不正確

    回覆刪除
  3. 按照教程操作到这一步,程序报错。

    看了一下,是因为程序提示Model没有RouteTest:


    Compilation Error
    Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS0234: The type or namespace name 'RouteTest' does not exist in the namespace 'Carts.Models' (are you missing an assembly reference?)

    Source Error:




    Line 5:
    Line 6: //宣告商品列表
    Line 7: IList productList =
    Line 8: new List();
    Line 9:


    Source File: c:\users\zhangz90\documents\visual studio 2015\Projects\Carts\Carts\Views\RouteTest\Index.cshtml Line: 7

    回覆刪除