We Keep Coding

How to change the css styles dynamically

I am trying to change the css style of the repeater to a different color on different status. The expected output is to print 6 different statuses like: In progress, complete, withdrawn so on.. Currently it has a single color, so it shows one color only. the challenging part here is to change the color dynamically based on the status. how do I achieve this? Currently it pulls the style based on "status noAction text-center" class below. Should I make any changes in the code behind or is it just a front end css change. Can someone provide me an example please.
.aspx code:
<div class="row">
<asp:Repeater ID="rptStatuses" runat="server">
<ItemTemplate>
<div class="col-md-4 col-sm-4">
<div class="status noAction text-center">
<div class="banner">
<asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
</div>
<div class="label"><%# Eval("Name") %></div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
.cs code relevant part
private void GB()
{
var surveyId = 55;
var stateLabels = _manageDatasets.GetStateLabels(surveyId);
List<Status> statusesList = new List<Status>();
foreach (var sl in stateLabels)
{
if (sl.Key != -1)
statusesList.Add(new Status { ID = sl.Key.ToString(), Name = sl.Value }
);
}
this.rptStatuses.DataSource = statusesList;
this.rptStatuses.DataBind();
}

I think what you want to do is change the class in the your html and just use the embedded code to be able to dynamically change the banner color, etc. based on the status. The embedded code that you want would look something like this -
<div class="col-md-4 col-sm-4">
<% if(status == "noAction") { %>
<div class="status noAction text-center">
<div class="banner">
<asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
</div>
<div class="label"><%# Eval("Name") %></div>
</div>
<% } %>

If you have any column in you table from where repeater is getting datasource then that would be pretty easy to do
something like that
<asp:Repeater ID="rptStatuses" runat="server">
<ItemTemplate>
<div class="col-md-4 col-sm-4">
<div class='<%# Convert.toInt32(eval("ActionColumnName"))==1 ? "status In progress text-center" : Convert.toInt32(eval("ActionColumnName"))==2 ? "status complete text-center" : Convert.toInt32(eval("ActionColumnName"))==3 ? "status withdrawn text-center" : "status noAction text-center" '>
<div class="banner">
<asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
</div>
<div class="label"><%# Eval("Name") %></div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>

How to append data to the repeater control from client side

I want to append data to the repeater, the repeater has some data already on page load. But i want to remaing load data while Scrolling Page down.
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
showData();
}
});
function showData() {
PageMethods.getData(onSuccess, onError); // getData is a page webmethod thats return five record in json string.
function onSuccess(data) {
alert(data); // data has all five record.
}
function onError(data) {
alert('Problem');
}
}
</script>
.NET
<div id="Posts" class="container-fluid padded">
<asp:Repeater ID="PostsRepeater" runat="server">
<ItemTemplate>
<section>
<div class="col-md-2">
<img src="images/" <%#("ImagePath") %> alt="<%#Eval("username") %>" class="img-circle img-responsive" />
</div>
<div class="col-md-10">
<div>
<b><%#Eval("username") %></b><p><span class="glyphicon glyphicon-time"></span>Posted on Feb <%#Eval("CreationDate") %></p>
</div>
<hr>
<p><%#Eval("Status") %></p>
<img src="images/1451285316491.jpg" class="img-responsive">
</div>
<div class="row commentbox">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive user-photo img-circle" src="images/1451285316491.jpg">
</div>
<!-- /thumbnail -->
</div>
<!-- /col-sm-1 -->
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Ali</strong> <span class="text-muted">commented 5 days ago</span>
</div>
<div class="panel-body">
This Is awsome post
</div>
<!-- /panel-body -->
</div>
<!-- /panel panel-default -->
</div>
<!-- /col-sm-6 -->
</div>
<!-- /row commentbox -->
</section>
</ItemTemplate>
</asp:Repeater>
<img id="loader" class="img-responsive col-md-offset-4" alt="" src="images/loading.gif" style="display:none" />
</div>

On window scroll, you can make a jQuery Ajax call which returns data and on success method get the response and bind it to your parent Div Posts (i.e. repeator control)
Edited: Code to bind data .i.e( Ajax success method)
function OnSuccess(response) {
var items = response.d;
var fragment='';
$.each(items, function (index, val) {
var aData_imgSRC= val.imgSRC;
var aData_USERNAME= val.USERNAME;
// .....
fragment += "<section> <div class='col-md-2'> <img src='"+aData_imgSRC+"' class='img-circle img-responsive' /> </div> <div class='col-md-10'> <div> <b>"+aData_USERNAME+"</b><p><span class='glyphicon glyphicon-time'></span>Posted on Feb "+aData_Date+"></p> </div> <hr> <p>"+aData_Status+"</p> <img src='images/1451285316491.jpg' class='img-responsive'></div> </section>";
});
$('#Posts').append(fragment);
}

