代码改变世界

HTML input标签的checked属性与Razor解析

2016-03-17 00:44  muzinian  阅读(2378)  评论(0编辑  收藏  举报

在HTML中,input标签可以通过type属性设置为checkbox。同时,也就包含了一个checked属性。对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了。这背后的原因是源自于早期的HTML,checked是一个独立的boolean属性。

所以给1)checked赋值true

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

和2)直接写checked

<input type="checkbox" checked />

是等价的。

我在按照精通ASP.NET MVC4 和精通ASP.NET MVC5第5.4.2节中按照书中例子写了代码如下:

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

      这里在checked 和 等号之间有一个空格,这就导致了razor在解析的时候直接把checked按照上面说的第二种方式解析了,这就导致了三个选项都被勾选,而且后面的ViewBag对象的属性被直接解释为了各自本来的意思。而不是按照书上所说,根据值得不同要么直接不解析checked属性,要么checked属性被赋值为checked即checked="checked"。上面的代码去掉空格就可以正确显示了。这也提醒我,在写checked属性时不要手贱打空格。

      书里面在这一节最后一段第二句说的不明不白的,这里并不是翻译的问题,我找到了原书,原书写的也是不明不白。书中是这样说的:

“如果Razor插入False、null或者空字符串作为checked标签属性的值,那么,浏览器显示的复选框时已勾选的。但是,Razor在值为False或者null时,会完全栓除该属性标签”。这句话的意思是说,如果在Razor中checked被赋值为False、null或者空字符串时,浏览器会直接渲染成已勾选状态。而如果使用的是类似于上面ViewBag这种需要Razor求值的状况,就会自动把False、null和空字符串删掉这样就不会有勾选状态了。

 附上在爆栈网上的提问。关于checked的详细看回答者。