为htmlAttributes提供值，其中键在MVC视图中的名称中包含破折号（例如“data-bind”）

Question

Most of the Html helpers available in ASP.Net MVC have overloads with object htmlAttributes . This is used to provide additional attribute values for the outputted tags. While using the anonymous object notation for specifying htmlAttributes value, their property names must be valid c# identifier.

Now the problem arises when you are trying to output a property with a dash - character (for eg knockout js's "data-bind" attribute)

So for example lets take the following example:

@Html.TextBox("Title", string.Empty, new { data-bind="text: title" })

Try the above code in your view and at run-time it would show error screen with below message:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0746: Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access.

So the question is, how to provide htmlAttributes with their property keys having dash characters; like "data-bind"?

Answer 1

In your property names, replace all your dash - characters with an underscore _ (as shown in example below):

@Html.TextBox("Title", string.Empty, new { data_bind="text: title" })

This would work because all HTML helpers convert an underscore _ in a property name to a dash - when rendering the HTML; ie for your example, data_bind when outputted in html gets converted to data-bind .

Answer 2

This is not always correct. Say you're using parameters in a URL.

@Html.ActionLink("Add Job", "Index", "Home", new { foo_bar = "foobar" }, new { @class = "btn btn-default", data_foo = "bar" })

The data_foo does get rendered as "data-foo", but the parameters stays as a under bar. Your result will be: http://your.domain/yourapp/?foo_bar=foobar

Of course you can't actually use the dash or you get the error specified in the OP.

I have worked around this as follows, but I'd be interested to see if anyone that comes along in the future will have a better way:

@{
   var link = Html.ActionLink("Add Job", "Index", "Home", new { foo_bar = "foobar" }, new { @class = "btn btn-default", data_foo = "bar" });
}

@Html.Raw(link.ToString().Replace('_', '-'))

Answer 3

Use the HtmlHelper.AnonymousObjectToHtmlAttributes method. The following code will add a tooltip to the text input box, with the tooltip displaying the data from the DisplayAttribute description for MyIntVal on my model.

@{
    var htmlAttributesWithDashes =  HtmlHelper.AnonymousObjectToHtmlAttributes(
        new
        {
            id = "myTextBoxId",
            data_toggle = "tooltip",
            data_position = "left top",
            title = ModelMetadata.FromLambdaExpression( m => m.MyIntVal, ViewData ).Description
        }
        );


}

<div class="col-sm-6">
    @Html.TextBoxFor( m => m.MyIntVal, htmlAttributesWithDashes )
</div>