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。现在我想用我的＆＃34; colum＆＃34; CheckedIfBook以查看它们是否已被预订，这意味着CheckedIfBooked = 1。

所有这些工作，但我不知道在桌子上设置我的按钮样式，哪些已经CheckedIfBooked = 1。

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

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

因为我有很多按钮，在我的c＃代码中，我使用发送者作为新按钮，从点击的按钮中获取正确的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）是不够的，还需要在服务器端验证数据。因此，如果您在客户端上禁用表单元素，请确保您的服务器还验证没有任何“已预订”尝试提交到您的表单。

希望这会有所帮助。

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

1 个答案:

可能的解决方案＃1

可能的解决方案＃2