如何在CSHTML中根据data-bind值动态设置文本框的CSS类？

这里有两种常用的方案，你可以根据自己的场景选择：

方案1：服务器端Razor语法直接判断（适合页面渲染时确定样式） #

因为CSHTML是Razor视图，我们可以直接用Razor的条件表达式动态生成class属性：

<div class="@(Model.myData != null && !string.IsNullOrWhiteSpace(Model.myData.ToString()) ? "eight columns" : "sixteen columns")" 
     data-bind="value: myData">
    <!-- 你的文本框或其他内容 -->
</div>

这里的逻辑是：

• 检查Model.myData是否不为null，并且转换为字符串后不是空/空白内容
• 如果满足条件，就渲染eight columns类；否则渲染sixteen columns类
  注意：如果myData是复杂类型（比如自定义对象），你需要调整判断逻辑，比如检查对象的某个属性是否有值，而不是直接ToString()。

方案2：前端Knockout.js动态绑定（适合数据会在前端动态变化的场景） #

既然你用到了data-bind，说明是用Knockout.js，那也可以直接用Knockout的css绑定来实现前端动态切换类：

<div data-bind="css: { 
    'eight columns': myData() !== null && myData() !== '', 
    'sixteen columns': myData() === null || myData() === '' 
}, value: myData">
    <!-- 你的文本框或其他内容 -->
</div>

这种方式的好处是，当myData这个observable的值在前端变化时，class会自动更新，不需要重新刷新页面。

两种方案都能满足你的需求，如果你希望页面渲染完成后样式就固定，选方案1；如果需要根据前端数据动态调整样式，选方案2就更合适啦。

内容的提问来源于stack exchange，提问作者doxsi