Update Panel 사용하기 (Ajax 자동 으로 만들기)

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.

10. 출처 : http://asp.net/AJAX/Documentation/Live/tutorials/IntroductionUpdatePanel.aspx