Want to show 3 Items from database in one row. With this code repeater shows only 1 Item from database.
<asp:Repeater ID="rptItems" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<div class="row">
<div class="col-md-4">
<h2><%# Eval("Title") %></h2>
<img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width="200" height="200" />
<p>ISBN</p>
<p><%# Eval("ISBN") %></p>
<p>Description</p>
<p><%# Eval("Description") %></p>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
This is css issue. I see that you use the bootstrap style, so move the <div class="row"> out side of the loop.
<asp:Repeater ID="rptItems" runat="server">
<HeaderTemplate>
<ul>
<div class="row">
</HeaderTemplate>
<ItemTemplate>
<div class="col-md-4">
<h2><%# Eval("Title") %></h2>
<img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width="200" height="200" />
<p>ISBN</p>
<p><%# Eval("ISBN") %></p>
<p>Description</p>
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</ul>
</FooterTemplate>
</asp:Repeater>
Related
I'm working on shopping cart application where I have listed all the products in a ListView. Then on button click of each product the image slider changes. Now I want to make it on mouseover instead of click. Below is the code I have tried to achieve.
ASP
<div class="col-md-12 ">
<div class="col-md-4 single_left pull-left">
<div class="flexslider">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater runat="server" ID="Repeater">
<HeaderTemplate>
<ul class="slides">
</HeaderTemplate>
<ItemTemplate>
<li data-thumb='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>'>
<asp:Image ID="image5" runat="server"
ImageUrl='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>' />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script defer src="assets/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<!-- FlexSlider -->
<div class="caption">
<strong>
<asp:Label ID="lblPrice" runat="server" Text="*"></asp:Label></strong>
<strong>
<asp:Label ID="ItemCode" runat="server" Text="*"></asp:Label></strong>
<p>
<small><strong>
<asp:Label ID="lblDesc" runat="server" Text="*"></asp:Label>
</strong></small>
<br />
<asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
<small>
<asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
</small>
<br />
</p>
<asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>
</div>
<asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
</div>
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="15"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" OnSelectedIndexChanged="OnSelectedIndexChanged">
<EmptyDataTemplate>
No Images found.
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:LinkButton ID="LBtn" runat="server"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="Width:50px;Height:50px" alt="Change" onmouseover="this.OnCommand" />
</asp:LinkButton>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="clearfix"></div>
<!---->
</div>
I must say that your approach of mouseovering which triggers click - seems not as the right solution. ( Just saying)
Anyway - Change your code to :
<asp:LinkButton ... CssClass="myButton"
...
</asp:LinkButton>
Then , via jQuery (which you already use) :
$(function (){
$(".myButton").on('mouseover',function (){this.click()});
});
I have a repeater set up in Visual Studio to try and grab the latest 3 blog titles from the database and show the associated image along with the title, intro and a link.
However the parent div of each blog needs to have a different ID.
Currently I have the following code but it's not working because I've since found out you can't have an itemtemplate followed by an alternating item template followed by another item template.
I there any workaround to this?
<asp:Repeater runat="server" ID="repeaterNews1" DataSourceID="SQLDataNews1">
<ItemTemplate>
<div id="blog1">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image1" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div id="blog2">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image2" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
<ItemTemplate>
<div id="blog3">
<div class="col-xs-12">
<asp:Image runat="server" ID="Image3" ImageUrl='<%# Eval("NewsStoryImage") %>'/>
<div class="blogContent">
<div class="container">
<h2>Our Blog</h2>
<p><asp:Label runat="server" ID="Label1" Text='<%# Eval("PageTitle") %>'></asp:Label></p>
<p><asp:Label runat="server" ID="Label2" Text='<%# Eval("Content1") %>'></asp:Label></p>
Read More
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
No, you cannot create a third template.
What you can do is make sure the ID's are still unique by using Container.DataItemIndex
<ItemTemplate>
<div id="blog<%# Container.DataItemIndex %>"></div>
</ItemTemplate>
I have an Asp.net DataList control in my page. It is currently having repeatcolumns set to 4 which will give me 4 columns in each row. But I want to make this responsive and set the value to 1 for smaller screen sizes. Below is my asp.net control:
<asp:DataList runat="server" RepeatDirection="Horizontal" RepeatColumns="4" ID="dd" class="vex-res">
How can I achieve this?
You cannot make DataList to be responsive, because it renders as Table.
Instead, you need to use ListView with bootstrap (or some other responsive framework).
<asp:ListView ID="ListView1" runat="server" ...>
...
<ItemTemplate>
<div class="row">
<div class="col-md-4"><%# Eval("Name") %></div>
<div class="col-md-4"><%# Eval("Email") %></div>
<div class="col-md-4"><%# Eval("Address") %></div>
</div>
</ItemTemplate>
</asp:ListView>
This Work My Home :
<asp:DataList ID="dlCustomers" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="row">
<ItemTemplate>
<%-- <div class="row">--%>
<div class="col-sm-4"><!--THUMBNAIL#2-->
<div class="panel-body">
<span class="label label-warning"><%# Eval("status")%></span>
<div class="thumbnail label-success">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" +Eval("image1").ToString().Trim() %>' Width="150px" Height="150px" />
<div class="caption"><h4>Rp.<small> <%# Eval("harga")%></small></h4>
<strong><%# Eval("judul") %></strong>
<p>
<small>LT:<strong> <%# Eval("luastanah")%> m2</strong> </small> <small> LB : <strong> <%# Eval("luasbangunan")%> m2</strong> </small>
<small>Setifikat : <strong><%# Eval("sertifikasi")%></strong> </small> <br />
<small> Kamar : <strong><%# Eval("kamartidur")%></strong> </small><br />
<small> Kamar Mandi : <strong><%# Eval("kamarmandi")%></strong> </small>
</p>
Lihat Details
</div>
</div>
</div>
</div>
<%--</div>--%>
</ItemTemplate>
</asp:DataList>
Responsive using bootstrap 3.3.6 ..
Coming to this a little late but I found an asp:repeater works well and no additional CSS is required to get the layout repeating horizontally.
<div class="container">
<div class="row">
<asp:Repeater ID="myRepeater" runat="server" DataSourceID="myDataSourceID">
<ItemTemplate>
<div class="col-sm-4">
<%# Eval("itemID")%><br />
<%# Eval("itmName")%>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
I realise that this will result in the total columns in one row adding up to more than 12 but as this will just wrap to the line underneath it shouldn't really matter.
Reference: https://stackoverflow.com/questions/23502342/bootstrap-3-grid-does-it-really-matter-how-many-columns-are-in-a-row
You can also try setting RepeatLayout="Flow". That will cause your datalist to render as a series of <div> elements, which will behave more responsively.
<asp:DataList ID="DataList1" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Name") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Email") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Address") %></div>
<div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Phone") %></div>
</ItemTemplate>
</asp:DataList>
<asp:DataList ID="uxPosts" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<a id="uxLink" runat="server" class="txt_link">
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 " style="text-align:center;" >
<asp:Label ID="Label4" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
</a>
</ItemTemplate>
</asp:DataList>
You can do it with asp literal, write the code in the string and add it to literal,
suppose you want to show items dynamically
you can do it this way
Add html
<div class="any_css_class">
<div class="any_css_class2">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</div>
and in your cs file
string htmlcode = ""; //code you want in your html
foreach (FetchedDetails fd in yourListOfItems)
{
htmlcode += "<div class='content content-1' onclick=\"dosomething('" + fd.itemId + "')\"> " +
"<div class='fab fa-any_icon'></div> " +
"<h2>" + fd.anyAttribute + "</h2> ";
}
Literal1.Text = htmlcode; //add code to literal
This will do it. It will be responsive but you have to define your css properly :)
<asp:DataList ID="uxPosts" runat="server" OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
<ItemTemplate>
<a id="uxLink" runat="server" class="txt_link">
<div class=" col-xs-6 col-sm-4 col-md-3 col-lg-3 " style="text-align:center;" >
<div class="pnlborde">
<div class="encabezadofondo">
<asp:Label ID="Label2" runat="server" Height="38px" width="150px" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>
</div>
<br />
<asp:Image ID="uxImage" runat="server" width="65%" Height="90%" align="center" />
<br /><br />
</div>
<br />
</div>
</a>
</ItemTemplate>
</asp:DataList>
I would like to make a FAQ page similar to here: Forum FAQ
using an sql database. Does anyone have any ideas?
create table faq_questions and add there questions,
table structure:
categorie, question, answer
and the read that data to website, what programming language you are using?
this is the final answer for my own question. Here it is it
<asp:Repeater id="faqCategoryList" runat="server">
<HeaderTemplate>
<h4>
Frequently Asked Questions</h4>
</HeaderTemplate>
<ItemTemplate>
<a href='#<%# Eval("FAQCategoryCode")%>' class="lnkButton">
<%# Eval("CategoryName")%>
</a>
</ItemTemplate>
<SeparatorTemplate>
<hr class="dashed" />
</SeparatorTemplate>
<FooterTemplate>
<div style="margin-bottom: 30px;">
</div>
</FooterTemplate>
</asp:Repeater>
<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<fieldset id='<%# ((System.Data.DataRowView)Container.DataItem)["FAQCategoryCode"]%>'>
<legend><span style="font-size: medium; font-weight: bold;">
<%# ((System.Data.DataRowView)Container.DataItem)["CategoryName"]%>
</span></b> </legend>
<asp:Repeater id="Repeater2" datasource='<%# ((System.Data.DataRowView)Container.DataItem).CreateChildView("FaqRelation")%>'
runat="server">
<ItemTemplate>
<div style="font-weight: bold;">
<%# ((System.Data.DataRowView)Container.DataItem)["Question"]%>
</div>
<br />
<%#((System.Data.DataRowView)Container.DataItem)["Answer"]%>
<br />
<br />
</ItemTemplate>
<SeparatorTemplate>
<hr class="dashed" />
</SeparatorTemplate>
<FooterTemplate>
<a href="javascript:scroll(0,0)" style="float: right">
<img src="Images/png/icon_back_top.gif" class="lnkButton" alt="top" />Top</a>
</FooterTemplate>
</asp:Repeater>
</fieldset>
</ItemTemplate>
<FooterTemplate>
<br />
</FooterTemplate>
</asp:Repeater>
I've got a problem here with a div not being placed that way I'd like it to.
This is the ASP code I'm using:
<asp:ListView ID="categoriesListView" runat="server">
<LayoutTemplate>
<div class="main" runat="server">
<div ID="itemPlaceholder" class="sub" runat="server">
</div>
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<div class="main" runat="server">
<div class="sub" ID="itemPlaceholder" runat="server">
No data was returned.
</div>
</div>
</EmptyDataTemplate>
<ItemTemplate>
<asp:Image AlternateText='<%# Eval("CategoryName") %>' ID="Image1" runat="server" ImageUrl='<%# Eval("CategoryImgUrl", "~/Images/{0}") %>' />
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:ListView>
I was expecting results like this:
<div class="main">
<div class="sub">
...
</div>
<div class="sub">
...
</div>
<div class="sub">
...
</div>
...
</div>
The result was one big div "main" containing everything, with no "sub" divs.
If I added the itemPlaceholder one level deeper, the same thing would happen, now with 1 "sub" div and everything pushed in there. How do I solve this?
Change it to look like this:
<LayoutTemplate>
<div class="main" runat="server">
<div ID="itemPlaceholder" runat="server">
</div>
</div>
</LayoutTemplate>
<EmptyDataTemplate>
<div class="main" runat="server">
<div class="sub" ID="itemPlaceholder" runat="server">
No data was returned.
</div>
</div>
</EmptyDataTemplate>
<ItemTemplate>
<div class="sub" >
<asp:Image AlternateText='<%# Eval("CategoryName") %>' ID="Image1" runat="server" ImageUrl='<%# Eval("CategoryImgUrl", "~/Images/{0}") %>' />
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
</div>
</ItemTemplate>