Simple implementation of AJAX: Implementation of callback in ASP. NET2.0 and solutions to common problems

Sample Code
It was not a long time to get started with asp.net, and I had a strong interest in many of the new technologies. Recently, I encountered a problem that I needed to update data controls without refreshing the data. I first considered using ajax. pro, atlas implementation, but I feel that these two implementations are too heavyweight for their own needs. Besides, we need to reference third-party dll, finally, I chose the callback interface provided by asp.net to implement my own requirements. The following is a description, hoping to provide some help to my friends who are new to asp.net callback.

To implement the data control for refreshing data, you need to take three steps:
1. Callback method triggered by client scripts
2. The server code responds to the callback, updates the data control, and sends the updated data control content (html encoding) back to the client.
3. The client code redraws the Data Control Based on the returned content.

In the sample code, the blank page contains three DropDownListBox controls: DropDownListBox_A, DropDownListBox_ B, and DropDownListBox_C, the ultimate goal is to dynamically update the content of DropDownListBox_ B and DropDownListBox_C without page refreshing.

On the server side, you must first implement the ICallbackEventHandler interface on your page, for example:
Public partial class _ Default: System. Web. UI. Page, ICallbackEventHandler
Then, add the following three methods and a public string on the page to fix the rule:
Private string str_content;
// Receives parameters from the client.
Public void RaiseCallbackEvent (string the_string)
{
Str_content = the_string;
}

// Send the result back to the client
Public string GetCallbackResult ()
{
String [] parts = str_content.Split ('| ');
Return (string) GetType (). GetMethod (parts [0]). Invoke (this, new object [] {parts [1]});
}

// Returns the Html code of the specified control.
Private string RenderControl (Control control)
{
StringWriter writer1 = new StringWriter (CultureInfo. InvariantCulture );
HtmlTextWriter writer2 = new HtmlTextWriter (writer1 );

Control. RenderControl (writer2 );
Writer2.Flush ();
Writer2.Close ();

Return writer1.ToString ();
}

Then declare a method to update the data control, such
Public string BindDropDownList_ B (string str_index)
{
// Simple binding
DropDownList_ B .Items.Clear ();
For (int I = 0; I <20; I ++)
{
ListItem newItem = new ListItem ();
NewItem. Text = string. Format ("{0}-B {1}", str_index, I. ToString ());
DropDownList_ B .Items.Add (newItem );
}

Return RenderControl (DropDownList_ B );
}

Public string BindDropDownList_C (string str_index)
{
DropDownList_C.Items.Clear ();
For (int I = 0; I <30; I ++)
{
ListItem newItem = new ListItem ();
NewItem. Text = string. Format ("{0}-C {1}", str_index, I. ToString ());
DropDownList_C.Items.Add (newItem );
}

Return RenderControl (DropDownList_C );
}

On the client, you need to pack the Html code of the two data controls with <span> </span>. The IDS are span_a and span_ B, respectively, and declare the following script in the header:
<Script language = "javascript" type = "text/javascript">
// DropDownList_A's change
Function OnChanged ()
{
Var context = span_ B;
Var theControl = document. getElementById ("DropDownList_A ");
// Call the server method BindDropDownList_ B and pass the index selected by
Var arg = "BindDropDownList_ B |" + theControl. selectedIndex;

<% = ClientScript. GetCallbackEventReference (this, "arg", "UpdataDropDownList_ B", "context") %>;
}

Function UpdataDropDownList_ B (result, context)
{
// Redraw Control
Context. innerHTML = result;
// Avoid simultaneous update failures
SetTimeout ("elsefunction ()", 1 );
}

Function elsefunction ()
{
Var context = span_c;
Var theControl = document. getElementById ("DropDownList_A ");
Var arg = "BindDropDownList_C |" + theControl. selectedIndex;

<% = ClientScript. GetCallbackEventReference (this, "arg", "UpdateDropDownList_C", "context") %>;
}

Function UpdateDropDownList_C (result, context)
{
Context. innerHTML = result;
}
</Script>

Add the onchange attribute for DropDownList_A in Page_Load.
DropDownList_A.Attributes.Add ("onchange", "OnChanged ()");
Click Run. Check the IE progress bar. Is it possible to implement the linkage of the drop-down list without refreshing :)

It should be noted that, if two Callback Server methods are performed in the OnChanged method of the Javascript script, only the last one will work, and JavaScript will report an error, the reason is that Microsoft's client callback implementation code has a defect: no matter how many calls are called by the client, as long as one callback is completed, all Callbacks are completed, not thread-Safe! So the above Code uses setTimeout to do the transit, for specific reasons, see http://developers.de/files/279/download.aspx.

Although the above Code completes the Data Control update without refreshing, there is still a problem that has not been solved yet, that is, although the control data is updated again, however, the status is still the status of the last PostBack (in this example, it is the initial status). If you get the value of a drop-down box, it is still the initial value, I don't know which of my friends has the solution. Thank you very much!