如何将VueJS事件绑定到C#razor输入？

Question

我用razor html帮助器创建了一些下拉菜单:

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

我想使用VueJS为此输入添加"更改"事件处理程序

通常我会尝试添加一些东西 v-on:change="foo()"

但是,当我尝试将此添加到我的剃刀输入时,我收到错误,因为剃刀模板不支持冒号,据我所知

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

如何将Vue.js操作/事件绑定到此输入？可能吗？

Answer 1

尝试使用'IDictionary'方法而不是属性作为对象

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

您可以在控制器中实例化上面的Dictionary:

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

这是一个在我的机器上使用C#Asp.Net MVC 4.6.1在.cshtml文件中的示例:

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

它呈现给:

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