ASP Repeater creating invalid markup - asp.net

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

Related

skip a line/item in asp:repeater

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.

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>

asp.net Repeater - display rows of data in seperate divs

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>

asp.net how to use list Item Clicked Event UserDetails.aspx

When the list item is clicked then i want it to redirect to
UserDetails.aspx?Id=" + Session["UserId"].ToString());
. I tryed
<li class="active "><span>Home</span></li>
But it doesnt work?
Make anchor tag runat="server" and try this
<li class="active ">
<a id="A1" runat="server" href='~/UserDetails.aspx?Id=' + <%= Session["UserId"].ToString() %>>
<span>Home</span></a></li>
<li class="active ">
<a href='<%= Page.ResolveUrl("~/UserDetails.aspx?Id=") + Session["UserId"].ToString() %>'>
Home
</a>
</li>
EDIT: Added Page.ResolveUrl and removed ';' at the end of ToString()

How can I get my table to display above my ContentPlaceHolder?

I am trying to create a menu in the MasterPage that is displayed when a hyperlink is clicked. YardimDokumaniMenuAHREF is the hyperlink that displays the menu. As you can see, a javascript is called when I click on it. However contensts of the cells can not be displayed due to contentplaceholder. Please see the screenshot.
and this is my code. can someone help me out with this?
<a id="YardimDokumaniMenuAHREF" href="javascript:DisplayMenu('ctl00_YardimDokumaniMenuContent')" runat="server" title="">YARDIM DÖKÜMANI</a>
<%-- YardimDokumaniMenuAHREF triggers YardimDokumaniMenuContent to be displayed --%>
<div ID="YardimDokumaniMenuContent" runat="server" style="visibility:hidden; position:absolute; z-index:-99999">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
hadi bakalııııım
</td>
</tr>
<tr>
<td>
hadi bakalııııım333
</td>
</tr>
</table>
</div>
</li>
<li class=""><a href="~/Default.aspx" title="Ana Sayfa" runat="server" id="AnaSayfaLink">
Ana Sayfa</a> </li>
<li class=""><a href="~/Everyone/iletisim.aspx" runat="server" title="Bilgi almak istiyorum, şikayetim var, haklı müşteriyim.">
İLETİŞİM / YARDIM MASASI</a></li>
<li class="current_page_item" runat="server" id="OnlineIslemLink"><a id="A1" runat="server"
href="https://ode.a-kent.com/Yetki/Login.aspx">ONLINE İŞLEM</a> </li>
<li class="">
<asp:LinkButton ID="LogoutLinkButton" runat="server" CausesValidation="false" OnClick="LogoutLinkButton_Click">GÜVENLİ ÇIKIŞ</asp:LinkButton>
</li>
</ul>
</div>
<!-- globalNav end -->
</div>
<!-- header end -->
<div id="main">
<div class="panel fetaured" style="left: 192px; top: 0px; width: 755px;">
<div class="comments">
<b>GERİ</b>
</div>
</div>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="LeftPanelContentPlaceHolder">
</asp:ContentPlaceHolder>
Display menu function:
<script type="text/javascript">
function DisplayMenu(obj) {
obj = document.getElementById(obj);
obj.style.visibility = 'visible';
}
</script>
Remove the z-index:-99999from the YardimDokumaniMenuContent div style. If that doesn't work, ensure the z-index of that div is greater than the one of the background.

Resources