On .Net, Javascript and more...

Leveraging new delegates in C# 3.0

2010-03-10T01:21:00.007+05:30

I interview a lot of developers and when I ask them about delegates there is this one answer everybody seems to know – “delegates are nothing but function pointers”. Well…my friend, you will be trying hard in the next five minutes to actually point to functions, I think to myself and fire another question – “if I give you a function, can you write me a delegate that can call the function?” and there you see myriads of delegate usages some of which can even stump the mighty compiler . Very few can do it right. If you are getting an unusually uncomfortable feeling, it’s time to revisit this old friend .

Assuming the reader is familiar with fundamental delegate concepts, let me introduce two extremely helpful delegates in the BCL - Action & Func . They have been used heavily in the BCL and as of .Net 4.0 each can represent functions taking up to 16 parameters (1, 2). Let’s look at the usage of each.

Func: Let’s see how Where extension method is defined on the IEnumerable class

public static IEnumerable<TSource> Where<TSource>(this IEnumerable<TSource> source, Func<TSource, Boolean> predicate)
{ 
    foreach (TSource element in source) 
    { 
        if (predicate(element))  
            yield return element; 
    } 
}

The above says you can pass your own method which returns true/false based on your logic to the Where method on any class that implements IEnumerable and you will get a filtered collection back. Sample usage: we have a list of names and we want to get names starting with character ‘a’

List<string> names = new List<string> { "Amit", "Raghu", "Piyush", "Ashok" };

Our helper method would look like:

public static bool StartsWithA(string name) 
{ 
  return name.ToLower().StartsWith("a"); 
}

Here is how we could achieve the result:

var namesStartingWithA = names.Where(StartsWithA);

The above could be done more elegantly with the lambda expression as:

var namesStartingWithA = names.Where(name => name.ToLower().StartsWith("a"));

Action: I’ve long stopped writing foreach loops on collections whenever I want to get a new set of elements from the collection with some action being performed on each element. I use the ForEach extension method now, which is defined as below:

public static void ForEach<T>(this IEnumerable<T> source, Action<T> action)
{
    foreach (T element in source)  
        action(element); 
}

The above basically performs an Action (supplied by the developer) on each element of a collection. Here is how we can use this in the above example for names:

List<string> namesAppendedWithZ = new List<string>(); 
names.ForEach(name => namesAppendedWithZ.Add(string.Format("{0}z", name)));

Lambda expression syntax is used for brevity. We can have a helper method as well to do the same job.

Using Action delegate with events

If you are fond of event based programming like me (observer is my favorite pattern), Action delegate can save you a lot of key strokes. Let’s consider a scenario in which we have a user control on which we can enter Employee information and create a new employee in database. We want to expose an event that can be raised on Employee successful creation and an entity (separate from the user control, e.g. the container form) interested can subscribe to the event and have access to the newly created Employee info. Below is how we can define the event leveraging the Action delegate:

public event Action<Employee> employeeCreatedEvent;

If we are to do this in the traditional sense, we will have to define the event like this:

public event EventHandler<EmployeeEventArgs> employeeCreatedEvent;

With an extra overhead of creating a new EventArgs derived class (data carrier) as below:

public class EmployeeEventArgs : EventArgs 
{
    public Employee EmployeeInfo { get; set; }
}

I’m a lazy programmer and Action delegate is a god send for guys like me . Here is how the event can be raised from the user control:

private void Create()
{
    //Read info from UI and fill employee dto
    Employee emp = new Employee {ID=null, Name=??};
    db.CreateEmployee(emp);
    if(employeeCreatedEvent != null)
        employeeCreatedEvent(emp);
}

And here is how it can be subscribed to on the interested component:

ucEmployee.employeeCreatedEvent += new Action<Employee>(ucEmployee_employeeCreatedEvent);

That’s all, hope this is useful.

Happy Programming!!

- Pushp

Comparing two objects for equality [Value Equality]

2009-05-07T17:15:00.004+05:30

There could be numerous implementations for comparing two objects for equality. Here is the generic implementation of the comparer I have been using:

namespace Utilities
{
    using System.Runtime.Serialization.Formatters.Binary;
    using System.IO;

