ASP.NET MVC renders html tags & attributes in lowercase

Question

It seems that both Asp.net MVC Core and Asp.net MVC 5.x render html tags & attributes in lowercase and this behavior breaks angular bindings. To give an example: in my view.cshtml I define Angular component with camel case binding:

<my-component [fooBar]="foo"></my-component>

which is later rendered as:

<my-component [foobar]="foo"></my-component>

As far as Angular bindings are case-sensitive, input-property fooBar inside component remains undefined. Is there any way to override this rendering behavior and render html as-is?

Answer 1

Looking at view source, it appears that it is being rendered by razor as written, but when the element actually appears in chrome, it is lower-cased. I can only assume this is a chrome "feature".

Answer 2

When I put this in a cshtml file:

<test-tag [testingThisThing]="123" anotherThingTEST="abc"></test-tag>

I get exactly the same in the HTML source. Are you sure that the element isn't being modified after loading? Are you looking at "View Source" (not "Inspect Element")?

That said, my test-tag isn't defined as anything anywhere - are you using Tag Helpers or something? MVC itself doesn't lowercase all attributes.