Skip to content

Commit a0e90f0

Browse files
committed
Using the MVC view model on the client with Aurelia bindings
1 parent 40f174f commit a0e90f0

File tree

3 files changed

+21
-8
lines changed

3 files changed

+21
-8
lines changed

src/FooBar.Web/TagHelpers/AureliaEnhanceTagHelper.cs

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
using FooBar.Web.Core.Helpers;
2+
using FooBar.Web.Core.Json;
23
using Microsoft.AspNetCore.Razor.TagHelpers;
34
using System;
45

@@ -18,6 +19,10 @@ public class AureliaEnhanceTagHelper : TagHelper
1819
[HtmlAttributeName(AuModuleAttributeName)]
1920
public string Module { get; set; }
2021

22+
private const string AuDataAttributeName = "th-aurelia-enhance-data";
23+
[HtmlAttributeName(AuDataAttributeName)]
24+
public object Data { get; set; }
25+
2126
public override void Process(TagHelperContext context, TagHelperOutput output)
2227
{
2328
Enhance = !String.IsNullOrEmpty(Module);
@@ -40,11 +45,17 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
4045

4146
if(!String.IsNullOrEmpty(Module))
4247
{
48+
string jsonData = "{}";
49+
if (Data != null)
50+
{
51+
jsonData = Data.ToJsonCamelCase();
52+
}
4353
output.PostElement.AppendHtml($@"
4454
<script>
4555
SystemJS.import('app/core/aurelia-enhancer').then(enhancer => {{
4656
SystemJS.import('{Module}').then(module => {{
47-
var clientModel = module.create();
57+
var data = {jsonData};
58+
var clientModel = module.create(data);
4859
enhancer.enhance(clientModel, document.getElementById('{elementId}'));
4960
}});
5061
}});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
@model FooBar.Web.Models.PersonModel
66

7-
<div th-aurelia-enhance-module="app/views/home/home-person">
7+
<div th-aurelia-enhance-module="app/views/home/home-person" th-aurelia-enhance-data="@Model">
88
<h1>Edit Person</h1>
99

1010
<div class="form-group">
1111
<label asp-for="FirstName"></label>
12-
<input asp-for="FirstName" class="form-control" value.bind="firstName" />
12+
<input asp-for="FirstName" class="form-control" value.bind="data.firstName" />
1313
</div>
1414

1515
<div class="form-group">
1616
<label asp-for="LastName"></label>
17-
<input asp-for="LastName" class="form-control" value.bind="lastName" />
17+
<input asp-for="LastName" class="form-control" value.bind="data.lastName" />
1818
</div>
1919

2020
<div class="form-group">
@@ -29,7 +29,7 @@
2929

3030
<div class="form-group">
3131
<label asp-for="Age"></label>
32-
<input asp-for="Age" class="form-control" value.bind="age" />
32+
<input asp-for="Age" class="form-control" value.bind="data.age" />
3333
</div>
3434

3535
<div class="form-group">
Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
export function create() {
2-
return new HomePersonClientModel();
1+
export function create(data: any) {
2+
return new HomePersonClientModel(data);
33
}
44

55
class HomePersonClientModel {
6+
data: any;
67
currentYear: number;
78

8-
constructor() {
9+
constructor(data: any) {
10+
this.data = data;
911
this.currentYear = new Date().getFullYear();
1012
}
1113
}

0 commit comments

Comments
 (0)