Showing posts with label view. Show all posts
Showing posts with label view. Show all posts

Wednesday, March 28, 2012

LinkButton OnClick not firing inside UpdatePanel

I have a page with a MultiView containing 2 views. The second view has a number of LinkButtons which implement a menu. I have wrapped the MultiView inside an UpdatePanel. The problem that I am having is that the events (specifically OnClick) don't fire for the LinkButtons. If I replace the LinkButtons with a Button everything works fine. I am doing something wrong or is there a problem with LinkButtons?I'm having the same issue right now. In an earlier version I had this working, so I'm not quite sure what happened.
I looked into it a bit farther and the postback function seems to be missing from the javascript for the page. I switched to MagicAjax and now everything works the way it is supposed to.
I'm a little too deep to make any switches. :-)

hello.

let me see if i understand what's going: you have a multiview control and in one of the views you have several linkbuttons. clicking on the button doesn't postback and from what you say, the problem is that the postback method isn't in the page.

so, i assume that the view that has the buttons isn't the initial view and that you don't have anything on that page that is able to start a postback. if this is your scenario, then the problem you're seeing is a bug of the atlas platform. the problem is that during partial postbacks, the __doPostBack is discarded and isn't added on the client side because the platform assumes that it is alread there.

an easy workaround is to add a button to the page (with the usesubmitbehavior set to false) and hide it (by using the css display property).btw, the reason everything worked with buttons is because on asp.net 2, they are inserted as submit buttons by default (<input type="submit">).


I guess my problem is a little simplier. I have two LinkButton objects inside of a Panel object, which is then contained in an UpdatePanel. To test, I added a Button object and it does postback as expected. The LinkButtons do not postback and I cannot figure out why. Is this a known issue with Atlas?

hello.

it looks like you can reproduce the problem with a simple page...can you post that page here?


The problem was the panel being set to "visible = false" up front. I have a link on the page that sets it to be visible though. Once that link is clicked and the panel is visible, the two LinkButtons don't fire the postbacks. Instead, when I started up with visible being set to true, everything worked just fine. So I just had to do a little z-index magic to get around setting it to "visible = false" to start. Kind of weird I can't start with that panel not being visible.

hello.

well, that's the problem i've described in my previous post. the same thing happens when you put the button inside a panel and set it its visible property to false during the initial rendering of the page. in these cases, when you don't have any other controls that use the __doPostBack method, the page won't work correctly when you use partial postbacks because even though the server side sends the __doPostBack method on the reponse for a partial postback, it'll be discarded by the client framework since it allways assumes that the method was added to the page during its initial rendering.

this is an old bug that i've reported a few months ago, though it still hasn't been solved.


Thank god for this thread, I finally able to solve the problem that I've been trying to solve for days. Your solution does work for panels and/or linkbutton inside the updatepanel. However, when I tried to set the visibility of the panel located outside of the updatepanel to true (initially set to false) by calling a method, it does not work. Any workaround for this? Thanks a bunch!

hello.

are you doing that (changing the visibility of the panel) during a partial postback? if so, then the panel must be inside an updatepanel...


Umm ... well, I don't know .. Am I? Anyhow, this is the code:

<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="Server"> <cc1:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> </cc1:ScriptManager> <div id="comments" class="page"> <table> <tr> <td> <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label></td> <td> <asp:TextBox ID="Nama" runat="server"></asp:TextBox></td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="Comment" Style="vertical-align: top"></asp:Label></td> <td> <asp:TextBox ID="Komen" runat="server" Height="72px" Width="299px"></asp:TextBox></td> </tr> <tr> <td> <asp:Button ID="Button1" runat="server" OnClick="SubmitComment" Text="Submit" /></td> <td><asp:Label Visible=false ForeColor=red ID=commentError runat=server></asp:Label></td> </tr> </table> <br /> <cc1:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Conditional"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:BoundField DataField="Comment" HeaderText="Comment" SortExpression="Comment" /> <asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString%>" SelectCommand="SELECT Name, Comment, Date FROM Comments ORDER BY Date DESC"></asp:SqlDataSource> </ContentTemplate> <Triggers> <cc1:ControlEventTrigger ControlID="Button1" EventName="Click" /> </Triggers> </cc1:UpdatePanel> </div></asp:Content>
and this is the codebehind that validate the input:

