Software Architecture-Page Methods of ASP .Net/AjAX with DataTable control-Yahoo UI library

Objective:To use Page Methods of ASP .Net/AjAX with Yahoo UI library.

Explanation:
There are three approaches to Programming in ASP.NET AJAX.
1. UpdatePanel: Contains a group of server controls and monitors their postbacks and rendering process. Any requests for postback that originate from the contained controls are hijacked and served via script. Changes to the page are applied using DHTML.
2. Remote method calls: Blanket term for asynchronous calls to page methods and local and external Web services. Calls move input arguments and receive return values via JSON streams in a type-independent manner. Strongly typed JavaScript code is required to trigger the call and apply changes back on the client.
3. Client-side data binding: Two client-side controls written entirely in AJAX JavaScript to implement template-based binding. They are ListView, for multiple-records view, and ItemView, for single-record view. These two controls are combined together with client data source and filtering components.
In this Post, we will use Page Methods with Yahoo UI Library.
Page Method is a public static method defined in the codebehind class and decorated with the same WebMethod attribute used for Web service methods.
Yahoo UI Lib is really power full client side UI library.
For details about it, please visit at:
http://developer.yahoo.com/yui/For details about DataTable control, visit:
http://developer.yahoo.com/yui/datatable/
DataTable control major features includes sortable columns, pagination, scrolling, row selection, resizeable columns, and inline cell editing.
Steps:
1. Consider a entity class for showing History Items:

// Sample Object to be returned to client end via Page Method.
    public class HistoryItem{
        public Int32 ID { get; set; }
        public String Name { get; set;}
        public String Desc { get; set; }
        public DateTime Date { get; set;}
    }

2. Define a Page Method as below:

/// <summary>
        ///  Page Method for client side data return
        /// </summary>
        /// <returns> List of HistoryItem object to be returned... </returns>
        [System.Web.Services.WebMethod]
        public static List<HistoryItem> GetPageMethod()
        {
            // Prepare Sample Data
            List<HistoryItem> lst = new List<HistoryItem>
                        { 
                        new HistoryItem { ID = 1, Name = "Created 1" , Desc= "Description 1......Description.....Description....." , Date =  DateTime.Now} ,  new HistoryItem { ID=2 , Desc= "Description 2......Description.....Description.....", Date =  DateTime.Now , Name = "Updated 2" } ,
                        new HistoryItem { ID = 3, Name = "Created 3"  , Desc= "Description 3......Description.....Description.....",Date =  DateTime.Now} ,  new HistoryItem { ID=4 , Desc= "Description 4......Description.....Description.....", Date =  DateTime.Now , Name = "Updated 4 " } ,
                        new HistoryItem { ID = 5, Name = "Created 5"  , Desc= "Description 5......Description.....Description.....",Date =  DateTime.Now} ,  new HistoryItem { ID=6 , Desc= "Description 6......Description.....Description.....", Date =  DateTime.Now , Name = "Updated 6" },
                        new HistoryItem { ID = 7, Name = "Created 7" , Desc= "Description 7......Description.....Description....." , Date =  DateTime.Now} ,  new HistoryItem { ID=8 , Desc= "Description 8......Description.....Description.....", Date =  DateTime.Now , Name = "Updated 8" } ,
                        new HistoryItem { ID = 9, Name = "Created 9"  , Desc= "Description 9......Description.....Description.....",Date =  DateTime.Now} ,  new HistoryItem { ID=10 , Desc= "Description 10......Description.....Description.....", Date =  DateTime.Now , Name = "Updated 10 " }                         
                        };
            // Return Sample Data
            return lst;
        }

3. In ASP .Net page define some includes related to Yahoo UI Library as:

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css">
 
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
 
<!-- OPTIONAL: JSON Utility (for DataSource) -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/json/json-min.js"></script>
 
<!-- OPTIONAL: Connection Manager (enables XHR for DataSource) -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
 
<!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/get/get-min.js"></script>
 
<!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script>
 
<!-- OPTIONAL: Calendar (enables calendar editors) -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/calendar/calendar-min.js"></script>
 
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js"></script>

4. Define some ASP .Net tags as:

    <asp:ScriptManager ID="ScriptManager1" runat="server"   
      EnablePageMethods="True">
</asp:ScriptManager>
    <input id="Button1" type="button" value="Get History data........." onclick='return getData();' /><br /><br />
    <div id="myContainer"></div>

5. Call to Page Method is done via Javascript as below:

<script language="javascript" >
    function getData() {        
        PageMethods.GetPageMethod(onSucceed, onError);
        return false;
    }
    function onSucceed(result) {            
    
       // DataSource for a JavaScript function that returns data
        var dsLocalArray = new YAHOO.util.LocalDataSource(result);
        
       // DataTable columns defination
        var myColumnDefs = [{ key: "ID", label: "ID" }, { key: "Name", label: "Name" }, { key: "Desc", label: "Desc" }, { key: "Date", label: "Date"}];
       
       // DataTable constructor syntax
        var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, dsLocalArray, { sortedBy: { colKey: "Name", dir: "desc" }, rowSingleSelect: true });               
    }
    function onError(result) {
        // Perform Error handling logic here.....
        alert('There is some thing wrong, Check again  .......');
    }

So we are done with sample for fetching data via Javascript via Page methods.

The output will look like as:

Sample code can be downloaded from here. Rename file to pagemethodapp.zip, then extract to get code files
Reference:
http://msdn.microsoft.com/en-us/magazine/cc163480.aspx

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: