When developing ASP. NET, we need to use more and more Ajax technologies to enrich the user interaction interface and continuously improve the user experience.
The first method is to manually write Javascript code for implementation. I have introduced this method in the previous article "create a simple javascript ajax object with me. The specific implementation will not be described here. One of the major advantages of using this method is that it is flexible and easy for us to grasp the entire asynchronous communication process. However, developers are required to have a good Javascript Foundation, another point is to create and compile a new Handler. the ashx file or An ASPX file.
Microsoft has always liked to lower the development entry threshold. NET2.0 and later released their ASP. net ajax framework, which allows us to easily drag and drop some controls just like developing webform to implement AJAX. The following is an example. The ASPX page code is as follows:
View Code
<Form id = "form1" runat = "server"> <div> <asp: ScriptManager ID = "ScriptManager1" runat = "server"> </asp: scriptManager> <p> <asp: Label ID = "lblNonAjax" runat = "server" Text = "No Ajax"> </asp: label> </p> Although we have not made any changes to the ScriptManager control and the control does not display any information, to use the ajax framework, we must drag and drop the control to other ajax controls. Then we used the UpdatePanel control, which is indeed very exciting. You can specify the events that require partial refresh and full page refresh in the control. asynchronous partial refresh is used by default. If you want to implement full-page refresh and submission without ajax controls, you only need to specify <asp: PostBackTrigger ControlID = "btnNonAjax"/> In the <Triggers> label, controlID is a control that does not need to be submitted asynchronously. After this control is specified, all events of the control are submitted on the whole page.
The cs code is as follows:
View Code
Public partial class _ Default: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (IsPostBack) {// because the following controls are not in Update, you cannot Update lblNonAjax When Triggering an Ajax event. text = "a send-back event is triggered! ";}} Protected void btnAjax_Click (object sender, EventArgs e) {this. lblText. text = "this is an Ajax event trigger"; // Response. write ("<script> alert ('this is an Ajax event trigger ') </script>"); // triggers an AJAX event, you cannot use this method or other methods to output data to pages. Unless the following method is used to trigger events of controls in UpdatePanel, the output script must use the following method: ScriptManager. registerStartupScript (this. updatePanel1, this. getType (), "ajaxScript", "alert ('this is an Ajax event trigger ');", true);} protected void btnNonAjax_Click (object sender, EventArgs e) {this. lblText. text = "this is the trigger of a page refresh event"; Response. write ("<script> alert ('this is the trigger of a page refresh event. ') </script> ");}}
The second Ajax technology is highly efficient in development and can be implemented without any Javascript infrastructure. But the bad thing is that the amount of HTML code generated is large, and we are not good at understanding the implementation of the details, and the flexibility is not high. some inexplicable errors may occur during the release.
Finally, let's look at the callback technology to implement Ajax. Paste the code first. The ASPX page code is as follows:
View Code
<Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <title> No title page </title> <script type =" text/javascript "> function setCallback (value, dom) {dom. style. color = "red"; dom. innerHTML = "requesting ........... "; var aa =" 123 "; <% = ClientScript. getCallbackEventReference (this, "aa", "successCallback", "dom") % >} function successCallback (result, dom) {dom. style. color = "red"; dom. innerHTML = result ;} </script> The cs code is
View Code
Public partial class CallbackDemo: System. web. UI. page, ICallbackEventHandler {private string callbackResult = string. empty; protected void Page_Load (object sender, EventArgs e) {}# region ICallbackEventHandler member public string GetCallbackResult () {return this. callbackResult;} public void RaiseCallbackEvent (string eventArgument) {this. callbackResult = "The Callback Value Is \" "+ eventArgument +" \ "" ;}# endregion}
The key code in the script is <% = ClientScript. getCallbackEventReference (this, "aa", "successCallback", "dom") %>, ClientScript. the GetCallbackEventReference method has three reloads. The overload I use is interpreted
View Code
// Abstract: // obtain a reference to the client function. When this function is called, a client callback for server-side events is started. The client function of this overload method contains the specified controls, parameters, client scripts, and context. //// Parameter: // argument: // a System. Web. UI. ICallbackEventHandler. RaiseCallbackEvent (System. String) method is passed from the client script to the server. /// Context: // The client script calculated on the client before the callback is started. The result of the script is returned to the client event handler. //// Control: // The System. Web. UI. Control Server that processes the client callback. This control must implement the System. Web. UI. ICallbackEventHandler // interface and provide the System. Web. UI. ICallbackEventHandler. RaiseCallbackEvent (System. String) // method. //// ClientCallback: // The name of a client event handler. the handler receives the result of a successful server event. //// Return result: // name of the client function that calls the client callback. //// Exception: // System. ArgumentNullException: // The specified System. Web. UI. Control is null. /// System. InvalidOperationException: // The specified System. Web. UI. Control does not implement the System. Web. UI. ICallbackEventHandler interface.
This method has a small amount of code, but has limited functions. It requires developers to have a Javascript base.
The above is the implementation of three main ajax technologies in ASP. NET.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
