एएसपी स्वरूपण: उल पेज

Question

में दिखाने के लिए डेटापेजर मैं ट्विटर बूटस्ट्रैप और एएसपी.Net सी # वेबफॉर्म का उपयोग कर एक वेबसाइट बना रहा हूं। मेरे पास पेज पेजर के साथ मेरे पृष्ठ पर एक सूची दृश्य है, लेकिन मुझे जिस तरीके से डेटापेजर का HTML प्रस्तुत करता है, उसे बदलने की जरूरत है।

वर्तमान में सभी पेजर आइटम इस तरह प्रदर्शित कर रहे हैं:

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

लेकिन मैं बजाय एक बिना क्रम वाली सूची अवधि और एक टैग में अपने सभी आइटम रैप करने के लिए की जरूरत है। मेरे वर्तमान मार्क-अप इस तरह दिखता है:

<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 ओवरराइड करने के लिए की जरूरत है वे उत्पादन < ली > टैग के बजाय < अवधि > और < एक > तो।

Answer 1

DataPager बॉक्स के बाहर इसका समर्थन नहीं करता है, इसलिए आपको कस्टम नियंत्रण की आवश्यकता होगी। सौभाग्य से, यह लागू करने के लिए काफी पूर्व है!

प्रत्येक DataPagerField के लिए, DataPagerDataPagerFieldItem अपने नियंत्रण संग्रह पर नियंत्रण जोड़ता है, और फिर उस आइटम के भीतर अपने नियंत्रण बनाने के लिए फ़ील्ड को बताता है। अंतर्निर्मित फ़ील्ड बटन के बीच गैर-ब्रेकिंग रिक्त स्थान जोड़ देंगे (जब तक आप RenderNonBreakingSpacesBetweenControls प्रॉपर्टी को false पर सेट नहीं करते), लेकिन वे पहचानने और दबाने में काफी आसान हैं।

यह नियंत्रण अभी भी सक्षम बटन और वर्तमान पृष्ठ संख्या के लिए <span> टैग के लिए <a> टैग प्रस्तुत करना होगा, लेकिन के करीब होना चाहिए कि तुम क्या जरूरत है:

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> 

Answer 2

रिचर्ड के जवाब के अलावा ... मैंने अपने दृष्टिकोण का उपयोग किया और "अक्षम" और "सक्रिय" वर्गों और आस-पास के div-Tag-

के लिए समर्थन जोड़ा

अद्यतन: मैं पृष्ठांकन-एसएम और पृष्ठांकन-एलजी का सही चित्रण के लिए एक हाइपरलिंक के रूप में सक्रिय लेबल की विशेष प्रतिपादन के लिए जॉन के सुझाव गयी। तो जॉन के लिए क्रेडिट और धन्यवाद।

अद्यतन 2: नियंत्रण के लिए आईडी का प्रतिपादन जोड़ा गया। डीजीब्स के लिए धन्यवाद।

[ 
    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(); 
     } 
    } 

Answer 3

मैंने एंड्रियास के उत्तर में अतिरिक्त परिवर्तन किए हैं। बूटस्ट्रैप नमूने एक हाइपरलिंक टैग के अंदर वर्तमान पृष्ठ (सक्रिय) पृष्ठ को लपेटते हैं, इसलिए मैंने देखा है कि कुछ बूटस्ट्रैप टेम्पलेट्स आकार भिन्नता जैसे कि पेजिनेशन-एलजी या पेजिनेशन-एसएम चुनते समय सही टैग को सही तरीके से प्रारूपित नहीं करते हैं। यहाँ अतिरिक्त हाइपरलिंक चादर के साथ 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(); 
       } 
      } 
     } 
    } 

Answer 4

मैं यह करने के लिए एक अलग समाधान है।डेटापेजर के प्रतिपादन को बदलने के बजाय, मैंने मार्कअप को थोड़ा सा अनुकूलित किया है, और प्रतिपादन के संदर्भ में, यह अभी भी "बूटस्ट्रैप-जैसी" दिखता है, भले ही इसमें अंकन वर्ग के साथ यूएल/एलआई टैग न हों।

एक बहुत ही महत्वपूर्ण बात (जैसा कि https://stackoverflow.com/a/19398488/1948625 में बताया गया है) अक्षम नियंत्रण के लिए कक्षा एएसपीनेट आउटपुट बदल रहा है, यह "aspNetDisabled" के लिए डिफ़ॉल्ट है लेकिन बूटस्ट्रैप के लिए बस "अक्षम" का उपयोग करना बेहतर है। Global.asax में Application_Start में ऐसा करें। यदि आप नहीं करते हैं, पहला पृष्ठ, पिछला पृष्ठ, अगला पृष्ठ और अंतिम पृष्ठ बटन अक्षम नहीं दिखाई देते हैं।

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

स्रोत: WebControl.DisabledCssClass Property (MSDN)

<asp:DataPager ID="it" runat="server" class="btn-group btn-group-sm"> 
     <Fields> 
      <asp:NextPreviousPagerField PreviousPageText="<" FirstPageText="|<" ShowPreviousPageButton="true" 
       ShowFirstPageButton="true" ShowNextPageButton="false" ShowLastPageButton="false" 
       ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" /> 
      <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="btn btn-primary disabled" RenderNonBreakingSpacesBetweenControls="false" 
       NumericButtonCssClass="btn btn-default" ButtonCount="10" NextPageText="..." NextPreviousButtonCssClass="btn btn-default" /> 
      <asp:NextPreviousPagerField NextPageText=">" LastPageText=">|" ShowNextPageButton="true" 
       ShowLastPageButton="true" ShowPreviousPageButton="false" ShowFirstPageButton="false" 
       ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false"/> 
     </Fields> 
    </asp:DataPager> 

Asp.net सर्वर मार्कअप के ऊपर इस पेजर के रूप प्रस्तुत करता है:

और यह प्रदान की गई एचटीएमएल है:

<span id="ctl00_Body_CaseList918421504_ListControl_Pager_it" class="btn-group btn-group-sm"> 
    <a class="disabled btn btn-default">|&lt;</a> 
    <a class="disabled btn btn-default">&lt;</a> 
    <span class="btn btn-primary disabled">1</span> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl01','')">2</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl02','')">3</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl03','')">4</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl04','')">5</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl05','')">6</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl06','')">7</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl07','')">8</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl08','')">9</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl09','')">10</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl01$ctl10','')">...</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl02$ctl00','')">&gt;</a> 
    <a class="btn btn-default" href="javascript:__doPostBack('ctl00$Body$CaseList918421504_ListControl$Pager$it$ctl02$ctl01','')">&gt;|</a> 
</span>