Asp. NET of Ajax series 2

Source: Internet
Author: User

In the last Ajax operation, we used the ASP. NET native control implementation, but a lot of disadvantages, inefficient, and there is a file upload bug:

So we're looking for a better way to do it, and jquery's AJAX approach works with ASHX general handlers. The benefits of jquery are strong compatibility (behind a team dedicated to development), easy to use (a few minutes to find an API to learn), powerful (the native JS is encapsulated, directly call the method to achieve a lot of functions). ASHX General processing Program is the MS Home, from the name can see it is used to deal with something (forgive me Caishuxueqian), and it does not in the process of the entire page life cycle reconstruction, which avoids the cost of control tree generation. Well, let's talk about how the two can be combined to achieve AJAX, first we create 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 ">
<title>jquery Implementation 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>
<body>
<form id= "Form1" runat= "Server" >
<div>
Nickname: <asp:textbox id= "txtID" runat= "Server" ></asp:textbox><asp:label id= "lblshow" runat= "Server"
Forecolor= "Red" ></asp:label><br/>
</div>
</form>
</body>

In this case, I quoted the latest jQuery-1.11 in the header of the page (well, the JS file name is not good), and then put a text box in the page for the nickname, and at the same time there is a label, to show whether the user name is registered message.

Then we can use the jquery Ajax method, in this case, we need to enter the nickname, the text box loses focus, and then detects whether the nickname exists, so there is $ ("#txtId"). blur method. After losing focus, we need to get the value of the text box and then launch 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 written in full, the first is the way of submission, we use here is the way of post. Then is the URL, which is the path to our ashx file, followed by the parameter, where we passed in the text box to enter the nickname. Finally there is a success, which represents the subsequent operation after the request succeeds, and here we use the result of the processing for the display of 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>
//Handler1 Summary description
//</summary>
public class Handler1:ihttphandler
{

public void ProcessRequest (HttpContext context)
{
Contex T.response.contenttype = "Text/plain";
String Name = context. request.params["M"]. ToString ();
if (userhelper.checkname (Name) = = False)
{
context. Response.Write ("The nickname has been registered!") ");
}
Else &NBSP;
{
context. Response.Write ("Congratulations, this nickname can be used!") ");
}
}

public bool isreusable
{
Get
{
return false;
}
}
}
}
 In this ashx file, we first pass in the name passed in as parameters, to call our previous section of the Userhelper class to detect the existence of the nickname, and then return the value after the different text, for the display, we come together to see the effect: when the loss of focus, the code has entered a breakpoint, This indicates that our AJAX request has been successful! Peas This nickname is present, so we will process in the Userhelper class, and return false, prompting the user that the nickname already exists: Let's take a look at the input one does not exist: The end result is to prompt the user to use. This shows that we have implemented the method of JQUERY+ASHX general handler to implement the Ajax method without page refresh detection user name.   Currently in most enterprise development, this AJAX implementation is more extensive, it is not only easy to operate, but also a lightweight implementation, ASHX can return a JSON string, or return an XML file, extremely flexible, so it is recommended that everyone use this way to implement Ajax. But such Ajax is still not the most primitive implementation, because Ajax is intended to be "asynchronous JavaScript + xml" (Asynchronous JavaScript and XML), Next time we'll explore the last way to implement AJAX functionality with native JavaScript, so stay tuned!   This article from http://www.1314721.com.cn/

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.