在 ASP.NET Core MVC 中我們可以將資料放在 Controller 中提供給 cshtml,例如下面的範例:
在 cshtml 中我們可以使用下面的方式顯示 Model 的資料:
但是在 JavaScript 中呢? 有個非常簡單的方法:將 .NET 物件序列化為 JavaScript 文字
參考資料:
Microsoft.Learn - IHtmlHelper<TModel>.Raw Method
// 自訂類別
public record Dto(int Id, string Name);
// 將資料放在
public IActionResult Index()
{
List<dynamic> objects = new List<dynamic>
{
new { Id = 1, Name = "Test1" },
new { Id = 2, Name = "Test2" },
new { Id = 3, Name = "Test3" }
};
return View(objects);
}
在 cshtml 中我們可以使用下面的方式顯示 Model 的資料:
@model List<WebApplicationMvc.Controllers.HomeController.Dto>
@foreach (var item in Model)
{
<div>
Id: @item.Id Name: @item.Name
</div>
}
但是在 JavaScript 中呢? 有個非常簡單的方法:將 .NET 物件序列化為 JavaScript 文字
@model List<WebApplicationMvc.Controllers.HomeController.Dto>
<script type="text/javascript">
const data = @Html.Raw(Json.Serialize(Model));
console.log('data',data);
</script>
/*
Array(3) [ {…}, {…}, {…} ]
0: Object { id: 1, name: "Test1" }
1: Object { id: 2, name: "Test2" }
2: Object { id: 3, name: "Test3" }
*/
參考資料:
Microsoft.Learn - IHtmlHelper<TModel>.Raw Method
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com