पुनरावर्तक नियंत्रण में क्षैतिज अभिविन्यास

Question

मेरे पास अपलोड की गई छवियों को प्रदर्शित करने के लिए प्रयुक्त एक पुनरावर्तक नियंत्रण है।

मैं क्षैतिज रूप से पुनरावर्तक में छवियों को कैसे दिखा सकता हूं? मैं इस तस्वीर के नीचे कैप्शन कैसे दे सकता हूं?

Answer 1

आप इस तरह कुछ कोड है यह सोचते हैं:

<asp:repeater ...> 

</asp:repeater> 

बस देखो के साथ कुछ html कोड के साथ "<itemtemplate>" इंजेक्षन और आप चाहते हैं लग रहा है। क्षैतिज या लंबवत दिखाने के बारे में कुछ खास नहीं है, यह केवल आइटम टेम्पलेट्स के अंदर उपयोग किए जाने वाले HTML टैग पर निर्भर करता है।

Answer 2

आप विशेष रूप से एक पुनरावर्तक की जरूरत नहीं है ऐसा करने के लिए, आप के बजाय एक DataList का उपयोग करें और सेट RepeatDirection="Horizontal"

Answer 3

क्या आप प्रदर्शित करने के लिए प्रयोग कर रहे हैं, यानी पर निर्भर करता है, तो अपने चित्रों में एक div float:left; डाल रहे हैं कर सकते हैं उस पर, या डेटालिस्ट का उपयोग करें।

Answer 4

आप अपने ItemTemplate निर्माण कर सकते हैं की तरह:

<ItemTemplate> 
    <div class="floating"> 
     <img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' /> 
     <span><%# /* Code to Eval your image caption from datasource */ %></span> 
    </div> 
</ItemTemplate> 

जहां div की .floating वर्ग है:

.floating { float:left; overflow:hidden; } 
.floating img { display: block; } 

मैं आमतौर पर चल तत्व के एक दृश्य के बाद स्पष्ट के लिए एक div शब्दों में कहें, करने के लिए बॉक्स मॉडल की स्थिति को रीसेट करें।

<div style="clear:both;"></div> 

Answer 5

कैसे प्रत्येक पंक्ति

<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" > 
    <ItemTemplate> 
     <asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'> 
      <img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" /> 
     </asp:LinkButton> 
     <br /> 

     <asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton> 
     <asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton> 

    </ItemTemplate> 
    <FooterTemplate> 
     <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext"> 
     </asp:Label> 
    </FooterTemplate> 
</asp:DataList> 

Answer 6

के बाद क्षैतिज रेखा प्रदर्शित करने के लिए की तरह @numenor कहा in this other answer, यह आप क्या एचटीएमएल का उपयोग का मामला है। यहां, एचटीएमएल टेबल का उपयोग करने के लिए आपको जो कुछ चाहिए उसे लागू करने का एक उदाहरण।

<table width="<%= this.TotalWidth %>"> 
    <tr> 
     <asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound"> 
      <ItemTemplate> 
       <td class="itemWidth"> 
        Your item goes here and will be 
        displayed horizontally as a column. 
       </td> 
      </ItemTemplate> 
     </asp:Repeater> 
    </tr> 
</table> 

ध्यान दें कि चौड़ाई एक सर्वर साइड संपत्ति TotalWidth गणना करता है कि कुल चौड़ाई के आधार पर की जरूरत निश्चित रूप से, आइटम पुनरावर्तक की संख्या प्रदर्शित होगी साथ नियंत्रित किया जाता है। उचित लेआउट सुनिश्चित करने के लिए प्रत्येक आइटम की चौड़ाई को परिभाषित करने के लिए एक सीएसएस वर्ग बनाना भी अनुशंसित है।

protected string TotalWidth 
{ 
    get 
    { 
     //In this example this.Madibu.Materiales is the datasource for the Repeater, 
     //so this.Madibu.Materiales.Count is the column count for your table. 
     //75 must be equal to the width defined in CSS class 'itemWidth' 
     return (this.Madibu.Materiales.Count * 75).ToString() + "px"; 
    } 
}