Creating the AureliaBindTagHelper to render Aurelia bindings for ASP.…

…NET MVC model members

src/FooBar.Web/TagHelpers/AureliaBindTagHelper.cs

@@ -0,0 +1,139 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace FooBar.Web.TagHelpers
{
	[HtmlTargetElement(Attributes = VkAuBindPrefix + "*")]
	public class AureliaBindTagHelper : TagHelper
	{
		private const string VkAuBindPrefix = "th-au-bind-";
		private const string VkAuValueConvertersPrefix = "th-au-value-converters-";
		private const string VkAuBindingBehaviorsPrefix = "th-au-binding-behaviors-";

		private IDictionary<string, ModelExpression> _allModels;
		/// <summary>
		/// If attribute is foo and MVC Model member is Bar; th-au-bind-foo="Bar"
		/// To change binding type from default .bind; th-au-bind-foo.one-time="Bar" (other possibles are .one-way and .two-way) 
		/// </summary>
		[HtmlAttributeName("th-au-all-models", DictionaryAttributePrefix = VkAuBindPrefix)]
		public IDictionary<string, ModelExpression> AllModels {
			get {
				return _allModels ??
					   (_allModels = new Dictionary<string, ModelExpression>(StringComparer.OrdinalIgnoreCase));
			}
			set {
				_allModels = value;
			}
		}

		private IDictionary<string, string> _allValueConverters;
		/// <summary>
		/// Aurelia Value Converters to use for each binding. If multiple separate with |.
		/// To set for attribute foo: th-au-value-converters-foo="conv1"
		/// </summary>
		[HtmlAttributeName("th-au-all-value-converters", DictionaryAttributePrefix = VkAuValueConvertersPrefix)]
		public IDictionary<string, string> AllValueConverters {
			get {
				return _allValueConverters ??
					   (_allValueConverters = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase));
			}
			set {
				_allValueConverters = value;
			}
		}

		private IDictionary<string, string> _allBindingBehaviors;
		/// <summary>
		/// Aurelia Binding Behaviours to use for each binding. If multiple separate with &.
		/// To set for attribute foo: th-au-binding-behaviors-foo="beh1"
		/// </summary>
		[HtmlAttributeName("th-au-all-binding-behaviors", DictionaryAttributePrefix = VkAuBindingBehaviorsPrefix)]
		public IDictionary<string, string> AllBindingBehaviors {
			get {
				return _allBindingBehaviors ??
					   (_allBindingBehaviors = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase));
			}
			set {
				_allBindingBehaviors = value;
			}
		}

		public override void Process(TagHelperContext context, TagHelperOutput output)
		{
			foreach (KeyValuePair<string, ModelExpression> item in AllModels)
			{
				string attributeName = item.Key;
				string bindType = "bind";
				if (attributeName.Contains("."))
				{
					var parts = attributeName.Split('.');
					attributeName = parts[0];
					bindType = parts[1];
				}

				string expression = BuildExpression(item.Value);

				string valueConverters = "";
				if (AllValueConverters.ContainsKey(attributeName))
				{
					valueConverters = AllValueConverters[attributeName];
				}

				string bindingBehaviors = "";
				if (AllBindingBehaviors.ContainsKey(attributeName))
				{
					bindingBehaviors = AllBindingBehaviors[attributeName];
				}

				expression = AddConvertersAndBehaviors(expression, valueConverters, bindingBehaviors);

				output.Attributes.SetAttribute(attributeName + "." + bindType, expression);
			}
		}

		public static string BuildExpression(ModelExpression model)
		{
			string name = model.Name;

			if (String.IsNullOrEmpty(name))
			{
				throw new InvalidOperationException("AureliaGenericBindTagHelper could not resolve name from the given ModelExpression.");
			}

			string result = string.Empty;
			string[] parts = name.Split('.');
			for (int i = 0; i < parts.Length; i++)
			{
				if (i > 0)
				{
					result += ".";
				}
				string part = parts[i][0].ToString().ToLowerInvariant() + parts[i].Substring(1); //Make camelCase;
				result += part;
			}
			result = "data." + result; //"data" is by convention the name of any MVC Model added as data to a client side model.
			return result;
		}

		public static string AddConvertersAndBehaviors(string bindExpression, string valueConverters, string bindingBehaviors)
		{
			string result = bindExpression;

			if (!String.IsNullOrWhiteSpace(valueConverters))
			{
				result += " | " + valueConverters;
			}

			if (!String.IsNullOrWhiteSpace(bindingBehaviors))
			{
				result += " & " + bindingBehaviors;
			}

			return result;
		}
	}
}

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

@@ -1,13 +1,13 @@
@{
    ViewData["Title"] = "Person";
	ViewData["Title"] = "Person";
}

@model FooBar.Web.Models.PersonModel

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

	@if(ViewData.ContainsKey("Feedback"))
	@if (ViewData.ContainsKey("Feedback"))
	{
		<div class="alert alert-info">
			@ViewData["Feedback"]
@@ -17,17 +17,20 @@
	<form asp-action="Person" data-ajax="true">
		<div class="form-group">
			<label asp-for="FirstName"></label>
			<input asp-for="FirstName" class="form-control" value.bind="data.firstName" />
			<input asp-for="FirstName" class="form-control" th-au-bind-value="FirstName" />
		</div>

		<div class="form-group">
			<label asp-for="LastName"></label>
			<input asp-for="LastName" class="form-control" value.bind="data.lastName" />
			<input asp-for="LastName" class="form-control" th-au-bind-value="LastName" />
		</div>

		<div class="form-group">
			<label>Full name</label>
			<div>${data.firstName} ${data.lastName}</div>
			<div>
				<span th-au-bind-textcontent="FirstName"></span>
				<span th-au-bind-textcontent="LastName"></span>
			</div>
		</div>

		<div class="form-group">
@@ -37,7 +40,7 @@

		<div class="form-group">
			<label asp-for="Age"></label>
			<input asp-for="Age" class="form-control" value.bind="data.age" />
			<input asp-for="Age" class="form-control" th-au-bind-value="Age" />
		</div>

		<div class="form-group">