Handling repeater events aynchronously

Question

I have a custom search control on my page (asp.net) which contains a textbox and a repeater for displaying results.

The repeater is populated with a callback as the user types ... nice and simple callback.

...

When a search result is selected the repeater fires off a postback and the itemcommand event is raised (as expected) ... and this event adds a child repeater to itself and binds a child list to the current item.

My problem is that I don't want my parent repeater to fire off a full postback because the page is quite time consuming to render. I tried putting the control / just the outer repeater in to an ajax update panel control but it appears to still fire a ful postback.

Can anyone shed any light on how I might tell a repeater to fire its item command event in a callback instead of a postback?

I'm guessing this involves a load of manual wiring for my repeater item controls but i'm hoping theres a control somewhere that handles all that for me :)

EDIT : Sample of my situation ....

<asp:UpdatePanel ... >
  <asp:Repeater ...>
    <itemTemplate> <asp:LinkButton ... CommandArg='<%= Eval("ID") %>' CommandName="select" /> </itemTemplate>
  </asp:Repeater>
</asp:UpdatePanel>

So my question is ...

How do i tell the repeater "fire this link buttons onclick as a callback instead of a postback"

the process of wrapping up the repeater in an update panel doesn't help because the ID of the link button is dynamic and therefore I cannot (not inline anyway) add a trigger for the link button.

If i manually add a trigger to the panel in the repeaters onitembound event i get an exception from .Net sayingt he callback reference is invalid ... i guess this is because im trying to attach a callback trigger to a control that is already handling a postback event or something setup by the repeater ...

EDIT 2 : Sample of the scenario faced here

essentially because this control X number of times on the page virtually everything has to be dynamic. The control implements ICallbackHandler and the search bx code (not included below) fires off an ajax call onkeyup when the user types in company names (so it works a bit like google).

I was hoping that when a user clicked on a company name from the list it would ajax call back / partial postback to recover the sub list of branches thus preventing the full page flicker you get with a full postback.

Then a user would select a branch and it would do a full postback which would result in several server actions taking place.

This works fine as is ... its just not the cleanest user experience.

<div id='<%= this.UniqueID + "Results" %>' class="results">
    <asp:Repeater ID="ui_lstCompanies" runat="server" onitemcommand="ui_lstCompanies_ItemCommand">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <asp:Panel ID="item" runat="server">
            <li>
                <asp:LinkButton ID="ui_btnSelectCompany" runat="server" CommandName="Select" Text='<%# Eval("Name") %>' />
            </li>
            </asp:Panel>
            <asp:Panel ID="selectedItem" runat="server" Visible="false">
            <li>
                <hr /><h4><%# Eval("Name") %></h4> 
                <asp:Repeater ID="ui_lstBranches" runat="server" onitemcommand="ui_lstBranches_ItemCommand" >
                    <HeaderTemplate>
                        <table style="border-collapse:collapse;">
                            <tr><th>&nbsp;</th><th>Branch Name</th><th>Branch Address</th><th>Tel</th><th>Fax</th><th>Email</th></tr>
                    </HeaderTemplate>
                    <ItemTemplate>   
                            <tr>
                                <td>&nbsp;&nbsp;&nbsp;</td>
                                <td><asp:LinkButton ID="ui_btnSelectBranch1" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Name") %>' /></td>
                                <td><asp:LinkButton ID="ui_btnSelectBranch2" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Address") %>' /></td></td>
                                <td><asp:LinkButton ID="ui_btnSelectBranch3" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Telephone1") %>' /></td></td>
                                <td><asp:LinkButton ID="ui_btnSelectBranch4" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Fax") %>' /></td></td>
                                <td><asp:LinkButton ID="ui_btnSelectBranch5" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="Select" Text='<%# Eval("Email") %>' /></td></td>
                             </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
                <hr />
            </li>
            </asp:Panel>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
</div>

Have you tried setting your parent repeater control to an asyncpostback trigger for the update panel on your child control? — TBohnen.jnr, Apr 11 '11 at 12:14
I think the problem is because of the way repeater item templates work ... i need to make that perform a callback not a postback. — War, Apr 11 '11 at 13:12

score 2 · Answer 1 · answered Jan 23 '12 at 13:46

I had a similar problem as you did. If you replace the linkbuttons with regular asp:button and continue to use the repeater's itemcommand event as you were, it will work. Why? I don't know. However, it works. It may not look good with your design, but it triggers the asynch postback that you desired.

TBohnen.jnr · Accepted Answer · 2011-04-13T11:17:06.873

 <asp:Repeater runat="server" ID="rpt1">
    </asp:Repeater>


<asp:UpdatePanel runat="server" ID="up1">
<Triggers>
<asp:AsyncPostBackTrigger  ControlID="rpt1"/>
</Triggers>
<ContentTemplate>
     <asp:Repeater runat="server" ID="rpt2">
    </asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>

