在 JavaScript 中取得 ASP.NET Core MVC 的 @model 資料

在 ASP.NET Core MVC 中我們可以將資料放在 Controller 中提供給 cshtml,例如下面的範例:
    
// 自訂類別
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

留言