AJAX Made Simple - jQuery, jQuery UI, ASP.NET

ajax , jquery , jquery ui , asp.net Canada
  • 11 years ago

    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


    **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

    *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");

    **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() {
                                           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

    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!"
  • 11 years ago
  • 11 years ago

Post a reply

Enter your message below

Sign in or Join us (it's free).


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“A computer is a stupid machine with the ability to do incredibly smart things, while computer programmers are smart people with the ability to do incredibly stupid things. They are, in short, a perfect match” - Bill Bryson