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>

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.

How to display data in Bootstrap Modal when link button click in ASP.NET

How to display data in Bootstrap Modal when link button click in ASP.NET. In my code
When i click on link button Modal is opening, but assign values are not displaying. Please tell me how to display modal with assigned values.
Thanks.
.aspx Code:
<asp:LinkButton ID="linkButton8" runat="server" data-toggle="modal" data-target="#myModal" OnClick="linkButton_Click">CIS Information</asp:LinkButton>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" align="center">Candidate Information Sheet</h4>
</div>
<div class="modal-body">
<table class="table table-bordered" align="center">
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
<td>Email</td>
<td>
<asp:TextBox ID="txtEnail" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-ismiss="modal">Close</button>
</div>
</div>
</div>
</div>
C# Code:
protected void linkButton_Click(object sender, EventArgs e)
{
txtName.Text = "Name";
txtEnail.Text = "Mail#gmail.com";
}

Remove the data-toggle and update the code behind to be like this:
protected void linkButton_Click(object sender, EventArgs e)
{
txtName.Text = "Name";
txtEnail.Text = "Mail#gmail.com";
Page.ClientScript.RegisterStartupScript(GetType(), "modelBox", "$("#myModal").modal('show');", true);
}
It is better though to make the link button has a client side click event that gets the data through ajax, set the textboxs values and use the same modal('show') JavaScript function to display the modal box, this will be more efficient and user friendly.

Try adding UseSubmitBehavior="false" and using an asp:button instead.
<asp:Button ID="btnModal" runat="server" data-toggle="modal" data-target="#myModal" OnClick="linkButton_Click" UseSubmitBehavior="false">CIS Information</asp:Button>
The UseSubmitBehavior attribute determines whether the Button uses the browsers submit functionality or ASP.NET postback. By default it is set to true.
Edit
Due to linkButton not having the "UseSubmitBehavior" property.

how to get label text inside repeater

I am trying to get the text of a lable when someone clicks on a link button:
this is my code :
$(document).ready(function () {
$('[id*="lnkbtn_Remove"]').click(function (event) {
event.preventDefault();
var id = $("span[id*=lbl_Reference]").text();
alert(id);
});
});
But this gets me all the reference in the reapter as I am using "*". Is there anyway to get the actual reference on the row it has been clicked. Here is my html:
<asp:Repeater ID="rpt" runat="server" >
<ItemTemplate>
<div class="test">
<table>
<tr>
<td>
<div style="width: 230px;">
<asp:Label ID="lbl_Len" runat="server" CssClass="font_bold"></asp:Label>
<br />
<asp:Label ID="lbl_Reference" runat="server"></asp:Label>
</div>
</td>
<td align="left">
<div style="width: 80px;">
<asp:LinkButton ID="lnkbtn_Remove" runat="server" CssClass="rpt_item_Remove">Remove</asp:LinkButton>
</div>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>

You can get it by something like this,
var lablelId = $(this).closest('.test').find('[id*=lbl_Reference']).attr('id');
var lablelText = $(this).closest('.test').find('[id*=lbl_Reference]').text();

If you want to find how many column set checked and if checked then want to find label value that nested inside repeater table row PFB :-
var chkValue = $("#TableID [id*=chkBoxId]");
for (var i = 0; i < chkValue.length; i++) {
if (chkValue[i].checked)
$('#TableID tr:eq(' + (i+1) + ') td:eq(0)').find('[id*=lblIds]').text() ;

embed string in the html

Asp.net c#
I am using the below code..
<%String h = "hello";%>
<!-- "wall_com_insert.aspx?Tid=" + Application.Get("Tid");-->
<div id="content_sr_comment" style="height: auto"> <asp:Label ID="Label8"
runat="server" Text="<%=h%>" ></asp:Label>
</div>
But I am getting the output..
output displayed on the label: "<%=h%>"
I guess the syntax is not correct.. can I get help

You can't place a server command inside a server tag. Try this:
<div id="content_sr_comment" style="height: auto"> <%= h %></div>
Or
<script runat="server" language="C#">
void Page_Load(object sender, EventArgs e)
{
String h = "hello";
Label8.Text = h;
}
</script>
<div id="content_sr_comment" style="height: auto">
<asp:Label ID="Label8" runat="server"></asp:Label>
</div>

This should work:
<script runat="server" language="C#">
private string h = "hello";
</script>
<!-- "wall_com_insert.aspx?Tid=" + Application.Get("Tid");-->
<div id="content_sr_comment" style="height: auto"> <asp:Label ID="Label8"
runat="server"><%=h%></asp:Label>
</div>

Another approach that I find useful, especially if you want to write out a value in multiple places in your html is to create a function in your code behind like this:
protected string SayHello()
{
return "Hello";
}
You can then use it all over your html:
<div id="content_sr_comment" style="height: auto">
<%=SayHello() %>
</div>