I have created FAQ page using Repeater Control, The questions and Answers are bound Run-time from Code Behind as Follows.
ASPX code
<asp:Repeater ID="RepDetails" runat="server">
<ItemTemplate>
<table id="tblRepeater">
<tr id="QARow" runat="server">
<td>
<div id="QuestionDiv" onclick="return show(this, 'AnswerDiv');">
Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
</div>
<div id="AnswerDiv" style="display:none;">
Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
</div>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
It Works great ! The thing is i have used following Script for opening and closing the Answer.
<script type="text/javascript">
function show(QuestionDiv, AnswerDiv) {
var arrDIVs = QuestionDiv.parentNode.getElementsByTagName("Div");
for (var i = 0; i < arrDIVs.length; i++) {
var oCurDiv = arrDIVs[i];
if (oCurDiv.id.indexOf(AnswerDiv) >= 0) {
var blnHidden = (oCurDiv.style.display == "none");
oCurDiv.style.display = (blnHidden) ? "block" : "none";
}
}
return false;
}
</script>
It works like, when clicked on One Question It shows the answer of that question.
My Question is: I want to update the script so as when we click on One particular question, It should display the Answer of that question, also it should hide the Answer of other Question.(like http://www.edubrainschool.com/faq.php).
The best way for that would be to bind click of that TR. You can do this by applying a css to the TR.
<asp:Repeater ID="RepDetails" runat="server">
<ItemTemplate>
<table id="tblRepeater">
<tr id="QARow" runat="server" class="TROpenCSS">
<td>
<div id="QuestionDiv" class="QuestionCSS" onclick="return show(this, 'AnswerDiv');">
Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
</div>
<div id="AnswerDiv" class="AnswerCss" style="display:none;">
Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
</div>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
And the bind the click event of those CSS
$('.TROpenCSS').bind('click',function(){
// Do your code to show the TD
});
Add other bind for all clicks / mouseover
Or you can use "ddaccordion.js" or refer to the following link
Related
How can i get text of each row from Label1?
My .aspx
<asp:ListView ID="lvRestaurant" runat="server" DataSourceID="ldsOrder" DataKeyName="restaurantID">
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="groupPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<GroupTemplate>
<div class="restaurant">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</GroupTemplate>
<ItemTemplate>
<div><asp:Label ID="Label1" runat="server" Text='<%# Bind("restaurantID") %>' Visible="false"></asp:Label></div>
<div><asp:Image ID="imgRestaurant" runat="server" ImageUrl='<%# Eval("image", "../resImg/{0}") %>' draggable="false" CssClass="restaurant-img"/></div>
<div class="resName"><b><asp:Label ID="lblName" runat="server" Text='<%# Bind("restaurantName") %>'></asp:Label></b></div>
<div class="deliveryFee"><b>MYR<asp:Label ID="lblDeliveryFee" runat="server" Text='<%# Bind("deliverFee") %>'></asp:Label></b> <span style="color:#C3C3C3;">delivery fee</span></div>
</ItemTemplate>
</asp:ListView>
I try to make if cart exist 1 restaurant product, other restaurant will not be able to click.
My .cs
if(Session["BuyItems"]!=null{
string rID = //get from Label1;
if(rID==Session[existID].ToString()){
orderPage.HreF="#";
}
}
Have a look at foreach, maybe this links can help you.
https://www.codeproject.com/Questions/1029041/How-to-loop-through-a-listbox-items-in-asp-net
How to get all labels and its input elements in javascript
https://www.sitepoint.com/community/t/how-to-get-text-from-a-label-in-a-datalist-itemtemplate/6088/18
Pseudocode
if(Session["BuyItems"]!=null
{
string rID = 5; // for example
foreach (var item in YourListWithRestaurants)
{
if(rID != Session[existID].ToString())
{
// Make the restaurants unable to click
}
}
}
You can do this. Add an OnItemCommand with ListView:
OnItemCommand="ListView_ItemCommand" >
Then you can write an eventhandler:
protected void ListView_ItemCommand(object sender, ListViewCommandEventArgs e)
{
Label label1 = (Label)e.Item.FindControl("Label1");
}
I've been working on a small project for a chatbox using ASP.NET and WebForms and basically I'm stuck trying to change the class of a panel so I can determine if the message should be placed on the left or the right side of the box depending on who sent it.
This is how I'm currently using all of this:
<div class="lv-body" id="ms-scrollbar" style="overflow:scroll; overflow-x: hidden; height:520px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000"></asp:Timer>
<asp:DataList ID="DataList3" runat="server">
<ItemTemplate>
<asp:Panel class="lv-item media" id="MessageBox" runat="server">
<div class="media-body">
<div class="ms-item">
<span class="glyphicon glyphicon-triangle-left" style="color:#000000;"></span>
<asp:Label ID="Message" runat="server" Text='<%# Bind("Message") %>'></asp:Label>
</div>
<small class="ms-date">
<span class="glyphicon glyphicon-time"></span>
<asp:Label Width="900px" ID="Date" runat="server" Text='<%# Bind("Date") %>'></asp:Label>
</small>
</div>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
This is how I'm populating the values through CodeBehind:
public void LoadChatbox()
{
DateTime date = DateTime.Now;
string date3 = date.ToString("dd-MM-yyyy");
MySQL.MySqlCommand Cmd = new MySQL.MySqlCommand(MySQL.MySqlCommandType.SELECT);
Cmd.Select("helpdesk").Where("Sender", Label1.Text).And("Receiver", Label2.Text).Or("Sender", Label2.Text).And("Receiver", Label1.Text).Order("UniqueID");
MySQL.MySqlReader R = new MySQL.MySqlReader(Cmd);
DataList3.DataSource = R._dataset;
DataList3.DataBind();
}
Everything is working fine but basically I need a way to determine if the MessageBox (Panel) is displayed on the left or right side. Adding "right" to its class would do it but I would need a way to do that.
EDIT: The Label1 is representative of my name/id and the Label2 represents the name/id of the other member of the chat so these values can be used to determine if I sent it or the other person did.
I would say, in pseudo code :
<% if (Sender==me){ %>
<div class="media-body" style="text-align: right;">
...
</div>
else
<div class="media-body" style="text-align: left;">
...
</div>
<% } %>
Besides you'd better use a parametrized query, this line of code is dangerous :
Cmd.Select("helpdesk").Where("Sender", Label1.Text).And("Receiver", Label2.Text).Or("Sender", Label2.Text).And("Receiver", Label1.Text).Order("UniqueID");
I have a Slider class, which will create a slider with default values, and I want to call it inside a repeater, I was trying with following code.
<asp:Repeater ID="Repeater2" runat="server">
<HeaderTemplate><table><head><title>Test</title></head></HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container, "DataItem.first")%>
<cs:CriteriaBuilder runat="server" ID="CriteriaBuilder1" ClientIDMode="Static" />
<cs:Slider ID="testSlider3" runat="server" SliderID = "testSlider3" />
</td>
</tr>
</body>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Code behind binding with
Slider testSlider11 = Repeater2.FindControl("testSlider3") as Slider;
testSlider11 = new Slider();
testSlider11.MinRange = "0";
testSlider11.MaxRange = "100";
Can anyone help me to find the solution?
I am trying to make my first public .net website but I have a little problem.
It's a webshop, where i want to show at new product picture, if the product is not older than the current date with more than 30 days?
Markup:
<asp:Repeater ID="rptProducts" runat="server">
<ItemTemplate>
<table cellpadding="5" cellspacing="5" class="tblSales">
<tr>
<td>
<h3>
<asp:Label ID="Label1" Text='<%#Eval("ProductName")%>' runat="server" /></h3>
<h2>
<a href='<%# "Products.aspx?ID=" + Eval("ProductID") %>'>Read More</a></h2>
</td>
<td >
<h4>
<asp:Label ID="Label2" Text='<%#Eval("ProductPrice")%>' runat="server" />,-</h4>
<div>
<img alt="New product" src="images/NewProduct.png" /><!--This picture should show in 30 days-->
</div>
</td>
</tr>
<hr />
</table>
</ItemTemplate>
</asp:Repeater>
Code-behind:
public partial class sale : System.Web.UI.Page
{
ProductsTableAdapter p = new ProductsTableAdapter();
protected void Page_Load(object sender, EventArgs e)
{
GetData();
}
protected void GetData()
{
rptProducts = p.GetProductsByCategoryID(3);
rptProducts();
}
}
EDITED: As a user noted this may be a misinterpretation so...
IF you want to filter items that were added and not display them at all use the following LINQ expression on the GetData method:
rptProducts = p.GetProductsByCategoryID(3).Where(p=>p.ProductAddedDate > DateTime.Now.AddDays(-30));
you need to have a property (in the above example I added a DateTime ProductAddedDate to the product class
IF you want to not show the image based on the date BUT show everything else you could:
In the ItemDataBound event of the repeater you can set asp control (replace static html with asp:Image which allows you to control display using the Visible property i.e.
<asp:Repeater ID="rptProducts" runat="server" OnItemDataBound="rptProducts_Databound">
<ItemTemplate>
<table cellpadding="5" cellspacing="5" class="tblSales">
<tr>
<td>
<h3>
<asp:Label ID="Label1" Text='<%#Eval("ProductName")%>' runat="server" /></h3>
<h2>
<a href='<%# "Products.aspx?ID=" + Eval("ProductID") %>'>Read More</a></h2>
</td>
<td >
<h4>
<asp:Label ID="Label2" Text='<%#Eval("ProductPrice")%>' runat="server" />,-</h4>
<div>
<asp:Image ID="ProdImg" runat="server" AlternativeText="New product" ImageUrl='<%# "~/images/" + Eval("ImageFileName")' Visible="True"/><!--This picture should show in 30 days-->
</div>
</td>
</tr>
<hr />
</table>
</ItemTemplate>
</asp:Repeater>
CS codebehind
protected void rptProducts_Databound(object sender, RepeaterItemEventArgs e)
{
var imgCtrl = (Image)e.Item.FindControl("ProdImg");
var dataItem = (Product)e.Item.DataItem;
imCtrl.Visible = dataItem.ProductAddedDate > DateTime.Now.AddDays(-30);
}
Many thanks, I find out how to make it :)thanks to you, quite simple but i works.
here is the code I made:
<asp:Image ID="Image2" ImageUrl="~/images/new.png" Visible='<%#GetProductSalesPic(Eval("ProductDate"))%>' runat="server" />
C# code:
protected bool GetProductSalesPic(object Date)
{
DateTime actDate = (DateTime)Date;
if (DateTime.Now.AddDays(-30) < actDate)
{
return true;
}
else
{
return false;
}
}
And again, Thanks You, for the fast and good response :D
I have a few tabs on a page and it always defaults to the first tab , but when a link is clicked i want it to select a diferent tab using javascript. How can I select the tab with Javascript?
Right now, because the default is selecting the first tab, javascript throws an error that either pnlTab2 is not visible or does not exist. But if I manually click on the tab and then on the link it focuses on that tab correctly?
I am new in C# and Javascript, can anyone please help me?, how can I select the second tab using javascript and then focus so that it does not give me error?
Thank you
function DoFocus() {
var pnlTab1 = document.getElementById('<%=pnlTab1.ClientID%>');
var pnlTab2 = document.getElementById('<%=pnlTab2.ClientID%>');
if (pnlTab2 != null ) {
//I WANT TO SELECT THE TAB HERE
document.getElementById('<%=pnlCustomerReviews.ClientID%>').focus();
}
else {
//OR SELECT THIS ONE
document.getElementById('<%=pnlTab2.ClientID%>').focus();
}
return false;
}
<asp:UpdatePanel ID="UpdatePnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ajaxToolKit:TabContainer runat="server" id="myTabs" CssClass="CustomTabStyle">
<ajaxToolKit:TabPanel ID="pnlTab1" runat="server" HeaderText="Tab 1">
<ContentTemplate>
<table>
<tr>
<td>
<div class="Tab1">
<asp:Label ID="lblPnl1" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel ID="pnlTab2" runat="server" HeaderText="Tab2">
<ContentTemplate>
<table>
<tr>
<td>
<div class="Tab2">
<asp:Label ID="lblPnl2" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
Try this: http://forums.asp.net/t/1127834.aspx