MVC - Model 的部份

ASP.NET Core Web 應用開發–使用 MVC 框架 / PART I MVC 入門 / MVC - Model 的部份

除了檢視(V)與控制器(C),MVC 裏面的 M 表示資料模型 (Model),負責支援應用程式的資料維護操作,並根據需求透過控制器進一步與 View 作互動。

所謂的模型以類別檔案儲存於專案中的Models資料夾。

考慮以下的資料表,內容是康廷數位的出版圖書資料:

現在建立模型類別示範MVC中,模型 (M) 的實務設計,並且將其取出呈現在網頁,於 Models 資料夾按一下滑鼠右鍵展開功能表:

點選「加入」項目,於接下來的子功能表中點選「類別」,加入一個全新的類別,將其命名為「KTBook.cs」如下:

按一下「新增」按鈕,「KTBook.cs」類別檔案產生在 Models資夾,將其開啟,於其中建立描述上述資料表內容的類別結構,內容如下:

public class KTBook
{
    public int BookId { get; set; }
    public string Title { get; set; }
    public string ISBN { get; set; }
    public DateTime? PublicationDate { get; set; }
    public decimal? Price { get; set; }
    public int? Pages { get; set; }
    public string ImageUrl { get; set; }
}

其中每個屬性對應至資料結構中的欄位如下: 

屬性欄位
BookId編號
Title 書名
ISBN ISBN
PublicationDate 出版日期
Price 價格
Pages 頁數
ImageUrl 封面圖檔位址

接下來為每一筆資料建立一個KTBook類別物件,並封裝成資料集以提供控制器存取。

接下來同樣的步驟,於Modles資料夾另外建立一個類別檔案,命名為「Kangting.cs」,將其開啟配置以下的內容:

以下擷取其中的部份內容:

namespace HelloMVC.Models
{
    public class Kangting
    {
        public List<KTBook> Books
        {
            get
            {
                return new List<KTBook>
                {
                   new KTBook {
			BookId=10010,
			Title="商業級 ASP.NET MVC 樣式與架構實務",
			ISBN="9789869347518",
			PublicationDate=new DateTime(2019,5,30),
			Price=550,
			Pages=320,
			ImageUrl=""},
                   new KTBook {BookId=10011, … },
                   new KTBook {BookId=10009, … },
                   …
                };
            }
        }
    }
}

其中的Books回傳一個KTBook型別的 List 物件,物件中的每一組new KTBook宣告,封裝上述截圖資料表中,康廷數位出版的某一筆對應的書籍資料。

完成上述的設定,接下來控制器就可以透過 Kangting 類別取得Books集合物件 ,並且於檢視中轉換物件內容為對應的HTML,最後於瀏覽器呈現,現在建立一個新的控制器示範其中的過程。

於Controllers資料夾按右鍵開啟功能選單,加入新的控制器。


在接下來出現的對話方塊中,點選「MVC控制器 - 空白」,按一下「加入」按鈕:


緊接著出現以下的「新增項目」操作視窗介面:

確認其中的「MVC控制器 - 空白」項目被選取,於下方的「名稱」欄位中,輸入「BookController.cs」名稱,按一下「新增」按鈕完成新的控制器BookController建立作業,將其開啟,配置內容如下:

using HelloMVC.Models; 
namespace HelloMVC.Controllers
{
    public class BookController : Controller
    {
        public IActionResult Index()
        {
            Kangting kangting = new Kangting();
            var books = kangting.Books;
            return View(books);
        }
    }
}

一開始引用HelloMVC.Models以支援模型內容的存取。

在Index()動作方法中建立Kangting物件,透過Books屬性,取得其中所有回傳的書籍資料並儲存於books變數。

最後的 return 敘述回傳 View() 同時將books當作參數傳入,如此一來就可以在對應的檢視檔案中,讀取books的資料內容。

接下來建立檢視於瀏覽器呈現資料內容,在Index()動作方法的區塊範圍內按一下右鍵展開功能表,建立對應的檔視檔案Index.cshtml,這個檔案會儲存於Views/Book資料夾底下,以對應控制器BookController中的Index()動作方法。

將Index.cshtml開啟,輸入以下的內容:

由於Index()動作方法回傳View(books),第一行的 @model 表示對應books參數傳送進來的物件資料型別,後續的 HTML 標籤,結合Razor語法,利用foreach迴圈,逐一針對Model進行資料讀取,Model關鍵字封裝books參數包含的書籍清單資料。

每一次迴圈產生一組,並且利用相關屬性的引用選擇性的取出資料內容。

這裏僅讀取BookId與Title,想要的話同樣可以嘗試讀取其它KTBook的資料屬性。

到這裏完成了最基本的MVC 模型資料讀取示範,接下來將從模型的建立開始逐一討論整個流程的各項細節,以下是瀏覽 https://localhost:44397/Book/Index 得到的結果畫面。



沒有留言: