Attention: We have retired the ASP.NET Community Blogs. Learn more >

Reduce ASP.NET Page size and complexity using JQuery-Part 1

This is my first post on asp.net blog. ASP.NET Ajax and JQuery are two different ajax framework. In this post I will show, how we can enhance gridview using ASP.NET Ajax and JQuery. I also compare the implementation of these frameworks. In next posts i will explain more about JQuery and ASP.NET Ajax and also tell you "How to combine the power of both framework". My Future post will related to ASP.NET and related frameworks.   

You can download the solution code here

In web based application for displaying data developers generally used grid view. We can enchance gridview to support tooltip, mouseover, mouseout and click effect using ASP.NET Ajax/JQuery.

Below image will show this effect on page

Gridview Effect 


the XHTML code for creating and populating GridView is shown in the grid.

<%@ Page Language="C#" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="head" runat="server">    <title>With MS Ajax</title>    <link type="text/css" href="StyleSheets/iGridView-classic.css" rel="stylesheet" />    <link type="text/css" href="StyleSheets/iGridView-common.css" rel="stylesheet" />    <style type="text/css">        body         {            width:95%;             padding-left:20px;            font-family:Arial;            font-size:10pt;            padding-right:20px;        }    </style></head><body onload="formatTable('<%= this.gv.ClientID %>');">    <form id="form" runat="server">        <asp:ScriptManager runat="server" />        <asp:ObjectDataSource ID="odsCustomers" runat="server"         SelectMethod="Select" TypeName="CustomerOrdersDataObject" />        <div>            <asp:GridView ID="gv" runat="server" CssClass="iGridViewi iGridView-classic"             AutoGenerateColumns="false" DataSourceID="odsCustomers">                <RowStyle CssClass="data-row" Wrap="false" VerticalAlign="middle" />                <HeaderStyle CssClass="header-row" />                <Columns>                    <asp:BoundField HeaderText="OrderID" DataField="OrderID" />                    <asp:BoundField HeaderText="ProductName" DataField="ProductName" />                    <asp:BoundField HeaderText="UnitPrice" DataField="UnitPrice" />                    <asp:BoundField HeaderText="Discount" DataField="Discount" />                    <asp:BoundField HeaderText="Quantity" DataField="Quantity" />                    <asp:BoundField HeaderText="ContactTitle" DataField="ContactTitle" />                    <asp:BoundField HeaderText="ContactName" DataField="ContactName" />                    <asp:BoundField HeaderText="CompanyName" DataField="CompanyName" />                </Columns>            </asp:GridView>        </div>    </form></body></html>                           

Microsoft ASP.NET Ajax provided client side library to work with JavaScript. You can easily use it in your web page.

The following script I used to implement the mouseover, mouseout, click event and tooltip for each cell in GridView using ASP.NET Ajax

