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

asp.net , ajax , jquery , jquery ui Canada
  • 5 years ago
    **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!"

Post a reply

No one has replied yet! Why not be the first?

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

Contribute

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.

“Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.” - Rich Cook