Razor视图调用返回bool的方法后d-none隐藏元素失效问题
错误原因
你的代码核心问题是没有将d-none类名添加到元素的class属性中,而是把d-none作为独立的HTML属性直接输出到标签上了。
渲染后的实际HTML结构类似下面这样:
<a href="/PurchaseWayBillDetailLot/1/2" class="btn btn-secondary" id="update-button-1" d-none>Update</a>
此时d-none是一个无值的自定义属性,不属于class列表,Bootstrap定义的.d-none { display: none !important; }样式规则根本不会命中这个元素,自然不会产生隐藏效果。
修正方法
将条件判断逻辑移动到class属性的赋值内部,根据方法返回值动态拼接d-none类名即可,修正后的代码如下:
<a href="/PurchaseWayBillDetailLot/@detailLots.Id/@Model.Id" class="btn btn-secondary @(_purchaseWayBillDetailLotServices.IsSaveStock(detailLots, Model) ? "d-none" : string.Empty)" id="update-button-@detailLots.Id"> Update </a>
修正后,当IsSaveStock方法返回true时,元素的class属性值会变为btn btn-secondary d-none,Bootstrap的隐藏样式会正常生效,元素会被隐藏。
补充说明:如果你的项目使用ASP.NET Core 3.0及以上版本,且已经引入了默认的MVC Tag Helper,也可以用内置的条件类绑定写法,逻辑更清晰,效果和上面的写法完全一致:
<a href="/PurchaseWayBillDetailLot/@detailLots.Id/@Model.Id" class="btn btn-secondary" asp-class-d-none="@_purchaseWayBillDetailLotServices.IsSaveStock(detailLots, Model)" id="update-button-@detailLots.Id"> Update </a>
内容的提问来源于stack exchange,提问作者Pınar
相关产品推荐
相关产品推荐