Can't assign data source to the repeater asp.net

I'm working on a project and ran into a problem.
For some reason, I can't assign data source to the repeater. I'm using usercontrol
SlideshowDemo.ascx
<asp:Repeater ID="Slideshow" runat="server">
<HeaderTemplate>
<div style="margin:0 auto; width:960px;">
<div class="slideshowInsideContainer">
<div class="slideShowText">
<div style="padding:10px;" class="SlideShowContent">
<%= firstText %>
</div>
</div>
<img id="SlideShowImage" style="position:absolute; z-index:1; top:0;" src="<%= firstImage %>" />
<img id="SlideShowImageBG" style="position:absolute; z-index:0; top:0;" src="<%= firstImage %>" />
<img id="previousBttn" style="position:absolute; z-index:2; top:200px; cursor:pointer; left:0;" src="/images/SlideShow/leftButton.png" />
<img id="nextBttn" style="position:absolute; z-index:2; top:200px; cursor:pointer; right:0;" src="/images/SlideShow/rightButton.png" />
<div class="slideshowItems">
<ul>
</HeaderTemplate>
<ItemTemplate>
<li class='<%# Container.ItemIndex == 0 ? "selected" : "" %>' id="<%# Container.ItemIndex %>">
<div class="slideshowtext">
<%# Eval("text") %>
</div>
<img style="position:absolute; z-index:1; top:0;" src=' <%# Eval("image") %>' />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
SlideshowDemo.ascx.cs
public void GetSlideshowData()
{
int ID = Convert.ToInt32(slideShowID);
Node parent = new Node(ID);
ArrayList repeaterData = new ArrayList();
Nodes children = parent.Children;
for (int i = 0; i < children.Count; i++)
{
string image = children[i].GetProperty("image").Value.ToString();
string text = children[i].GetProperty("slideshowText").Value.ToString();
if (i == 0)
{
firstImage = image;
firstText = text;
}
repeaterData.Add(new SlideShowItem(image, text));
}
Slideshow.DataSource = repeaterData; //Error: Can't recognize 'Slideshow'
Slideshow.DataBind();
}
The problem is that the SlideshowDemo.ascx.cs doesn't recognize Slideshow
I get error
The name 'Slideshow' does not exist in the current context
I also get Warning
Source file
'obj\Debug\TemporaryGeneratedFile_E7A71F73-0F8D-4B9B-B56E-8E70B10BC5D3.cs'
specified multiple times
I would appreciate any help

Show product details in page

I need to show products details in a page.
My aspx is like below...
<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
<div class="product-item">
<div class="image">
<img runat="server" id="img" alt="" src="" />
</div>
<div class="body">
<div class="label-discount clear"></div>
<div class="title">
<a runat="server" id="name" href="single-product.html"></a>
</div>
</div>
<div class="prices">
<div class="price-prev"></div>
<div runat="server" id="price" class="price-current pull-right"></div>
</div>
<div class="hover-area">
<div class="add-cart-button">
Enquiry
</div>
</div>
</div>
and my codebehind is like below...
dbConnection cn = new dbConnection();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getLoopData();
}
}
public void getLoopData()
{
cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "select * FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
while (reader.Read())
{
//int id = reader.GetInt32(0);
name.InnerText = reader["InventionName"].ToString();
price.InnerText = reader["Price"].ToString();
img.Src = reader["Picture"].ToString();
}
reader.Close();
cn.con.Close();
}
But it is showing only last product details.
How should I repeat the div for each product and how to show every products in page ??

You can use Asp Repeater to do that.
Check this link out : http://www.w3schools.com/aspnet/aspnet_repeater.asp

You need a datagrid control, repeater or similar to show tabular data.
Right now you only have one control per attribute to show all records, that's why last one wins.

Your view/page could be like this:
<asp:Repeater ID="ProductRepeater" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="product-item">
<div class="image">
<img id="img" alt="" src='<%# Eval("Picture") %>' />
///...
</ItemTemplate>
</asp:Repeater>
In your code you could do this:
cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "SELECT InventionName, Price, Picture FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
ProductRepeater.DataSource = reader;
ProductRepeater.DataBind();

