Как добавить CSS-стили в DataPager

Question

У меня простой вопрос. У меня есть ListView, к которому я добавил элемент управления DataPager.

В настоящее время DataPager является просто числовым методом. Просто интересно, возможно ли добавить стили CSS к числовым числам IE имеет сплошную границу 1px вокруг каждого числа и т. Д.

Любая помощь будет принята с благодарностью.

Answer 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;
}

Я думаю, что это решит вашу проблему

Answer 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>

Answer 3

вам нужно взглянуть на вот некоторая информация:

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

Answer 4

Потому что в .NET, когда он генерирует элемент управления, он автоматически добавляет префикс примерно так: controlID = "data_customer" и стал таким как ctrl_1_etc_ + data_customer. Таким образом, вы должны написать все длинное имя этого элемента управления в файле CSS, и он работает точно! Надеюсь, это поможет вам!

Answer 5

Как ответил Нгуен Хип, установка CSSClass на элемент управления может помочь. Затем посмотрите на исходный код, сгенерированный элементом управления. Причина, по которой CssClass может не удалять границу, может заключаться в том, что .NET имеет тенденцию заключать сгенерированные элементы HTML в дополнительные элементы div или таблицы (граница может быть установлена ​​для другого элемента, содержащегося в этом элементе div). Как только вы узнаете, какой элемент имеет класс css, используйте селектор CSS для удаления границы.

Answer 6

Я не знаю, что такое элемент управления 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-селекторы. Плагин Firebug для Firefox также очень полезен для определения элементов макета и стилей, применяемых к ним в настоящее время.

* StackOverflow не нравится URL с подчеркиванием в них: Разбивка

Answer 7

Вы можете установить CssClass для своего контроля. Я думаю, что он может делать то, что вы хотите. Я не проверяю это так просто идеал! Надеюсь, что это полезно 4 вам! CssClass="Pagging" Pagging{ border:1px solid #000; }