Click here to Skip to main content
14,773,089 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I haven't touched ASP in a long time and I'm starting to remember why!

I have an update panel that contains a repeater, the repeater items contain a button and I want that button as an asynchronous post-back trigger for the update panel.

The update panel looks like this:
<asp:UpdatePanel runat="server" Visible="true" ID="pnlSproc" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
        .
        .
        .
            <asp:Repeater runat="server" ID="rptParameters" EnableViewState="true" OnItemCreated="rptParameters_ItemCreated" >
                <ItemTemplate>
                    <tr>
                        .
                        .
                        .
                        <td>
                            <asp:Button runat="server" ID="btnAddParameter" />
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </tr>
    </ContentTemplate>
</asp:UpdatePanel>

The ItemCreated event of the repeater adds the button as an asynchronous trigger ...
protected void rptParameters_ItemCreated(object source, RepeaterItemEventArgs e)
{
    ScriptManager manager = ScriptManager.GetCurrent(this);

    Button button = (Button)e.Item.FindControl("btnAddParameter");

    if (button != null)
    {
        button.Click += AddParameterClick;
        manager.RegisterAsyncPostBackControl(button);
    }
}

When the event fires, all the appropriate events fire as expected but the panel is rendered twice - once in its updated form (higher up the page than it should be) and once in its original form and position.

If I change the RegisterAsyncPostBackControl call to RegisterPostBackControl everything works as I would expect it to but obviously I get a full page postback which I don't want.

Has anyone come across anything similar before? It certainly looks like it's the async postback that's causing the rendering problem (it occurs in both IE and Chrome and my mark-up looks completely valid. I've tried moving the script manager from the page to the master and that has no effect, either.
Posted
v2
Comments
   
Are you updating the Update Panel inside the AddParameterClick Event? Can you show the code of that Event?
PeejayAdams 9-Sep-14 9:50am
   
Hi Tadit,

Yes it's happening in the AddParameterClick

protected void AddParameterClick(object sender, EventArgs e)
{
if (_parameters == null)
_parameters = new List<ProcedureParameter>();

foreach (RepeaterItem item in rptParameters.Items)
{
TextBox name = (TextBox)item.FindControl("tbParameterName");
TextBox value = (TextBox)item.FindControl("tbParameterValue");

_parameters.Add(new ProcedureParameter(name.Text, value.Text));
}

_parameters.Add(new ProcedureParameter());

rptParameters.DataSource = _parameters;
rptParameters.DataBind();
pnlSproc.Update();
}
   
Follow my answer. Let me know if it works or not by adding comments inside the Answer Box itself.

Solution


Why are you dynamically adding the button as a Trigger. You are doing it because you are calling one custom Event that is "AddParameterClick".

Whatever you are doing inside this Event can be done inside the ItemCommand[^] Event itself. And you can declare ItemCommand Event as a Async Trigger.

Through the RepeaterCommandEventArgs Class[^], you can fetch every details about the Row from which you got the Command.

So, summary is...
  1. Declare the ItemCommand as a Trigger like...
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="rptParameters" EventName="ItemCommand" />
    </Triggers>
  2. Declare ItemCommand for the Repeater. Delete ItemCreated, which is not needed any more.
    <asp:Repeater runat="server" ID="rptParameters" EnableViewState="true" OnItemCommand="rptParameters_ItemCommand" >

  3. Inside the ItemCommand, do what you are trying to do inside the AddParameterClick.
Comments
PeejayAdams 9-Sep-14 10:34am
   
Thanks, Tadit. Your solution is certainly tidier than mine but the end result is exactly the same. I still get the updated panel appearing in the wrong place.
   
I am out of office right now. Will try to replicate and fix this tomorrow.
Well, I knew that using tables was a bit naughty (I really didn't want to go down the CSS route for a single page, internal web form) but the update panel gets created as a div and that gets confused with the table and therein lies the problem.

As soon as I changed my table to divs and paragraphs, it all started working.

The moral of the story: a short-cut is rarely a short-cut.
   
Give id and write runat server to your table inside update panel
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900