AJAX Made Simple - jQuery, jQuery UI, ASP.NET
Last post was 12 Mar 2009 at 19:45
-
**Requirements**
You will need the following:
1. IIS Web Server Supporting the Latest .Net Framework
2. [Visual Web Developer Express](http://www.microsoft.com/express/vwd/Default.aspx)
3. [jQuery API](http://www.jquery.com)
4. [jQuery UI](http://www.jqueryui.com)
5. Register for a Google API key if you don't want to download jQuery API/UI
6. Your Hands
7. 1 Keg of Beer
8. Sylar's ability to understand things
**Tutorial**
**Step 1:**
Start a New Project
Add an HTML document and name it *index.html* or *index.htm*
Rename the Default.aspx page to Echo.aspx
write the following to Echo.cs
protected void Page_Load(object sender, EventArgs e)
{
//declare a variable that takes the query string
string echo = Request.QueryString["msg"];
//print the echo msg
Response.Write(echo);
}
*Method 1*
Create a new folder call Scripts
Copy the jQuery.js and jQuery.UI.js files that you downloaded to the Scripts directory
Add the following between the <head></head> tag of your HTML page
<script type="text/javascript" src="Scripts/jQuery.js"></script>
<script type="text/javascript" src="Scripts/jQuery.UI.js"></script>
*Method 2*
Add the following between the <head></head> tag of your page and replace XXXXX with your own Google API key if you plan on using Google map features.
<script type="text/javascript" src="http://www.google.com/jsapi?key=XXXXX"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.5.3");
//google.load("yui", "2.6.0");
//google.load("maps", "2");
</script>
**Step 2**
Go to your index.html page
Add the following after your last <script></script> tag
<script type="text/javascript">
//similar to page_load() in aspx file but using jQuery
$(document).ready(function() {
//create your $.ajax method
SayHello = function() {
$.ajax({
type: "POST", //GET, POST
url: "Echo.aspx", //Specify the page your requesting
data: { msg : "Hello Nurse!" }, //equivalent to url parameter "msg=Hellow%20Nurse!"
async: true, //default is asynchronous request can set to false
cache: false, //default is false
success: function(data) {
alert(data); //alert response data on success callback
}
});
}
});
</script>
Now go to your <body> tag and add the following HTML control
<input type="button" value="Say Hello" onclick="SayHello()" />
**Step 3**
Compile and run your project, test it out on a browser
If successful, your browser to display a popup alert with the message "Hello Nurse!"
-
test
-
test
Post a reply
JavaScript forum discussion
-
How to stop & start the scrolling text on mouseover & onmouseout event.
by codeunit (3 replies)
-
Header and Footer in Web page print
by fhajaj (4 replies)
-
Automatically check/uncheck multiple checkboxes
by gus (3 replies)
-
Re: HTML TABLE
by mikefenej (0 replies)
-
Re: HTML TABLE
by mikefenej (0 replies)
Quick links
Recent activity
- arif ahmad replied to How to receive data in web ...
- William Thompson replied to What is the name of the Win...
- Sameera Piyadigamage replied to Point of Sale Developers: H...
- Scott Carline replied to 4 x C# Developers for large...
- Rajendra Dhakal replied to Restore SQL Server text dat...
- cloud rainda replied to How to convert between TS f...
Enter your message below
Sign in or Join us (it's free).