Creating an AJAX-Enabled Commerce Server 2007 Site

In this post, I'm going to show you how to create a Commerce Server 2007 site that harnesses the power of ASP.NET AJAX.

Why would you want to do this? As you probably know, AJAX is useful for partial page rendering. This means that you can selectively render different parts of a page at a time without forcing a full-blown postback. For a user, this will greatly streamline the experience of shopping for products online.

The example I'm going to show you today will be very simple so you can understand the concepts behind both AJAX and CS2007. You will create a new CS2007 site and add a page to it. On this page, there will be a button you can click that will send an asynchronous request for the list of catalogs on this commerce server site. Then a list will be displayed without refreshing the entire page.

The example could be expanded by allowing the list to be clickable and displaying the products in that catalog in a nearby frame, or something to that effect. This is a great starting point if you're trying to maximize usability!

First of all, let's make sure you have everything you need to begin.

Assumptions 
To simplify things I'm going to assume you already have Commerce Server 2007 installed and configured with the sample site (so that you have an application pool ready for Commerce Server activity) and that you already have a database server set up. Also, for the sake of simplicity I'm assuming you have VS.NET installed on the same box as CS2007 and you have the CS2007 templates available.

Now, you need to get the ASP.NET AJAX toolkit and the futures CTP if you are interested in doing more advanced stuff. Note, these directions will probably be outdated soon; just make sure you've got the latest AJAX components available. For now, install ASP.NET AJAX 1.0 Beta 2 first, followed by the ASP.NET 2.0 AJAX Futures November CTP.

That's really all you need, and at this point you only need to ask yourself, "Me, am I ready to rock?" And you'd better say "yes." So, let's get cracking on this sample application!

1. Open up Visual Studio .NET 2005 and point to File | New | Web Site...
   
2. From the available templates, select Commerce C# ASP.NET Web Application
   
3. Create the site at http://localhost/SampleAjaxCommerceSite
   
4. You will be confronted with a standard Pup wizard. Make sure that you specify the correct SQL Server name, and all that stuff. The wizard will unpup Empty.pup and add a special web.config which you must modify later.
   
5. Hopefully the Pup wizard completes successfully for you (after accepting obvious defaults). Otherwise, leave a comment here and I'll try to help.
   
6. Press Control+F5 to run the page. You should see no compilation errors and no runtime errors. If you receive a runtime exception stating that you have been denied access (specifically to SQL Server) then ensure that all of the applications in IIS created by the unpup process are running under the same app pool as your other commerce server stuff. You just need to run them under an app pool that has the Identity property set to an account that has access to your SQL server.
   
7. Open the web.config and find the <httpHandlers> element. There should already be one in there for commerce server. We need to add AJAX handlers. Modify the <httpHandlers> element to look like this:
   

   
   <httpHandlers>

   <add verb="*" path="SiteCacheRefresh.axd" type="Microsoft.CommerceServer.Runtime.SiteCacheRefresh, Microsoft.CommerceServer.Runtime, Version=6.0.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 "/>

   <remove verb="*" path="*.asmx"/>

   <add verb="*" path="*.asmx" validate="false" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

   <add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>

       </httpHandlers>
   

8. Enter Design Mode for Default.aspx. Since you installed AJAX, you will have some related components at the bottom of your toolbox in Visual Studio .NET. Drag a ScriptManager component to the top of your page. ScriptManager needs to be located (in terms of HTML) before any controls that utilize AJAX functionality.
   

9. Drag a regular ASP.NET button below the ScriptManager. Call it btnGetCatalogs and give it some clever or daft display value.
   

10. Drag an AJAX UpdatePanel below the ASP.NET button. Call it upCatalog. Also, set some important properties here:

• Change UpdateMode to Conditional. If it is set to Always, then any time an activity occurs on the page, the panel will refresh.

• Add a new Trigger by pressing the [...] button next to the property Triggers. Create a new AsyncPostbackTrigger with a ControlID of btnGetCatalogs.This will ensure that upCatalog only reloads when btnGetCatalogs is clicked.
  

11. Drag a normal ASP.NET Label control into the UpdatePanel. Make sure it is actually inside the update panel, not outside it. Change the Name property of the label to lblCatalogList and give it a blank text value.
    

12. Double-click btnGetCatalogs to generate and wire up a code-behind event handler. We need to start writing code, anyway!
    

13. First of all, you are going to need to add two references. They are both in the .NET tab of the Add Reference window. These are the ones you need to add:

• Microsoft Commerce Server Agent-Service Cross Tier Components Assembly

• Microsoft Commerce Server Catalog Common Assembly
  

14. In your using directives section, add the following line:
    using Microsoft.CommerceServer.Catalog;
    

15. In the click event handler for your button, paste the following code:
    
    CatalogSiteAgent siteAgent;
    CatalogContext catContext;
    CatalogsDataSet dsCatalogs;
    string catalogText = "";
    
    // Create a site agent using your site's name.
    siteAgent = new CatalogSiteAgent();
    siteAgent.SiteName = "SampleAjaxCommerceSite"; // TODO: Change to your site's name
    catContext = CatalogContext.Create(siteAgent);
    
    dsCatalogs = catContext.GetCatalogs();
    if (dsCatalogs.Catalogs.Count == 0)
    {
       catalogText = "No catalogs found. Try adding some with the Catalog Manager.";
    }
    else
    {
       foreach (CatalogsDataSet.Catalog catalog in dsCatalogs.Catalogs)
       {
          catalogText += catalog.CatalogName + "<br/>";
       }
    }
    
    lblCatalogList.Text = catalogText;
    

16. Compile and run your page. Click the button. You will receive a message stating that no catalogs are found, and to try adding some with the catalog manager. So, open the Catalog Manager (a business user tool installed with the CS2007 business user tools), open the web service at http://localhost/SampleAjaxCommerceSiteCatalogManagerService/CatalogManagerService.asmx, and create a couple of fake catalogs. Once these catalogs are created, close Catalog Manager.
    

17. Click the button again. This time, the text should change to a not-so-fancy list of the catalogs present in your CS database. Note that the entire page was not reloaded; only the text you are looking at now.  

And now, you may rejoice, my friend; you have created an AJAX-enabled Commerce Server 2007 site. You can take this and expand it to make a fast, responsive product gallery and browser, or to optimize your site's checkout process.

AJAX, reluctantly a "Web 2.0 Technology," has already been used widely across many different areas of the web. Its presence only grows stronger, and knowing how to use it is quickly becoming a vital tool in your arsenal.

Good luck, and happy coding!