<script type="text/javascript">        function formatTable(gvID){            //get the gridview            var gv = $get(gvID);            //get numbers of column in grid view            cols = gv.rows[0].cells.length - 1;            //get numbers of rows in grid view            rows = gv.rows.length -1;            //intialized looping variables            var i=0;             var j=0;            //loop for each row in gridview            for(i=0;i<rows;i++){                //attach mouseover event for row                 $addHandler(gv.rows[i], "mouseover", mouseOver);                //attach mouseout event for row                $addHandler(gv.rows[i], "mouseout", mouseOut);                //attach click event for row                $addHandler(gv.rows[i], "click", onClick);                 //loop for each cell in row                for(j=0;j<cols;j++){                        //set tooltip for cells in row                    setTitle(gv.rows[i].cells[j]);                                         }            }            }        function setTitle(object){            //check browser type            if(Sys.Browser.name =="Firefox"){            object.title = object.textContent;            }            else{            object.title = object.innerText;            }        }                function mouseOver(objectEvent){            //is row already clicked            if(! isClickedStyleSet(objectEvent.target.parentNode.className))            {            //set class name            objectEvent.target.parentNode.className = "row-over" ;            //check browser type             if(Sys.Browser.name !="Firefox"){                objectEvent.target.parentNode.style.cursor ="hand";            }}        }        function mouseOut(objectEvent){            //is row already clicked            if(! isClickedStyleSet(objectEvent.target.parentNode.className)){            //set class name            objectEvent.target.parentNode.className = "data-row" ;        }}        function onClick(objectEvent){            //set class name            objectEvent.target.parentNode.className = "row-select" ;        }        function isClickedStyleSet(className){            //if row is already clicked return true            if(className == "row-select"){            return true;            }            return false;        }

</script>


For JQuery implementation, I removed the following line from xhtml

<asp:ScriptManager runat="server" />

<RowStyle CssClass="data-row" Wrap="false" VerticalAlign="middle" />
The following script I used to implement the mouseover, mouseout, click event and tooltip for each cell in GridView using JQuery

<script type="text/javascript">        function formatTable(){            //get all row in gridview table and set style/event/attribute on them            $("table#<%= this.gv.ClientID %> tr")            .addClass("data-row")            .mouseover(function(){            this.className = "row-over";            if(! jQuery.browser.mozilla){            this.style.cursor ="hand";            }})            .mouseout(function(){            this.className = "data-row" ;            })            .click(            function(){            this.className = "row-select" ;            });            //get all cell in gridview table and set style/event/attribute on them            $("table#<%= this.gv.ClientID %> td")            .addClass("data-row")            .css("white-space", "nowrap")            .css("vertical-align", "middle")            .mouseover(function(){            setTitle(this);            });        }                function setTitle(object){            //check browser type              if(jQuery.browser.mozilla){                object.title = object.textContent;            }            else{                object.title = object.innerText;            }        }

</script>


Getting all object using id/tag/class is very easy in JQuery, In one line you can implement all the attribute, event,class using “.”

The following line give all row in gridview table
$("table#<%= this.gv.ClientID %> tr") The following line give all cell in gridview table
$("table#<%= this.gv.ClientID %> td")
For network monitoring, I used Firebug for FireFox 3
You can download FireBug from here

Below image for ASP.NET Ajax implementation related files 

With MS Ajax 


Below image show JQuery related implementation files

With JQuery 


It clear from the figure that after JQuery implementation
  • The aspx file size is reduce
  • ASP.NET Ajax files are not required
  • You can search/get DOM elements easily
  • Loop is not required for setting attribute/event/css on array of element
  • In one line you can set all attribute/event/css of elements using "."

 

I will discuss more JQuery feature in next post, If you also want the video cast of this article please reply/post your comment for this article.  

Soultion files you can download here

kick it on DotNetKicks.com

9 Comments

  • You're not really using ASP.NET AJAX. You've added the ScriptManager, but you aren't using any of the AJAX controls. So the real difference is just between the sizes of the JQuery JavaScript versus the JavaScript inline script that you added to the ASPX page.

    This is a comparison of standard JavaScript coding versus the JavaScript of JQuery, which doesn't make a lot of sense, since you could still use the JQuery JavaScript syntax for the datagrid anyways since there's no AJAX going on in either example.

    What are the asynchronous calls being made by ASP.NET AJAX versus the JQuery asynchronous calls? The Firebug screenshot doesn't show any asynchronous calls either.

  • This is the part 1 of the JQuery- ASP.NET AJAX series, thats why I want to make it simple, In future parts I will explain, compare and combine more features of these frameworks, including ACT and JQuery Controls.

  • Great post! Might I make 1 minor suggestion however (blog specific, not post specific) - if you plan to post more entries about programming (which im assuming is a fairly safe assumption) - you might want to consider switching your blog to fluid 100% width, so you can post unscaled screens of your code. Just my 2 cents which probably isn't worth that ;)

  • Thanks for your suggestion. If I am posting my blog using 100% fluid width, My images are cutting, due to limitation on asp.net blog, thats why I put it in a div with fixed width.

  • Yes, there's no true "ajax" here but i still think it's a good example. part of both of these frameworks is the additions to the DOM including the $(..) and $get(..) syntax.

    Could you perhaps break down the diff. in size more? Is the MS Ajax framework too bulky? Is the jquery reference you're using compressed/minified?

    Thanks

  • Please see the part 2 of this post for Ajax. Yah MS AJAX files are compressed using gzip and JQuery file is also minified.

  • A very good example. JQuery is always better then ASP.net AJAX

  • You're not really using ASP.NET AJAX. You've added the ScriptManager, but you aren't using any of the AJAX controls.. when you plan for next post .. hope that would be useful for us.

    Best Wishes

  • ni pooka katla vundi first poi gudda kaduko pole

Comments have been disabled for this content.