Software is Service !!!

 

Microsoft announced Azure yesterday at PDC 2008. They also published a website (http://www.microsoft.com/azure) for it. What is Azure ? A Services Platform, from my understanding software vendors can create all kinds of web applications/services with Azure SDK and then publish them to the the Services Platform hosted by Microsoft in order to take advantages of Azure services and resources. All the computing is processed by the central servers, all the resources are provided by the central servers, all the administrations are through central servers. Consumers of the software vendors can use these services for their regular life via a thin client, like a web browser. This type of system architecture has an interesting name – Cloud Computing.

Windows Azure, Cloud computing, these made me recall a thought Bill.G introduced in 2000 – all the software products will become services and be used by consumer via web browser, and all the computing is done by servers(lots of them). He really did this way. DOTNET is the first phase of the huge blueprint, now I think Windows Azure is the second.

Software is Service !!!

Applying ASP.NET Ajax Templates to showing dynamic data

 

ASP.NET Ajax Templates is a new fancy part of Microsoft Ajax Client library 4.0. Brad Abrams introduced how to use ASP.NET Ajax Templates on static data in his article <<Building a Great Ajax application from Scratch>> at http://blogs.msdn.com/brada/archive/2008/10/19/ajaxworld-talk-building-a-great-ajax-application-from-scratch.aspx. I was thinking why don’t I create an example playing with real dynamic data? OK, let’s do it!

I’ll make some improvements to the photo galary application in Brad’s article. Here I am going to use two methods to call the WCF services and get data returned back to client script – the direct WCF service support integrated in ScriptManager and the ADO.NET Data Services Support. The latter is another fancy part of ASP.NET AJAX Client Library 4.0, which enables you to interact with an ADO.NET Data Service from client script using JSON or XML. Also, be sure to add [WebGet] to the webmethods in PhotoService.cs as ASP.NET AJAX ADO.NET Data Services Support accesses the services with GET verb by default.

Here’s the code:

<%@ Page Title="" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true"
CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript">

            function onTitleChange(title, id) {
                Sys.Debug.trace(title + id);
                photoService.query("/SetPhotoTitle?title=" + title + "&id=" + id, onComplete, cbFailure);
            }

            function onComplete(results) {
                Sys.Debug.trace(results);
            }

            function cbFailure(error, context, operation) {
                $get("spanResults").innerHTML = "Error occurred while performing operation " + error;
            }

            function flashTarget(value, binding) {
                var target = binding.get_target();

                $(target).parent()
                .css('backgroundColor', 'orange')
                .animate({ backgroundColor: 'red' }, 500)
                .animate({ backgroundColor: 'yellow' }, 1000)
                .animate({ backgroundColor: 'white' }, 500);
                return value;
            }

        </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" Runat="Server">

    <asp:ScriptManager runat="server" ID="sm">
        <Scripts>
            <asp:ScriptReference Path="js/jquery-1.2.6.debug.js" />
            <asp:ScriptReference Path="js/jquery.color.js" />
            <asp:ScriptReference Path="js/DataService.js" />
            <asp:ScriptReference Path="js/MicrosoftAjaxTemplates.debug.js" />
        </Scripts>
        <Services>
            <asp:ServiceReference Path="~/PhotoService.svc" />
        </Services>
    </asp:ScriptManager>

    <div id="Div1">
        <div id="template1" class="sys-template">
            <ul>
                <li><b>{binding ID, convert=flashTarget}</b><br />
                (<span>{binding Title, convert=flashTarget}</span>)</li>
            </ul>
        </div>

        <div id="template2" class="sys-template">
            <ul class="photoslist">
                <li>
                <!--* if (ImagePath) { *-->
                <img sys:src="{{ 'Images/' + ImagePath }}" />
                <!--* } else { *-->
                <img src="Images/1.jpg" />
                <!--* } *-->

                <input id="titleTextBox" type="text" value="{binding Title, convert=flashTarget}"
                class= "short" onchange="{{ 'onTitleChange(this.value, ' + ID + ');' }}"/>
                </li>
            </ul>
        </div>

        <asp:Label ID ="spanResults" runat="server" />
    </div>

    <script type="text/javascript">

        //ASP.NET AJAX Client Library for ADO.NET Data Services
        //The method in svc gets called via HTTP GET
        var photoService = new Sys.Data.DataService("PhotoService.svc");

        Sys.Application.add_load(
        function() {
            photoService.query("/getAllPhotos", cbSuccess1, cbFailure);
            PhotoService.getAllPhotos(cbSuccess2, cbFailure);
        });

        function cbSuccess1(result, context, operation) {
            var simple1 = $create(Sys.UI.DataView, {}, {}, {}, $get('template1'));
            simple1.set_data(result);
        }

        function cbSuccess2(result, context, operation) {
            var simple2 = $create(Sys.UI.DataView, {}, {}, {}, $get('template2'));
            simple2.set_data(result);
        }

    </script>
</asp:Content>