如何在 ASP.NET AJAX TabControl 中设置控件样式
Posted
技术标签:
【中文标题】如何在 ASP.NET AJAX TabControl 中设置控件样式【英文标题】：How to style controls in 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？
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于如何在 ASP.NET AJAX TabControl 中设置控件样式的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ASP.NET MVC 中进行长轮询 AJAX 请求？ [复制]
如何在 asp.net 中使用 AJAX 文件上传来限制文件大小？