64 Bytes

just a few characters short of a code base.

ASP.NET Web services + AJAX + prototype.js

clock May 10, 2007 17:50 by author josh
So doing some reading on ASP.NET Webservices and ASP.NET AJAX's ScriptManager Tag, I realized ASP.NET Webservices can handle SOAP or JSON  if you set them up right. So below is what I have figured out. And my thoughts on the whole experience.

First off, you need to have ASP.NET AJAXs installed. Now make a refrence to System.Web.Extentions. Once that is done you can get to the meat of it.

Start off by making a quick change to your web.config so it can support passing .asmx requests to a script handler.

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services; 


/// 
/// Summary description for WebService
/// 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService { 

    public WebService () { 

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    } 

    [WebMethod]
    public string HelloWorld(string echoField) {
        return echoField;
    }
    
} 

Now its time to play with your HTML. Now I am on this kick of trying to write 100% HTML clients, so I won't be using the scriptmanager tag (that would be too easy).. But if I were to use the scriptmanager tag then all I would need to do is write one line of javascript to call the above webservice. As such my script would look something like this (so that it can handle processing the request)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function testCall()
        {
            debugger;
            WebService.HelloWorld("test message",completeTest,errorTest);
        }
        function completeTest(val)
        {
            alert(val);
        }
        function errorTest(error)
        {
            alert(error.get_message());
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="Services/WebService.asmx" />
        </Services>
        </asp:ScriptManager>
        <div>
          <button onclick="testCall()">test</button>
        </div>
    </form>
</body>
</html> 

But like I said before I wasn't going to USE microsofts framework on the client. if I did the page would be ASP.NET not 100% Html :-P.. So this is what I did. first off I have to choose a AJAXs API, in this case I used Prototype.js but I like YUI and could have used it :-).. Once I have added my API to my page I would call my JSON webservice and it too is only one line (although not as pretty as Microsofts provides. As such it looks something like this:

<!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>
    <title>Untitled Page</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>
    
    <script type="text/javascript">
    function testCall()
    {
        new Ajax.Request('Services/WebService.asmx/HelloWorld',
                {   postBody:"{echoField:'test message'}",
                    method: 'post', contentType:'application/json; charset=utf-8',
                    onSuccess: completeTest,
                    onFailure: errorTest});
    }
    function completeTest(val)
    {
          alert(val.responseText);
    }
    function errorTest(error)
    {
        var val = error.responseText;
        alert(val);
    }
    </script>
    
    
</head>
<body>
    <div>
          <button onclick="testCall()">test</button>
        </div>
</body>
</html>

Although I could use the ASP.NET AJAX provided javascript API and it works great, I'm having more fun making it work with prototype. Plus this is a proof of concenpt, which means you can find the smallest lightest JSON communication layer you want and use that (jquery is only 50k uncompressed and should work fine).. I think next I'll have to come up with an easy way to wrap these webservices in a proxy much like microsoft does OR find a way to use the microsoft generated Proxies with other APIs.. By the way to see the Microsoft generated Javascript proxy, just put /js at the end of your webservice URL. (scriptmanager does this for you normally).

Anyways, this was a fun little experiement, and I'll post when I get it more refined.

 

Currently rated 4.6 by 5 people

  • Currently 4.6/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Dr. Dobbs and I Agree!!!

clock May 2, 2007 17:20 by author josh

Saw this on slashdot and it warmed my heart. see there is an artical on Dr. Dobbs about AJAX frameworks and it reminded me of the process I went thru. Just like Dr. Dobbs I weighed DOJO, scriptastic, Prototype, YUI and GWT; and like the artical I finally chose YUI..

    Now personally I loved DOJO (I still use it on quicker projects); but YUI is much quicker (performance) and customization is a whole lot less complex although less extendable. One other part of YUI I really like is its communications layer, the service architecture (yes even inside javascript you can have services) makes since to me and just seemd to fit my brain better. I also have to say that extJS (based on YUI) is a great extention to YUI and worth looking into (although now the developer seems to be charging for it, although its not to much  [Correction - see comments ] Now the developer has added support options for the library and/or if you need more freedom than LGPL gives you. And the prices aren't bad either).

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


View Webservices done.

clock April 30, 2007 06:57 by author Josh

So on our little project I have decided that because our fatclient will connect to the server via webservices, so should our webapp. Sure, sure its on the same server (now) but using SOA here helps in several ways.

1)  If we grow to a multie server enviroment it will be easy as pie to cut the webapp away from the business layer (as it will already be using the webservices

2) I only have to write my webservices once, and I don't have to write a bunch of wrapper classes just so the webapp can call right back to the BAL while the fatclient has to go thru webservices.

3) I can make the webapp 100% HTML. Now you may be asking, but then its just a webpage. True, but with AJAX I have actually been quite successful writing 100% javascript HTML clients to my webapps. The idea being that static file serving is light, easy, cheap (doesn't require IIS or windows for that matter), and finally it completely decouples business logic from the UI allowing solid design practices.

4) We can publish a Webservice API for client websites to use as they like.

So with all that being said, as of yesterday I completed all of the webclient Services for searching and rendering. Now I have a few new entry points (Scope creep) to write. But the "core" webclient APIs are done. On the flipside my partner is working on the Fatclient and he will give me his list of APIs to write when he is ready. We have split up the project, with him getting the fatclient and me doing everything on the server.. Its a fair trade :-).

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Adobe Flex Goes Open Source

clock April 27, 2007 17:18 by author Josh
Big news from Adobe. This will make Flex the de-facto standard for Rich Internet Applications. Now this is intresting, Because Flex is the dynamic form of Flash, and has quite a bit of Web 2.0 magic. I wonder how this folds in to the whole Apollo project.

read more

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5



Calendar

<<  November 2008  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

View posts in large calendar

Add to Technorati Favorites

Sign in