CODEWITHSUNDEEP
c#asp.netpage-refresh
meJustAndrew
meJustAndrew

Reputation: 6603

UpdatePanel does not prevent button from reload page

I just wanted to short this question's example by making a short prototype to test the UpdatePanel functionality to disable ASP.NET page reload on linkbutton click. I have seen this approach in questions like this. In order to test this I have created a new ASP.NET WebForms application, added an ASP LinkButton, surronded by an UpdatePanel. I have added breakpoints on both OnClick and PageLoad events, in Visual Studio .cs file. This is the code in ASP file:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="LinkButton1" OnClick="OnLinkClick" runat="server">Click me, no reload, I promise!</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>

And the .cs file code:

    protected void Page_Load(object sender, EventArgs e)
    {
        //page reload things...
    }

    protected void OnLinkClick(object sender, EventArgs e)
    {
        //on click thigs...
    }

What happens is that everytime I click on the LinkButton, the first breakpoint is triggered is the PageLoad one and then the OnClick one. I thought that using UpdatePanel will avoid this behavior.

What Am I doing wrong, or why shouldn't I expect the PageLoad not to be invoked? Is this a good way to test if the LinkButton click reloads the page?

Upvotes: 2

Views: 4881

Answers (3)

maozx
maozx

Reputation: 339

I found that when i use LinkButton inside an updatepanel, page is doing postback (page is fully refreshed in the browser) UNLESS i indicate an ID and ClientIDMode="AutoID" on the LinkButton control.

Upvotes: 1

Martin Parenteau
Martin Parenteau

Reputation: 73721

As mentioned by Clint B, the processing of postback events in code-behind is normal. You can test your UpdatePanel with two Labels, one inside and one outside of the UpdatePanel:

<asp:Label ID="lbl1" runat="server" Text="Label 1" BackColor="Aqua" />
<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <asp:Label ID="lbl2" runat="server" Text="Label 2" BackColor="Yellow" />
        <asp:LinkButton ID="LinkButton1" runat="server" Text="Update, no reload!" OnClick="OnLinkClick" />
    </ContentTemplate>
</asp:UpdatePanel>

The event handler of the LinkButton updates both Labels:

protected void OnLinkClick(object sender, EventArgs e)
{
    lbl1.Text = DateTime.Now.ToString();
    lbl2.Text = DateTime.Now.ToString();
}

If the partial refresh works, the changes made to lbl2 are visible in the page, while lbl1 still displays its original text.

Upvotes: 3

Clint B
Clint B

Reputation: 4700

Even though you are doing a partial post back, the framework still executes the page life cycle which includes Page_Load. But you will only be able to effect changes in the browser to the controls that are inside the update panel.

As techspider mentioned, you need to assign a post back trigger. So your example should look like this.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
   <asp:LinkButton ID="LinkButton1" OnClick="OnLinkClick" runat="server">Click me, no reload, I promise!</asp:LinkButton>
</ContentTemplate>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" /> 
</Triggers>
</asp:UpdatePanel>

Upvotes: 1

Related Questions