Ajax series of ASP. NET (II) and asp. netajax Series

Source: Internet
Author: User

Ajax series of ASP. NET (II) and asp. netajax Series

In the last Ajax operation, we used the ASP. NET native control, but it has many drawbacks and is inefficient. In addition, there is a file upload BUG: http://blog.csdn.net/zhaoqiliang527/article/details/4457961.

So we seek a better implementation method. jQuery's Ajax method works with the general ashx processing program. The advantage of jQuery is its strong compatibility (there is a team dedicated to development behind it). It is easy to use (I learned how to find an API in just a few minutes) and has powerful functions (encapsulated native js, you can call a method to implement many functions ). Generally, the Ashx processing program is MS's own. It can be seen from its name that it is used to handle something (forgive me for being easy to learn ), in addition, it does not reconstruct the lifecycle of the entire page during execution, which avoids the overhead problem caused by Control tree generation. Now let's talk about how the two can be combined to implement ajax. First, we should build a page:

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "ashxAjax. aspx. cs" Inherits = "WebApplication1.ashxAjax" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <title> jQuery Ajax </title> <script type =" text/javascript "src =" JavaScript/jquery-11.js "> </script> <script type = "text/javascript"> $ (function () {$ ("# txtId "). blur (function () {var a =$ ("# txtId "). val (); $. ajax ({type: "post", url: "Handler1.ashx", data: {m: a}, success: function (result) {var res = result. toString (); $ ("# lblShow" ).html (res );}});});}); </script> 

Here I reference the latest jQuery-1.11 in the header of the page (well, the js file name is not good), then put a text box on the page to enter the nickname, and there is a Label at the end, displays whether the user name is registered.

Next, we can use the ajax method of jQuery. In this example, we need to enter a nickname, and the text box will lose the focus, and then check whether the nickname exists, so we have $ ("# txtId "). blur method. After the focus is lost, we need to get the value of the text box and then initiate an ajax request to the ashx file: $. ajax ({type: "post", url: "Handler1.ashx", data: {m: a}, success: function (result) {var res = result. toString (); $ ("# lblShow" ).html (res );}});

Note that these parameters must be fully written. The first is the submission method. Here we use the post method. Then the URL is the path of our ashx file, followed by the parameter. Here we enter the nickname entered in the text box. There is a success, which indicates subsequent operations after the request is successful. Here we use the processing result to display the Label text.

After writing js on the front end, let's take a look at the code in our ashx file:

Using System; using System. collections. generic; using System. linq; using System. web; namespace WebApplication1 {/// <summary> // summary of Handler1 /// </summary> public class Handler1: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string Name = context. request. params ["m"]. toString (); if (userHelper. checkName (Name) = false) {context. respon Se. Write ("this nickname has been registered! ");} Else {context. Response. Write (" congratulations, this nickname can be used! ") ;}} Public bool IsReusable {get {return false ;}}}}

In this ashx file, we first use the passed name as the parameter to call our userHelper class in the previous section to check whether the nickname exists, and then return different texts after the returned value, for display, let's take a look at the effect:

After the focus point is lost, the Code enters the breakpoint, which indicates that our ajax request has been successful!

As shown in the database: the nickname bean exists, so we will process it in the userHelper class, and return false, prompting the user that the nickname already exists:

Let's take a look at the input that does not exist: the final result is that the user can use it.

This shows that we have implemented the jQuery + ashx General handler method to implement the ajax method without page refresh detection username.

Currently, this ajax implementation method is widely used in most enterprise development. It is not only easy to operate, but also lightweight. ashx can return json strings or xml files, it is extremely flexible, so we recommend that you use this method to implement ajax. However, such ajax is still not the original implementation method, because ajax is intended to be "Asynchronous Javascript + XML" (Asynchronous JavaScript and XML ), next time, let's explore the last method to implement ajax functions using native javascript, so stay tuned!


How does AspNET use AJAX?

If you have. if you are interested in NET Ajax, you are advised to go to Microsoft webcast to check that there should be a lot of teaching videos. I think "ASP. net ajax in-depth introduction to the series (32 lectures) "is very suitable for you (you can solve your problem after hearing the first two lectures ).

If you think it is troublesome to download a webcase video, there is a software called IReaper that specifically downloads the webcase video. First download the software and then use it to download video tutorials. I believe your problem can be solved by yourself soon.

How does ASPNET 20 AJAX work in the original project?

Haha, you can create an AJAX site and compare it with the ASP site. In the web. config configuration, it is quite different ~ -~
Then, copy the configurations and referenced namespaces to the same one, the key is to add the file you want to use to the bin folder as a reference (then reference the relevant class through the namespace );

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.