Oct 17 2006

Ajax.NET returning classes

Posted by admin under Ajax

Here we continue our Ajax.NET exploring adventures started here and in part 2 and in part 3.

 

Now we are getting into the "fantastic" stuff with Ajax.NET. Lets say we have this type of layout:

In this example we want to update the minute part as before - but also "When was data updated" - and the "servergenerated guid" part. Especially the last one might be tricky, considering it's a div on it's own, not even inside the table. Lets look at the ASPX:



    <table border="1">
    <tr>
    <td>When was data updated?</td>
    <td><asp:Label ID="lblDataUpdated" runat="server"></asp:Label></td>
    </tr>
    <tr>
    <td>Other important stuff</td>
    <td>Again more bla bla</td>
    </tr>
    <tr>
    <td>Current minute is</td>
    <td><asp:Label ID="lblMinute" runat="server"></asp:Label></td>
    </tr>
    <tr>
    <td>That was a stupid example</td>
    <td>However functionalitywise it's what I want to test</td>
    </tr>
    </table>
    
    <div id="divguid">A servergenerated guid</div>

My point is that in this particular example it *could* be possible to wrap the table and the div inside a single "Atlas type" update panel, but is could also be that there were 3000 other components between the table and the "divguid" div, which might need their own updatepanels etc. So, this is where Ajax.NET really shines in my eyes. And yes - I havn't even told you the coolest. Take a look at this serverside code:



public class ResultServer
{
    [AjaxPro.AjaxMethod]
    public ResultData GetNewResultData()
    {
        return new ResultData();
    }
}

public class ResultData
{
    public int Minute;
    public string Guid;
    public string Updated;

    public ResultData()
    {
        Minute = DateTime.Now.Minute;
        Guid = System.Guid.NewGuid().ToString();
        Updated = DateTime.Now.ToString();
    }
}

Amazing - we are returning a single object - called ResultData. And in our JavaScript callback we can work against the data in an objectoriented way:



function MyUpdate_Callback(res)
{
    var lblMinute = document.getElementById("lblMinute"); 
    var lblDataUpdated = document.getElementById("lblDataUpdated");
    var divguid = document.getElementById("divguid");
    
    var oResultData = res.value;
    lblDataUpdated.innerHTML = oResultData.Updated;
    divguid.innerHTML = oResultData.Guid;
    if ( lblMinute.innerHTML != oResultData.Minute )
    {
        lblMinute.innerHTML = oResultData.Minute;
        blink_Blink3Seconds("lblMinute");
    }    
    
    //10 seconds a 1000 ms
    setTimeout(MyUpdate,10 * 1000);    
}

 Download this solution and play with it - it's really cool and shows that Ajax.Net does everything you'd like when it comes to transporting data between the server and client - and offers a superiour way of accessing the data from the client javascript!

 

 

Attachments