格式化asp：DataPager以在ul中显示 [英] Formatting an asp:DataPager to show in ul li

问题描述

我正在使用Twitter Bootstrap和ASP.Net C＃Webforms构建一个网站。我的页面上有一个绑定有DataPager的ListView，但是我需要更改.Net呈现DataPager的HTML的方式。

I am building a website using the Twitter Bootstrap and ASP.Net C# Webforms. I have a ListView on my page with a DataPager bound to it, but I need to change the way .Net renders the HTML of the DataPager.

当前，所有分页器项正在这样显示：

Currently, all pager items are displaying like this:

<div class="clearfix pagination pagination-centered"> <span id="cpBody_dpListing"> <a class="aspNetDisabled">First</a>&nbsp;<span>1</span>&nbsp; <a href="javascript:__doPostBack('ctl00$cpBody$dpListing$ctl02$ctl01','')">2</a>&nbsp; <a href="javascript:__doPostBack('ctl00$cpBody$dpListing$ctl03$ctl00','')">Last</a>&nbsp; </span> </div>

但是我需要将所有项目包装在无序列表中，而不是将span和tag包裹起来。
我当前的标记如下：

however I need to wrap all my items in an unordered list rather than span and a tags. My current mark-up looks like this:

<div class="clearfix pagination pagination-centered">
<asp:DataPager ID="dpListing" runat="server" PagedControlID="lvListing" PageSize="10" OnPreRender="dpListing_PreRender">
    <Fields>
        <asp:TemplatePagerField>
            <PagerTemplate>
                <asp:BulletedList ID="listPages" runat="server" DisplayMode="LinkButton" OnClick="listPages_Click"></asp:BulletedList>
            </PagerTemplate>
        </asp:TemplatePagerField>
        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowNextPageButton="false" ShowPreviousPageButton="false" />
        <asp:NumericPagerField PreviousPageText="&lt; Prev 10" NextPageText="Next 10 &gt;" ButtonCount="10" />
        <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="true" ShowNextPageButton="false" ShowPreviousPageButton="false" />
    </Fields>
</asp:DataPager>

我不知何故需要覆盖NextPreviousPagerField和NumericPagerField，以便它们输出< li>标签而不是< span>和< a>。

I somehow need to override the NextPreviousPagerField and NumericPagerField so they output <li> tags rather than <span> and <a>.

推荐答案

DataPager 不支持这是开箱即用的，因此您将需要一个自定义控件。

The DataPager doesn't support this out of the box, so you're going to need a custom control. Fortunately, it's quite east to implement!

对于每个 DataPagerField ， DataPager code>将 DataPagerFieldItem 控件添加到其自己的控件集合中，然后告诉该字段在该项目中创建其控件。内置字段将在按钮之间添加不间断空格（除非您将 RenderNonBreakingSpacesBetweenControls 属性设置为 false ） ，但它们很容易识别和抑制。

For each DataPagerField, the DataPager adds a DataPagerFieldItem control to its own control collection, and then tells the field to create its controls within that item. The built-in fields will add non-breaking spaces between the buttons (unless you set the RenderNonBreakingSpacesBetweenControls property to false), but they're quite easy to identify and suppress.

此控件仍将呈现< a> 标记为启用的按钮，而< span> 标记为当前页码，但应与所需的内容接近：

This control will still render the <a> tags for the enabled buttons and the <span> tag for the current page number, but should be close to what you need:

public class UnorderedListDataPager : DataPager
{
   protected override HtmlTextWriterTag TagKey 
   {
      get { return HtmlTextWriterTag.Ul; }
   }

   protected override void RenderContents(HtmlTextWriter writer)
   {
      if (HasControls())
      {
         foreach (Control child in Controls)
         {
            var item = child as DataPagerFieldItem;
            if (item == null || !item.HasControls())
            {
                child.RenderControl(writer);
                continue;
            }

            foreach (Control button in item.Controls)
            {
               var space = button as LiteralControl;
               if (space != null && space.Text == " ") continue;

               writer.RenderBeginTag(HtmlTextWriterTag.Li);
               button.RenderControl(writer);
               writer.RenderEndTag();
            }
         }
      }
   }
}

HTML输出：

<ul id="dpListing">
   <li><a class="aspNetDisabled">First</a></li>
   <li><span>1</span></li>
   <li><a href="javascript:__doPostBack('ctl00$cpBody$dpListing$ctl02$ctl01','')">2</a></li>
   <li><a href="javascript:__doPostBack('ctl00$cpBody$dpListing$ctl03$ctl00','')">Last</a></li>
</ul>

这篇关于格式化asp：DataPager以在ul中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！