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
Related
I'm using a listview and ajax in an asp.net web form. In part of that form, I display comments, which readers can rate, either positive or negative.
This value isn't updated unless the page is refreshed, is there a way to update the value without the need of refreshing the page?
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" OnItemCommand="ListView1_ItemCommand">
<ItemTemplate>
<div class="row comm_info_bar ">
<div class="col-md-5 RightDisplay"><%# Eval("name") %></div>
<div class="col-md-5 comm_info_date"><%# Eval("date") %></div>
<asp:LinkButton ID="negBtn" class="glyphicon glyphicon-minus voteCommentIcon voteContNeg text-danger smallGlyph" runat="server" CommandName="negative" CommandArgument='<%#Eval("id")%>' />
<asp:Label ID="lblnegative" name="lblnegative" class=" voteNumNeg" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "negative") %>'></asp:Label>
<asp:LinkButton ID="posBtn" class="glyphicon glyphicon-plus voteCommentIcon voteContNeg text-success smallGlyph" runat="server" CommandName="positive" CommandArgument='<%#Eval("id")%>' />
<asp:Label ID="lblpositive" class="voteNumPos" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "positive") %>'></asp:Label>
</div>
<div class="row">
<div class="col-md-12 comments"><%# Eval("text") %></div>
</div>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
and in code:
static List<Int64> commentsUser = new List<long>();
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
string name = e.Item.DataItemIndex.ToString();
long commentId = Convert.ToInt64(e.CommandArgument);
ArticleCommentsDataClass ArticleComment = new ArticleCommentsDataClass();
if (e.CommandName == "positive")
{
if (!searchcomments(commentId))
{
ArticleComment.Comments_positive(commentId);
commentsUser.Add(commentId);
}
}
else
{
if (!searchcomments(commentId))
{
ArticleComment.Comments_negative(commentId);
commentsUser.Add(commentId);
}
}
}
Is there anyone who has an idea on how to do this?
This sounds like you are binding (reading the data of your grid) before executing the command. Since the command changes the data, you should rebind the grid or update it in any other way.
Check out this article that talks about when each event is raised
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
I have an AsyncFileUpload control that should show a panel and set some text when the upload completes successfully. When I debug it, the event fires and I see that the method is called correctly, but the form doesn't update.
Here's the markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="well well-large">
<form class="navbar-form pull-left">
<ajaxToolkit:AsyncFileUpload runat="server" class="search-query" ID="AsyncFileUpload" Width="400px"
UploadingBackColor="AppWorkspace" ThrobberID="myThrobber" CompleteBackColor="#068712" OnUploadedComplete="AsyncFileUpload_UploadedComplete" />
<br />
</form>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload" EventName="UploadedComplete" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="panAlertUpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="panAlert" Visible="false">
<div class="alert alert-success" id="divAlert" runat="server">
<button id="Button1" runat="server" type="button" class="close" data-dismiss="alert">×</button>
You shouldn't see this message!
</div>
<asp:Panel runat="server" ID="panMarquee" Visible="true">
<div id="Div1" runat="server" class="progress progress-success progress-striped">
<div id="ProgressBar" runat="server" class="bar" style="width: 100%"></div>
</div>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
And here's the server code:
protected void AsyncFileUpload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload.HasFile)
{
this.SetMessage(Message.Success);
}
else
{
this.SetMessage(Message.Fail);
}
}
#endregion
#region Miscellaneous
private enum Message { Success, Fail }
private void SetMessage(Message msg)
{
if (msg == Message.Success)
{
this.divAlert.InnerText = "Well done! The document appears to have uploaded successfully. Please wait...";
this.divAlert.Attributes.Add("class", "alert alert-success");
}
else
{
this.divAlert.InnerText = "Oh snap! Something broke. Please contact IT right away.";
this.divAlert.Attributes.Add("class", "alert alert-error");
}
this.panAlert.Visible = true;
this.panAlertUpdatePanel.Update();
}
It was working just fine when I was using a button as the trigger, but not when I changed it to just the AsyncFileUpload control.
Any ideas?
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>
Just would like know how to pass textbox value to a modal popup after clicking a button using ModalPopUpExtender in ASP.NET, I've tried these codes but seems that I have no luck :(
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick", "showModalPopup(); return false;");
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick='showModalPopup(); return false;' />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" OkControlID="btnOkay" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="HellowWorldPopup">
<div class="PopupHeader" id="PopupHeader">
Header</div>
<div class="PopupBody">
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
<div class="Controls">
<input id="btnOkay" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
javascript
function showModalPopup() {
//show the ModalPopupExtender
var value;
value = document.getElementById("TextBox1").value;
$get("<%=Label1.ClientID %>").value = value;
$find("<%=ModalPopupExtender1.ClientID %>").show();
}
I wonder what I miss out :(, Thanks and I hope someone could help me :)
use
value = document.getElementById('<%=TextBox1.ClientID %>').value;
instead of
value = document.getElementById("TextBox1").value;