    public class ComparerUtil
    {
        public static bool ValueEquals<T>(T lhs, T rhs)
        where T : class
        {
            BinaryFormatter formatter = new BinaryFormatter();
            MemoryStream lhsStream = new MemoryStream();
            MemoryStream rhsStream = new MemoryStream();

            try
            {
                if ((lhs == null) && (rhs == null))
                    return true;
                if ((lhs == null) || (rhs == null))
                    return false;
                formatter.Serialize(lhsStream, lhs);
                formatter.Serialize(rhsStream, rhs);

                byte[] lhsByteArray = lhsStream.ToArray();
                byte[] rhsByteArray = rhsStream.ToArray();

                return ArrayValueEquals(lhsByteArray, rhsByteArray);
            }
            finally
            {
                lhsStream.Close();
                rhsStream.Close();
            }
        }

        public static bool ArrayValueEquals<T>(T[] lhsArray, T[] rhsArray)
        {
            if (lhsArray.Length != rhsArray.Length)
                return false;

            for (int index = 0; index < lhsArray.Length; ++index)
                if (!lhsArray[index].Equals(rhsArray[index]))
                    return false;

            return true;
        }
    }
}

The above implementation does a byte-by-byte comparison after serializing the two objects in question to binary format. This means that the two objects being compared must be serializable. Note the usage of generics which are available only .Net 2.0 upwards. If you are using .Net 3.5 (which is cool ;)), consider writing the implementation using Extension Methods.

Cheers,
Pushp

Two nifty tools to increase your productivity on windows

2008-09-07T19:47:00.001+05:30

While there are a number of tools to make your life hassle free on windows, the two I found very useful are below:

Launchy: No more searching through your all programs to find that program whose location you d0n't exactly remember or don't care to remember. Just type first few letters of the program name and you have it, right from your desktop.
USB Disk Ejector: If you keep most of your data on portable drives or happen to do a lot of plug-in and plug-out on your USB drive, this one could save you a lot of time. No more right-clicking that pathetic windows system tray icon and going through all that "Safe Eject" thing. Here is a nice tutorial to get max out of this nice little utility.

Enjoy!!

Leveraging Asp.Net WebForms Client Library

2008-05-20T10:35:00.015+05:30

While working with asp.net, most front end developers have their own javascript library of utility functions like: (get/set)ElementPosition, getScroll(x/y), (add/remove)ClassName, etc. Most of the times there is no need to have your own versions of some of the more commonly used javascript utility functions as they are already present in the Webresourse.axd javascript file embedded (not always) in your asp.net page and most importantly the functions are Cross Browser. The utility functions in this client library are used for asp.net callbacks & postbacks, in addition to being used by asp.net validation, treeview and menu client libraries (yes, there are seperate libraries for all these). So, if you are using asp.net menu/treeview/validators/callbacks on your webpage, you can happily use the functions provided in the library. If you want to ensure that the library is included in your page, just use a nice to have feature in your asp.net page: MaintainScrollPositionOnPostback:


  <%@ Page Language="C#" MaintainScrollPositionOnPostBack="true" 
    AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

or appliying it sitewide thru web.config as:


   <system.web>
      <pages maintainScrollPositionOnPostBack="true">
      </pages>
   </system.web>

The script file is included in my page as:

<script type="text/javascript" src="/TestWebsite/WebResource.axd?d=X2ApKqYNd-qiVRFcah5bwg2&t=633437918395970000">

Following is the list of some of the commonly used functions present in the library:

    WebForm_GetScrollX

    WebForm_GetScrollY

    WebForm_SetElementX

    WebForm_SetElementY

    WebForm_GetElementById

    WebForm_SetElementWidth

    WebForm_SetElementHeight

    WebForm_RemoveClassName

    WebForm_AppendToClassName

    WebForm_GetParentByTagName

    WebForm_GetElementByTagName

    WebForm_GetElementsByTagName

    WebForm_GetElementPosition - another version here

Hope this is helpful.

pushp

AJAX Issues With WATIN

2008-04-03T01:32:00.008+05:30

Recently I started Automating the UI test cases for our AJAX enabled asp.net website with Watin. It was not long before that I ran into problems as Watin seems to be ajax postback agnostic.

I had a master dropdownlist and a child dropdownlist (this is disabled until something is selected in the master DDL). On the selection of an item in the master DDL there is an AJAX postback that would get data for the child DDL and then an item in the child DDL will be selected. To automate this scenario I wrote the following code:


      IE ie = new IE("http://localhost/MySite/Default.aspx");
      SelectList ddlMaster = ie.SelectList("ddlMaster");
      ddlMaster.Option(Find.ByValue("India")).Select();
      SelectList ddlChild = ie.SelectList("ddlChild");
      ddlChild.Option(Find.ByValue("Hyderabad")).Select();

