AJAX Extension controls

For creating ajax application you must place the ScripManger on form by dragging from Tool box.

ToolBox -> AjaxExtensions -> ScriptManager

Creating a Simple Application to know Ajax features....

1) Take UpdatePanel from Toolbox and drop it on the form.
Take one dropdown control and textbox control on to the updatepanel. Make sure that these controls are within the UpdatePanel.

2) Repeat step 1 for another 2 times.

3) Now you have 3 update panels with a dropdown and textbox on each.

4) Set autopostback property of each dropdown to true.

5) Write the following code in dropdown's selected index changed event.

protected void DropDown_1_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox_1.Text = DropDown_1.SelectedValue;
TextBox_2 .Text = DropDown_1.SelectedValue;
TextBox_3.Text = DropDown_1.SelectedValue;
}
protected void DropDown_2_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox_1.Text = DropDown_2.SelectedValue;
TextBox_2.Text = DropDown_2.SelectedValue;
TextBox_3.Text = DropDown_2.SelectedValue;
}
protected void DropDown_3_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox_1.Text = DropDown_3.SelectedValue;
TextBox_2.Text = DropDown_3.SelectedValue;
TextBox_3.Text = DropDown_3.SelectedValue;
}


6) Run the application

Observations:-

* when you are changed the value of the any dropdown, textbox values in other updatepanel's will change along with the text box value in that particular UpdatePanel.


7) Now, go to the design view of the form, see the properties of the first updatepanel. i.e UpdatePanel1.

8) You will find there one property called as ChildrenAsTriggers. Bydefault this is true. This property indicates whether postbacks coming from the UpdatePanel's child controls will cause the update panel to refresh.

set ChildrenAsTriggers Property of UpdatePanel1 is False.

9) Run the application..

Observations:-

* whenever dropdown1 value is changed its corresponding text box value wont be changed but textbox2 and textbox3 values are changed.


10) Now, go to the design view of the form, see the properties of the first updatepanel. i.e UpdatePanel1.

11) You will find there one property called as UpdateMode. Bydefault this is always. Change this to Conditional.

12) Run the application...

Observations:-

* If we change the dropdown2 or dropdown3 value, all textbox values will change except textbox1 value.

13) Now, go to the design view of the form, see the properties of the first updatepanel. i.e UpdatePanel1.

14) You will find there one property called as Triggers. click the button beside this property and give dropdown3 as the trigger.

15) Run the application...

Observations:-

* since we made the update mode of the updatepanel1 as conditional and offered the dropdown3 as a trigger for this, it will get refreshed for only value changing of dropdown3.