Using the MVC view model on the client with Aurelia bindings

Author: deap82

src/FooBar.Web/TagHelpers/AureliaEnhanceTagHelper.cs

@@ -1,4 +1,5 @@
 using FooBar.Web.Core.Helpers;
+using FooBar.Web.Core.Json;
 using Microsoft.AspNetCore.Razor.TagHelpers;
 using System;
 
@@ -18,6 +19,10 @@ public class AureliaEnhanceTagHelper : TagHelper
 		[HtmlAttributeName(AuModuleAttributeName)]
 		public string Module { get; set; }
 
+		private const string AuDataAttributeName = "th-aurelia-enhance-data";
+		[HtmlAttributeName(AuDataAttributeName)]
+		public object Data { get; set; }
+
 		public override void Process(TagHelperContext context, TagHelperOutput output)
 		{
 			Enhance = !String.IsNullOrEmpty(Module);
@@ -40,11 +45,17 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
 
 			if(!String.IsNullOrEmpty(Module))
 			{
+				string jsonData = "{}";
+				if (Data != null)
+				{
+					jsonData = Data.ToJsonCamelCase();
+				}
 				output.PostElement.AppendHtml($@"
                 <script>
                     SystemJS.import('app/core/aurelia-enhancer').then(enhancer => {{
 						SystemJS.import('{Module}').then(module => {{
-							var clientModel = module.create();
+							var data = {jsonData};
+							var clientModel = module.create(data);
 							enhancer.enhance(clientModel, document.getElementById('{elementId}'));
 						}});
                     }});

src/FooBar.Web/Views/Home/Person.cshtml

@@ -4,17 +4,17 @@
 
 @model FooBar.Web.Models.PersonModel
 
-<div th-aurelia-enhance-module="app/views/home/home-person">
+<div th-aurelia-enhance-module="app/views/home/home-person" th-aurelia-enhance-data="@Model">
 	<h1>Edit Person</h1>
 
 	<div class="form-group">
 		<label asp-for="FirstName"></label>
-		<input asp-for="FirstName" class="form-control" value.bind="firstName" />
+		<input asp-for="FirstName" class="form-control" value.bind="data.firstName" />
 	</div>
 
 	<div class="form-group">
 		<label asp-for="LastName"></label>
-		<input asp-for="LastName" class="form-control" value.bind="lastName" />
+		<input asp-for="LastName" class="form-control" value.bind="data.lastName" />
 	</div>
 
 	<div class="form-group">
@@ -29,7 +29,7 @@
 
 	<div class="form-group">
 		<label asp-for="Age"></label>
-		<input asp-for="Age" class="form-control" value.bind="age" />
+		<input asp-for="Age" class="form-control" value.bind="data.age" />
 	</div>
 
 	<div class="form-group">

src/FooBar.Web/app/views/home/home-person.ts

@@ -1,11 +1,13 @@
-export function create() {
-	return new HomePersonClientModel();
+export function create(data: any) {
+	return new HomePersonClientModel(data);
 }
 
 class HomePersonClientModel {
+	data: any;
 	currentYear: number;
 
-	constructor() {
+	constructor(data: any) {
+		this.data = data;
 		this.currentYear = new Date().getFullYear();
 	}
 }