在页面加载时更改按钮样式

Question

这是我的桌子，在这张桌子上我有按钮形式的单元格。用我的 css 表，我把它们变成了绿色。

<asp:Table ID="Table1" runat="server" BorderWidth="2px" BorderColor="#0033cc" BackColor="#ffcccc" >

            <asp:TableRow>
                <asp:TableCell CssClass="Table-cell-room" ID="D256">D256<br /></asp:TableCell>
                <asp:TableCell><asp:Button runat="server" Width="100px" Text="Boka" ID="R1B1" OnClick="Button_Click_First_Row" CssClass="Buttons"/></asp:TableCell>
                <asp:TableCell><asp:Button runat="server" Width="100px" Text="Boka" ID="R1B2" OnClick="Button_Click_First_Row" CssClass="Buttons"/></asp:TableCell>
                <asp:TableCell><asp:Button runat="server" Width="100px" Text="Boka" ID="R1B3" OnClick="Button_Click_First_Row" CssClass="Buttons"/></asp:TableCell>
                <asp:TableCell><asp:Button runat="server" Width="100px" Text="Boka" ID="R1B4" OnClick="Button_Click_First_Row" CssClass="Buttons"/></asp:TableCell>
                <asp:TableCell><asp:Button runat="server" Width="100px" Text="Boka" ID="R1B5" OnClick="Button_Click_First_Row" CssClass="Buttons"/></asp:TableCell>
            </asp:TableRow>

我还有一个名为 Room 的数据库表，其中包含 Id、Button_id 和 CheckIfBooked。 现在我想使用我的“列”CheckedIfBook 来查看它们是否已被预订，即 CheckedIfBooked = 1。

所有这些工作，但我不知道在那些已经有 CheckedIfBooked = 1 的人中设置我的按钮样式。

这意味着在我的数据库表中我有 R1B1 并且它的值 CheckedIfBooked = 1。但我不知道在页面加载中对此进行编码。我也不想用

if(Button_id == R1B2){
  CheckedIfBooked == 1
  //Do some styling on that button
}

因为我有很多按钮，并且在我的 c# 代码中，我使用 sender 作为新按钮来从单击的按钮中获取正确的 ID。

Answer 1

可能的解决方案 #1

在渲染页面时，如果isBooked = true，则为您的按钮添加一个额外的css类

if (isBooked) {
  /// Render the "isBooked" TableCell Button 
  <asp:TableCell> ... CssClass="isBooked"/></asp:TableCell>  
} else {
  /// Render the "not Booked" TableCell Button 
  <asp:TableCell> ... CssClass="Button"/></asp:TableCell> 
}

然后在你的 css 中：

.isBooked { /* isBooked Button Styles Here */ }

所以当你的代码被渲染成 HTML 时，css 类已经就位了：

<!-- Example HTML Output -->
< ... class="Button"   ... ></>
< ... class="isBooked" ... ></>
< ... class="Button"   ... ></>

可能的解决方案 #2

在页面加载时，让 jQuery 查找已预订的按钮，然后禁用它们，或设置它们的样式等。

$(document).ready(function(){
    $("isBooked").each(function(index){
        // each isBooked element is now available via $(this)
        $(this).addClass("bookedButton");
        $(this).prop("disabled", true);
        // ...
    });
});

安全说明：仅在客户端禁用表单按钮（通过 javascript）是不够的，您还需要在服务器端验证数据。因此，如果您在客户端禁用表单元素，请确保您的服务器也验证没有任何“预订”试图提交到您的表单。

希望这会有所帮助。