Using AJAX

After introducing AJAX as we see a face to make sense the potential of this innovative technology. We will create a simple application with a page of content that will put an UpdatePanel. Apagina then inserted in the two labels that show the date and time the page is loaded, but we will put a label inside the 'UpdatePanel and one outside to see how the partial update of the page.

So we create a new website and add a ScriptManager control to the Default.aspx form (located in the AJAX Extensions tab of the Toolbox), which is necessary for the management of the AJAX controls placed on the form. Conventionally this control is placed outside of the DIV tag that Visual Studio creates automatically. After the inclusion of this control in our page we have a situation like this

Now insert a label in our form and denominiamola LabelDataOraLoad. Insert a button

Open the file and modify the ebento Default.aspx.cs Page_Load so that the label displays the current date and time

 protected void Page_Load (object sender, EventArgs e)







 {



  



 this.LabelDataOraLoad.Text = DateTime.Now.ToString ();







 }

We start the application and generate a few posts back, clicking on the button several times. What we observe is that the values ​​change with each press of the button.

At this point, add an UpdatePanel control to the page and we put a second label called LabelDataOraUpdate within this control

For this label we modify the Page_Load event so that it displays the current date and time

 protected void Page_Load (object sender, EventArgs e)







 {



  



 this.LabelDataOraLoad.Text = DateTime.Now.ToString ();



  



 this.LabelDataOraUpdate.Text = DateTime.Now.ToString ();







 }

We start the application and generate a few posts back as before. We see that the labels behave in the same manner, updated with each click

This is because although the second label is inside dell'UpdatePanel the action that caused the postback takes place outside of this control. Now move the Button in dell'UpdatePanel eliminate. If we look we see the default.aspx file that is placed inside the tags button on the panel

If we start at this point we see that the application by clicking on the Button label only contained nell'UpdatePanel is updated while the other is set to the value on the first page load

This is the process called partial update of the only art of paginaperchè page is updated in response to a particular action (the click of a Button).

This is clearly just a small example that shows the potential of AJAX, and I invite you to deepen through the official documentation of the interesting features of other Microsoft controls such as Timer, UpdateProgress AutoCompleteExtender, etc..

• <<Previous Lesson
• Help Index
• Next Lesson>>