How do you use an UpdatePanel properly?

Question

I have an UpdatePanel with some checkboxes in it. I check them, and hit my Save button, but that causes the UpdatePanel to postback (refresh) and sets them all back to blank. The re-drawing method runs before the button code.

What is the correct way to have an UpdatePanel with checkboxes in that you can manipulate?

Solution 1

Example of code:

<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1">
    <ContentTemplate>
        <asp:CheckBox runat="server" ID="myCheckBox" Caption="CheckBox"/>
        <asp:Button runat="server" ID="saveButton" 
                   Caption="Save" OnClick="SaveButtonClick"/>
    </ContentTemplate>    
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />        
    </Triggers>
</asp:UpdatePanel>

Make sure that:

1. UpdateMode of UpdatePanel is Conditional
2. SaveButton contained in Triggers-section as ControlID of AsyncPostBackTrigger

Solution 2

Your code behind should look like:

if(!page.ispostback)
{
   re-drawing();
}

As when you hit Save button your re-drawing() method is called and it again refreshes your checkboxes. Asynchronous postback behaves and hit to page method the same as full postback, but refreshes the values in any updatepanels.

Also check this URL http://ajax.net-tutorials.com/controls/updatepanel-control/

Solution 3

Make sure the Save button is inside the Update Panel, for a start, and if not, that is designated as a Trigger for the Update Panel, in the <Triggers> section of the Update Panel.

<asp:UpdatePanel ID="MyControlPanel" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="SaveButton" />
    </Triggers>
    <ContentTemplate> ...

Can you show some code for your UpdatePanel?

Comments

[NibblyPig]

That makes sense, but it seems to clear the panel automatically. If I put "if (condition) return;" as the first line of my update panels onload method, it ends up wiping it.

[NibblyPig]

I think the conditional thing may be causing it. I reckon I can solve it now, thanks.

[NibblyPig]

Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

[AndreyAkinshin]

Hmm ... This is very strange. Can you write description of your ScriptManager?

[NibblyPig]

My page was such a mess from trying to debug it that I started over, I'll post again if I have any problems. Thanks for your help.