Web service calls from javascript using ATLAS (part 3) - Complex properties

Part two covered returning objects with multiple properties from a webservice and accessing those properties from javascript. This article demonstrates that even 'complex' properties are supported by the ATLAS framework.

A complex property in this context is one like below:

public string vCard
    {
        get { return getVcard(); }
    }

public string getVcard()
    {
        string s = "<div class='vcard'>";

        if ((iFirstName.Length > 0) || (iLastName.Length > 0))
        {
            s += "<span class='n'>";
            s += " <span class='family-name'>" + iFirstName + "</span>";
            s += " <span class='given-name'>" + iLastName + "</span>";
            s += "</span>";
            s += "<span class='fn'>" + iFirstName + "&nbsp;" + iLastName + "</span><br />";
        }

        if (iLocation.Length > 0)
        {
            s += "<div class='adr'>";
            s += " <span class='type'>Location:&nbsp;</span><span class='locality'>" + iLocation + "</span>";
            s += "</div>";
        }

        if (iDept.Length > 0)
        {
            s += "<div class='org'>" + iDept + "</span>";
            s += "</div>";
        }

        if ((iOfficePhone.Length > 0) || (iMobilePhone.Length > 0))
        {
            s += "<span class='tel'>";

            if (iOfficePhone.Length > 0)
            {
                s += "<span class='type'>Work</span>:&nbsp;";
                s += "<span class='value'>" + iOfficePhone + "</span><br />";
            }

            if (iMobilePhone.Length > 0)
            {
                s += "<span class='type'>Cell</span>:&nbsp;";
                s += "<span class='value'>" + iMobilePhone + "</span><br />";
            }

            s += "</span>";
        }

        s += "</div>";

        return s;
    }

The getVcard method returns some HTML in the vCard microformat.

Your javascript stays nice and simple as below...

 <DIV id='vCardDIV'>vCard goes here</DIV>

<SCRIPT language='javascript'>
  myWebService.myWebMethod(s,myWebMethod_callback);

  function myWebMethod_callback(result)
  {
    $('vCardDIV').innerHTML = result.vCard;
  }
</SCRIPT>

The reason this works is that the javascript object is given each property from the .NET object by the ATLAS framework. If there was a property that showed the current time then the javascript version of the property would always show the time at which it was created.

I have found this to be a useful to keep my code/logic where I want it - not embedded in HTML!