httpajax

							     http://ajax.asp.net/docs/tutorials/IntroductionUpdatePanel.aspx

     To use an UpdatePanel control
1.           Create a new page and switch to Design view.


2.           In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add
      it to the page.




3.           Double-click the UpdatePanel control to add it to the page.




4.           Click inside the UpdatePanel control and then in the Standard tab of the toolbox, double-
      click the Label and Button controls to add them to the UpdatePanel control.


      note

      Make sure that you add the Label and Button controls inside the UpdatePanel control.
5.         Set the Text property of the Label to Panel created.




6.         Double-click the Button control to add a handler for the button's Click event.


7.         Add the following code to the Click handler, which sets the value of the label in the panel
     to the current time.


     CS
     protected void Button1_Click(object sender, EventArgs e)
     {
         Label1.Text = "Refreshed at " +
             DateTime.Now.ToString();
     }


     VB
     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
         Label1.Text = "Refreshed at " & _
             DateTime.Now.ToString()
     End Sub

8.         Save your changes and press CTRL+F5 to view the page in a browser.


9.         Click the button.


     Notice that the text in the panel changes to display the last time the panel's content was
     refreshed. This text is set in the button's Click event handler.


     To see the full example in action, click the Run It button. The example is styled to better show
     the region of the page that the UpdatePanel represents.
      Run View

      The panel content changes every time that you click the button, but the whole page is not
      refreshed. By default, the ChildrenAsTriggers property of an UpdatePanel control is true. When
      this property is set to true, controls inside the panel participate in partial-page updates when
      any control in the panel causes a postback.




     Understanding the Benefits of the UpdatePanel Control
     You can understand the benefits of the UpdatePanel control best by adding some controls to the
     page that are not included in the update panel. You can then see how their behavior differs from the
     controls inside the update panel.


     To demonstrate the benefits of using UpdatePanel control
1.           Create a new page and switch to in Design view.


2.           In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add
      it to the page.


3.           Double-click the UpdatePanel control to add it to the page.




4.           Click inside the UpdatePanel control and then in the Standard tab of the toolbox, double-
      click a Calendar control to add it to the UpdatePanel control.


      note

      Make sure that you add the Calendar control inside the UpdatePanel control.
5.         Click outside the UpdatePanel control and then add a second Calendar control to the page.


     This control will not be part of the UpdatePanel control.
6.           Save your changes and then press CTRL+F5 view the page in a browser.


7.           Navigate to the previous or next month in the calendar that is inside the UpdatePanel
      control.


      The displayed month changes without refreshing the whole page.


8.           Navigate to the previous or next month in the calendar that is outside the UpdatePanel
      control


      The whole page is refreshed.


      To see the full example in action, click the Run It button. The example is styled to better show
      the region of the page that the UpdatePanel represents.


      Run View



     Refreshing an UpdatePanel Control with an External Button
     By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-
     page update. By default, a button or other control outside an UpdatePanel control causes the whole
     page to be refreshed, as you have seen.
     You can also configure a control outside the update panel to be a trigger that refreshes just the
     update panel.


     To refresh of an UpdatePanel control with an external button
1.           Create a new page and switch to Design view.


2.           In the AJAX Extensions tab of the toolbox, double-click the ScriptManager and
      UpdatePanel controls to add one of each control to the page.




3.           Click inside the UpdatePanel control, and then in the Standard tab of the toolbox, double-
      click the Label control to add it to the UpdatePanel control.


4.           Set the Text property of the label to Panel created.
5.   Click outside the UpdatePanel control and then add a Button control.




6.   Double-click the Button control to add a handler for the button's Click event.
7.          Add the following code to the Click handler, which sets the value of the label in the panel
     to the current time.


     CS
     protected void Button1_Click(object sender, EventArgs e)
     {
         Label1.Text = "Refreshed at " +
             DateTime.Now.ToString();
     }


     VB
     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
         Label1.Text = "Refreshed at " & _
             DateTime.Now.ToString()
     End Sub

8.          Switch to Design view, select the UpdatePanel, and then view the Properties window.




     note

     If the Properties window is not displayed, press F4.


9.          In the Triggers field, double-click the ellipsis (…) button.
      The UpdatePanelTrigger Collection Editor dialog box is displayed.




10.         Click Add to add a new trigger.


11.         In the ControlID field of the trigger properties, use the drop-down list to select Button1.




      In this example, the EventName property of the trigger was not specified. Therefore, the button's
      default event (the Click event) will trigger the refresh of the UpdatePanel control.


12.         Click OK in collection editor.


13.         Save your changes and then press CTRL+F5 view the page in a browser.


14.         Click the button.


      The text in the panel changes to display the time that the panel's content was refreshed.
15.         Click the button several more times.


      The time changes, but the whole page is not refreshed.


      Clicking the button outside the UpdatePanel refreshes the panel's content because you
      configured the button to be a trigger for the UpdatePanel control. A button that is a trigger
      performs an asynchronous postback when you click it, and causes a refresh of the associated
      update panel. This behavior resembles the behavior of the first example in this tutorial, where
      the button was inside the UpdatePanel.


      To see the full example in action, click the Run It button. The example is styled to better show
      the region of the page the UpdatePanel represents.


      Run View