In my Project, I have different types of Lighting categories. Each category has its ID. now In My UI, If I select particular category, its pics should be displayed in repeater. I don't know how to give ID in a href tag.
My HTML:
<ul class="filter text-center">
<li><a data-cat="all" href="#All" class="active">All</a></li>
<li><a data-cat="Dynamite" href="#DynamiteLounge">Dynamite Lounge</a></li>
<li><a data-cat="Morsel" href="#Morsel">The Morsel Restaurant & Banquet</a></li>
<li><a data-cat="Shagun" href="#Shagun">Shagun Hotel</a></li>
<li><a data-cat="Shops" href="#Shops">Shops</a></li>
<li><a data-cat="Bunglows" href="#Bunglows">Bunglows</a></li>
</ul>
<div class="bf-single-item" id="All">
<asp:PlaceHolder ID="plcAll" runat="server">
<asp:Repeater ID="rptrAll" runat="server">
<ItemTemplate>
<div class="bf-single-item">
<asp:Image ID="imgAll" runat="server" ImageUrl='<%# Eval("ImageAll")%>' />
<div class="caption">
<%--<div class="cap-in">
<h3>
CN Lighting</h3>
<div class="bflink-preview">
Zoom In
</div>--%>
</div>
</ItemTemplate>
</asp:Repeater>
</asp:PlaceHolder>
</div>
<div class="bf-single-item" id="DynamiteLounge">
<asp:PlaceHolder ID="plcDynamiteLounge" runat="server">
<asp:Repeater ID="rptrDynamiteLounge" runat="server">
<ItemTemplate>
<div class="bf-single-item">
<asp:Image ID="imgDynamiteLounge" runat="server" ImageUrl='<%# Eval("ImageDynamiteLounge") %>' />
<div class="caption">
<div class="cap-in">
<h3>
CN Lighting</h3>
<%--<div class="bflink-preview">
Zoom In
</div>--%>
</div>
</ItemTemplate>
</asp:Repeater>
</asp:PlaceHolder>
</div>
.
.
.
In this code, as you can see I have <a href in <li> and I have given href as a div Ids . See image. how to pass ID?
markup
<asp:LinkButton runat="server" Text="All" OnClick="LinkButton_Click"></asp:LinkButton>
protected void LinkButton_Click(object sender, EventArgs e)
{
var id = (sender as LinkButton).Attributes["data-cat"];
if(id == "All")
DoSomething();
}
your id cannot be retrieved like this in the code behind, but from ASP.NET 4 there is the Control.ClientID property that could help you.
Assuming instead that you wanted this client-side
document.getElementsByTagName('a').forEach(function(elem){
elem.addEventListened(click_handler);
});
function click_handler(){
var id = this.id;
if(id == 'All')
doSomething();
}
assuming that you know the Array.prototype.forEach method
Related
I am trying to make a web form that has several dynamic tabs at the top.
Under the second tab, there is an "add new" button which can add items to the list using a repeater
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%# Register Assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxControlToolkit" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Menu1">Menu1</a></li>
<li><a data-toggle="tab" href="#Menu2">Menu2</a></li>
<li><a data-toggle="tab" href="#Menu3">Menu3</a></li>
</ul>
<div class="tab-content">
<div id="Menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<p>Content of Menu1 </p>
</div>
<div id="Menu2" class="tab-pane fade">
<h3>Menu2</h3>
<p>
<asp:Button Text="Add New" ID="btnAdd1" OnClick="btnAdd_Click1" runat="server" />
<asp:Repeater runat="server" ID="Repeater1">
<HeaderTemplate>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Parameter One</th>
<th>Parameter Two</th>
<th>Parameter Three</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Textbox runat="server" Width="100px" ID="txtParameterOne" Text='<%# Eval("ParameterOne") %>' />
</td>
<td>
<asp:Textbox runat="server" Width="100px" ID="txtParameterTwo" Text='<%# Eval("ParameterTwo") %>' />
</td>
<td>
<asp:Textbox runat="server" Width="100px" ID="txtParameterThree" Text='<%# Eval("ParameterThree") %>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</p>
</div>
<div id="Menu3" class="tab-pane fade">
<h3>Menu3</h3>
<p>This content is supposed to be under "Menu3" Tab.</p>
</div>
</div>
</div>
</asp:Content>
The code behind for "add new" button
public void btnAdd_Click1(object sender, EventArgs e)
{
List<FirData> dataList = new List<FirData>();
//-- add all existing values to a list
foreach (RepeaterItem item in Repeater1.Items)
{
dataList.Add(
new FirData()
{
ParameterOne = (item.FindControl("txtParameterOne") as System.Web.UI.WebControls.TextBox).Text,
ParameterTwo = (item.FindControl("txtParameterTwo") as System.Web.UI.WebControls.TextBox).Text,
ParameterThree = (item.FindControl("txtParameterThree") as System.Web.UI.WebControls.TextBox).Text,
});
}
//-- add a blank row to list to show a new row added
dataList.Add(new FirData());
Repeater1.DataSource = dataList;
Repeater1.DataBind();
}
Things works fine without adding any item to the repeater. But once items were added, content under dynamic tabs start to overlap with each other. Please check out the first picture attached below.
This is what would happen after items being added to the page under "Menu2" tab. The part in the red circle is supposed to be showing under the "Menu3" tab instead. Link to the screenshot
If I reload the page and do not click the add new button under the "Menu2" Tab. (Meaning that there is no item under the "Menu2" tab.) Everything would work as expected. The content in the read circle in the previous picture is under the "Menu3" tab now. (which is how it supposed to be)Link to the Screenshot
Thank you!
Below <ItemTemplate> you need to add <FooterTemplate> and include the tbody, table and container div closing tags like this:
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</div> <!--container div closing -->
</FooterTemplate>
I'm developing a blog that has a section for getting some comments and replies from the users. The first part is of my code for getting the comments and replies is the following one:
C# code:
var a = commentBLL.GetAll(BlogID);
rp_MainComments.DataSource = a;
rp_MainComments.DataBind();
protected void rp_MainComments_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
LinkButton btn = e.Item.FindControl("btn_Comment_Reply") as LinkButton;
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(btn);
HiddenField lt = (HiddenField)e.Item.FindControl("hf_Main_CommentID");
Repeater rpcommentreply = (Repeater)e.Item.FindControl("rp_Comment_Reply");
Panel panel_Comment_Reply = e.Item.FindControl("panel_Comment_Reply") as Panel;
if (!string.IsNullOrEmpty(lt.Value))
{
var b = commentBLL.GetByCommentID(Convert.ToInt32(lt.Value));
rpcommentreply.DataSource = b;
rpcommentreply.DataBind();
panel_Comment_Reply.Visible = false;
}
}
}
ASPX code:
<asp:Repeater ID="rp_MainComments" OnItemDataBound="rp_MainComments_ItemDataBound" OnItemCommand="rp_MainComments_ItemCommand" runat="server">
<ItemTemplate>
<asp:HiddenField ID="hf_Main_CommentID" runat="server" Value='<%# Eval("Comment_Id") %>' />
<ul class="comments">
<li>
<div class="comment">
<div class="img-thumbnail d-none d-sm-block">
<%--<asp:Image ID="Image_7" CssClass="avatar" runat="server" ImageUrl="http://placehold.it/40x40" />--%>
<i class="fa fa-user fa-fw fa-5x"></i>
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong><%# Eval("Name") %></strong>
<span class="float-right">
<span>
<asp:LinkButton ID="btn_Comment_Reply" Text="Reply" ClientIDMode="AutoID" runat="server" OnClick="btn_Comment_Reply_Click" CommandName="Edit" CommandArgument='<%# Eval("Comment_Id") %>' /></span>
</span>
</span>
<p><%# Eval("Message") %></p>
<span class="date float-right">
<%# Eval("Comment_Date") %></span>
</div>
</div>
</li>
<li>
<asp:HiddenField ID="hf_PanelValue" Value='<%# Container.ItemIndex %>' runat="server" />
<asp:Repeater ID="rp_Comment_Reply" OnItemCommand="rp_Comment_Reply_ItemCommand" runat="server">
<ItemTemplate>
<ul class="comments reply" id="commentreply">
<li>
<div class="comment">
<div class="img-thumbnail d-none d-sm-block">
<%--<asp:Image ID="Image_8" CssClass="avatar" runat="server" ImageUrl="http://placehold.it/40x40" />--%>
<i class="fa fa-user fa-5x fa-fw"></i>
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong><%# Eval("Name") %></strong>
<span class="float-right">
<span>
<asp:LinkButton ID="btn_Reply" Text="Reply" ClientIDMode="AutoID" runat="server" OnClick="btn_Reply_Click" CommandName="Edit" CommandArgument='<%# Eval("Parent_Id") %>' /></span></span>
</span>
<p><%# Eval("Message") %></p>
<span class="date float-right"><%# Eval("Comment_Date") %></span>
</div>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
This is the output:
Now, I would like to to show the nested replies to which user reply in a post it's shown only upto second level but I need a third as well as fourth level.
How is it possible?
How do I bind a string array(list of files in my case) to a variable in the item template?
Here is what I have so far but I am not sure what to do for the code behind itemdatabound.
I am trying to put each url in the <% Photo_URL %> variable.
Any help would be appreciated.
Thanks in advanced.
Page Code
<asp:Repeater id="unorderedList" runat="server" OnItemDataBound="unorderedList_ItemDataBound">
<HeaderTemplate>
<ul class="thumbs noscript">
</HeaderTemplate>
<ItemTemplate>
<li>
<a class="thumb" href='<%# Photo_URL %>'>
<img src='<%# Photo_URL %>'>
</a>
<div class="caption">
<div class="download">
<a href='<%# Photo_URL %>'>Download Original</a>
</div>
</div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
Code Behind
private void Page_Init(object sender, EventArgs e)
{
string[] photos = Directory.GetFiles(ImagesLocation);
unorderedList.DataSource = photos;
unorderedList.DataBind();
}
protected void unorderedList_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//what goes here
}
<div class="download">
<a href='<%# Container.DataItem %>'>Download Original</a>
</div>
No need for the ItemDataBound event, you just need to use the <%# Container.DataItem %> syntax, like this:
<ItemTemplate>
<li>
<a class="thumb" href='<%# Photo_URL %>'>
<img src='<%# Container.DataItem %>'>
</a>
<div class="caption">
<div class="download">
<a href='<%# Container.DataItem %>'>Download Original</a>
</div>
</div>
</li>
You can use the Container.DataItem syntax:
<asp:Repeater id="unorderedList" runat="server" OnItemDataBound="unorderedList_ItemDataBound">
<HeaderTemplate>
<ul class="thumbs noscript">
</HeaderTemplate>
<ItemTemplate>
<li>
<a class="thumb" href='<%#Container.DataItem%>'>
<img src='<%#Container.DataItem%>'>
</a>
<div class="caption">
<div class="download">
<a href='<%#Container.DataItem%>'>Download Original</a>
</div>
</div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
You'll need to add a GridView in the ItemTemplate. Set it's DataSource to <%# Eval("string_list_name") %> where string_list_name is the variable name of your List of strings.
I have a problem with an updatepanel when I put it inside a repeater control I get an error, and I need to refresh only a single post when the user click on a link button, here is my code...
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Repeater ID="Repeater1" runat="server"
OnItemCommand="MyButtonCommandEvent">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="post">
<asp:HiddenField ID="postID_hidden" runat="server"
Value='<%# DataBinder.Eval(Container.DataItem,"posts_ID") %>' />
<div class="Thumb">
<img src="thumbs/abdo_thumb.jpg"> </img></div>
<span class="user"><%#DataBinder.Eval(Container.DataItem, "poster_name")%>
</span>
<div class="post-body">
<p>
<%#DataBinder.Eval(Container.DataItem,"description")%>
</p>
</div>
<div class="post-options" style=" height:22px; ">
<span class="first"><%#DataBinder.Eval(Container.DataItem,"post_date")%></span>
<ul style="display:inline; list-style-type: none;">
<li>
<div class="tooltip">
Comments
<img class="tool-img" src="Images/comments.png"> : <%#DataBinder.Eval(Container.DataItem,"comment_num") %>
</img>
</div>
</li>
<li>
<div class="tooltip">
<asp:LinkButton ID="like_linkbtn" runat="server" CommandName="Like"><%#(DataBinder.Eval(Container.DataItem, "name_like").ToString() == "") ? "Like" : DataBinder.Eval(Container.DataItem, "name_like")%></asp:LinkButton>
<img class="tool-img" src="images/likes.png"> : <%#DataBinder.Eval(Container.DataItem,"like_counter") %>
</img></div>
</li>
<li>
<div class="tooltip">
<asp:LinkButton ID="hate_linkbtn" runat="server" CommandName="Hate"><%#(DataBinder.Eval(Container.DataItem, "name_hate").ToString() == "") ? "Hate" : DataBinder.Eval(Container.DataItem, "name_hate")%></asp:LinkButton>
<img class="tool-img" src="images/hate.png"> : <%#DataBinder.Eval(Container.DataItem,"hate_counter") %>
</img></div>
</li>
</ul>
</div>
<div class="finish">
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
The error is : Compiler Error Message: CS1061: 'System.Web.UI.Control' does not contain a definition for 'DataItem' and no extension method 'DataItem' accepting a first argument of type 'System.Web.UI.Control' could be found (are you missing a using directive or an assembly reference?).
This is making me really frustrated please help.
PS: It works if I removed the updatepanel and made it outside the repeater (The repeater inside the updatepanel instead of the updatepanel inside the repeater but that's not what I want)
Another solution is to cast Container as IDataItemContainer (((IDataItemContainer)Container)).
Instead of:
<%# DataBinder.Eval(Container.DataItem, "Column") %>
Use:
<%# DataBinder.Eval(((IDataItemContainer)Container).DataItem, "Column") %>
This solution is ideal if you are casting the DataItem as an object, eg:
<%# ((MyClass)Container.DataItem).ColumnName %>
This becomes:
<%# ((MyClass)((IDataItemContainer)Container).DataItem).ColumnName %>
Put Update panel out side of repeater. It will work.
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server"
OnItemCommand="MyButtonCommandEvent">
<ItemTemplate>
<div class="post">
<asp:HiddenField ID="postID_hidden" runat="server"
Value='<%# DataBinder.Eval(Container.DataItem,"posts_ID") %>' />
<div class="Thumb">
<img src="thumbs/abdo_thumb.jpg"> </img></div>
<span class="user"><%#DataBinder.Eval(Container.DataItem, "poster_name")%>
</span>
<div class="post-body">
<p>
<%#DataBinder.Eval(Container.DataItem,"description")%>
</p>
</div>
<div class="post-options" style=" height:22px; ">
<span class="first"><%#DataBinder.Eval(Container.DataItem,"post_date")%></span>
<ul style="display:inline; list-style-type: none;">
<li>
<div class="tooltip">
Comments
<img class="tool-img" src="Images/comments.png"> : <%#DataBinder.Eval(Container.DataItem,"comment_num") %>
</img>
</div>
</li>
<li>
<div class="tooltip">
<asp:LinkButton ID="like_linkbtn" runat="server" CommandName="Like"><%#(DataBinder.Eval(Container.DataItem, "name_like").ToString() == "") ? "Like" : DataBinder.Eval(Container.DataItem, "name_like")%></asp:LinkButton>
<img class="tool-img" src="images/likes.png"> : <%#DataBinder.Eval(Container.DataItem,"like_counter") %>
</img></div>
</li>
<li>
<div class="tooltip">
<asp:LinkButton ID="hate_linkbtn" runat="server" CommandName="Hate"><%#(DataBinder.Eval(Container.DataItem, "name_hate").ToString() == "") ? "Hate" : DataBinder.Eval(Container.DataItem, "name_hate")%></asp:LinkButton>
<img class="tool-img" src="images/hate.png"> : <%#DataBinder.Eval(Container.DataItem,"hate_counter") %>
</img></div>
</li>
</ul>
</div>
<div class="finish">
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I'm making a social network website, the problem I'm facing here is that I used an update panel inside the repeater and I want to refresh the contents of the updatepanel when the user clicks on any linkbutton and ofcourse this updatepanel will be repeated foreach (div-post), but when I click on any linkbutton inside the repeater control and the updatepanel it doesn't refresh. How do I force it to refresh ?. Here is the code I'm using ...
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Repeater ID="Repeater1" runat="server"
OnItemCommand="MyButtonCommandEvent">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="post">
<asp:HiddenField ID="postID_hidden" runat="server"
Value='<%# Eval("posts_ID") %>' />
<div class="Thumb">
<img src="thumbs/abdo_thumb.jpg"> </img></div>
<span class="user"><%#Eval("poster_name")%>
</span>
<div class="post-body">
<p>
<%#Eval("description")%>
</p>
</div>
<div class="post-options" style=" height:22px; ">
<span class="first"><%#Eval("post_date")%></span>
<ul style="display:inline; list-style-type: none;">
<li>
<div class="tooltip">
Comments
<img class="tool-img" src="Images/comments.png"> : <%#Eval("comment_num") %>
</img>
</div>
</li>
<li>
<div class="tooltip">
<asp:LinkButton ID="like_linkbtn" runat="server" CommandName="Like" OnClick="Like_Click"><%#(Eval("name_like").ToString() == "") ? "Like" : Eval("name_like")%></asp:LinkButton>
<img class="tool-img" src="images/likes.png"> : <%#Eval("like_counter") %>
</img></div>
</li>
<li>
<div class="tooltip">
<asp:LinkButton ID="hate_linkbtn" runat="server" CommandName="Hate"><%#(Eval("name_hate").ToString() == "") ? "Hate" : Eval("name_hate")%></asp:LinkButton>
<img class="tool-img" src="images/hate.png"> : <%#Eval("hate_counter") %>
</img></div>
</li>
</ul>
</div>
<div class="finish">
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
And the server side code
protected void Like_Click(object sender, EventArgs e)
{
LinkButton1.Text = DateTime.Now.ToString();
}
protected void MyButtonCommandEvent(object source, RepeaterCommandEventArgs e)
{
var postID = e.Item.FindControl("postID_hidden") as HiddenField;
NewUser user = new NewUser();
if (e.CommandName == "Like")
{
user.like_post(int.Parse(postID.Value), (int)Session["accountID"]);
}
else
{
if (e.CommandName == "Hate")
{
user.hate_post(int.Parse(postID.Value), (int)Session["accountID"]);
}
}
// repeater_databind();//This will refresh all the contents of the repeater(bad way)
}
So as can see databind is not working for me because I want to refresh only one item in the repeater control and not the whole items, can anyone help me please ?
Edit :
Problem solved by wrapping the whole repeater in another updatepanel and setting the trigger like this
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Repeater1" EventName="MyButtonCommandEvent" />
</Triggers>
You should try to set the UpdateMode propery of your update panel to Conditional