I am trying to display an image from a database in a repeater control but I am unable to retrieve it.
I used the following code
<div id="photos" class="galleryview">
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="panel">
<img src="<%#Eval("image") %>" />
<div class="panel-overlay">
<p>description: <b><%# Eval("description") %></b><br />
View full-size photo here.</p>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<!-- Strip to display the bottom slideshow. -->
<ul class="filmstrip">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li><img width="100" height="100" src="<%#Eval("image") %>" alt='<%#Eval("description") %>' title='<%# Eval("category") %>' /></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
I think the image in your db may be bytecode.You may find a way to make the byte to a image
you can see this Retrieve image from database and display on ASP.NET without httphandler
Related
I uses asp.net listview control to display the details. Each item has the group details. For demo purposes group is hard coded.
I want to display the listview as shown below
Right now, I have this
Code:
<asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<GroupTemplate>
<span>Group</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
How do I achieve this?
For a flexible solution, you can use nested ListView
You will need to update your HTML and CSS to get the desired appearance.
ASPX Code
<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<ul class="dfwp-list">
<li><%# Eval("Title") %></li>
<div>
<asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="itemContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
</div>
</ul>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
In the code behind you need to bind the child ListView in parent ItemDataBound event.
protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
if (e.Item.ItemType == ListViewItemType.DataItem)
{
itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
itemsListView.DataBind();
}
}
It is not quite clear what kind of grouping you want. However the ListView is limited in what it can do.
First of all you can only get a grouping by a fixed number of items. You can define that number with the GroupItemCount property. Your code would then look like this
<asp:ListView ID="HyperLinkListView" GroupItemCount="2" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
And generate in html like this
GROUP
My car video
My sample video
GROUP
Another sample video
Item 4
Assuming you want GROUP A and GROUP B etc, you would normally use a binding expression, which looks like this
<GroupTemplate>
<span>Group <%# Container.DataItemIndex %></span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
However the GroupItemTemplate is not part of the DataBind process, so getting and index based system will not work like that.
So a client side solution is needed if you want to add A, B etc. So first add a placeholder for the alhpa character and give the <span> a class so jQuery can find it. I've used {index} and groupIndex
<GroupTemplate>
<span class="groupIndex">Group {index}</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
Now with a simple jQuery method, all the placeholders are replaced with their correct alpha character.
<script type="text/javascript">
$(document).ready(function () {
$('.quick-links .groupIndex').each(function (index, element) {
var char = String.fromCharCode(65 + index);
$(this).html($(this).html().replace('{index}', char));
});
});
</script>
Note that the .quick-links comes from your <section class="quick-links"> part in the LayoutTemplate.
Here is my code:
<asp:WebPartZone ID="Zone1" runat="server" Width="100%" PartChromeType="None" Padding="0" PartStyle-CssClass="NoPadding"
PartStyle-BackColor="Transparent" BackColor="Transparent" PartChromeStyle-BackColor="Transparent">
<PartStyle BackColor="Transparent"></PartStyle>
<CloseVerb Visible="false" />
<MinimizeVerb Visible="false" />
<ZoneTemplate>
<div class="demo">
<p>Procedure Queues</p>
</div>
<div class="demoBottom">
<div class="divPortletContent">
<br />
<asp:DataList ID="dlProcedureQueues" runat="server" >
<ItemTemplate>
<asp:HyperLink ID="lbProcedureQueues" runat="server" Text='<%# Eval("site_nm") %>' NavigateUrl='<%# Eval("site_url") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</ZoneTemplate>
</asp:WebPartZone>
The text from <div class="demo"><p>Procedure Queues</p></div> is miising and it works if I put it outside of webpart. Also, I am loosing all the css styles when placed inside webpart's ZoneTemplate.
Any ideas?? Thanks in advance.
Let me answer my own question. From what I found out, ZoneTemplate only considers the asp controls (including user controls) as web parts and ignores all the html.
i have repeater control that have specific template for my web site jquery slider. how ever i have table name tbl_Slide_master that have slide details to show. this table have two columns like Img_height and Img_width as int data type for setting image properties in repeater control.
for further information i include my repeater control
<asp:Repeater ID="SliderRepeater" runat="server">
<ItemTemplate>
<li>
<p class="img"><asp:Image ID="Img_Slide" runat="server" ImageUrl='<%# "images/"+ Eval("ImageName")%>' Height='<%#Eval("Img_height")%>' Width='<%#Eval("Img_width")%>'/></p>
<div class="button"><span class="right_but"><img src="images/l_arrow.gif" alt="picture" width="84" height="28" border="0" /><img src="images/r_arrow.gif" alt="picture" width="84" height="28" border="0" /></span></div>
<h2><asp:Label ID="lbl_slideheadertext" runat="server" Text='<%# Eval("Header_text")%>'></asp:Label></h2>
<p><asp:Label ID="lbl_slidetext" runat="server" Text='<%# Eval("Para_text")%>'></asp:Label></p>
</li>
</ItemTemplate>
</asp:Repeater>
when i run my project then error occured like "Specified cast is not valid". it can not evaluate image height and width properties from tbl_slide_master table. how ever when i simple remove Height and Width properties from Image control then Image shows with original h*w.
is there i have mistake in Height='<%#Eval("Img_height")%>' and Width='<%#Eval("Img_width")%>...
well i also seen there i can use something like that Height='<%#Eval("Img_height") & "px"%> but also error occurred like "Operator '&' cannot be applied to operands of type 'object' and 'string'"
Updated Solution
ok i have idea i can use html image control so no px needed to join with height and width.
<asp:Repeater ID="SliderRepeater" runat="server">
<ItemTemplate>
<li>
<%--<p class="img"><asp:Image ID="Img_Slide" runat="server" ImageUrl='<%# "images/"+ Eval("ImageName")%>' Height='<%# Eval("Img_height")&"px"%>' Width='<%# Eval("Img_width")&"px"%>'/></p>--%>
<p class="img"><img id="Img_Slide" src='<%# "images/"+ Eval("ImageName")%>' width='<%#Eval("Img_width")%>' height='<%#Eval("Img_height")%>'/></p>
<div class="button"><span class="right_but"><img src="images/l_arrow.gif" alt="picture" width="84" height="28" border="0" /><img src="images/r_arrow.gif" alt="picture" width="84" height="28" border="0" /></span></div>
<h2><asp:Label ID="lbl_slideheadertext" runat="server" Text='<%# Eval("Header_text")%>'></asp:Label></h2>
<p><asp:Label ID="lbl_slidetext" runat="server" Text='<%# Eval("Para_text")%>'></asp:Label></p>
</li>
</ItemTemplate>
</asp:Repeater>
I want to add slider in datalist controll.
<ItemTemplate>
<img alt="" src='Image/<%#Eval("Image") %>' /><br />
</a>
<h4><asp:Label ID="lb" runat="server" Font-Bold="True" Font-Size="12pt" Text='<%# Eval("Title") %>'></asp:Label><br />
Product Code: <span><%# Eval("product_code") %></span></h4>
<span ><del>र</del><%# Eval("Our_price") %>INR</span><br />
<a href='Shopping_Cart.aspx?cart_id=<%# Eval("id") %>'>Add to Cart</a>
Now I want to add slider so that all products could slide with images.
Your Question was not Clear what i understood is that u want to scroll your item list. Give your Datalist a fixed size(height and width) and overflow:scrolling in css
style='height:400;width:500; overflow:scrolling'
I understood that you can do it dynamically.You can use image slider into datalist as below:
<div id="box">
<div id="slider">
<div class="slider">
<ul>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="7" RepeatDirection="Horizontal">
<ItemTemplate>
<li><img src='<%#Eval("Path") %>' alt="" width="272" height="170" runat="server"/></li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
<div class="sliderButon">
Previous
Next
</div>
</div>
</div>
i am new in CSS and have a problem with styling ListView Control in ItemTemplate tag.
my project language is rtl(persian) and i want to set the user image at the right and her/his infos to the left of the image.
but this is the result:
alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-08_134217.png?attredirects=0&d=1
and here is the code for ListView:
<asp:ListView ID="NokListView" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<img alt="" src="./img/group.png"><br />
<br />
<fieldset>
<legend>ليست کلي</legend>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</fieldset>
</LayoutTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
<ItemTemplate>
<img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
<span>نام وارث:</span><%# Eval("FirstName") %> <%# Eval("LastName") %><span
dir="ltr">(<%# Eval("Email") %>)</span><br />
<span>نسبت او با شما:</span>
<%# Eval("Relationship")%><br />
</ItemTemplate>
</asp:ListView>
I set the style of to float:right and it is working but as you see the template is like a Hierarchical list!
I want each Item place below the previous Item NOT in the front of.
please explain me what is exactly happening?! and how to fix it?
Put the non-image data together in a div with float:left and see if that works?
I Found My Answer here: doctype.com
and the complete fixed code is:
<ItemSeparatorTemplate>
<hr style="clear:right;" />
</ItemSeparatorTemplate>
<ItemTemplate>
<div style="clear: both;">
<img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
<span>نام وارث:</span><%# Eval("FirstName") %> <%# Eval("LastName") %>
<span dir="ltr">(<%# Eval("Email") %>)</span><br />
<span>نسبت او با شما:</span><%# Eval("Relationship")%><br />
</div>
</ItemTemplate>
So Look at the result:
alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-09_103134.png?attredirects=0&d=1