如何与Razor和Knockout进行数据绑定

Question

I'm trying to set a Knockout-bound function's parameter with Razor. I've tried...

<a href="#" data-bind="click: function() { return myFunc(@Type.SomeType.ToString()); }">
    Click Me
</a>

and..

<a href="#" data-bind="click: function() { return myFunc(@Html.Raw(Type.SomeType.ToString())); }">
    Click Me
</a>

and..

<a href="#" data-bind="click: function() { return myFunc('@Html.Raw(Type.SomeType.ToString())'); }">
    Click Me
</a>

and..

<a href="#" data-bind="click: function() { return myFunc('@(Html.Raw(Type.SomeType.ToString()))'); }">
    Click Me
</a>

Is there a right way to do this?

(Background: this is for use in a bootstrap dropdown)

Answer 1

You can try to surround data-bind attribute with single quotes ( ' ) and pass the parameter using Json.Encode .

Full example:

@{
    // A string with a lot of special characters
    string myStr = "abc\"\\/'#{}@.:xyz";
}

<span data-bind='click: function() { myFunc(@Json.Encode(myStr)); }'>
    Click Me
</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script>
    ko.applyBindings({
        myFunc: function (myParam) {
            console.log(myParam);
        }
    });
</script>

In your case it would be:

<a href="#" data-bind='click: function() { return myFunc(@Json.Encode(Type.SomeType.ToString())); }'>
    Click Me
</a>