The Problem: The first DDL gets selected perfectly and an asynchronous postback happens but I get an exception in the fourth line (which tries to select a value in the child DDL) saying "Could not find OPTION element tag matching criteria: Attribute 'value' with value 'Hyderabad'". The problem was clear - we are trying to select a value in the child DDL before asynchronous postback is over and the child DDL is populated with values.

The first thought that came into my mind was to put a Thread.Sleep but I know it wasn't a good solution since I can never be sure of how long the asynchronous request is going to take. So I looked for something that could tell me if page is still in async postback. Enter the PageRequestManager Class in asp.net ajax. It has a property called isInAsyncPostback that you can query to know if page is in async postback. So all I needed was a way to run some javascript from the code and thank god, there is Eval in Watin to do just that.

The Solution:

1)Updated the aspx page with a method to return true if page is in async postback as below:


    <asp:ScriptManager ID="scrptMgr" runat="server" EnablePartialRendering="true">
    </asp:ScriptManager> <!-- script manager shown for completeness -->
    <script type="text/javascript">
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      function IsPageInAsyncPostback(){
            return prm.get_isInAsyncPostBack();
         }
    </script>

2) Wrote a helper method to wait until async postback is complete:


   private static void WaitForAsyncPostBackToComplete(IE ie)
      {
          bool isInPostback = true;
          while (isInPostback)
          {
             isInPostback = Convert.ToBoolean(ie.Eval("IsPageInAsyncPostback();"));
             if (isInPostback)
                 Thread.Sleep(200); //sleep for 200ms and query again
          }
     }

3) Updated the test scenario code as below:


   IE ie = new IE("http://localhost/MySite/Default.aspx");
   SelectList ddlMaster = ie.SelectList("ddlMaster");
   ddlMaster.Option(Find.ByValue("India")).Select();
   WaitForAsyncPostBackToComplete(ie);
   SelectList ddlChild = ie.SelectList("ddlChild");
   ddlChild.Option(Find.ByValue("Hyderabad")).Select();

and all was merry!!!

Hope this is helpful.

pushp

Asp.Net Viewstate

2007-06-20T17:10:00.000+05:30

One of the most neglected(in terms of understanding) and most used(functionally) features of asp.net is Viewstate. Most of the times the asp.net developer keep using viewstate feature as a black box. I don't need to tell you Viewstate can make hell lot of difference in the performance of your site, IF USED PROPERLY.

The other day i stumbled upon an excellent article that tells you everything you need to know about asp.net viewstate. Check it out here: http://weblogs.asp.net/infinitiesloop/archive/2006/08/03/Truly-Understanding-Viewstate.aspx

Happy Programming!!

Firefox is the way to go..

2007-06-18T14:56:00.000+05:30

This one is for those of you who have not yet embraced Mozilla's great browser Firefox. Firefox is designed for speed and security and i can assure you once you experience the power of fifefox you'll not try anything else again. Yes, the new browser from Microsoft, Internet Explorer 7 has introduced some good features besides mimicking Firefox's Tabbed Interface but it still sucks when it comes to speed. IE7 gets frustratingly slow if you open up a few tabs. Besides, firefox is having some great add-ons(out of hundreads of add-ons available) that you would just love.

Few of my favourite ones are:

Cooliris Previews: This add-on allows you to preview links on a page, i.e., you can view pages pointed to by the links on the current page, directly inside your current page without leaving it.

IE Tab: Some sites render properly only in IE and they would have imperfect appearance in Firefox(experienced this with MSDN site a lot). Now we have a great add-on called IE Tab that embeds IE directly in the firefox tabs. In effect IE's rendering engine is used for the sites you would like to open in IE.

FoxMarks: Take your bookmarks wherever you go.

Finally, if you are a web developer Firebug is indispensable.

Folks, don't miss this great experience anymore...go and install Firefox.

.Net Rocks

2007-06-18T12:33:00.000+05:30

Yes, .Net Rocks...it gets amazingly better with every new release of the framework. The proof of the kind of applications that can be built using the latest release .net framework 3.0 is for all to see here: http://select.nytimes.com/gst/timesreader.html

