Saturday, April 3, 2010

Use JQuery AJAX with AspDotNetStorefront



How to use JQuery AJAX to call an AspDotNetStorefront web service.  The web service must have access to core AspDotNetStorefront data and functionality.


1. Add the following lines to the web.config.  If WSI has been enabled in the web.config by un-commenting lines then insert just <add name="HttpGet"/> and <add name="HttpPost"/> in the appropriate location.

    <add name="HttpGet"/>
    <add name="HttpPost"/>

2. Create a web service class.  Right click on the root web project and choose Add New Item –> Web Service.  In this example we name the file AJAX.  This will create two files:

  • /AJAX.asmx
  • /AppCode/AJAX.cs

3. In AJAX.cs, uncomment the following line to allow this Web Service to be called from a client side script.


You can add to the top of this file: using AspDotNetStorefrontCore; etc. to access standard AspDotNetStorefront routines.

You create your server side methods here (to be called by the client). We’ll use the HelloWorld method that was created by default.

4. Create a javascript file and include it in your /App_Templates/Skin_1/JScriptsCustom/ajax.js e.g.

<script type="text/javascript" src="App_Templates/Skin_1/JScriptsCustom/ajax.js"></script>

You can of course include and call your JavaScript in anyway you like.

5. Create a JavaScript function e.g.

function MyJQueryAJAXTest() {
        url: 'AJAX.asmx/Test',
        dataType: "text",
        success: function(data) {
        error: function(XMLHttpRequest, textStatus, errorThrown) {

6. Calling the client-side JavaScript function will pop up an XML string with “hello world” as part of the results.  Or an error will be displayed if your setup is not correct.

7. See for lots more detail on calling web methods with parameters etc.

No comments:

Post a Comment