格式化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> <span>1</span> <a href="javascript:__doPostBack('ctl00$cpBody$dpListing$ctl02$ctl01','')">2</a> <a href="javascript:__doPostBack('ctl00$cpBody$dpListing$ctl03$ctl00','')">Last</a> </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="< Prev 10" NextPageText="Next 10 >" 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屋!