如何将 CSS 样式添加到 DataPager答案

【问题标题】：How to add CSS Styles to DataPager如何将 CSS 样式添加到 DataPager
【发布时间】：2009-04-06 02:25:27
【问题描述】：

我有一个简单的问题。我有一个 ListView，我在其中添加了一个 DataPager 控件。

目前，DataPager 只是基于纯数字。只是想知道，是否可以将 CSS 样式添加到数字数字 IE 在每个数字等周围有一个 1px 实心边框。

任何帮助将不胜感激。

【问题讨论】：

标签： asp.net css

【解决方案1】：

将 NumericButtonCssClass 插入 NumericPagerField

在我的示例中，我称之为 datapagerStyle

       <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="20">
    <Fields>
        <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="False" ShowNextPageButton="False"
            ShowPreviousPageButton="False" />
           <asp:NumericPagerField NumericButtonCssClass="datapagerStyle" />
        <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" ShowNextPageButton="False"
            ShowPreviousPageButton="False" />
    </Fields>
</asp:DataPager>

然后在你制作的样式表中

.datapagerStyle
{
    color:black;
    border: 1px solid black;
}

我想这会解决你的问题

【讨论】：

【解决方案2】：

    <asp:DataPager ID="DataPager1" runat="server" PageSize="6" OnPreRender="DataPager1_PreRender">
                                <Fields>
                                    <asp:NumericPagerField ButtonCount="5" NumericButtonCssClass="numeric_button" CurrentPageLabelCssClass="current_page" NextPreviousButtonCssClass="next_button"/>
                                    <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" 
                                        ShowNextPageButton="false" ShowPreviousPageButton="False" ButtonCssClass="last_button" />
                                </Fields>
                            </asp:DataPager>


   <style type="text/css">
   .numeric_button{background-color:#384B69;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;  border:none;}
    .current_page{background-color:#09151F;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
    .next_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
    .last_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
   </style>

【讨论】：

【解决方案3】：

您需要查看这里的一些信息：

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatepagerfield.pagertemplate.aspx

【讨论】：

【解决方案4】：

你可以为你的控件设置 CssClass 我认为这可以做你想做的事。我不测试它，所以只是一个理想！希望这对你有帮助！ CssClass="Pagging" Pagging{ border:1px solid #000; }

【讨论】：

【解决方案5】：

正如 Nguyen Hiep 回答的那样，为控件设置 CSSClass 可能会有所帮助。然后查看控件生成的源代码。 CssClass 可能没有删除边框的原因可能是 .NET 倾向于将生成的 HTML 元素包装在额外的 div 或表格中（边框可能设置在该 div 中包含的不同元素上）一旦你找出哪个元素有 css 类，使用 CSS 后代选择器移除边框。

【讨论】：

【解决方案6】：

因为在 .NET 中，当它生成控件时，它会自动添加前缀，例如： controlID = "data_customer" 变成了 ctrl_1_etc_ + data_customer。所以你必须在 CSS 文件中写下这个控件的所有长名称，它肯定可以工作！希望对您有所帮助！

【讨论】：

【解决方案7】：

我不知道 DataPager 控件是什么。但是，如果它是某种分页*类，并且您想做一些类似于 StackOverflow 新问题页面底部的操作，那么它在 CSS 中是完全可行的。

在大多数情况下，页码只是超链接。所以你可以做的是找出分页控件用于链接的类，并按照你想要的方式设置它们的样式。例如，如果 HTML 看起来像这样：

<div class="pagination">
    <span class="page_cur">1</span>
    <a href="news.php?page=2" class="page_num">2</a>
    <a href="news.php?page=3" class="page_num">3</a>
    <a href="news.php?page=4" class="page_num">4</a>
    <a href="news.php?page=5" class="page_num">5</a>
    ...
</div>

然后你会想在你的 CSS 中包含这样的东西：

<style>
div.pagination > span.page_cur, div.pagination > a.page_num {
   display: block;
   float: left;
   padding: 4px;
}
div.pagination > span.page_cur {
   background-color: #ddd;
   border: 1px solid #ddd;
}
div.pagination > a.page_num {
   background-color: #fff;
   border: 1px solid #e0e0e0;
}
</style>

如果您不知道用于分页编号的 CSS 选择器，我建议您查看一些有关 CSS 选择器的在线参考资料。 Firefox 的 Firebug 插件在识别布局元素和当前应用于它们的样式方面也非常有帮助。

*StackOverflow 显然不喜欢带有下划线的 URL： Pagination

【讨论】：

Calvin，如果您不知道 DataPager 是什么，请不要尝试回答这个问题。询问的人知道 CSS 是什么以及它是如何工作的。他们只是无法让 ASP:DataPager 接受 CSS，因此需要其他人的答案。只是请删除你的，这只是一个分心，如果你有兴趣，谷歌 ASP.Net DataPager 看看它是什么以及为什么 CSS 不起作用。