Now that's cool. Hope i've that for my favourite newspaper.

Hanselman calls it the First Killer App built on the latest release of .Net framework.

The only hitch here is that you must have .Net framework 3.0 installed on your box, that's a prerequisite. If you're running Windows Vista, even that is not needed as Vista comes pre installed with .Net framework.

Get ready to see an era of really great applications.

pushp

Getting TreeNode values on the client side with javascript

2007-06-13T10:20:00.007+05:30

In a lot of scenarios it is required to get the value of a treenode (for an asp.net treeview) on the client side. While on the server we can get the nodevalue directly via the Value property of the Treenode, on the client it seems there is no corresponding attribute added to the anchor(yes treenodes are rendered as anchor(<a ..) tags) . Getting the node's text is easy - just get hold of the node's anchor element and call its innerText property. But how do we get the node value? Well, if you look closely at the rendered HTML for the node, you could find the node value lurking inside the href property for the node (provided you have not set the NavigateUrl property for the node manually). Something like:

href="javascript:__doPostBack('TreeView1','sRoot\\firstChild\\...\\nodeValue')"

All we have to do is to extract that bold part from what the href property gives us.
Whereas there may be various scenarios where we may need the node value on the client, I would demonstrate it for the case of the node click itself - you want the value when you click a treenode. Try this:

1) Add an attribute to the treeview in code behind as:


if (!IsPostBack)
{
    TreeView1.Attributes.Add("onclick", "return OnTreeClick(event)");
}

2) Put the below code in head tag of .aspx page


<script type="text/javascript">
function OnTreeClick(evt) {
    var src = window.event != window.undefined ? window.event.srcElement : evt.target;
    var nodeClick = src.tagName.toLowerCase() == "a";
    if (nodeClick) {
        //innerText works in IE but fails in Firefox (I'm sick of browser anomalies), so use innerHTML as well
        var nodeText = src.innerText || src.innerHTML;
        var nodeValue = GetNodeValue(src);
        alert("Text: " + nodeText + "," + "Value: " + nodeValue);
    }
    return false; //comment this if you want postback on node click
}
function GetNodeValue(node) {
    var nodeValue = "";
    var nodePath = node.href.substring(node.href.indexOf(",") + 2, node.href.length - 2);
    var nodeValues = nodePath.split("\\");
    if (nodeValues.length > 1)
        nodeValue = nodeValues[nodeValues.length - 1];
    else
        nodeValue = nodeValues[0].substr(1);

    return nodeValue;
}
</script>

Another scenario i can think of is when you have check boxes in the treeview and you want to get the nodevalue for the node that is checked. In that case you can just get the checkbox ( rendered as input tag) element first and then you can get the reference to the node via the nextSibling property for the checkbox.

That's all. Hope this is helpful.

pushp

Client Side Expand/Collapse All Nodes For ASP.NET 2.0 Treeview

2007-06-05T09:46:00.003+05:30

The asp.net treeview provides a lot of features/functions, one of which is the Expand/Collapse All functionality on the server side. The Treeview Control has got two function for doing just that: TreeView.ExpandAll(), TreeView.CollapseAll(). But going to server to accomplish such a simple functionality seemed a little odd to me. So, I wrote some javascript that does precisely the same. Checkout the below script:


function TreeviewExpandCollapseAll(treeViewId, expandAll)
 {
      var displayState = (expandAll == true ? "none" : "block");
      var treeView = document.getElementById(treeViewId);
      if(treeView)
      {
          var treeLinks = treeView.getElementsByTagName("a");
          var nodeCount = treeLinks.length;
               
          for(i=0;i<nodeCount;i++)
          {
               if(treeLinks[i].firstChild.tagName)
               {
                   if(treeLinks[i].firstChild.tagName.toLowerCase() == "img")
                   {
                       var currentToggleLink = treeLinks[i];
                       var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                       if (childContainer.style.display == displayState) 
                        {
                           eval(currentToggleLink.href);
                        }
                  }
               }
          }//for loop ends
      }
}

 //utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj)
{
   var parent = childElementObj.parentNode;
   while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
   {
      parent = parent.parentNode;
   }
 return parent;
}

Get Formatted Version Of Above Script

The above script could be used as:

<a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', true)">Expand All</a>
<a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', false)">Collapse All</a>
<asp:TreeView ID="TreeView1" .....................

