Solved

AJAX UpdatePanel still posts back entire page!

Posted on 2008-10-23
8
1,062 Views
Last Modified: 2010-04-21
I am trying an AJAX example that I got online and everytime i click the button, it is suppose to only update the one label, but instead it does a postback of the entire page (i can see the page flicker as it reloads) and it changes the value of both labels. Can anyone tell me how to get only the label in the updatepanel to update instead of the entire page posting back? I am running Visual Studio 2008 which does have the AJAX controls installed on a Vista machine.

Here is my codebehind file
Partial Class _Default
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        lblFirstLoad.Text = DateTime.Now.ToString()
    End Sub


    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        lblLastUpdated.Text = DateTime.Now.ToString()

    End Sub
End Class

AND BELOW IS MY PAGE DEFAULT.aspx
<%@ Page Language="VB" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI" TagPrefix="asp" %>
 

<!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>

        <asp:Label ID="lblNewTickets" runat="server" Text="New Tickets"></asp:Label>

        <asp:Label ID="lblFirstLoad" runat="server" Text="Label"></asp:Label>

        

        

        <asp:ScriptManager ID="smNewTickets" runat="server">

        </asp:ScriptManager>

        

        <asp:UpdatePanel ID="upNewTickets" runat="server">

           <ContentTemplate>
 

               <asp:Label ID="lblLastUpdated" runat="server"></asp:Label>

               <asp:Button ID="Button1" runat="server" Text="Get Tickets" OnClick="Button1_Click" />
 

           </ContentTemplate>
 

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

            </Triggers>
 

        </asp:UpdatePanel>

        

      

        

    </div>
 

    </form>

</body>

</html>

Open in new window

0
Comment
Question by:twcadmin
  • 5
  • 3
8 Comments
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22788072
Page_Load is run at each pust back,  Async or not
this should help

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

      If Not (Page.IsPostBack) Then

        lblFirstLoad.Text = DateTime.Now.ToString()

      end if

    End Sub

Open in new window

0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22788118

It will change nothing, but it s how i define a UpdatePanel.
UpdateMode="Conditional" is important if you want to set triggers and i usualy dont set event for a button trigger.
but i m pretty sure the problem was the page_load
 

<asp:UpdatePanel ID="upNewTickets" runat="server"

          UpdateMode="Conditional" ChildrenAsTriggers="False" >

           <ContentTemplate>

 

               <asp:Label ID="lblLastUpdated" runat="server"></asp:Label>

               <asp:Button ID="Button1" runat="server" Text="Get Tickets" OnClick="Button1_Click" />

 

           </ContentTemplate>

 

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="Button1" />

            </Triggers>

 

        </asp:UpdatePanel>

Open in new window

0
 
LVL 5

Author Comment

by:twcadmin
ID: 22788434
But the entire page still posts back! whats the point of an updatepanel then?


I am trying to get  one section of data to update without the whole page flickering. This makes no sense!
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22788507
No, the whole page is not posting back.
The problem is the page is loading at each post back, that s why you should add a "If Not (Page.IsPostBack) Then" in the page load event.
In your case, the  "lblFirstLoad.Text = DateTime.Now.ToString()" line that trigger a full post back after the async post back.


0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 18

Expert Comment

by:David Robitaille
ID: 22789164
So, did that work?
0
 
LVL 5

Author Comment

by:twcadmin
ID: 22789214
so then how do i get only the one section to update instead of having the whole page load again? I want to eliminate the flicker of the page loading again like i see with so many other ajax enabled sites.

Otherwise, I could just take out the updatepanel completely and use the if not postback becuase the updatepanel would be useless
0
 
LVL 18

Accepted Solution

by:
David Robitaille earned 500 total points
ID: 22789256
Has i said: ADD the " If Not (Page.IsPostBack) Then" in your page load.
Just test it, you will see that work, you wont get any flicker.
i will send you some justification link later.
 

 

      If Not (Page.IsPostBack) Then

        lblFirstLoad.Text = DateTime.Now.ToString()

      end if

Open in new window

0
 
LVL 5

Author Closing Comment

by:twcadmin
ID: 31509178
Thank you very much! When you first said to use if not ispostback i tried it and for some reason it was still flickering and loading the entire page. Now it works. Thanks again!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now