public void SubmitComment(Object sender, EventArgs e) { String dt = DateTime.Now.ToString(); String Name = Nama.Text; String Comment = Komen.Text;if (Name =="" || Comment =="") { commentError.Text ="Please complete all required fields"; commentError.Visible =true; }else {//SOME CODE TO INSERT Name and Comment to database } }
So, basically if the user doesn't put either name or comment, the commentError label will be shown up. Should I just put the entire table into update panel? Because when the Button1 is not tied up to the triggers, everything works fine.

hello.

well, that's because when button1 is configured as a trigger, the client portion of atlas intercpets the call and performs a partial postback; when you don't do that, you get a full postback. so, you have 2 options: you can put everything inside a panel or you can use two panels.

LinkButtons programmically added to updatepanel click event not firing

I have a conditional updatepanel with a multiview control inside. The first view displays a list of items in a table with a linkbutton next to each one created programmically with an eventhandler for the click event. The click event changes the multiview's active view to the next view to display controls for editing that item. The item table's content is first initialized in the OnLoad() function inside a if(!isPostback). I plan to eventually have a save button in the second view that will update the table's content after that. (ScriptManager EnablePartialRender = "true").

Ex:

    for(int i = 0; i < itemcount; i++) { ... LinkButton itemedit = new LinkButton(); itemedit.Text = "Edit"; itemedit.Click += new EventHandler(itemedit_Click); table.Controls.Rows[i].Cells[1].Add(itemedit); ...}

When I view the page and click the linkbutton next to one of the items in the updatepanel it starts to update. However, the view never changes. Further tests have shown that the click event is never being handled. If I change the code so that the table is updated during initial load and postbacks, I can get the click event to fire once. After the multiview is goes back to the original view, the click event can no longer be raised until the whole page is reloaded.

So, what I am trying to figure out is how to create eventhandlers at runtime inside an updatepanel and getting them to fire on an update.

Well, I have found a solution. I desided to scale the problem down to the most basic functions by creating a test application containing an updatepanel, multiview control with two views, and some code in the background to create a linkbutton to switch from one view to the other. The page looks like this as generated by VS:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="dynamicevent.aspx.cs" Inherits="dynamicevent" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
</atlas:ScriptManager>

</div>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
view1</asp:View>
<asp:View ID="View2" runat="server">
view2</asp:View>
</asp:MultiView>
</ContentTemplate>
</atlas:UpdatePanel>
</form>
</body>
</html>

The page is pretty basic and so is the code behind:

public partialclass dynamicevent : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) { LinkButton button =new LinkButton(); button.Text ="switch"; button.Click +=new EventHandler(button_Click);this.View1.Controls.Add(button); }void button_Click(object sender, EventArgs e) {this.MultiView1.ActiveViewIndex = 1; }}

This code creates one LinkButton to switch from ActiveViewIndex=0 to 1 and it works just fine. However, on a larger scale, creating a hundred or more LinkButtons next to records that must be requested from a database each time the page handles a postback doesn't sound like a good idea to me. So, I moved by button creation code into an if(!IsPostBack) block:

protected void Page_Load(object sender, EventArgs e) {if (!this.IsPostBack) { LinkButton button =new LinkButton(); button.Text ="switch"; button.Click +=new EventHandler(button_Click);this.View1.Controls.Add(button); } }
The changes break the page. When I click the LinkButton, the updatepanel reloads the contents of the first view minus the linkbutton. The linkbutton is lost and its eventhandler with it. So, perhaps atlas requires that everything remain wired up perfectly up until after Page_Load() is called at least. I did some thinking and came up with some code that fixes the problem by using the cache to store the button to be rewired on the next postback. It appears that that is all the work I need to do to get my click handler to work. I think the benefits are significant enough although it is hard to see in this example: protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
LinkButton button =new LinkButton();
button.Text ="switch";
button.Click +=new EventHandler(button_Click);

this.View1.Controls.Add(button);
Cache.Insert("test", button);
}
else
{
((LinkButton)Cache["test"]).Click +=new EventHandler(button_Click);
this.FindControl(((LinkButton)Cache["test"]).Parent.UniqueID).Controls.Add(((LinkButton)Cache["test"]));
}
}

The code rewires the event handler during a postback. The Control.Parent .Controls.Add() does not work directly for the LinkButton in the cache but the FindControl() method works just fine. I believe that although they have the same name, the first parent of the LinkButton is not the same as the second one. I am new to ASP.NET v2 and Atlas but I do not remember coming across this problem in the past with .NET 1.1.

