Click here to Skip to main content
15,884,237 members
Articles / Web Development / ASP.NET

COMET (or Reverse AJAX) based Grid Control for ASP.NET Web Applications - Scalable, High Performance and Low Latency Grid Control

Rate me:
Please Sign up or sign in to vote.
4.81/5 (49 votes)
1 Apr 2009CPOL8 min read 229K   5K   138  
A COMET/Reverse Ajax based Web Grid Control, which can be used in ASP.NET web application. This control posts the updates to the client based on Server side event(s) thereby reducing network round trips.
// Copyright (c) 2000, 2002 - 2012 Bharath K A
//
// CREATED: Sunday March 29 11:08:13 CST 2009 by Bharath K A
//
// LAST CHANGED:
//
// AUTHOR: Bharath K A
//
// Copyright 2005 by Bharath K A
// All rights reserved.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Threading;

namespace BK.Util
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:GridControlCometAjax runat=server></{0}:GridControlCometAjax>")]
    public class GridControlCometAjax : Table
    {
        private String[,] dynTableContent;
        private Color[,] dynTableColor;

        private int rowCount, colCount;
        private bool loadDS;
        private object lockObj = new object();
        private AutoResetEvent updateEvent;

        public GridControlCometAjax()
        {
            loadDS = false;

            updateEvent = new AutoResetEvent(false);
            rowCount = this.Rows.Count;
            if (rowCount == 0)
            {
                colCount = 0;
                return;
            }
            else
            {
                colCount = this.Rows[0].Cells.Count;
            }

            dynTableContent = new String[rowCount,colCount];
            dynTableColor = new Color[rowCount, colCount];
            
        }

        public void LoadControl(Page PageLoading)
        {
            

            string clientScript = @"<script type=""text/javascript"">
                                                   //<![CDATA[
                                                    {
                                                    function serverRequest" + this.ClientID + @"(args,context)
                                                    { 
                                                        var objXmlDoc = new ActiveXObject(""Msxml2.DOMDocument"");
            
                                                        var url = ""~/GridControlCometAjax.ashx?" + this.ClientID + @""";
                                                        var req;
                                                        if (window.XMLHttpRequest && !(window.ActiveXObject))
                                                        {
                                                            try
                                                            {
                                                                req = new XMLHttpRequest();
                                                            }
                                                            catch (e)
                                                            {
                                                                req = false;
                                                            }
                                                            // branch for IE/Windows ActiveX version
                                                        }
                                                        else if (window.ActiveXObject)
                                                        {
                                                            try
                                                            {
                                                                req = new ActiveXObject(""Msxml2.XMLHTTP"");
                                                            }
                                                            catch (e)
                                                            {
                                                                try
                                                                {
                                                                    req = new ActiveXObject(""Microsoft.XMLHTTP"");
                                                                }
                                                                catch (e)
                                                                {
                                                                    req = false;
                                                                }
                                                            }
                                                        }
                                                        req.onreadystatechange=function()
                                                        {  
                                                            try
                                                            {
                                                            if(req.readyState == 4 && req.status==200)
                                                            {  
                                                                if (req.responseXML.childNodes.length != 0)
                                                                {
                                                                    var NoOfRows = req.responseXML.childNodes(1).childNodes(0).childNodes(0).text;
                                                                    var NoOfCells = req.responseXML.childNodes(1).childNodes(0).childNodes(1).text;
                                                                    var Counter = 0;
                                                                    var RowItem = 0;
                                                                    var CellItem = 0;
            
                                                                    for(RowItem = 0; RowItem < NoOfRows; RowItem++)
                                                                    {
                                                                        for(CellItem = 0; CellItem < NoOfCells; CellItem++)
                                                                        {
                                                                            if (document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].innerText != req.responseXML.childNodes(1).childNodes(1).childNodes(Counter).text)
                                                                            {
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.textDecorationUnderline = true;
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].borderColor = req.responseXML.childNodes(1).childNodes(2).childNodes(Counter).text;
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].innerText = req.responseXML.childNodes(1).childNodes(1).childNodes(Counter).text;             
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.color = req.responseXML.childNodes(1).childNodes(2).childNodes(Counter).text;             
                                                                            }
                                                                            else
                                                                            {
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.textDecorationUnderline = false;
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].borderColor = """";
                                                                                document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.color = ""Black"";             
                                                                            }
                                                                            Counter++;
                                                                        }
                                                                    }
            
                                                                }
                                                               
                                                                eval(""callServer" + this.ClientID + @"();"");
                                                            }
                                                            }
                                                            catch(e)
                                                            {
                                                                alert(""Error occured.  Retry or Refresh the page"");
                                                            }
  
                                                        }
                                                        req.open(""POST"", url, true);
                                                        req.send(null);
                                                    } 
                                                    
                                                    function callServer" + this.ClientID + @"(){
                                                        serverRequest" + this.ClientID + @"(); } callServer" + this.ClientID + @"();}//]]>
                                                    </script>";
//            string clientScript = @"<script type=""text/javascript"">
//                                       //<![CDATA[
//                                        {
//                                        function serverRequest" + this.ClientID + @"(args,context)
//                                        { 
//                                            var objXmlDoc = new ActiveXObject(""Msxml2.DOMDocument"");
//
//                                            var url = ""~/GridControlCometAjax.ashx?" + this.ClientID + @""";
//                                            var req = new ActiveXObject(""Microsoft.XMLHTTP"");
//                                            req.onreadystatechange=function()
//                                            {  
//                                                if(req.readyState == 4)
//                                                {  
//
//                                                    if (req.responseXML.childNodes.length != 0)
//                                                    {
//                                                        var NoOfRows = req.responseXML.childNodes(1).childNodes(0).childNodes(0).text;
//                                                        var NoOfCells = req.responseXML.childNodes(1).childNodes(0).childNodes(1).text;
//                                                        var Counter = 0;
//                                                        var RowItem = 0;
//                                                        var CellItem = 0;
//
//                                                        for(RowItem = 0; RowItem < NoOfRows; RowItem++)
//                                                        {
//                                                            for(CellItem = 0; CellItem < NoOfCells; CellItem++)
//                                                            {
//                                                                if (document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].innerText != req.responseXML.childNodes(1).childNodes(1).childNodes(Counter).text)
//                                                                {
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.textDecorationUnderline = true;
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].borderColor = req.responseXML.childNodes(1).childNodes(2).childNodes(Counter).text;
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].innerText = req.responseXML.childNodes(1).childNodes(1).childNodes(Counter).text;             
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.color = req.responseXML.childNodes(1).childNodes(2).childNodes(Counter).text;             
//                                                                }
//                                                                else
//                                                                {
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.textDecorationUnderline = false;
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].borderColor = """";
//                                                                    document.getElementById('" + this.ClientID + @"').rows[RowItem].cells[CellItem].style.color = ""Black"";             
//                                                                }
//                                                                Counter++;
//                                                            }
//                                                        }
//
//                                                    }
//                                                   
//                                                    eval(""callServer" + this.ClientID + @"();"");
//                                                }  
//                                            }
//                                            req.open(""POST"", url, true);
//                                            req.send(null);
//                                        } 
//                                        
//                                        function callServer" + this.ClientID + @"(){
//                                            serverRequest" + this.ClientID + @"(); } callServer" + this.ClientID + @"();}//]]>
//                                        </script>";

            PageLoading.Page.ClientScript.RegisterStartupScript(this.GetType(), "startup" + this.ClientID, clientScript);
            
            LoadMultiMapOnce();
            GridAsynchHandler.RegisterControl(this);
        }

        private void LoadMultiMapOnce()
        {
            if (!loadDS)
            {
                rowCount = this.Rows.Count;
                if (rowCount == 0)
                {
                    colCount = 0;
                    return;
                }
                else
                {
                    colCount = this.Rows[0].Cells.Count;
                }
                dynTableContent = new String[rowCount, colCount];
                dynTableColor = new Color[rowCount, colCount];

                lock (lockObj)
                {
                    for (int RowItem = 0; RowItem < rowCount; RowItem++)
                    {
                        for (int CellItem = 0; CellItem < colCount; CellItem++)
                        {
                            dynTableContent[RowItem, CellItem] = this.Rows[RowItem].Cells[CellItem].Text;
                            if (this.Rows[RowItem].Cells[CellItem].ForeColor == Color.Empty)
                            {
                                dynTableColor[RowItem, CellItem] = this.ForeColor;
                            }
                            else
                            {
                                dynTableColor[RowItem, CellItem] = this.Rows[RowItem].Cells[CellItem].ForeColor;
                            }
                        }
                    }
                }
                loadDS = true;
            }
        }

        public override void RenderControl(HtmlTextWriter writer)
        {
            
            base.RenderControl(writer);
        }

        public void DynModifyTableItem(int Row, int Column, string ValueToReplace, bool SendUpdateNow)
        {
            lock (lockObj)
            {
                dynTableContent[Row, Column] = ValueToReplace;
            }

            if (SendUpdateNow)
            {
                DynUpdateAllClients();
            }
        }

        public void DynModifyTableItemColor(int Row, int Column, Color ColorToModify, bool SendUpdateNow)
        {
            lock (lockObj)
            {
                dynTableColor[Row, Column] = ColorToModify;

            }
            if (SendUpdateNow)
            {
                DynUpdateAllClients();
            }
        }

        public void DynModifyItemAndColor(int Row, int Column, string ValueToReplace, Color ColorToModify, bool SendUpdateNow)
        {
            lock (lockObj)
            {
                dynTableColor[Row, Column] = ColorToModify;
                dynTableContent[Row, Column] = ValueToReplace;
            }
            if (SendUpdateNow)
            {
                DynUpdateAllClients();
            }
        }

        internal string DynGetContent(int Row, int Col)
        {
            string retVal = "";

            lock (lockObj)
            {
                retVal = dynTableContent[Row, Col];
            }

            return retVal;
        }

        internal Color DynGetColor(int Row, int Col)
        {
            Color retVal = Color.Black;

            lock (lockObj)
            {
                retVal = dynTableColor[Row, Col];
            }

            return retVal;
        }

        public int DynRowCount
        {
            get
            {
                return rowCount;
            }
        }

        public int DynColCount
        {
            get
            {
                return colCount;
            }
        }


        public void DynUpdateAllClients()
        {
            updateEvent.Set();
        }

        internal AutoResetEvent UpdateEvent
        {
            get
            {
                return updateEvent;
            }
        }


     
    }
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions