How can I bind a VueJS event to a C# razor input?

Question

I have a few dropdowns created with razor html helpers:

 @Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...",
 new { @class = "form-control" })

I want to add a 'change' event handler to this input using VueJS

Normally I would try to add something along the lines of v-on:change="foo()"

However when I try to add this to my razor input, I receive errors because the razor template doesn't support colons as far as I'm aware

@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...",
     new { @class = "form-control", @v_on:change="foo()" })
                                       //^- Not allowed

How can I bind a Vue.js action/event to this input? Is it possible?

Answer 1

Try the 'IDictionary' method instead of the attributes as object

https://msdn.microsoft.com/en-us/library/gg569326(v=vs.111).aspx

You can instantiate the Dictionary above in the controller:

@{
  IDictionary<string, string> dic = new Dictionary<string, object>() { { "class", "form-control" }, { @"v-on:change", @"foo()" } };
}
@Html.DropDownList("formtype-filter", Model.FormTypes, "Any Type...", dic )

This is an example that works on my maschine with C# Asp.Net MVC 4.6.1 in a .cshtml-File:

@Html.Label("mylabell", new Dictionary<string, object> {{ "v-on:change", "foo()" } })

it renders to:

<label for="mylabell" v-on:change="foo()">mylabell</label>