CODEWITHSUNDEEP
asp.net-mvcrazor
muzi_chelsea
muzi_chelsea

Reputation: 53

Razor broken when a space between HTML’s attribute and its value

I have a ViewBag like this

ViewBag.ApplyDiscount = false;
ViewBag.ExpressShip = true;
ViewBag.Supplier = null;

and some cshtml snippets like this

Discount:<input type="checkbox" checked="@ViewBag.ApplyDiscount"/>
Express:<input type="checkbox" checked="@ViewBag.ExpressShip"/>
Supplier:<input type="checkbox" checked="@ViewBag.Supplier"/>

after razor rendered the cshtml snippets,the real html will be

Discount:<input type="checkbox"/>
Express:<input type="checkbox" checked="checked"/>
Supplier:<input type="checkbox"/>

but if I add a space between the checked attribute and =like

Discount:<input type="checkbox" checked ="@ViewBag.ApplyDiscount"/>
Express:<input type="checkbox" checked ="@ViewBag.ExpressShip"/>
Supplier:<input type="checkbox" checked ="@ViewBag.Supplier"/>

razor will render the cshtml snippet in a wrong way. The html will be like this:

Discount:<input type="checkbox" checked ="False"/>
Express:<input type="checkbox" checked ="True"/>
Supplier:<input type="checkbox" checked =""/>

This will happen no matter MVC4(VS2012) or MVC5(VS2015).

So, can anyone tell me why a space will cause this thing to happen?

Upvotes: 2

Views: 521

Answers (1)

Moby&#39;s Stunt Double
Moby&#39;s Stunt Double

Reputation: 2550

Because checked itself is a special stand-alone boolean attribute from legacy HTML and can be valid syntax without an attribute value.

It's presence alone indicates that the box is checked.

e.g.

<input type="checkbox" checked />

and

<input type="checkbox" checked="true" />

Perform the same way. It's why in jquery we always use the :checked selector. It obfuscates the need to check the variation.

Upvotes: 1

Related Questions