Using ASP.NET AJAX UpdatePanels

If you want only a portion of your web form to update on a post back, you can place the controls to be refreshed inside an UpdatePanel, then specify the user action that refreshes the control within the panel.

1. Drag an UpdatePanel from the Visual Studio ToolBox and drop it on your form.

2. Add controls to the UpdatePanel. For example, if you want to display a list of customer orders in a GridView you can drop the GridView control in the UpdatePanel. Bind the user interface controls to an MM .NET business object.

3. Add a control to the form that will be used to trigger an update to the UpdatePanel. For example, you can drop a ListBox on the form that you bind to a list of Customers.

4. To specify the user action to refresh the UpdatePanel controls, select the UpdatePanel in design mode, then go to the Properties Window. Select the Triggers property, then click its associated ellipses button.

5. In the UpdatePanelTrigger Collection Editor dialog, click the Add button to add a trigger for the UpdatePanel:

   

6. In the right side of the dialog set the ControlID property to the control you want to trigger an update. Then set the EventName property to the control's event you want to trigger an update:

   

7. Click OK to save the new trigger and close the dialog.

8. If you have selected a trigger that does not normally cause a postback (such as SelectedIndexChanged on a ListBox), you need to go to the trigger control and set its AutoPostBack property to true

9. Add an event handler for the control event you have specified to trigger an update to the UpdatePanel. For example:

   protected void lstCustomers_SelectedIndexChanged(object sender, EventArgs e)
   {
   	this.oOrder.GetOrdersByCustomerID(this.lstCustomers.SelectedValue);
   }

   .