Creating a Basic AJAX.ASP.NET 'Atlas' Web Application With CodeBehind and WAP

Creating a Basic AJAX.ASP.NET 'Atlas' Web Application With CodeBehind and WAP

The Ajax.ASP.Net web site has an articled titled, "Walkthrough: Creating a Basic ASP.NET 'Atlas' Web Application". The article says, "Be sure that you clear the Place code in separate file check box. For this walkthrough, you must create a single-file ASP.NET Web page."
I created a very similar example that uses code behind in the web page, the Web Applications Project (WAP) template instead of the web site template, and a class library for the web service code.
It is basically the same example used at the Ajax site, but with structural changes for code behind, WAP, and a library. (You'll notice that even my instructions look very similar to the above example.) However, if you don't get things just right, going from the single file example to this code behind/WAP example can be tricky. That's why I posted this example.
You can download my example code here.
Creating a Basic ASP.NET 'Atlas' Web Application
Introduction
This walkthrough introduces client scripting with Microsoft's new Web development technology, code-named 'Atlas'. You will gain the most benefit from this walkthrough if you understand what 'Atlas' is, what technical issues it is designed to solve, and what its essential components are. You can get that information from the following introductory 'Atlas' documents:

In this walkthrough you build a basic application using just the 'Atlas' components you need to make an asynchronous remote call from client script to a Web service, and to then display the results of the call in the page. Using 'Atlas' features, you can update data in the client without having to post the entire page back to the server.
Prerequisites
To complete the walkthrough, you need the following:

  • Microsoft Visual Studio 2005 and the .NET Framework version 2.0. For download information, visit the .NET Framework Developer Center Web site.
  • The "Atlas" package installed on your computer. This MSI installer file includes a Visual Studio Content Installer (.vsi) for creating a blank 'Atlas' Web application in Visual Studio. For details, see How to: Install ASP.NET "Atlas".

Creating an 'Atlas' WAP/Code Behind Example
To begin, you will create an normal Web Application Project in Visual Studio.

  • You need to manually copy the DLL named Microsoft.Web.Atlas.dll into the Bin folder of the project.
  • You need to manually add the Atlas settings to the Web.config file.

To create a new 'Atlas' Web application in Visual Studio

  1. In the File menu, click Project, and then click ASP.NET Web Application.
  2. Copy Microsoft.Web.Atlas.dll to the project's bin folder
  3. Set a project reference to Microsoft.Web.Atlas.
  4. We will modify the code for the Default page later.

Creating a Web Service with a Single Method
Next, you will create an ASP.NET Web service with a single method that can be called by your 'Atlas' client script. Web services that work with 'Atlas' applications are not different from other ASP.NET Web services. 'Atlas' applications can run in any browser and connect to any type of Web-based service; the server does not have to be running ASP.NET or Windows.
To create the new Web service

  1. In Solution Explorer, right-click the solution, and then click Add New Project.
  2. In the Add New Project dialog box, under Visual Studio installed templates, select Class Library.
  3. Name the file ClassLibrary1 (the default name) and select a location.
  4. Click Add.
  5. Add project references to System.Web and System.Web.Services.
  6. Remove the default .cs file contained in the Class Library, and create a new blank code file called HelloWorldService.cs.
  7. Add the code shown below to create a HelloWorld method in the Web service that returns the current date and time. The code must take a string as an input and return a formatted string with the current time and a message.
    The following example shows a complete Web service that includes the HelloWorld method:

    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.Services.Protocols;
     
    namespace AtlasBasicWebSite{
     
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class HelloWorldService  : System.Web.Services.WebService {
     
       [WebMethod]
       public string HelloWorld(String query)
       {
         string inputString = Server.HtmlEncode(query);
         if(!String.IsNullOrEmpty(inputString))
         {
           return String.Format("Hello, you queried for {0} using ClassLibrary1. The "
             + "current time is {1}", inputString, DateTime.Now);
         }
         else
         {
           return "The query string was null or empty";
         }
       }
    }
    }

  8. Save and close the file.

Creating a Web Page with a Remote Method Call
In this part of the walkthrough, you will create an ASP.NET page and add the client script needed to call the Web service you created earlier.
To modify the Web page

  1. Open Default.aspx in Visual Studio.
    Note  You do not need to make any changes to the Default.aspx.cs code file. And as you know, for this walkthrough, you are using the code behind model.
  2. Switch to Source (HTML) view.
  3. In the @ Page directive, make sure it has the code shown in the following example:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="_Default" %>
  4. Copy the following markup and paste it into the file beneath the @Page directive.
    Note the addition of the <atlas:ScriptManager> element, which automatically adds the references to the required JavaScript files that provide 'Atlas' functionality. In this case, the element also adds a reference to the Web service file.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head id="Head1" runat="server">
    <title>Hello Atlas Basic Sample</title>
    <atlas:ScriptManager runat="server" ID="scriptManager">
       <services>
         <atlas:servicereference path="~/HelloWorldService.asmx" />
       </services>
    </atlas:ScriptManager>
    <style type="text/css">
       body { font: 11pt Trebuchet MS;
          font-color: #000000;
          padding-top: 72px;
            text-align: center }
     
       .text { font: 8pt Trebuchet MS }
    </style>
     
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
       Search for
       <input id="SearchKey" type="text" />
       <input id="SearchButton" type="button" value="Search"
         onclick="DoSearch()" />
    </div>
    </form>
    <hr style="width: 300px" />
    <div>
    <span id="Results"></span>
    </div> </body>
    </html>

  5. Save the file, but do not close it yet.

Now you will add client-side script that calls the remote Web service you created. The 'Atlas' client library provides the background services and support to make the remote call work.
To write scripts to call the Web service and create the asmx file

  1. In the Default.aspx page, following the last <div> element (above /body) created in the previous task, paste the following code to call the Web service and display the results in the page:

    <script type="text/javascript">
     
     function DoSearch()
    {
       var SrchElem = document.getElementById("SearchKey");
       AtlasBasicWebSite.HelloWorldService.HelloWorld(SrchElem.value,
    OnRequestComplete);
    }
     
    function OnRequestComplete(result)
    {
       var RsltElem = document.getElementById("Results");
       RsltElem.innerHTML = result;
    }
     
    </script>

    The DoSearch function calls the remote method in the Web service, passing the value that the user enters in the text box, and passing the name of a callback function. The callback function is necessary because you are making an asynchronous call to the Web service, and you must provide a mechanism for the Web service to notify the client when the call returns. The name of the local callback function (OnRequestComplete) is arbitrary, but for the remote call to work, it must match the name of the callback function in the page. You can optionally provide a third parameter that contains the name of a function to be called if the server request times out while trying to call the remote method.
    The OnRequestComplete function is called when the asynchronous call is completed. The function takes the result parameter, which is used to pass the return value of the Web service call. In the example, you display the value of the result parameter as the innerHTML property of the <span> element.

  2. Add the web service file (.asmx) to the Web Application Project. Create an empty code file in the WAP project and name it HelloWorldService.asmx. Insert the single line of code shown in the following example. All that is required is this one line.
    <%@ WebService Language="C#" CodeBehind="ClassLibrary1.HelloWebService.cs"
    Class="AtlasBasicWebSite.HelloWorldService" %>

To create/modify Web.config
Insert the following code into web.config. Note that most of this was taken from the web.config file template used by the 'Atlas' template. You will have this template after you install Atlas. For me, it was located at C:\CurrentProjects\Templates\ProjectTemplates\Visual Web Developer\CSharp\ASPNETAtlasWebApplicationCS.zip. (Instead of inserting this code, you could simply replace the web application project's default web.config with the web.config from the Atlas template.) The only change I made was to enable debugging.
 
Web.config <?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
<section name="converters" type="Microsoft.Web.Configuration.ConvertersSection" requirePermission="false"/>
<section name="webServices" type="Microsoft.Web.Configuration.WebServicesSection" requirePermission="false"/>
<section name="authenticationService" type="Microsoft.Web.Configuration.AuthenticationServiceSection" requirePermission="false"/>
<section name="profileService" type="Microsoft.Web.Configuration.ProfileServiceSection" requirePermission="false"/>
</sectionGroup>
</configSections>
<appSettings/>
<connectionStrings/>
<microsoft.web>
<converters>
<add type="Microsoft.Web.Script.Serialization.Converters.DataSetConverter"/>
<add type="Microsoft.Web.Script.Serialization.Converters.DataRowConverter"/>
<add type="Microsoft.Web.Script.Serialization.Converters.DataTableConverter"/>
</converters>
<webServices enableBrowserAccess="true"/>
</microsoft.web>
<system.web>
<pages>
<controls>
<add namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
<add namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
</controls>
</pages>
<compilation debug="true">
<buildProviders>
<add extension=".asbx" type="Microsoft.Web.Services.BridgeBuildProvider"/>
</buildProviders>
</compilation>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" type="Microsoft.Web.Services.ScriptHandlerFactory" validate="false"/>
<add verb="*" path="atlasbatchcall.axd" type="Microsoft.Web.Services.MultiRequestHandler" validate="false"/>
<add verb="*" path="atlasglob.axd" type="Microsoft.Web.Globalization.GlobalizationHandler" validate="false"/>
<add verb="*" path="*.asbx" type="Microsoft.Web.Services.ScriptHandlerFactory" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="Microsoft.Web.Services.ScriptModule"/>
<add name="BridgeModule" type="Microsoft.Web.Services.BridgeModule"/>
<add name="WebResourceCompression" type="Microsoft.Web.Services.WebResourceCompressionModule"/>
</httpModules>
<authentication mode="Forms" />
</system.web>
</configuration>
To test the page

  1. Run the Default.aspx page.
  2. Type some text into the search box, and then click the Search button. The text is returned from the HelloWorld method in the Web service and displayed in the page.
  3. Test with no text in the search box also.