ASP.NET, AJAX, and jQuery

I’ve been doing a lot of ASP.NET work lately, and have in fact enjoyed it very much.  Since this is a new and “recent” development due to my past being in Classic ASP, then PHP I have had a lot of new things to learn.. also, for nearly the last two years, I have been doing WinForms only programming, and have forgotten a lot of the stuff I once knew!

The ASP.NET model is considerably different from the PHP 4 model.  Some things are far easier, and other things are just different.  I wanted to learn how to use an HTML/JavaScript/ASP.NET model [like I would do in PHP] and had a few things to figure out.  Fortunately, there exists a lot of places where people have pioneered this stuff before I did.

Here is how to use jQuery with ASP.NET 3.5.

Figure 1:  Create a new C# .NET 3.5 Web Service [SampleService.asmx]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace admin {
    /// <summary>
    /// Summary description for CMSWebServices
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]    
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebServices : System.Web.Services.WebService {

        [WebMethod]
        public string HelloWorld() {
            return "Hello World";
        }
    }
}

Well, that was simple.  Most of the code as you can see, is already written for you by Visual Studio.

Figure 2:  Define an ASP.NET Page [SampleConsumer.aspx], add jQuery, and this script

<script language="javascript" type="text/javascript">
                function testme() {

                    $.ajax({
                        type: "POST",
                        url: "SampleService.asmx/HelloWorld",
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader("Content-type",
                         "application/json; charset=utf-8");
                        },
                        success: function(msg) {
                            alert(msg.d);
                        }
                    });

                }
</script>

Figure 3:  An HTML button in the ASP.NET page

<input id="Button1" type="button" value="button" onclick="testme();"/>

Well, that was easy, eh ?  Simply pushing the button will write HelloWorld in the Alert Box.

Figure 4:  Sources
http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

I found those series of articles to be extremely helpful in figuring all of this out.  Next time, I hope to write a little bit more about what I’m doing, but wanted to make sure this information was easy to find.  It took me a little while to dig up the exact ‘how-to’ and read through all of the information on the topic.

Note:  This is a little sloppy, sorry :)  I just don’t feel like going to indepth on this topic.  You can find additional resources using the links above. 

YMMV.

- Matthew