ASP.NET AJAX 4.0 Template Example

Wednesday, July 23, 2008

Yesterday was released the first preview of ASP.NET 4.0. Lot's of cool stuff come with this release and with this article i will try to demonstrate the use of templates. The example is available for download

Let's start...

First we have to download MicrosoftAjaxTemplates.js available from Codeplex and and add it to our project. Then we have to add a reference to our page.
We will do it via the ScriptManager like this.

<asp:ScriptManager runat="server" ID="sm" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" />
            </Scripts>
</asp:ScriptManager>

We also enable PageMethods. Then we add a button that will get data from the server, the template that we want to use and a div to show the data...

<input type="button" id="btn" value="Show Data" onclick="exec()" />
<div id="myTemplate" class="sys-template">
            <h3>
                {{ Title }}</h3>
            Name:
            <input type="text" value="{{ FirstName + ' ' + LastName}}" />  Date:
            <input type="text" value="{{ DateNow.format('dd/MM/yyyy hh:mm:ss') }}" /> 
            
            BirthDate:  <input type="text" value="{{ BirthDate.format('dd/MM/yyyy') }}" />
            
            
            BirthDate is unkown
            
</div>
<div id="data">
</div>

Then we add a WebMethod to our code-behind file and a custom class with 4 properties. This method will be used via PageMethods so it has to be public and static.

    [WebMethod]
    public static List<Info> GetVal()
    {
        List<Info> l = new List<Info>();
        l.Add(new Info { BirthDate = DateTime.Parse("2/6/2008"), FirstName = "John", LastName = "Katsiotis", DateNow = DateTime.Now, Title = "Cool ASP.NET Developer" });
        l.Add(new Info { BirthDate = null, FirstName = "Foo", LastName = "Bar", DateNow = DateTime.Now, Title = "Common Name Example" });
        System.Threading.Thread.Sleep(2500);
        return l;
    }

    public class Info
    {
        public DateTime? BirthDate { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime DateNow { get; set; }
        public string Title { get; set; }
    }

In our GetVal method we create two instances of class Info and we return a list that contains those two. We also create a delay of 2.5 secs.

Finally we have add the nessecary javascript to our aspx page which is...

<script type="text/javascript">
    function initTemplateValues(_Title,_FirstName,_LastName,_DateNow,_BirthDate)
    {
        var t = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));
        t.createInstance($get("data"),
        {
            Title: _Title,
            FirstName: _FirstName,
            LastName: _LastName,
            DateNow: _DateNow,
            BirthDate: _BirthDate
        });
    }
    function exec()
    {

        $get('data').innerHTML='Please wait...';
        PageMethods.GetVal(onComplete,onError);
    }
    function onComplete(args)
    {
        $get('data').innerHTML=''
        for(var i=0;i<args.length;i++)
        {
            initTemplateValues(args[i].Title,args[i].FirstName,args[i].LastName,args[i].DateNow,args[i].BirthDate);
        }
    }
    function onError(args)
    {
        $get('data').innerHTML=args;
    }
    </script>

First we have exec() which calls the server-side method GetVal. Then if the call is sucessful the onComplete methods is called and foreach item in args (which type is Info) we create an area that uses the template defined in our aspx page and we add that template to a div with id results.

Pretty simple don't you think?

Enjoy...!!!

1 Comment