That's all there is to it.

Hope this is helpful.

Update (7/25/2008): The script has been updated to fix a minor bug concerning the toggle images being screwed up if ShowLines is false for the treeview. Thanks to comments from users, particularly to ryan.

pushp

Asp.Net 2.0 Treeview Checkbox Check/Uncheck All script

2007-06-04T11:57:00.000+05:30

Its a very common requirement to have the parent-child check behaviour in asp.net treeview. To define the problem:
1)Check all the child nodes if the parent is checked and uncheck all child nodes if parent is unchecked ( well, this part is simple).
2)If a node at any level is checked and all its siblings are already checked then the parent node should be checked and the same should apply for the parent node(i.e., if its siblings are checked....), this should happen till the root node.
3)If a node at any level is unchecked then the parents( ma, grand ma, grand grand ma....) up to the root node must be unchecked.

Well there have been scripts on the net that only half accomplished the task(check footnotes). So I wrote the script that solves the problem completely, upto best of my knowledge. I've tested in IE 7 and Firefox 2.0, hope it works fine for you all.

Here's how to implement it:

Step 1: In the page load in code behind file add an attribute to the treeview as:

If(!isPostBack)
{
TreeView1.Attributes.Add("onclick","OnTreeClick(event)");
}

The desired affect could also be accomplished by direclty adding the attribute to the treeview tag in .aspx file as: <asp:treeview onclick="OnTreeClick(event)"... which would cause Visual Studio to display a warning but it works anyway but the codebehind way of doint it is the right way.

Step 2: Put the below script in the head section of your .aspx page:


function OnTreeClick(evt)
{
 var src = window.event != window.undefined ? window.event.srcElement : evt.target;
 var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
 if(isChkBoxClick)
 {
     var parentTable = GetParentByTagName("table", src);
     var nxtSibling = parentTable.nextSibling;
     //check if nxt sibling is not null & is an element node
      if(nxtSibling && nxtSibling.nodeType == 1)
     {
         if(nxtSibling.tagName.toLowerCase() == "div") //if node has children
         {
             //check or uncheck children at all levels
             CheckUncheckChildren(parentTable.nextSibling, src.checked);
         }
     }
 //check or uncheck parents at all levels
 CheckUncheckParents(src, src.checked);
 }
}

 function CheckUncheckChildren(childContainer, check)
{
 var childChkBoxes = childContainer.getElementsByTagName("input");
      var childChkBoxCount = childChkBoxes.length;
 for(var i=0;i<childChkBoxCount;i++)
 {
     childChkBoxes[i].checked = check;
 }
}

function CheckUncheckParents(srcChild, check)
{
 var parentDiv = GetParentByTagName("div", srcChild);
 var parentNodeTable = parentDiv.previousSibling;
 if(parentNodeTable)
 {
     var checkUncheckSwitch;
     if(check) //checkbox checked
     {
         var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
         if(isAllSiblingsChecked)
                 checkUncheckSwitch = true;
         else
                 return; //do not need to check parent if any(one or more) child not checked
     }
     else //checkbox unchecked
     {
         checkUncheckSwitch = false;
     }
   
     var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
     if(inpElemsInParentTable.length > 0)
     {
         var parentNodeChkBox = inpElemsInParentTable[0];
         parentNodeChkBox.checked = checkUncheckSwitch;
         //do the same recursively
        CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
     }
 }
}

function AreAllSiblingsChecked(chkBox)
{
 var parentDiv = GetParentByTagName("div", chkBox);
 var childCount = parentDiv.childNodes.length;
 for(var i=0;i<childCount;i++)
 {
     if(parentDiv.childNodes[i].nodeType == 1)
     {
         //check if the child node is an element node
         if(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
         {
             var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
             //if any of sibling nodes are not checked, return false
             if(!prevChkBox.checked)
             {
                 return false;
             }
         }
     }
 }
 return true;
}

//utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj)
{
 var parent = childElementObj.parentNode;
 while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
     {
         parent = parent.parentNode;
     }
 return parent;
}

Get Formatted Version Of Above Script

The script is pretty much self explanatory with function names saying it all.
Comments awaited.

Footnotes: There has been other scripts on the net that accomplished the job only partially, the one that reached closest to doing it could be found in this thread on asp.net forums, i too have posted my solution there.