Monday, April 11, 2011

AJAX

Ajax the acronym stands for Asynchronous JavaScript and XML. Here's a curveball: Ajax doesn't
have to use XML, and neither does it have to be asynchronous. Ajax applications can use XML,
and they can be updated asynchronously. These are quite common tricks and techniques used
to update the page, but they are not tied to these technologies.

Partial Post back
we send specified information to server and according to this information we get response.
for example:
we have country and states drop down list. if we select country then states dropdown list will
be filled according the country.
This is done by JavaScript but we do not know JavaScript. In .Net we have Ajax controls. when
their event fire then these control's value sent to the server and fetched data manipulated.
we need to code in Jscript. these control generate Jscript code and assigned to the browser.
To Implement Ajax:
First add Script Manager control.
->to do partial post back here is control Update Panel.
->Now add control to page in the Update Panel
A Small Example of this:
* Add Scrip Manager and UpdatePanel Control to your page
* Add a label and button in UpdatePanel
* Add a label and button on Page outside of Update Panel

protected void btnUpdatePanelButton_Click(object sender, EventArgs e)
    {
        lblUpdatePanelLabel.Text = DateTime.Now.ToString();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        lblWebFormButton.Text = DateTime.Now.ToString();
     
    }
when you click on btnWebFormButton then it will post back and then display date etc., but 
when you click on btnUpdatePanelButton then page will not past back; only these controls
information will be send to the server for the changes.
run it and look and check the difference..
one more thing..
put these buttons code at form Load event.. and check the behavior of these controls.
Script Manager generates the JavaScript events etc. for the controls which are in update panel.
Synchronous Post Back
by default  case post back is synchronous post back.
Asynchronous Post Back 
if your control is of the Update Panel and want to implement Ajax on this control's particular
event, it is done by Asynchronous Post Back.
To do this open properties of Update Panel and there is property named Triggers.
* Here you can specify particular control name and event of the control on which asynchronous
   post back take place.

protected void btnUpdatePanelButton_Click(object sender, EventArgs e)
    {
        lblUpdatePanelLabel.Text = DateTime.Now.ToString();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        //lblWebFormButton.Text = DateTime.Now.ToString();
        lblUpdatePanelLabel.Text = "Asynchronous PostBack";
    }
Things to remember:
* control's whose information to fetch partially must be in UpdatePanel
* Event of Control's that fire could be inside the UpdatePanel or outside the Update Panel.
* If Control is out of the UpdatePanel and implementing Ajax for control outside the Update Panel
Called Asynchronous Partial Post Back.

No comments :

Post a Comment