Razor template editor doesn't like my Knockout attr binding syntax

Question

I have an Knockout attr binding that is working perfectly well:

<a data-bind="attr: { href: 'Action?destination=' + '@Model.Property' + '&entityId=' + Id }">Select</a>

However, the syntax highlighting in Visual Studio is throwing an 'Unterminated String Constant' error once any model property in inserted into the href string.

I've experimented with '@()' and '@:', but nothing seems to make the editor happy.

Answer 1

I had a similar issue where I wanted to pass controller action URLs (provided by the UrlHelper instance of the Razor view) to my viewmodel functions to be used later in jQuery AJAX calls.

The following markup works in the browser, but gives syntax highlighting in Visual Studio:

<button data-bind="click: function (data) { someFunction(data, '@Url.Action("SomeAction", "SomeController")') }">Action!</button>

The syntax highlighting can be suppressed by changing the above to the following:

<button data-bind="@("click: function (data) { someFunction(data, '" + Url.Action("SomeAction", "SomeController") + "') }")">Action!</button>