格式化asp:DataPager以在ul li中显示

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

目前,所有寻呼机项目都显示如下:

 

但是我需要将所有项目包装在无序列表中,而不是跨度和标签。 我目前的加价看起来像这样:

 

我不知何故需要覆盖NextPreviousPagerField和NumericPagerField,因此它们输出

  • 标签而不是

    DataPager不支持开箱即用,因此您需要一个自定义控件。 幸运的是,它实施起来很棒!

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

    此控件仍将呈现已启用按钮的标签和当前页码的标签,但应接近您所需的标签:

     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输出:

      

    我对此有一个稍微不同的解决方案。 我没有改变DataPager的渲染,而是略微调整了标记,并且在渲染方面,它仍然看起来像“类似引导程序”,即使它没有带分页类的UL / LI标记。

    一个非常重要的事情(如https://stackoverflow.com/a/19398488/1948625中所述 )正在更改用于禁用控件的类asp.net输出,它默认为“aspNetDisabled”但是对于bootstrap,它更好地简单地使用“禁用”。 在Global.asax的Application_Start中执行此操作。 如果不这样做,则第一页,上一页,下一页和最后一页按钮不会显示为禁用。

     void Application_Start(object sender, EventArgs e) { WebControl.DisabledCssClass = "customDisabledClassName"; } 

    来源: WebControl.DisabledCssClass属性(MSDN)

             

    上面的Asp.net服务器标记呈现为此寻呼机: asp.net服务器标记呈现为此寻呼机

    这是渲染的html:

      |< < 1 2 3 4 5 6 7 8 9 10 ... > >|  

    除了理查德的答案之外……我使用了他的方法并增加了对“禁用”和“主动”类以及周围div-Tag-的支持

    更新:我添加了John对active-Label特殊渲染的建议,作为正确渲染pagination-smpagination-lg的超链接。 非常感谢和感谢约翰。

    更新2:添加了控件的id呈现。 感谢DGibbs。

      [ Bindable(false), Category("Appearance"), DefaultValue("pagination pagination-centered"), Description("Css class for the surrounding div") ] public virtual string CssClass { get { if (ViewState["CssClass"] == null) { ViewState["CssClass"] = "pagination pagination-centered"; } return (string)ViewState["CssClass"]; } set { ViewState["CssClass"] = value; } } protected override HtmlTextWriterTag TagKey { get { return HtmlTextWriterTag.Div; } } protected override void AddAttributesToRender(HtmlTextWriter writer) { if (HasControls()) { writer.AddAttribute("id", base.ClientID); writer.AddAttribute(HtmlTextWriterAttribute.Class, CssClass); } } protected override void RenderContents(HtmlTextWriter writer) { if (HasControls()) { writer.RenderBeginTag(HtmlTextWriterTag.Ul); foreach (Control child in Controls) { var item = child as DataPagerFieldItem; if (item == null || !item.HasControls()) { child.RenderControl(writer); continue; } foreach (Control ctrl in item.Controls) { var space = ctrl as LiteralControl; if (space != null && space.Text == " ") continue; // Set specific classes for li-Tag bool isCurrentPage = false if (ctrl is System.Web.UI.WebControls.WebControl) { // Enabled = false -> "disabled" if (!((System.Web.UI.WebControls.WebControl)ctrl).Enabled) { writer.AddAttribute(HtmlTextWriterAttribute.Class, "disabled"); } // there can only be one Label in the datapager -> "active" if (ctrl is System.Web.UI.WebControls.Label) { isCurrentPage = true; writer.AddAttribute(HtmlTextWriterAttribute.Class, "active"); } } writer.RenderBeginTag(HtmlTextWriterTag.Li); // special rendering as hyperlink for current page if (isCurrentPage) { writer.AddAttribute(HtmlTextWriterAttribute.Href, "#"); writer.RenderBeginTag(HtmlTextWriterTag.A); } ctrl.RenderControl(writer); if (isCurrentPage) { writer.RenderEndTag(); // A } writer.RenderEndTag(); } } writer.RenderEndTag(); } } 

    我对Andreas的答案做了其他修改。 Bootstrap示例将当前页面(活动)页面包装在超链接标记内,因此我注意到在选择大小变化(如pagination-lg或pagination-sm)时,某些Bootstrap模板无法正确格式化活动标记。 这是我的RenderContents版本,添加了额外的超链接包:

      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 ctrl in item.Controls) { var space = ctrl as LiteralControl; if (space != null && space.Text == " ") continue; // Set specific classes for li-Tag var isCurrentPage = false; if (ctrl is WebControl) { // Enabled = false -> "disabled" if (!((WebControl)ctrl).Enabled) writer.AddAttribute(HtmlTextWriterAttribute.Class, "disabled"); // there can only be one Label in the datapager -> "active" if (ctrl is Label) { isCurrentPage = true; writer.AddAttribute(HtmlTextWriterAttribute.Class, "active"); } } writer.RenderBeginTag(HtmlTextWriterTag.Li); if (isCurrentPage) { writer.AddAttribute(HtmlTextWriterAttribute.Href, "#"); writer.RenderBeginTag(HtmlTextWriterTag.A); } ctrl.RenderControl(writer); if (isCurrentPage) writer.RenderEndTag(); writer.RenderEndTag(); } } } }