skip a line/item in asp:repeater - asp.net

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.

Related

What is the correct way to apply sr-only text to asp:LinkButtons that are variably visible?

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>

Try to get data from sql with eval

I am trying to get data from sql but I couldn't find how to use.
<a href="#"> I want to get url link from database into link and try to add <img src="#"> image path from database.
I can get data from database for Literal. But cant find for html tags.
<asp:Repeater ID="LinksRepeater" runat="server"
OnItemDataBound="LinksRepeater_ItemDataBound">
<ItemTemplate>
<li>
<a href="#">
<span class="icon"></span>
<asp:Literal ID="LinksTitleLiteral" Text="" runat="server" />
<span class="menu-icon">
<img src="img/Coderbits.png" alt="Ana Sayfa" />
</span>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
Assuming the field containing image path is named ImageUrl you could simply do
<img src="<%# Eval("ImageUrl") %>" alt="Ana Sayfa" />
And the same for anchor tags
link

Unordered list created by listview not showing on hover

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

Apply hyperlink to image

.displayed1
{
position: fixed;
top: 275px;
right: 341px;
}
<img class="displayed1" src="Images/NewProjectCohesive02.jpg" alt="" />
How can I add a hyperlink of AddnewPage1.aspx to the image? Is it necessary for the image to be in a <form id="form1" runat="server"> tag?
Wrap it in an <a> tag.
<a href="AddnewPage1.aspx">
<img class="displayed1" src="Images/NewProjectCohesive02.jpg" alt="" />
</a>
Modifying the CSS won't be necessary, except to remove the border if you prefer (and most do). Also, given that this appears to be an important navigation link, please be sure to provide alt-text in the name of accessibility.
<asp:HyperLink ID="hpr1" runat="server">
<img src="img/bg-breadcrumbs-homebtn.png" />
</asp:HyperLink>
(Using Asp.net)
I have done something like
<a href='<%#AdUr(DataBinder.Eval(Container.DataItem,"Title"), DataBinder.Eval(Container.DataItem,"AdId"))%>'>
<asp:Image ID="Image1" ImageUrl='<%# Eval("ImageUrl") %>' runat="server" class="img-responsive" title='<%# Eval("Title")%>'/>
</a>
Remember, use single quotes for Evals.

Image reflection styles?

I would like to produce a slight reflection on the two Hyperlink images i have embedded within div tags. What styles would I have to use? Any good links would be great too
Thanks
<div class="paneStyle">
<asp:Label ID="followUs" runat="server" Text="Follow us on:" CssClass="followUsStyle"></asp:Label><br style="line-height:30px;"/>
**<div id="FB" class="IconStyle"><asp:HyperLink ID="facebook" runat="server" ImageUrl="/_layouts/Facebook.png" NavigateUrl="http://www.........w"></asp:HyperLink></div>
<div id="TW" class="IconStyle"><asp:HyperLink ID="twitter" runat="server" ImageUrl="/_layouts/Twitter.png" NavigateUrl ="http:........"></asp:HyperLink></div>&nbsp**
</div>

Resources