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

asp.net , ajax , jquery , jquery ui Canada
  • 8 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!"

Post a reply

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

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.

“Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter” - Eric Raymond