This should then perform an async call to all commands from rpt1. Just Replace these repeater control's with yours

EDIT:

I've basically created a mockup of your code with different fields etc. I assume the code below is what you tried and it was not working? If so then I've got no idea why it's not working on your side as it is on myne, there must be some slight difference somewhere that we're not picking up.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
    <ContentTemplate>
        <div id='<%= this.UniqueID + "Results" %>' class="results">
            <asp:Repeater ID="ui_lstCompanies" runat="server" OnItemCommand="ui_lstCompanies_ItemCommand">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Panel ID="item" runat="server">
                        <li>
                            <asp:LinkButton ID="ui_btnSelectCompany" runat="server" CommandName="Select" Text='<%# Eval("Name") %>' />
                        </li>
                    </asp:Panel>
                    <asp:Panel ID="selectedItem" runat="server" Visible="false">
                        <li>
                            <hr />
                            <h4>
                                <%# Eval("Name") %></h4>
                            <asp:Repeater ID="ui_lstBranches" runat="server" OnItemCommand="ui_lstBranches_ItemCommand">
                                <HeaderTemplate>
                                    <table style="border-collapse: collapse;">
                                        <tr>
                                            <th>
                                                &nbsp;
                                            </th>
                                            <th>
                                                Branch Name
                                            </th>
                                            <th>
                                                Branch Address
                                            </th>
                                            <th>
                                                Tel
                                            </th>
                                            <th>
                                                Fax
                                            </th>
                                            <th>
                                                Email
                                            </th>
                                        </tr>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td>
                                            &nbsp;&nbsp;&nbsp;
                                        </td>
                                        <td>
                                            <asp:LinkButton ID="ui_btnSelectBranch1" runat="server" CommandArgument='<%# Eval("ID") %>'
                                                CommandName="Select" Text='<%# Eval("Name") %>' />
                                        </td>
                                        <td>
                                            <asp:LinkButton ID="ui_btnSelectBranch2" runat="server" CommandArgument='<%# Eval("ID") %>'
                                                CommandName="Select" Text='<%# Eval("Address") %>' />
                                        </td>
                                        </td>
                                        <td>
                                            <asp:LinkButton ID="ui_btnSelectBranch3" runat="server" CommandArgument='<%# Eval("ID") %>'
                                                CommandName="Select" Text='<%# Eval("Telephone1") %>' />
                                        </td>
                                        </td>
                                        <td>
                                            <asp:LinkButton ID="ui_btnSelectBranch4" runat="server" CommandArgument='<%# Eval("ID") %>'
                                                CommandName="Select" Text='<%# Eval("Fax") %>' />
                                        </td>
                                        </td>
                                        <td>
                                            <asp:LinkButton ID="ui_btnSelectBranch5" runat="server" CommandArgument='<%# Eval("ID") %>'
                                                CommandName="Select" Text='<%# Eval("Email") %>' />
                                        </td>
                                        </td>
                                    </tr>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </table>
                                </FooterTemplate>
                            </asp:Repeater>
                            <hr />
                        </li>
                    </asp:Panel>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
</ContentTemplate>
</asp:UpdatePanel>

its the outer repeater postbacks i want to handle not the inner ones. Inner repeater can postback as normal. — War, Apr 11 '11 at 13:10
also it might be worth noting that the 2nd repeater is in a panel which shows up only on selection of the item. Trying the above approach doesn't seem to work. either as the repeater renders the item template controls with stuff like onclick="__doPostback(...)" and wrapping it in an update panel like this appears to not help. — War, Apr 12 '11 at 07:38
In the end i couldn't be bothered with it so i decided to put up with the delay and have the page render "loading" while it does its thing ... not ideal but solves the problem for now. Thx for the help though. — War, Apr 12 '11 at 07:40
@Wardy sorry I couldn't help more, This is a wild guess but are you setting the visibility of the panel/and or 2nd repeater in your code behind? Do a test run and see if it works. Otherwise if you can post your code behind I could have a look at that as well — TBohnen.jnr, Apr 12 '11 at 10:48
I think its just an odditity in the way the repeater works. Essentially I would guess that ITemplate controls are harder to get a handle on :) — War, Apr 13 '11 at 09:41
I've added my ascx code for the repeaters, i was hoping to just pop the entire contents of the very first div in an updatepanel and let that do the work ... apparently its not possible though ... unless i mised something obvious. Would you like the code behind too ? (don't wanna bog this down too much its a pretty powerful control) — War, Apr 13 '11 at 09:54
It seems like a pretty good starting point ... pretty much what i had before i started hitting problems in my postbacks ... as soon as i replaced the repeaters with datalists / gridviews though it all sprang to life ... not sure why ... i like the repeater but it doesn't seem to like jquery so i figure its just a fact im gonna have to live with. Really .. thanks though :) you've been a great help :) — War, Jul 08 '11 at 11:17

Handling repeater events aynchronously

2 Answers2