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

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。现在我想使用我的"column"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）是不够的，您还需要验证服务器端的数据。因此，如果您禁用客户端上的表单元素，请确保您的服务器也验证没有"预订"的内容试图提交到您的表单。

希望这能有所帮助。