I am using a Repeater to display rows of data from my SQL Server database. I wish to display each row of my data in separate HTML divs. At the moment it displays all my data (all rows) in the div I have placed the repeater. How do I separate it its seperate divs?
Any suggestions please? :)
<div class="deal-info">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="rptr">
<ul>
<li><%#Eval("Name")%> </li>
<li><%#Eval("ContentType")%> </li>
<li><%#Eval("FirstName")%> </li>
<li><%#Eval("LastName")%> </li>
</ul>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Just wrap each item in a <div>:
<li>
<div><%#Eval("Name")%></div>
</li>
You can use <AlternatingItemTemplate>
So:
<div class="deal-info">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="rptr">
<ul>
<li><%#Eval("Name")%> </li>
<li><%#Eval("ContentType")%> </li>
<li><%#Eval("FirstName")%> </li>
<li><%#Eval("LastName")%> </li>
</ul>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="rptr2">
<ul>
<li><%#Eval("Name")%> </li>
<li><%#Eval("ContentType")%> </li>
<li><%#Eval("FirstName")%> </li>
<li><%#Eval("LastName")%> </li>
</ul>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
Related
On my aspx page I have the following list items/divs. Is there a way to make the tab in position 1 (divReferralTab) the selected tab on page load by referencing the div or the list item?
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liReferralTab" runat="server">Referral</li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
</div>
If I understand you right, you can try setting the z-index of the control you need first.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
If you want the referral "bullet" first then try just listing it first:
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liReferralTab" runat="server">Referral</li>
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
Is there a possible way to skip an item in asp:repeater? I have <ul> and <li>s where I need the ul to be repeated only once. Since it has id and ids must be unique.
Here I need to skip repeating the <ul id="lightgallery"> then continue repeating the <li> tags.
<asp:Repeater ID="rptBlogs" runat="server">
<ItemTemplate>
<div class="blog-post">
<div style="display:none;" id="video<%# Eval("ID") %>">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="<%# !Eval("ArticleTypeValue").ParseString()%>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="post-left-img">
<ul id="lightgallery"> //this needs to be skipped
<li class="video" style="position: relative;" data-poster="/<%# Eval("ThumbImage").ParseString() %>" data-sub-html="<%# Eval("Description") %>" data-html="#video<%# Eval("ID") %>" >
<a href="javascript:void(0)">
<img class="img-responsive" src="/<%# Eval("ThumbImage").ParseString() %>" />
<div class="demo-gallery-poster">
<img src="/assets/images/play-button.png">
</div>
</a>
</li>
</ul>
</div>
</ItemTemplate>
</asp:Repeater>
I know the common sense fact where the structure should be:
<ul>
<asp:repeater>
...
</asp:repeter>
</ul>
But that can't be done because of the HTML structure.
Solved but still open to better ideas. See below for my solution.
I used:
<ul id="lightgallery<%# Eval("ID") %>">
Instead of:
<ul id="lightgallery">
Then used jquery starts with selector:
$('[id^=lightgallery]')
I think a repeater in your repeater might allow you to get what you are looking for you just may have to tweak the data that you are binding.
Check out this answer
Repeater in Repeater
If that doesn't work then you can add an OnDataItemBound (similar to what is shown in the link) to find/remove your control on the server side.
I am working to make my code more accessible for screen-readers and I have come across this situation and have been able to find no answer for it. When buttons are only visible given a condition is met, how do you properly apply sr-only text? I want to avoid the screen-reader reading the text when the button is not visible as the button will not provide any function at that time.
The buttons are visible when paging is available (next and previous as appropriate).
Please see the attached code.
<div id="divPager" runat="server" class="gutter-bottom text-center">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="ServerClick" />
</Triggers>
<ContentTemplate>
<ul class="pager">
<li>
<asp:LinkButton runat="server" ID="btnPrev" Visible="False" CommandName="PrevPage">
<i class="fa fa-arrow-left"></i> Prev
</asp:LinkButton>
</li>
<li>
<asp:LinkButton runat="server" ID="btnNext" Visible="False" CommandName="NextPage">
Next <i class="fa fa-arrow-right"></i>
</asp:LinkButton>
</li>
</ul>
</ContentTemplate>
</asp:UpdatePanel>
</div>
One thing I have considered is placing a span inside the asp:LinkButton(s) and from the code-behind conditionally adding class="sr-only" and the appropriate span-text. Am I on the right track? Is there a better way? Thanks for your input
I am posting my current solution to this problem. By no means do I think it is the best solution and I will appreciate if you take your time to show me a better way. Here is what I did on my aspx page:
<ul class="pager">
<li>
<asp:LinkButton runat="server" ID="btnPrev" Visible="False" CommandName="PrevPage">
<span id="btnPrevSR" runat="server" class="sr-only"></span>
<i class="fa fa-arrow-left"></i> Prev
</asp:LinkButton>
</li>
<li>
<asp:LinkButton runat="server" ID="btnNext" Visible="False" CommandName="NextPage">
<span id="btnNextSR" runat="server" class="sr-only"></span>
<i class="fa fa-arrow-right"></i> Next
</asp:LinkButton>
</li>
</ul>
And in my code behind
If btnPrev.Visible = True Then
btnPrevSR.InnerHtml = "Previous Page of Announcements"
End If
If btnNext.Visible = True Then
btnNextSR.InnerHtml = "Next Page of Announcements"
End If
Below is what this code looks like when generated. Notice the empty <li> because visible is set to false for btnPrev
<ul class="pager">
<li>
</li>
<li>
<a id="ctl00_ctl00_cpContent_cpContent_btnNext" href="javascript:__doPostBack('ctl00$ctl00$cpContent$cpContent$btnNext','')"><span id="ctl00_ctl00_cpContent_cpContent_btnNextSR" class="sr-only">Next Page of Announcements</span>
<i class="fa fa-arrow-right"></i> Next
</a>
</li>
</ul>
I have a navigationbar that's controled completly by css ul and li.
The first unordered list contains listitems which are always displayed (General Site pages).
on hovering over the listitem (Gamma), the sublistitems appear. These sublistitems are themself in an unordered list of car models with the modelname. Hovering one of these items show me a picture of the car in a seperate div.
When I create the list of cars manually all works fine. The car models en their image are shown correctly.
When I create the unordered list dynamically by a listview. The car names are not shown.
If I place the listview out of the navigation ul. The listview works correct.
I assume it has something to do with the moment that the listview creates the unordered list. Can anyone point me in the right direction?
My ASP.net code
<nav>
<ul class="menu">
<li><a class="active" href="Default.aspx">H</a></li>
<li>Gamma
**<asp:ListView ID="lvGamma" runat="server">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li><a href='<%# "AixamGamma.aspx?Model=" + Eval("car.NewCarID").ToString %>' class="sublistitem" >
<asp:Label ID="lblModelName" runat="server" Text='<%# Eval("car.ModelName") %>'></asp:Label></a>
<div class="modeldetail">
<div class="redbox">
<div class="whitebox">
<div class="container_12">
<div class="wrapper">
<div class="grid_5">
<h3>
<asp:Label ID="lblModelSlogan" runat="server" Text='<%# Eval("car.Slogan") %>'></asp:Label>
</h3>
</div>
<div class="grid_3">
<div class="wrapper">
<img src='<%# Eval("image.ImageLocationPath") + Eval("image.ImageFileName")%>' alt='<%# Eval("car.ModelName") %>'
class="img-max-h200-w200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>**
*<ul>
<li>City</li>
<li>CityS</li>
<li>Crossline</li>
<li>GTO
<div class="modeldetail">
<div class="redbox">
<div class="whitebox">
<div class="container_12">
<div class="wrapper">
<div class="grid_5">
<h2>
De nieuwe Aixam Gto</h2>
<p>
Rijden zonder rijbewijs in een sportief kleedje</p>
</div>
<!--- image width max 220px --->
<div class="grid_3">
<div class="wrapper">
<img src="images/Sliders/Aixam%20GTO.jpg" alt="Gto" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>Crossover</li>
</ul>*
</li>
<li>Tweedehands</li>
<li>Onderhoud/herstelling </li>
<li>Wetgeving</li>
<li>Contact</li>
</ul>
</nav>
the bold part doesn't work except when its placed out the navigation list, the italic part does
thx for the help
I got it working. I've tested the code with the hard coded unordered list AND the listview together in one item. Removing the hard coded list did the trick....
In Asp.net website i work with(on which i had no prior knowledge) there is repeater and html markup. The output i get is spaghetti code mixture of databinded code and also markup after the repeater. The Code Behind and Markup is given below
<ul>
<li>
<a name="products"> Products</a>
<asp:Repeater ID="RT_Category" runat="server">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Category")%>
<asp:Repeater ID="RT_SubCategory" runat="server" DataSource='<%# DataBinder.Eval(Container.DataItem, "SubCat") %>'>
<HeaderTemplate><ul class="test1"></HeaderTemplate>
<ItemTemplate>
<li><a href='<%# DataBinder.Eval(Container.DataItem, "LinkS") %>'><%# DataBinder.Eval(Container.DataItem, "SubcatName")%></a></li>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
<ul id="mega">
<li>SCHOOLS
<div>
<h2>Classes</h2>
<p>TimesSchedualMap</p>
<p>NamesStudyDirections</p>
<p>HealthDanceBiology</p>
<h2>Teachers</h2>
<p>BillyMadeleineLauren</p>
<p>PaddingtonStefanMichael</p>
<p>ShannonMaryRaffaello</p>
<h2>Location</h2>
<p>CarlsbadOceansideEl Cajon</p>
<p>VistaLa CostaEncinitas</p>
<p>San DiegoLos AnglesCardiff</p>
<h2>Months</h2>
<p>JanaryFebruaryMarchApril</p>
<p>MayJuneJulyAugust</p>
<p>SeptemberOctoberNovemberDecember</p>
</div>
</li>
Heres whats being output to my browser...
<ul>
<li class="">
<a name="products" id="products">Products</a> Designer Corner Groupings
<div class="test1" style="margin-left: 2em; visibility: hidden">
Chairs
<ul class="test1">
<li><a href="/classicfurniture4u/s/Modern-chairs/PpAqk7vjo8c/s">Modern
chairs</a></li>
<li style="list-style: none">Tables
<ul class="test1">
<li><a href="/classicfurniture4u/s/Coffee-tables/j0DuY5817sM/s">Coffee
tables</a></li>
</ul>
<ul id="mega">
<li class="">
SCHOOLS
<div style="z-index: 985;">
<h2>Classes</h2>
<p>TimesSchedualMap</p>
<p>NamesStudy<a href=
"#">Directions</a></p>
<p>HealthDance<a href=
"#">Biology</a></p>
<h2>Teachers</h2>
<p>BillyMadeleine<a href=
"#">Lauren</a></p>
<p>PaddingtonStefan<a href=
"#">Michael</a></p>
<p>ShannonMary<a href=
"#">Raffaello</a></p>
<h2>Location</h2>
<p>CarlsbadOceanside<a href="#">El
Cajon</a></p>
<p>VistaLa Costa<a href=
"#">Encinitas</a></p>
<p>San DiegoLos Angles<a href=
"#">Cardiff</a></p>
<h2>Months</h2>
<p>JanaryFebruary<a href=
"#">March</a>April</p>
<p>MayJuneJuly<a href=
"#">August</a></p>
<p>SeptemberOctober<a href=
"#">November</a>December</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
When you're using a Repeater to build up lists, it's generally easier to put the <ul> opening and closing tags in the repeater's header and footer, respectively. So something like this:
<asp:Repeater ... runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><!-- data binding stuff --></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
Nevermind, there was a missing close tag in FooterTemplate /FooterTemplate