Using the MVC view model on the client with Aurelia bindings

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();
	}
}