如何在 ASP.NET AJAX TabControl 中设置控件样式答案

【问题标题】：How to style controls in ASP.NET AJAX TabControl如何在 ASP.NET AJAX TabControl 中设置控件样式
【发布时间】：2014-06-28 08:58:44
【问题描述】：

我正在尝试将样式应用于 AJAX TabControl 中的 GridView。样式在设计器中应用，但在浏览器中查看时，控件呈现时没有任何样式。如果我从 TabControl 中删除 GridView，则会应用样式。

代码如下：

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
   <style type="text/css">
       html
       {
           font-family:Arial;
       }
       #grid
       {
           border:none;
       }    
        #grid th
        {
            background:linear-gradient(#FAFAFA, #D8D8D8);            
            padding:5px;
            border-bottom:1px solid gray;
            border-top: 1px solid gray;    
            border-left:none;
            border-right:none;   
            font-style:normal; 
            font-weight: normal;

        }
        #grid td
        {
            padding:5px;  
            border-bottom:1px solid gray;
            border-top: 1px solid gray;    
            border-left:none;
            border-right:none;  
            width:100px;     
        }
        .select
        {
           text-decoration: none;
       }
       .select:hover
       {
           text-decoration: underline;
       }
   </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:TabContainer ID="TabContainer1" runat="server">
        <asp:TabPanel ID="pnl1" runat="server" HeaderText="My Tab">           
            <ContentTemplate>
                <asp:GridView ID="grid" runat="server"
            onselectedindexchanged="grid_SelectedIndexChanged">
            <Columns>
                <asp:TemplateField>
                    <EditItemTemplate >
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="30px" />                    
                </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                            CommandName="Select" Text="Select"></asp:LinkButton>
                    </ItemTemplate>
                    <ControlStyle CssClass="select" />
                    <ItemStyle Width="60px" CssClass="select" />
                </asp:TemplateField>
            </Columns>
            <HeaderStyle HorizontalAlign="Left" />
            <RowStyle HorizontalAlign="Left" />                    
        </asp:GridView>
            </ContentTemplate>
        </asp:TabPanel>
        </asp:TabContainer>
    </div>      
    </form>
</body>
</html>

为什么样式没有应用到 GridView？

【问题讨论】：

标签： css asp.net ajax tabcontrol

【解决方案1】：

GridView 中的 id 在 TabControl 内时将不再只是 grid。所以 #grid 的 css 样式将不再起作用。

网格的id 类似于TabContainer1_pnl1_grid。

让你的风格发挥作用的一种方法是在你的GridView 上分配一个CssClass 或grid（或任何你想叫它的名字）。

<asp:GridView ID="grid" runat="server" CssClass="grid">

并更改您的样式以使用 .grid 而不是 #grid。

.grid
{
    border: none;
}
.grid th
{
    background: linear-gradient(#FAFAFA, #D8D8D8);
    padding: 5px;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-left: none;
    border-right: none;
    font-style: normal;
    font-weight: normal;
}
.grid td
{
    padding: 5px;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-left: none;
    border-right: none;
    width: 100px;
}

【讨论】：