Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't use data attribute that ends in "name"?

I am well aware that you use underscores for data attributes with hyphens ("data_bind" instead of "data-bind", in the object), and they automatically get replaced with hyphens. But I have run into the problem where you can't do this underscore "hack," if the attribute ends with "name". So I have tried both of these, but neither work:

@Html.TextBoxFor(model => model.Street, new { data_encrypted_name = "street" })

@Html.TextBoxFor(model => model.Street, new { @data_encrypted_name = "street" })

When I view the HTML that is generated, for both cases above, it generates:

<input data-encrypted- id="ViewModel_Street" name="ViewModel.Street" type="text" value="" />

At first, I thought this might have something to do with multiple underscores/hyphens, but I tried two more test cases, to see what would happen, and they both worked just fine:

@Html.TextBoxFor(model => model.Street, new { data_encrypted_namme = "street" })

@Html.TextBoxFor(model => model.Street, new { data_name_encrypted = "street" })

So this problem is definitely related to having "name" at the end of the attribute.

Am I doing something wrong or missing something, or is this a bug in how .NET converts the attributes?

(For clarification, we use Braintree Payments, and they require the use of the "data-encrypted-name" attribute on certain inputs, so we can't just choose another attribute name.)

like image 390
John Washam Avatar asked Apr 15 '13 15:04

John Washam


People also ask

How do I select an element with a data attribute?

Use the querySelector method to get an element by data attribute, e.g. document. querySelector('[data-id="box1"]') . The querySelector method returns the first element that matches the provided selector or null if no element matches the selector in the document.

How do you target data attribute in CSS?

The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".

What are data -* attributes for?

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

What is data -* in HTML?

The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.


1 Answers

Thanks to Tommy for testing the behavior I described and finding it wasn't a bug for everyone.

After Tommy wrote this, I looked at the Helper we were using. I realized that we were actually using an Extension method called "NameLessTextBoxFor" (which we found here: How to extend html.textboxfor to remove the name attribute?), which removes the name="" attribute from the input before displaying it. I should have confirmed this before posting, but didn't recognize it could affect the HTML attributes passed into it.

And lo and behold, as you would probably expect, the functionality of this method was also cutting off any attribute that contained name="". It was doing a very simple search and replace on that text and removing it. So that was the issue here.

Thanks for your time and attention to this issue and apologize I didn't catch this myself.

like image 124
John Washam Avatar answered Nov 09 '22 04:11

John Washam