You are iterating a list, and assigning data to name, price and img.Src, but you overwrite the values on each iteration, therefore you only have the values from the last element.
You should bind you data source (reader) to an <asp:Repeater>'s DataSource property. In your markup you specify a header (HeaderTemplate), a footer (FooterTemplate) and content (ItemTemplate). You can omit the header and footer template if you don't need them. You can also use an AlternatingItemTemplate if you need to do different things with odd/even rows (e.g. alternating row color in a table).
You can access properties of the databound datatype using the <%# Eval("SomeProperty") %> which is a databinding expression.
HTML markup would be something like this:
<asp:Repeater id="Products" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
<div class="product-item">
<div class="image">
<img class="img" alt="" src="<%# Eval("Picture") %>" />
</div>
<div class="body">
<div class="label-discount clear"></div>
<div class="title">
<a class="name" href="single-product.html"><%# Eval("InventionName") %></a>
</div>
</div>
<div class="prices">
<div class="price-prev"></div>
<div class="price" class="price-current pull-right"><%# Eval("Price") %></div>
</div>
<div class="hover-area">
<div class="add-cart-button">
Enquiry
</div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
and wire up the datasource in codebehind like this:
cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "select * FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
Products.DataSource = reader; // rather than iterating manually, you assign the datasource to the repeater.
Products.DataBind();
reader.Close();
cn.con.Close();
Side note: I changed the attribute from id to class on the name, price and img element. Because when this markup is rendered it would have been with multiple elements with the same id, which it shouldn't since id is supposed to be unique according to specification.

Multiple bootstrap sliders using asp:repeater control

I have to use multiple bootstrap carousel in single page, using the asp repeater control but it doesn't work, it just show one slider on the page
Here is the html and asp code
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="row">
<asp:Repeater runat="server" ID="Slider1">
<ItemTemplate>
<div class="col-md-2">
<div class="row">
<a target="_blank" href="<%# Eval("URL") %>">
<img class="caption" src="../Includes/gaceta/<%# Eval("Titulo") %>/files/res/pages/page_0000.jpg" alt="<%# Eval("Titulo") %>" width="188" height="222" /></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<!--.row-->
</div>
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
<!--.Carousel-->
</div>
<hr />
<div class="col-md-12">
<div id="Carousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="row">
<asp:Repeater runat="server" ID="Slider2">
<ItemTemplate>
<div class="col-md-2">
<div class="row">
<a target="_blank" href="<%# Eval("URL") %>">
<img class="caption" src="../Includes/gaceta/<%# Eval("Titulo") %>/files/res/pages/page_0000.jpg" alt="<%# Eval("Titulo") %>" width="188" height="222" /></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<!--.row-->
</div>
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Folletos" class="left carousel-control">‹</a>
<a data-slide="next" href="#Folletos" class="right carousel-control">›</a>
</div>
<!--.Carousel-->
the javascript
$(document).ready(function () {
$('#Carousel').carousel('pause');
$('#Carousel2').carousel('pause');
$("div.item:first").addClass("active");
});
and the methods to bind the repeater
protected void Page_Load(object sender, EventArgs e)
{
BindSlider1(5);
BindSlider2(1);
}
protected void BindSlider1(int Ubicacion)
{
using (SqlConnection con = Conexion.Conecta())
{
using (SqlCommand cmd = new SqlCommand("SelGacetaUbicacion", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("#UBICACION", SqlDbType.Int).Value = Ubicacion;
con.Open();
Slider1.DataSource = cmd.ExecuteReader();
Slider1.DataBind();
}
}
}
protected void BindSlider2(int Ubicacion)
{
using (SqlConnection con = Conexion.Conecta())
{
using (SqlCommand cmd = new SqlCommand("SelGacetaUbicacion", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("#UBICACION", SqlDbType.Int).Value = Ubicacion;
con.Open();
Slider2.DataSource = cmd.ExecuteReader();
Slider2.DataBind();
}
}
}

I tried your code, and found this issues:
1- Review how to build the carousel markup depending on which version of bootstrap you are using. I tried with Bootstrap v3.1.0 and had to change parts of your markup. Refer to documentation or this sample.
For instance, <div class="item"> should be placed inside your repeater, and should have a <div class="container"> immediatly inside of it.
2- You are not initializing correctly both carousels from jquery, do something like this to correct it:
$("#Carousel div.item:first").addClass("active");
$("#Carousel2 div.item:first").addClass("active");