10 minutes to learn the example of jquery based on ASP (GO)

This article describes how to use JQuery-based AJAX Technology in ASP . Asp.net/ajax. (source code download see final)

Before using JQuery , go to www.jquery.com to download the latest version of JS Code and then use it in your code.

<script src= "_scripts/jquery-1.2.6.js" type= "Text/javascript" ></script> ,
Of course, since Microsoft has integrated JQuery into VS , you can go to WWW. Asp.net/ajax View

This article will show you how to use JQuery in ASP. six, and the others are easy to learn. the project layout is as follows

Sample1:JQuery supports Get -based AJAX

This example shows how to use the jquery-based get method in ASP. The page layout code is as follows:

The page layout is simple, a text box is used to enter the number of votes, and a div with ID Error1 is used to display the results of the Ajax operation.
Here's the AJAX approach

Before you know the code, take a look at the results of the operation:
Run effect

Enter a number after the ticket number, if it is greater than 5, give the message, otherwise, there is no. The Change event for a text box is used here, so when you enter a number, you need to lose focus.
Otherwise you won't see the result.
Here is a simple explanation of the above code:

<script language= "JavaScript" >

$ (document). Ready (function () {

...

}

</script>

It is a standard sentence pattern similar to English usage, which means to do something after the page is finished.
Someone may need to ask why this type is needed. This is because the location of JS is different, you need to perform different judgments. Consider the Baidu page you opened, when the Baidu page loaded, the cursor will be automatically positioned to the input box

Here it's code might look like this:

<input type= "text" id= "F" >

<script>

var O=document.getelemementbyid ("F");

O.focus ();
</script>

Here, the script must be placed behind, if you place the code

<script>

var O=document.getelemementbyid ("F");

</script>

<input type= "text" id= "F" >

The browser will error when it executes, so the text box is not loaded at this time. The useof JQ uery is not so much in the head or tail of the page, although with $ (document). Ready (function () {}, which is also the benefit of jquery.

Others are very simple, generally speaking, for the input box such as Textbox,select and so on with Val () to get/set its value, for Div,p,span, etc. is HTML () get/set its value,
$.get ("Getticks.aspx", function (Result) {... } indicates that the data processing will be performed by Getticks.aspx

Getticks.aspx is simple, as follows

int noofticketsavailable = 5;

Response.Write (Noofticketsavailable.tostring ());

Response.End ();

Note: response.end() required;

That's OK.


Sample2:JQuery supports Post -based AJAX

Not very different from Sample1 .

The code is as follows

However, it is important to note that the parameter ticreq is passed here , which is generally a name=key way for URLs, such as
Default.aspx? Id=1, you can use the request.querystring["id") to get the value of the ID of 1, so the above is passed the equivalent of
Getticksbypost.aspx? Ticreq=ticketsreq (however, here the Ticketsreq is a variable value, the system automatically converts)
So You can get this parameter in getticksbypost.aspx.

Results of the operation as above


Sample3:JQuery supports ASP. NET Ajax - based Ajax

To use JQuery in ASP. NET AJAX , you need to set Enablepagemethods to true. as follows

Next, you can use the ASP. NET AJAJX technology, as follows


then use, note the format of the URL , followed by the method of the page

URL: "default.aspx/getavailabletickets", represents the use of the Getavailabletickets method defined in Default.aspx .
The background code is as follows

Note: You need to add the WebMethod modifier .

Sample3:JQuery supports Ajax Pass -through parameters based on ASP.

Here is the main code, note that the parameters are passed through data


Because no parameter is passed , it can be used directly in the background

Note: The parameter name in the day after tomorrow needs to be the same as the parameters defined in the foreground Ajax

Sample4:JQuery supports Ajax Pass-through parameters to WebService based on ASP.

If you are using WebService, you need to join before the class

[System.Web.Script.Services.ScriptService]

Look at the following code (in the default.js file)



Below is the WebService file, note the red markings.

Sample5: building a flash memory like a blog Park

Specifically see the code, because I only implemented the data submitted, will be above, the following is easy to implement