My Portal Project

How to get AJAX functionality out of your ASP.NET web pages, without the javascript bloat of the ScriptManager / Ajax.NET.

Calling web services from javascript with ASP.NET was made easy with the ScriptManager object, but that has the nasty habit of adding over 100k of javascript just by its mere inclusion. Such a price to pay for more granular control over your pages. The good news, is that ASP.NET web services are serialized for JSON without any extra work.

If you have not worked with jQuery, it makes everything Javascript easier, including AJAX remote procedure calls to retrieve content. So I sought out a way to use jQuery to call my ASP.NET web services and eliminate my reliance on the dreaded ScriptManager.

Most tutorials I found to make this all work depend on your project being an Ajax.NET enabled web site. Since I have grown to be wary of the Ajax.NET model, I wondered what was the bare minimum required to allow web services to be called by javascript. So here it goes; how to enable the ASP.NET web-services from Javascript, without having to use the AJAX enabled template.

Hat Tip to Dave Ward for getting me started

First is the reference for AjaxToolkit.dll. It adds the System.Web.Script.Services namespace required for the web service. This is needed only by the web service itself, not the consuming page.

Second is the web.config changes. I included the System.web node only for illustration purposes. The httpHandlers node simply needs to be a child of System.web, and again this is needed only by the web service itself, not the consuming page.

<System.web>
    <httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
</System.web>

Third is the web service code addition. The dll gives us the System.web.script.services namespace that adds the JSON serialization for us. Along with the Import statement is the last modifier on the web service declaration “<scriptservice ()> _”

Imports System.Web.Script.Services

<WebService(Namespace:="http://fcny.org/ws/claim/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<ScriptService()> _

Last is the javascript itself in the consuming page.

function getSomCustomInformation(str1,int1,etcetc){
    $.ajax({
        type:"POST",
        url:"WebServicePage.asmx/WebServicePageFunction",
        contentType: "application/json; charset=utf-8",
        data:"{'firstString':'" + str1 + "','firstInteger':" + int1 + ",'etcetc':'" + etcetc  "'}",
        dataType: "json",
        success: function(msg){
            $('#myTargetDiv').html(msg);
        },
        error: function(msg){
            alert(msg);
        }
    })

I used strings and integer to demonstrate the use of the quotes to differentiate between the two data types.

So that’s that. The bare bones approach to AJAX development in ASP.NET without the bloat.

This entry was posted on Friday, November 28th, 2008 at 11:54 am and is filed under Microsoft, Code Bin, Web Development, ASP.NET, Javascript, LinkedIn. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.