If anyone has a better solution, please let me know. At this moment I am facing writing some manager class to wire up all my eventhandlers on on each postback and I really would like a better way.


changed

this.FindControl(((LinkButton)Cache["test"]).Parent.UniqueID).Controls.Add(((LinkButton)Cache["test"]));
to
this.Controls.Add(((LinkButton)Cache["test"]));
and it works just fine. This means that it does not matter where the LinkButton is located, just that it is added back to the page.

Thanks a lot for the solution you posted. I have been facing the same problem and your solution worked for me. But, I wonder if there is some other solution to this issue. If I find any I will post it here.

Thanks again.


Yes, that's not specific to Atlas. Any control that's added dynamically to the control tree must be added back on every subsequent postback.

I came across another issue when I was working with this yesterday. What I saw was that after a few postbacks my dynamically added link buttons won't work in fact it threw an object required error. Reason, they were removed from the cache and hencethis.Controls.Add(((LinkButton)Cache["test"])); would not work.

So, I tried to check if the cache had the button in it and only then I would execute this statement else I would create new linkbuttons. But guess what, I got back to the same problem I started off with. The button would not fire the event.

In the solution we completely depend on the cache to make sure that the linkbuttons are wired to the respective events. What would happen when the buttons are removed from the cache for whatever reason, especially in a production environment?


Ok, I think I may have a solution for this...as bleroy indicated this is the default behavior with dynamically added controls (that you have to add them to the page on every postback). So, if you add the linkbuttons to the page on Page_Init instead of Page_Load, you will not have to worry about caching them in order to re-wire the controls with the events.

Let me know if this was helpful.


I'd like to respectfully point out that putting a control in the cache is a bad, bad, bad idea and you should never ever do it. One reason is that this maintains an in-memory reference to the instance of the control, hence to the corresponding instance of the page and thus to a huge object graph that should have been thrown away at the end of the request. There is no way this is not going to blow up whenever you get more than a few simultaneous requests.

You should only put data (that is, disconnected data) or output (i.e. strings) in cache...

List View Template-Table layout

Is it possible to set the template to generate table rows?Yes. There's 1 gotcha though: you need to define a tbody as well. So, the template for tables should look like:

<table runat="server">
<tbody>
<tr id="itemTemplate" runat="server">... </tbody>
</table>

Wilco,

I am having issues with this too, getting unknown runtime errors. Do you have a working example?

My code (probably far from what it should be):

<tablecellspacing="0"cellpadding="0"frame="box"style="border-collapse: collapse;">
<tbody>
<atlas:ListViewID="listEmails"runat="server"ItemTemplateControlID="itemTemplate"CssClass="list"ItemCssClass="row"AlternatingItemCssClass="altrow">
<LayoutTemplate>
<trid="itemTemplate"runat="server">
<tdid="itemTemplateColumn"runat="server">
<atlas:LabelID="lblAddress"runat="server">
<Bindings>
<atlas:BindingDataPath="Address"Property="text"/>
</Bindings>
</atlas:Label>
</td>
<td>
...
</td>
</tr>
</LayoutTemplate>
</atlas:ListView>
</tbody>
</table>

Thx
dB.


Got it. The table and tbody have to go inside the LayoutTemplate. It's a little confusing ...

<atlas:ListViewID="listEmails"runat="server"ItemTemplateControlID="itemTemplate"CssClass="list"ItemCssClass="row"AlternatingItemCssClass="altrow">
<LayoutTemplate>
<tablecellspacing="0"cellpadding="0"frame="box"style="border-collapse: collapse;">
<tbodyid="trBody"runat="server">
<trid="itemTemplate"runat="server">
<td>
<atlas:LabelID="lblAddress"runat="server">
<Bindings>
<atlas:BindingDataPath="Address"Property="text"/>
</Bindings>
</atlas:Label>
</td>
<td>
...
</td>
</tr>
</tbody>
</table>
</LayoutTemplate>
</atlas:ListView>


Please look at my previous post. The sample code disappeared cause the HTML in my message was not encoded. I tried to encode it myself, but it looks like the forum is a bit screwed up.

Anyway, as you can see the table/tbody should be inside the template. Also note which tags need to runat server...