CODEWITHSUNDEEP
asp.net-mvcangularrazor
Andriy Horen
Andriy Horen

Reputation: 2950

ASP.NET MVC renders html tags & attributes in lowercase

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?

Upvotes: 13

Views: 835

Answers (2)

Jason Bray
Jason Bray

Reputation: 544

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".

Upvotes: 2

TheSoftwareJedi
TheSoftwareJedi

Reputation: 35236

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.

Upvotes: 3

Related Questions