Javascript Metro Style App (4) 利用 Web API 建置 Metro Style App Grid Application Service

在這篇會用最快的方式去建置提供 Metro Style App Grid Application 資料的 Web API

根據 Metro Style App 預設的 json 格式建立 ViewModel

public class MetroStyleApp
{
public class Group
{
public string key { get; set; }
public string title { get; set; }
public string subtitle { get; set; }
public string backgroundImage { get; set; }
public string description { get; set; }
public IEnumerable<Item> items { get; set; }
}

public class Item
{
public string title { get; set; }
public string subtitle { get; set; }
public string content { get; set; }
public string backgroundImage { get; set; }
public string description { get; set; }
public Group group { get; set; }
}
}

✕這邊要自訂名稱也是可以,不過在 Metro Style App Grid Application 裡面就要去修改相對應的 javascript 了

建立資料庫

Group

id int
name nvarchar
subTitle nvarchar
title nvarchar
backgroundImage nvarchar
description nvarchar

Item

id int
groupId int
subTitle nvarchar
title nvarchar
article nvarchar
backgroundImage nvarchar
description nvarchar

✕其實資料庫怎麼建都沒有關係,只要能轉型成為 ViewModel 格式就OK了,這邊只是個人的作法

將資料庫資料轉為 ViewModel 輸出

搭配 Entity Framework & Value Injecter

public IEnumerable<MetroStyleApp.Item> Get()
{
NearByEntities db = new NearByEntities();
List<Item> dblist = db.Items.ToList();
List<MetroStyleApp.Item> itemList =
dblist.Select(it => new MetroStyleApp.Item()
.InjectFrom(it, new
{
group = (MetroStyleApp.Group)new MetroStyleApp.Group()
.InjectFrom(it.group, new { key = it.group.name })
,
content = it.article
}
))
.Cast<MetroStyleApp.Item>().ToList();
return itemList;
}

Metro Style App Grid Application 欄位顯示區塊對應

在群組頁面顯示情況下

image

在內容頁面顯示情況之下

image
這邊的 Content 是可以接受 Html 語法的


MVC4 多了什麼新東西 – Web API
Metro Style App (1) 建立 Javascript Metro Style Project
ASP.NET C# MVC ViewModel with valueinjecter

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *