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
Related
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.
the following code would cause a 404 error. removing the code [itemtype="https://schema.org/BreadcrumbList"], then there is no error but using breadcrumb checker to validate the page, it is not recognized as breadcrumb. may i know which portion i am doing it wrong?
<asp:SiteMapPath ID="SiteMapPath1" itemtype="https://schema.org/BreadcrumbList" SkipLinkText="" runat="server" >
<NodeTemplate><a itemprop="item" href='<%#Eval("url") %>'><span itemprop="name"><%# Eval("title") %></span></a></NodeTemplate>
</asp:SiteMapPath>
asp:SiteMapPath itself doesn't have itemtype property so the error (in fact 5xx not 404). So the code should be a little more elaborated. Something like this.
<nav itemscope itemtype="http://schema.org/BreadcrumbList"><%--wrapper--%>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" : ">
<NodeTemplate>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement"><%--wrapper for each breadcrumb--%>
<meta itemprop="position" content="<%#Container.ItemIndex+1 %>" /> <%--required by Google --%>
<a itemprop="item url" href='<%#Eval("url") %>'>
<span itemprop="name"><%# Eval("title") %></span>
</a>
</span>
</NodeTemplate>
</asp:SiteMapPath>
</nav>
And this is generated HTML
<nav itemscope itemtype="http://schema.org/BreadcrumbList">
<span id="SiteMapPath1"><img alt="Skip Navigation Links" src="/WebResource.axd?d=Ybg6Za1EIYGIkin6VPiwIFL99ITKyu6RhGnxJcLOO8DP1KA0-cdYa4ltoyl-vbOlqsJF4S8oq8kKVCD1XukqME04tF9L2ZSF8XWKW9sT_mc1&t=636668507379463780" width="0" height="0" style="border-width:0px;" /><span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<meta itemprop="position" content="1" />
<a itemprop="item url" href='/'><span itemprop="name">home</span></a></span>
</span><span> : </span><span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<meta itemprop="position" content="2" />
<a itemprop="item url" href='my-page.aspx'><span itemprop="name">My Page</span></a></span>
</span><a id="SiteMapPath1_SkipLink"></a></span>
</nav>
which passed Google Structured Data Test
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 am designing an ASP.NET page with using some data from SQL Server Database. I used <DataList> to call data and fill any place I want to in the page. My problem is, CSS seems not working for the element in <HeaderTemplate>. I searched some posts but I couldn't find an answer.
I tried to style <p> like you see in the code, and I tried to style the data I called with <span> too. Then I tried to use both of them at the same time as you see. None of them works.
Here is my code:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Last News</h2>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><p style="text-align:center;"></HeaderTemplate>
<ItemTemplate><span style="text-align:center;"><%#Eval("news_header") %></span></ItemTemplate>
<FooterTemplate></p></FooterTemplate>
</asp:DataList>
<p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
UPDATE and SOLUTION:
When I looked at the codes in browser while localhos was working, I saw the problem was table that Datalist creates. So I framed that table with div just out of Datalistcode and write the CSS class to make it work with all screen sizes. Here is the codes:
Asp.Net Side:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Son Haberler</h2>
<div class="col-lg-12"><asp:DataList ID="DataList1" runat="server">
<HeaderStyle CssClass="deneme2"/>
<ItemTemplate>
<span><%#Eval("haber_baslik_tr") %></span>
</ItemTemplate>
</asp:DataList></div>
<br /><p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
CSS Side:
.col-lg-12 table{
width:100%;
}
.col-lg-12 table tbody tr td{
text-align:center;
}
Use DataList.HeaderStyle
<HeaderStyle CssClass="MyHeaderClass">
</HeaderStyle>
.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.