Asp.Net page with Ajax reload the whole page everytime, why?

Question

Here is a snippet that doesn't work:

<form id="form1" runat="server">

    <div>
        This is the time :
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional" ChildrenAsTriggers="false">

            <ContentTemplate>
                <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
           </ContentTemplate>

           <Triggers>
                <asp:AsyncPostBackTrigger  ControlID="btnRefresh"/>
           </Triggers>

        </asp:UpdatePanel>

        <br />
        <asp:Button ID="btnRefresh" runat="server" text="Refresh" OnClick="btnRefresh_Click"/>
    </div>

</form>

In the code behind:

 protected void Page_Load(object sender, EventArgs e)
  {

     Clock c = new Clock();
     string display = c.GetCurrentTime().ToLongTimeString();
     this.Title = display;
     this.txtDate.Text = display;

  }

  protected void btnRefresh_Click(object sender, EventArgs e)
  {
     Clock c = new Clock();
     string display = c.GetCurrentTime().ToLongTimeString();
     this.txtDate.Text = display;
  }

Why does the page reload and not just the UpdatePanel?

Answer 1

Hi,
Try setting the ChildrenAsTriggers to True.

Answer 2

I removed "ChildrenAsTriggers" and also set the "EventName" for the trigger.

You may also need to call: UpdatePanel1.Update() inside your click function since your UpdatePanel is set as 'Conditional'.

<form id="form1" runat="server">

    <div>
        This is the time :
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">

            <ContentTemplate>
                <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
           </ContentTemplate>

           <Triggers>
                <asp:AsyncPostBackTrigger  ControlID="btnRefresh" EventName="Click" />
           </Triggers>

        </asp:UpdatePanel>

        <br />
        <asp:Button ID="btnRefresh" runat="server" text="Refresh" OnClick="btnRefresh_Click"/>
    </div>

</form>

Also, I would ensure you are using IsPostBack in your page load, which is still fired even on asynchronous postback.

 protected void Page_Load(object sender, EventArgs e)
  {
     if (!IsPostBack) {
       Clock c = new Clock();
       string display = c.GetCurrentTime().ToLongTimeString();
       this.Title = display;
       this.txtDate.Text = display;
     }

  }

  protected void btnRefresh_Click(object sender, EventArgs e)
  {
     Clock c = new Clock();
     string display = c.GetCurrentTime().ToLongTimeString();
     this.txtDate.Text = display;
  }

Answer 3

Hi Doak,

I re-tested your code and everything is working as expected.

When you hit the Refresh button, it updates the time in the Textbox within the update panel, at the same time it also updates the time in Windows Title bar.

The Refresh button does not update the any control outside of Update panel

Please see the working code

ASPX Code

(Note: I have added a new label called "lbltemp" outside of Update Panel)

<form id="form1" runat="server">

<div>
    This is the time :
    <asp:Label  runat="server" id="lbltemp"></asp:Label>
    <br />
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional" ChildrenAsTriggers="false">

        <ContentTemplate>
            <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
       </ContentTemplate>

       <Triggers>
            <asp:AsyncPostBackTrigger  ControlID="btnRefresh"/>
       </Triggers>

    </asp:UpdatePanel>

    <br />
    <asp:Button ID="btnRefresh" runat="server" text="Refresh" OnClick="btnRefresh_Click"/>
</div>

Code Behind

protected void Page_Load(object sender, EventArgs e)
{

    string display = DateTime.Now.ToString();
    this.Title = display;
    this.txtDate.Text = display;
    this.lbltemp.Text = display;

}

protected void btnRefresh_Click(object sender, EventArgs e)
{
    string display = DateTime.Now.ToString();
    this.txtDate.Text = display;
}

Answer 4

Alright I figure it out because everybody was successful but not me so I guess that was a configuration somewhere.

In fact, you need to have some tag in the web.config to be able to used the Ajax Framework and I was missing some here is now my web.config :

<?xml version="1.0"?>
<configuration>

 <configSections>
   <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
  <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
    <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
    <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
   <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" />
   <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
   <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
    </sectionGroup>
  </sectionGroup>
   </sectionGroup>
 </configSections>

 <appSettings/>
 <connectionStrings/>

 <system.web>

   <pages>
  <controls>
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
  </controls>
   </pages>

  <!-- 
   Set compilation debug="true" to insert debugging 
   symbols into the compiled page. Because this 
   affects performance, set this value to true only 
   during development.
  -->
  <compilation debug="true">
    <assemblies>
      <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies>
  </compilation>
  <!--
   The <authentication> section enables configuration 
   of the security authentication mode used by 
   ASP.NET to identify an incoming user. 
  -->
  <authentication mode="Windows"/>
  <!--
   The <customErrors> section enables configuration 
   of what to do if/when an unhandled error occurs 
   during the execution of a request. Specifically, 
   it enables developers to configure html error pages 
   to be displayed in place of a error stack trace.

  <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
   <error statusCode="403" redirect="NoAccess.htm" />
   <error statusCode="404" redirect="FileNotFound.htm" />
  </customErrors>
  -->

   <httpHandlers>
  <remove verb="*" path="*.asmx"/>
  <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
  <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
  <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
   </httpHandlers>

   <httpModules>
  <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
   </httpModules>
 </system.web>

   <system.web.extensions>
  <scripting>
    <webServices>

    </webServices>

  </scripting>
   </system.web.extensions>

   <system.webServer>
  <validation validateIntegratedModeConfiguration="false"/>
  <modules>
    <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
  </modules>
  <handlers>
    <remove name="WebServiceHandlerFactory-Integrated" />
    <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
      type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode"
      type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  </handlers>
   </system.webServer>



</configuration>

I will give +1 to everybody who give me enough hint. Thank you everybody