Web Dev And Stuff

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}}" />&nbsp; Date:
            <input type="text" value="{{ DateNow.format('dd/MM/yyyy  hh:mm:ss') }}" />&nbsp;
            <!--* if (BirthDate) { *-->
            BirthDate: &nbsp;<input type="text" value="{{ BirthDate.format('dd/MM/yyyy') }}" />
            <!--* } *-->
            <!--* if (!BirthDate) { *-->
            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...!!!

A lot of people have been using facebook and i am sure that everyone has noticed the ajax gallery that faecebook has. In this article we will try to make our own gallery that does the same stuff. When the user clicks on the image he navigates to the next and when the user presses the back button of the browser the previous image is displayed.

We are going to use a new feature of the AJAX Framework which is History Support! (available via the property of ScriptManager, EnableHistory)

First create a new "ASP.NET 3.5 Extensions Web Site"

Then at the aspx page we add :

EnableHistory : Enables the new feature of AJAX Framework which allows the user to navigate back and forward in an AJAX page.

EnableStateHash : If true the url responible for AJAX History is encoded. By Default is true.

OnNavigate : This event is fired when the user clicks the back button of the browser and the ScriptManager makes a postback.

At the aspx.cs page we add :

First we read the image folder (it could be from a database). We strip out the full path and we keep only the image name. Then we check if this is not a postback and we display the first image of our list. When the user clicks the Back Button the Navigate Event of the ScriptManager is fired. We get the current image index and we add +1.

When the user clicks on the ImageButton the Click event is fired. The point of interest at this method is the AddHistoryPoint of the ScriptManager. Using this method we add something that can tell us (when the user clicks the back button) what was the page like in order to be able to recreate it.

You can download the source code from here!

You can view a live example here!

That's it! enJoy!