the WebNeck

Handling ASP.Net Session Variables

the WebNeck — Thu, 15 Apr 2010 18:11:00 +0500

There are a multitude of ways to implement Session Variables but developers need know when to use them, a full-proof way on how to minimize errors, and then a good way to implement them which minimizes code written. This article is meant to address these issues.

Some say: Cookies "Good", Session Variables "Bad"

This is only true in some scenarios, when there is a need to have variables which are global in scope for a user's session which do not hold sensitive information. Sensitive information would be something like user logins and passwords, and any information that maybe part of a secure site (https). Also, if your site is using a database all these variables should be kept there, there are ways on the db side which can be implemented to secure this sensitive information even further. In addition, the use of session variables increases the overhead on the server and cookies reduce this overhead, especially on large sites with a multitude of users.

So when should session variables be used? Well, when a database is unavailable, when there is a need to keep private information private and to be able use this information globally throughout the site for the user's session.

How Not To Implement Session Variables

Many sites have implemented a poor method of using session variables mainly, because it was easy and not much thought given to the impact of this implementation down the road. Here is a common way, but a poor way of implementing the use Session Variables:

// Poor Implementation: Writing to a session variable
Session["Password"] = strSomeTextBox.Text;
        
// Poor Implementation:  Reading from a session variable
string strPassword = Session["Password"].ToString();

Although, the syntax is correct, this implementation is just asking for trouble. Ok, now the site has grown to ~100 pages, ask the questions:

How many session variables are in use?
What are they?
and... How many times have you seen the 'NullReferenceException' error when debugging?

This drives a point home, huh...

Implementing Session Variables with Class

This method will implement 2 new classes. The first one will be a simple, static, shared class which will keep track of all the session variables used and avoids the 'NullReferenceException' errors. The second class is one that will override the default Page class, it will test the condition if the session is still valid, and if not, provide an elegant way to inform the user the session has expired (because in IIS, the session expires after 20 minutes as a default, so there is a need to trap and handle this condition).

Below is our static, shared class, named mySessionVar, which we will save as mySessionVaribles.cs in the [App_Code] folder, off the root folder. By reviewing the code, you can now see how many session variables are in use, and a full proof way to avoid the dreaded 'NullReferenceException' errors.

public static class mySessionVar
{ // Declare the session state variable: to determine if the session is still valid
  private static string _strValidSession = "strValidSession";

  // Start the list of all the site's Session Variables.............
  private static string _strPassword = "strPassword";
        
  public static string strValidSession
  {
    get
    { // Test for null
      if (HttpContext.Current.Session[mySessionVar._strValidSession] == null)
      { // If so, return an empty string
        return string.Empty;
      }
      else
      { // not null, return the value
        return HttpContext.Current.Session[mySessionVar._strValidSession].ToString();
      }
    }
    set
    { // assign the session variable with the value
      HttpContext.Current.Session[mySessionVar._strValidSession] = value;
    }
  }

// NOW: Start defining all the site's Session Variables.............
  public static string strPassword 
  {
    get
    { // Test for null
      if (HttpContext.Current.Session[mySessionVar._strPassword] == null)
      { // If so, return an empty string
        return string.Empty;
      }
      else
      { // not null, return the value
        return HttpContext.Current.Session[mySessionVar._strPassword].ToString();
      }
    }
    set
    { // assign the session variable with the value
      HttpContext.Current.Session[mySessionVar._strPassword] = value;
    }
  }

}

Now, the syntax to read and write a session variable defined in the class shown above is:

// The better method: Writing to a session variable
mySessionVar.strPassword = strSomeTextBox.Text;
        
// The better method: Reading from a session variable
string strPassword = mySessionVar.strPassword;

Below is our second class which we will use to override the default Page class (System.Web.UI.Page), named myBasePage and we will save it as myBasePage.cs in the [App_Code] folder, off the root folder. This is to handle the condition when the session expires.

public class myBasePage : System.Web.UI.Page
{
  override protected void OnInit(EventArgs e)
  {
    base.OnInit(e);

    if (mySessionVar.strValidSession.Length == 0)
    {
      Response.Redirect("../SessionExpired.htm");
    }
  }
}

Now we'll implement this by using the following on all our .Net Pages, now, if the session times out the user will be redirected (without error) to the SessionExpired.htm page:

public partial class pgSomePage : myBasePage
{
  // your code...
}

instead of this, the Page default

public partial class pgSomePage : System.Web.UI.Page
{
  // your code...
}

Now, you are all done... !

Oh, Your Site is still using Frames, Response.Redirect() isn't Working Correctly?

You need to clear the screen and bust out of the frames, well, switch over to MasterPages... No, just kidding!

We'll just add another step to the redirection. First, we'll hide this page (SessionExpired.htm) by not displaying any content but use this page to break-out of the FrameSet and use javascript's function: window.open('../FramesExpired.htm', '_top') which redirects to the page FramesExpired.htm, and use this page to denote that the Session expired. Here is the code for SessionExpired.htm within the Frameset environment:

<HTML>
<HEAD>
<script LANGUAGE='JavaScript' TYPE='text/javascript'> 
{
  window.open('../FramesExpired.htm', '_top') 
}  
</script>
</HEAD>
<BODY></BODY>
</HTML>

Important Note: If your site is using frames you still need to use the Response.Redirect() even though it does not have any other parameters which would bust out of the frameset. Each frame is similar to another browser session, the server does not know about the other frames, but on the client side that a different story and that is where client-side script comes into play.

Well, if you did use Response.Write() to send that javascript code to the client to redirect and bust out of the frames, that code will not fire first. The Page_Load() will fire after OnInit(), and you will probably be using some session variables in Page_Load(), thus causing errors because they expired. The use of Response.Redirect() will halt further processing (preventing Page_Load() from firing) and only redirect to the chosen page.

Hope this helps!

the WebPepper team

FrameSet: Toggle the Content Area Size

the WebNeck — Tue, 13 Apr 2010 19:32:00 +0500

Download Project: WebPepperFrameset.zip (5.47 kb)

Still Using Framesets?

Framesets were a valuable tool a few years back, but now, Master Pages are starting to take over this functionality. However, many sites still implement framesets and do not have the time to upgrade the entire site. So what we have here is a very simple way to toggle the size of the content area of with a very simple javascript function. The function will be placed on the page which defines the frameset and a button on one page within a frame.

This will allow the user to focus in on what they are interested in without all the other clutter. Let's say it is a report and within this report the user can drill down to other linked reports to view the details, or it an item, a sketch, drawing that can be enlarged to view its detail. Whatever the case, it is so simple to do, you just may find this very handy.

We Start With This:

Add the Javascript

The function Toggle() is added to the page defining the frameset: default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="ourNameSpace._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lang="en" lang="en" >
<head runat="server">
  <title>the WebPepper</title>
  <script type='text/javascript'>

  function toggle(n) 
  {
    var fs1 = document.getElementById('fsPage');
    var fs2 = document.getElementById('fsBody');
    if (fs1)
    {
      if (fs1.rows == "100,*,50")  // "frHeader,fsBody,frFooter"
      {
        fs1.rows = "23,*,0";
        fs2.cols = "0,*";
        fs1.frameSpacing = "1"
        fs2.frameSpacing = "0"
      }
      else 
      {
        fs1.rows = "100,*,50";
        fs2.cols = "275,*";
        fs1.frameSpacing = "3"
        fs2.frameSpacing = "3"
      }
    }
  }

</script>
</head>

<frameset id="fsPage" rows="100,*,50" bordercolor="silver" framespacing="3">
  <frame id="frHeader" src="ourHeader.aspx" runat="server" 
   frameborder="0" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no" />
  
  <frameset id="fsBody" cols="275,*" framespacing="3">
    <frame id="frMenu" runat="server" src="ourMenu.aspx" 
     marginheight="0" marginwidth="0" frameborder="1" />
    <frame id="frContent" runat="server" src="ourContent.aspx"
     marginheight="0" marginwidth="0" frameborder="1" bordercolor="silver" scrolling="auto" />
  </frameset>
      
  <frame id="frFooter" src="ourFooter.aspx" runat="server"
   frameborder="0" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no"  />
</frameset>
</html>

Add code to OnClientClick Event:

The button is added to the page which is the header: ourHeader.aspx

<asp:Button ID="Button1" runat="server" Text="Toggle Content Area" 
OnClientClick="javascript:parent.toggle(this)" />

We Now Are Able To Show This:

Download Project: WebPepperFrameset.zip (5.47 kb)

Hope this helps!

the WebPepper team

Horizontal and Vertical Image Buttons with Rollover (CSS)

the WebNeck — Sat, 20 Mar 2010 21:41:00 +0500

Download Project: WebPepperButton.zip (46.59 kb)

Horizontal and Vertical Image Button Lists using CSS

There is not much time devoted to this in the life-cycle of a project, but when you need to do it again, you probably ask yourself, "how did I do it?" In this sample project, we will provide the most commonly used ways of doing it within CSS. It is quite simple to markup, the toughest part is in the design of the graphics.

What's Covered:

Horizontal Layout
Vertical Layout
Images Only
Images with Text
When to use Classes or ID's

We will use a single image for each button to show: default, hover and active (on-click) states. In order keep to things simple, no events have been attached to the various states, that will be left up to you or possibly in a later post.

Important Note: The reasons for using a single image are: the images load quicker (reducing a possible flicker), less items to keep track of, using the same file name within the CSS and there are less items downloaded to the client.

the Horizontal Layout: Images Only

Let's start with this one, it's quite handy if you want to present a timed slide-show. Personally, I like to see the button image in the order of default, hover and then active, but with the [Stop] button image this is not true and it is shown in the css how to handle this.

Horizontal Button List

Notice there are only 4 images: Back, Stop, Play and Forward. The [Back] and [Forward] buttons only have two states because that's all that is needed, the other two have three states (shown below). The default image of the [Stop] button is the 3^rd segment of the image, all the others are the 1^st segment.

Button States

The Html markup, is simple. Here we set the unordered-list tag with a class [horizontal_list], because we may want to use more than one horizontal list on the page. Also, we define all div tags within each list-item by setting the IDs. By setting these IDs, we can only use these elements (our image buttons) once, otherwise we would need to use this Html markup within a user control.

<div>
  <ul class="horizontal_list">
    <li><div id="back"></div></li>
    <li><div id="stop"></div></li>
    <li><div id="play"></div></li>
    <li><div id="forward"></div></li>
  </ul>
</div>

The CSS, it's simple, too!

ul { margin:0px; }
ul.horizontal_list li { display:inline; list-style:none; float:left; }

#back { background:url("images/back.png") no-repeat 0 0; display:block; width:49px; height:51px; }
#back:active { background:url("images/back.png") no-repeat 0 -51px; }

#stop { background:url("images/stop.png") no-repeat 0 -102px; display:block; width:52px; height:51px; }
#stop:hover { background:url("images/stop.png") no-repeat 0 -51px; }
#stop:active { background:url("images/stop.png") no-repeat 0 0; }

#play { background:url("images/play.png") no-repeat 0 0; display:block; width:49px; height:51px; }
#play:hover { background:url("images/play.png") no-repeat 0 -51px; }
#play:active { background:url("images/play.png") no-repeat 0 -102px; }

#forward { background:url("images/forward.png") no-repeat 0 0; display:block; width:48px; height:51px; }
#forward:active { background:url("images/forward.png") no-repeat 0 -51px; }

Here is where we use image ID's, for the simple reason that each button has a different image and that this will only be displayed once on the page, if we needed multiple instances on the page, it would be a user control (*.ascx instead of being local to the page). Also, compare how the [Stop] button is different from the [Play] button, the third segment of the image vs the first.

The height of the buttons are in this case 51px, and to represent each state (css tag {background: image-url repeat x-axis y-axis;} the y-axis is represented as a multiple of this 51px, measured from the top-down (0px as the base, and this why the values are: 0px, -51px and -102px)).

the Vertical Layout: Images with Text

Now we'll play with this one, it's quite handy if you want to present a menu. Here we use the same image over and over, and it can be used vertically or horizontally. The image has a border on all four sides, so to represent it in a vertical menu we'll shave-off the bottom border using css (setting the height to 20px instead of 21px). And since the image is used repeatably, this is the case for using a class instead of the ID's in the css.

Vertical Button List

The image we are playing with is:

Button States

The Html markup, is simple too! Again we set the unordered-list tag with a class [vertical_list], because we may want to use more than one vertical list on the page and we use a wrapper and set the class to [vButtonWrapper].

<div class="vButtonWrapper">
  <ul class="vertical_list">
    <li><div>Home</div></li>
    <li><div>Products</div></li>
    <li><div>About Us</div></li>
    <li><div>Support</div></li>
  </ul>
</div>

The CSS is very similar to the horizontal list, but:

Can you determine what makes this a vertical list?
How would you make this a horizontal list?

Well, what makes it vertical is that the wrapper is set to the same width as the list-items and we did not use [float:left] attribute. In order to make this a horizontal list add [float:left;] to the [ul.vertical_list li] and change the [width:126px] of [.vButtonWrapper] to at least a multiple of a 126px, say greater than 504px (this would place all four items horizontally).

body { font:arial; font-size:11px; font-family:Arial, Helvetica, sans-serif;}
ul.vertical_list li { text-align: left; margin-left:0; list-style:none; }

.vButtonWrapper { clear:both; width:126px; font-weight:bold; line-height:20px; }
div.vButtonWrapper div 
{ 
  background :url("images/126x21.gif") no-repeat 0 0; display:block;
  width:126px; 
  height:20px; 
  text-align:center;
}
div.vButtonWrapper div:hover { background: url("images/126x21.gif") no-repeat 0 -21px; }

Now, we're done! Wasn't that easy! Button On... folks!

Small Bonus: Within the Project Download, we include an Apple-like [Submit] button for you to play with. Even though the image is rectangular the graphic has rounded edges. You handle it in the same manner discussed above, but note it is on a transparent background so that the page background will show through and around the rounded edges. Images like this one are gif or png images... have fun!

Download Project: WebPepperButton.zip (46.59 kb)

Hope this helps!

the WebPepper team

TreeView (Part 2: Saving and Retrieving the Selection)

the WebNeck — Tue, 09 Mar 2010 03:50:00 +0500

Download Project: Treeview2.zip (7.44 kb)

Visual Studio's TreeView Control w/Checkboxes

This will build upon Part 1: Multiple Select. Let us build in a way to save the user's selection and retrieve it. Is it easy? Of course!

Overview: Save, Open and Reset...

The objective in this part, is of course, to Save, Open and Reset the users selections. Also, when opening the user's saved selection, the tree will expand to the level showing all albums selected or not at the minimum and if only some tracks (or just one) of an album are selected, expand the tree branch (albums) to show all tracks selected or not.

Why? Well, this tree does not have the capability of a tri-state checkbox which would show the user that only some of the child-nodes are selected for the branch. So, we need to set a condition where the tree expands one level above the deepest level as a default (at the very least) and expand the deepest level only if it is partially selected. This will show the user everything selected without having some selections hidden due to not having a tri-state checkbox.

To be able to open and show something like this.

Again to reiterate this Tip: Since this Visual Studio Treeview control was thrown together without much finesse, the total number of items should be kept below ~700. One reason among several... upon rendering, it is a set of nested tables which are uncompressed which helps to make it slow, and to have more than 700 items even with a fast connection, performance degrades exponentially. If your requirements are to exceed 700 items (and mine did) you should consider purchasing a third party control, I chose one from EssentialObjects, cheap, fast, with a multitude of built-in options, plus you can easily leverage dynamic loading.

And not that it matters, my CD collection exceeds well over 700 albums... !!!

Ok, some re-work... it's only to comment one line of code

Where? In the user control for the tree view, to be honest it was a poor choice to define the default XmlDataSource there, anyway it is shown below within the file [ucTree.ascx.cs]:

  public partial class ucTree : System.Web.UI.UserControl
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      //XmlDataSource1.DataFile = "~/App_Data/Music.xml";
      cdT.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");
    }

and we will move it to page which implements the user control [pgTree.aspx.cs]

  public partial class pgTree : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (!IsPostBack)
      {
        XmlDataSource xds = cdT1.FindControl("XmlDataSource1") as XmlDataSource;
        xds.DataFile = "~/App_Data/Music.xml";
      }
    }

Yes, it is replaced by 2 lines of code, because the xmldatasource is within the user control, need to find the correct control within the user control...

Page (Html-Markup): pgTree.aspx

Here we are to add 4 controls: a textbox to save and retrieve file settings and 3 buttons to Save, Open and Reset the treeview. Notice that are OnClick events attached to the buttons.

<form id="submitform" name="mainform" method="post" runat="server">
    <div id="tabs-1">
    <asp:label id="Label1" runat="server" Text="CD's in a TreeView"></asp:label>    
    <uc1:ucT id="cdT1" runat="server"></uc1:ucT>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Save"  OnClick="Save" />
    <asp:Button ID="Button2" runat="server" Text="Open"  OnClick="Open"/>
    <asp:Button ID="Button3" runat="server" Text="Reset" OnClick="Reset"/>
  </div>
</form>

Save: (Server-Side) pgTree.aspx.cs

First, need to check if the user entered a file name (don't need the extension, its set to be xml). If so, then continue, finding the control within the user control, the path to our [App_Data] folder and launch the XmlTextWriter.

After starting the XmlTextWriter we call the function CollectIt(), which is a re-iterative process to traverse the contents of the treeview from the top down. Now this is what we will be saving:

Renaming the element name and the depth: Level0='All Rock Music', Level1='Band' and so forth...
Write the attribute "ItemNo" and it's value from the node (our key or the index of unique values).
And write another attribute "checked" to denote whether the node was selected or not.

    // Handle Save: *******************************************************************
    protected void Save(object sender, System.EventArgs e)
    {
      if (TextBox1.Text == "") { MessageBox("Error: Need a file name."); return; }

      TreeView Tree = new TreeView();
      Tree = cdT1.FindControl("cdT") as TreeView;
      TreeNodeCollection treeNodes = Tree.Nodes as TreeNodeCollection;

      string tmpPath = Server.MapPath("./App_Data/"); //to get a handle on a virtual folder
      string filename = tmpPath + TextBox1.Text + ".XML";

      XmlTextWriter tw = new XmlTextWriter(filename, System.Text.Encoding.Unicode);
      tw.WriteStartDocument();
      collectIt(treeNodes, tw);
      tw.WriteEndDocument();
      tw.Close();
    }
    private void collectIt(TreeNodeCollection treeNodes, XmlTextWriter textWriter)
    {
      foreach (TreeNode node in treeNodes)
      {
        textWriter.WriteStartElement("Level" + node.Depth.ToString());
        textWriter.WriteAttributeString("ItemNo", node.Value);
        textWriter.WriteAttributeString("checked", node.Checked.ToString());
        if (node.ChildNodes.Count > 0) { collectIt(node.ChildNodes, textWriter); }
        textWriter.WriteEndElement();
      }
    }
    // ********************************************************************************

An example of what is saved:

<?xml version="1.0" encoding="utf-16"?>
<Level0 ItemNo="0" checked="False">
  <Level1 ItemNo="101.0" checked="False">
    <Level2 ItemNo="101.1" checked="True">
      <Level3 ItemNo="101.101" checked="True" />
      <Level3 ItemNo="101.102" checked="True" />
      <Level3 ItemNo="101.103" checked="True" />
etc...

Open: (Server-Side) pgTree.aspx.cs

Here we doing some basic error checking, if the user entered a filename and if it exists. Again we grab the handle to the treeview and open the saved file. Notice that we first collapse all the branches and then expand the branch if it is at the first or second level (Level0-root and Level1-Band) and then only expand the third level (Level2-Album) only if the parent node of Level3-Track (parent node here would be Level2-Album) is unchecked. Similar to the CollectIt() function above, the SetIt() function is also a re-iterative one, transversing the tree from the top down.

    // Handle Open: *******************************************************************
    protected void Open(object sender, System.EventArgs e)
    {
      if (TextBox1.Text == "") { MessageBox("Error: Need a file name."); return; }
      TreeView Tree = new TreeView();
      Tree = cdT1.FindControl("cdT") as TreeView;
      TreeNodeCollection treeNodes = Tree.Nodes as TreeNodeCollection;
      Tree.CollapseAll();

      string tmpPath = Server.MapPath("./App_Data/"); //to get a handle on a virtual folder
      string filename = tmpPath + TextBox1.Text + ".XML";
      if (!File.Exists(filename)) { MessageBox("Error: File does not exist."); return; }

      XmlTextReader tr = new XmlTextReader(filename);

      using (XmlReader reader = XmlReader.Create(filename))
      {
        while (reader.Read())
        {
           // Only detect start elements, going to ignore anything else
          if (reader.IsStartElement())
          {
            setIt(treeNodes, reader.Depth, reader["ItemNo"], reader["checked"]);
          }
        }
      }
    }
    private void setIt(TreeNodeCollection treeNodes, int x, string strItemNo, string strChecked)
    {
      foreach (TreeNode node in treeNodes)
      {
        if (node.Depth == x && node.Value == strItemNo) 
        {
          switch (node.Depth)
          {
            case 0: node.Expand(); break;
            case 1: node.Expand(); break;
            default:
              if (strChecked == "True" && node.Parent.Checked != true) { node.Parent.Expand(); }
              break;
          }
          node.Checked = System.Convert.ToBoolean(strChecked);
          return;
        }
        if (node.ChildNodes.Count > 0) { setIt(node.ChildNodes, x, strItemNo, strChecked); }
      }
    }
    // ********************************************************************************

Reset: (Server-Side) pgTree.aspx.cs

This function is nearly identical to the open function except we not opening any file. We are just checking all nodes and expanding only the first 2 levels of the tree.

    // Handle Reset: ******************************************************************
    protected void Reset(object sender, System.EventArgs e)
    {
      TreeView Tree = new TreeView();
      Tree = cdT1.FindControl("cdT") as TreeView;
      TreeNodeCollection treeNodes = Tree.Nodes as TreeNodeCollection;
      Tree.CollapseAll();

      foreach (TreeNode node in treeNodes) { this.CheckNodes(true, node); }
    }
    private void CheckNodes(bool check, TreeNode node)
    {
      node.Checked = check;
      foreach (TreeNode child in node.ChildNodes)
      {
        if (node.Depth <= 1) { node.Expand(); }
        if (child.ChildNodes.Count >= 0) { CheckNodes(check, child); }
      }
    }
    // ********************************************************************************

Important Note: This sample project does not take into account the additions and/or deletions made to the original treeview (Music.xml). The saved files would then be out of date and the treeview will only reflect the values which were saved and still valid within Music.xml.

Also, we could have just added the 'checked' attribute to Music.xml and saved it with another file name and only show the info of what was saved. But then you still have to find a way to update the listing. The approach taken here is to show you in such a way that you know what is original and what was saved by reviewing the xml files themselves. Oh, make sure to add-in a safeguard so you won't overwrite your original!

We'll leave this up to you to handle, but now you have the basic tools to take it further...

Download Project: Treeview2.zip (7.44 kb)

the WebPepper team

TreeView (Part 1: Multiple Select)

the WebNeck — Sat, 06 Mar 2010 07:07:00 +0500

Download Project: Treeview.zip (6.31 kb)

Visual Studio's TreeView Control w/Checkboxes

The TreeView control is a great control that allows the user to drill-down through a hierarchy of items and make a selection. But, how easy is it to set it up for a multiple selection? This too, is easy...

This control is quite basic (plan vanilla)...

Even though it can be found in Visual Studio's tool box on the Navigation tab, alot of work needs to be done if you want to implement checkboxes but provided as part of the download. This control is incomplete for something that is part Visual Studio but since there are no additional licenses to purchase, let's make it work. The example will use an Xml file of a small CD collection of rock music so that you can select/unselect all music, an artist/band, an album or individual tunes with a single click.

The control will open up (expand) to show all albums in the collection and show all music as selected. The treeview will be implemented as a simple user control to be placed on a page. The xml data file will reside in the [App_Data] folder which is set with read/write permissions (we may want to save and retrieve those different selections, more on that later). Also, a javascript file is linked in for client-side event handling, this part was authored by: ranganh (visit this link for info), which does most of the real work.

Opening Page

Tip: Since this Visual Studio Treeview control was thrown together without much finesse, the total number of items should be kept below ~700. One reason among several... upon rendering, it is a set of nested tables which are uncompressed which helps to make it slow, and to have more than 700 items even with a fast connection, performance degrades exponentially. If your requirements are to exceed 700 items (and mine did) you should consider purchasing a third party control, I chose one from EssentialObjects, cheap, fast, with a multitude of built-in options, plus you can easily leverage dynamic loading.

User Control (html-markup): ucTree.ascx

Within this user control, we use the the treeview and the xmldatasource controls and define the defaults. Notice that ExpandDepth="2" in order to expand all the branches down to the albums.

<%@ Control Language="c#" Inherits="cdTree.ucTree" CodeFile="ucTree.ascx.cs" %>
<table cellspacing="0" cellpadding="2">
  <tr>
    <td class="R_GroupHeading" align="left">
      &nbsp;Some of my CD's
    </td>
  </tr>
  <tr>
    <td align="left" style="border:solid 1px silver;">
      <div class="R_Data">
        <asp:TreeView ID="cdT" SkinId="cdSkin" runat="server" DataSourceID="XmlDataSource1"
          OnPreRender="cdTree_OnPreRender" ShowCheckBoxes="All" ExpandDepth="2"  ShowLines="true">
          <DataBindings>
            <asp:TreeNodeBinding TextField="Title" ValueField="ItemNo" />
          </DataBindings>
        </asp:TreeView>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" ></asp:XmlDataSource>
      </div>
    </td>
  </tr>
</table>

User Control (server-side): ucTree.ascx.cs

On Page_Load (the function that fires first here) is where the data source is defined and where we attach the OnClick event-handler to the treeview, which fires code in the client-side javascript. OnPreRender, the function which fires next, loops through all the treenodes to set the checkboxes. This is a re-iterative process following line by line in the xml (file shown below).

namespace cdTree
{
  using System;
  using System.Data;
  using System.Web;
  using System.Web.UI.WebControls;
  using System.Xml;

  /// <summary>
  /// </summary>
  public partial class ucTree : System.Web.UI.UserControl
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      XmlDataSource1.DataFile = "~/App_Data/Music.xml";
      cdT.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");
    }

    protected void cdTree_OnPreRender(object sender, EventArgs e)
    {
      if (!Page.IsPostBack)
      {
        foreach (TreeNode node in cdT.Nodes) { this.CheckNodes(true, node); }
      }
    }

    private void CheckNodes(bool check, TreeNode node)
    {
      node.Checked = check;
      foreach (TreeNode child in node.ChildNodes)
      {
        if (child.ChildNodes.Count >= 0) CheckNodes(check, child);
      }
    }
  }
}

Page (html-markup): pgTree.aspx

This is the page that it is launched, it contains the user control: ucTree. Notice in line 2, the user control is registered and then used in line 16 the link to the javascript is on line 9.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pgTree.aspx.cs" Inherits="ns.pgTree" EnableEventValidation="false" %>
<%@ Register TagPrefix="uc1" TagName="ucT" Src="ucTree.ascx" %>
<!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="treeHead" runat="server">
  <title>CD TreeView</title>
  <script language="javascript" src="treeBehavior.js" type="text/javascript"></script>  
</head>

<body>
<form id="submitform" name="mainform" method="post" runat="server">
    <div id="tabs-1">
    <asp:label id="Label1" runat="server" Text="CD's in a TreeView"></asp:label>    
    <uc1:ucT id="cdT1" runat="server"></uc1:ucT>
  </div>
</form>
</body>
</html>

Page (server-side): pgTree.aspx.cs

(no code needed)

Partial listing: Music.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Hierarchy ItemNo="0" Title="All Rock Music">
  <Band ItemNo="101.0" Title="Aerosmith">
    <Album ItemNo="101.1" Title="Aerosmith">
      <Track ItemNo="101.101" Title="Make It" />
      <Track ItemNo="101.102" Title="Somebody" />
      <Track ItemNo="101.103" Title="Dream On" />
      <Track ItemNo="101.104" Title="One Way Street" />
      <Track ItemNo="101.105" Title="Mama Kin" />
      <Track ItemNo="101.106" Title="Write Me A Letter" />
      <Track ItemNo="101.107" Title="Movin' Out" />
      <Track ItemNo="101.108" Title="Walkin' The Dog" />
    </Album>
    <Album ItemNo="101.2" Title="Done With Mirrors">
      <Track ItemNo="101.201" Title="Let The Music Do The Talking" />
      <Track ItemNo="101.202" Title="My Fist Your Face" />
      <Track ItemNo="101.203" Title="Shame On You" />
etc...

This is a simple example using a treeview with checkboxes which functions to show whether the entire branch is selected or not with a single-click (it would have been ideal if the treeview had 3 states: checked, denoting some partially checked and unchecked, but it doesn't). This example also shows an approach to break a project apart into subsections, in this project: user controls. Now, if there was a need to use this treeview on multiple pages, you only need to add 3 lines of code to the new page and your done.

In a later post, we will show how to save the users selection and retrieve it...

Download Project: Treeview.zip (6.31 kb)

the WebPepper team

It's About Time: Double Explorer (free)

the WebNeck — Sat, 27 Feb 2010 20:46:00 +0500

Download: Double Explorer at CodePlex

Double Explorer: Something Worthwhile and Free

How many times have you had to rummage through the task-bar to find the correct Windows Explorer window so you can copy/move files from one location to another, what a royal pain. In talking with a colleague I mentioned that with all the advancements made in the Windows OS, the Explorer has seen relatively few and still somewhat archaic. I mentioned that it would be nice if it had something with multiple panes and tab-strips. He said "... that would be great."

Well It's Real-Ware...

A day later, in reading some news feeds, I couldn't believe it, something about just that: Double Explorer. It's free (donations are welcomed), works on Windows 7 (32 & 64-bit) and Vista 32-bit (some users had some problems in Vista 64-bit and who hasn't had problems with Vista, but it did work in Vista 64-bit for me).

I am not one to write reviews (and if this is considered a review, I consider it a poor attempt), but just wanted to share something which I found to be handy and easy to use.

Available at CodePlex

the WebPepper team

Advertising on the WebNeck

the WebNeck — Mon, 01 Feb 2010 03:00:00 +0500

Will the WebPepper ever allow advertising on the WebNeck's site?

The answer is simple: "No!" and we mean no as in never!

Any advertising on a site such as this would be a distraction, you ended up here because you were after a solution to a question, not to be redirected to some sales pitch.

Why?

This site is intended to be for the use of developers and those who want to get there feet wet in developing for the web. There is nothing on this site that is: for sale, on sale, discounted or on close-out. It is not to promote anything which might end up with a price-tag, unless the price-tag is knowledge.

The only price allowed is the value you place on your time to visit, this is the only price you pay, your time that you set aside to read an article, and nothing else. We appreciate you devoting your time to do this and hope you found it worthwhile.

We appreciate and welcome your comments, again the expense is only the value of your time to do so.

What does the WebPepper expect to get in return?

Monetarily - none; the return is improved efficiency, less bugs and an increased satisfaction of a job done well. It is a resource for you as well as for us.

Then, why even share techniques that are used by the WebPepper with others?

Usually, such things are kept private and protected.

One purpose is to raise the bar, employ better solutions and above all, a way to do so.

There will always be another way of doing something and maybe there is an alternative which is better, we are open to these suggestions and we are a good listener.

The developer is faced with many tasks, all of which are important, but vary in scope from being absolutely vague to absolutely specific. The items which are specific, are generally those which are forgotten or lost in a sea of mud. Those are the butt-busters for meeting project deadlines. We hope to be a service in those situations.

Don't you find spam as a problem?

Does a skunk stink?

Spam, is a direct approach to sell indirectly. And yes, it is just one of many aspects of the web that stink. Maybe, together, we'll discover a solution to the stench... (currently the bucket is flushed, daily).

In Closing

We want to let you know, we are here, we are listening and encourage you to share your thoughts, ideas and techniques, as we attempt to do, to make the task of web programming simpler and of value.

Thank you, for your time.

the WebPepper team

Dynamic Themes with Nested Master Pages

the WebNeck — Mon, 01 Feb 2010 02:20:00 +0500

WebPageMaster Project w/Themes and Accordion Menu Download (1.00 mb)
Screen Shot Silver (35.41 kb)
Screen Shot Gold (35.49 kb)

Master Pages (3^rd of a Series)

You're probably getting bored looking at the same site over and over, now you need to set up the site for the visually-impaired, or need to change the look for an upcoming holiday. Whatever, using themes will fit the bill. As developers we find it refreshing...

Now, let's add a twist to applying a theme, instead of setting the pages tag in the web.config, let's make it dynamic so the user change can it on the opening screen. If the user were to log into the site, you could then save it as a preference, but let's just concentrate on applying a theme dynamically.

Here, we will try to make it simple (and it is).

the Building Blocks: the 'New Stuff' in the App_Code and the App_Themes folders

App_Code folder: just copy these three files to your project within the App_Code folder. (They are part of the download or you can get them here).

BasePage.cs
Theme.cs
ThemeManager.cs

Tip: To find out more on Dynamic Themes, check out Sue's edream Blog for a tutorial: Extending Personal Web Site (6): Dynamic themes (1 of 2). Sorry, it appears she is have some problems with her site.

Basically, they are to build upon the System.Web.UI.Page and set the theme using a Session Variable. Instead of inheriting 'System.Web.UI.Page' on the server-side code you will be using 'BasePage'. And within the [BasePage.cs] is where you now set the default theme, in this project it is set to 'Standard'.

App_Themes folder: First, we added the folder [App_Themes] and a subfolder: [Standard] which will be our default theme, within this folder we moved ..\MasterStuff\Style.css and the ..\MasterStuff\images folder to the Standard folder, we then renamed [Styles.css] to 'Default.css'. Also, we added to our Default.css, a class .U_Theme which you find under the comment /* Radio control for Themes */ to handle the style of the radio button to change themes.

Second, we copied our [Standard] folder and renamed it 'Gold', Where we changed the images in the [Images] folder to be gold in color (keeping the same name to the images, being lazy so we limit the edits to the css...).

Now within our project environment, things look like this:

Sha-Zaam, were almost done... Change the server-side code of all your pages which you want to implement the chosen theme (we chose all of them) from:

public partial class "bla_bla_bla" : System.Web.UI.Page
{...

//to
public partial class "bla_bla_bla" : BasePage
{...

And then add the radio control to the [Default.aspx] page.

Note: If you wanted to move the radio button for the theme setting to the footer of this sample project (so, it will always be visible within this project), which is in /masterstuff/Site.master (which is not in the root, where as default.aspx is), you will have to make a change in /App_Code/ThemeManager.cs as shown below (add "~/" in the MapPath statement):

//from
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("App_Themes"));

//to
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("~/App_Themes"));

the Result

When entering the site, we are presented with this:

Click on the radio button control to gold, we are now presented with this:

And then the chosen theme is used throughout the entire site:

As you add more themes (folders under the App_Themes), they will automatically update the radio control, which is cool... theme on!

Tip: It is recommended that your standard/default theme address all the capabilities of your site, this is one reason that the site was first built without themes, by providing additional themes you are able to limit the functionality of the site. So, it would be advantageous to have a default/standard, and this tip may be in another topic to post which addresses this issue.

Screen Shot Silver (35.41 kb)
Screen Shot Gold (35.49 kb)
WebPageMaster Project w/Themes and Accordion Menu Download (1.00 mb)

the WebPepper team

Accordion Menu within a Nested Master Page

the WebNeck — Sun, 31 Jan 2010 02:22:00 +0500

WebPageMaster Project w/Accordian Menu Download (959.90 kb)
Screen Shot (29.41 kb)

Master Pages (2^nd of a Series)

Just when you thought is was plug-in-play from here on in and adding a control is now starting to be a flippin', nested hassle... and you're ready to say 'screw this', hold on...

So, you downloaded the Ajax Control Toolkit to be part of your Visual Studio environment and found that the Accordion Control is a cool one and it should be used in the side menu (in the MasterPage demo project of the previous article). So you gave it a whirl, and the damn thing ain't working as expected. Again, this is due to how MasterPages are assembled and work. Now, let's put the frustration aside and read on...

the Definition: The way we want it to work

Let's say to start with, is that when you open a link from a pane which is not a default pane of the accordion control, you want it to remain open (which it won't, yet). Second, if you go to another main menu option and return to this one, you would like to see the pane which was last opened, which launched a link in that pane.

Here, we will try to make it simple (and it is).

When the user launches Sales Orders or Sales Invoices, the Receivables pane will now be the default open pane for the session. This default will change as the user launches other menu items from other panes.

Just a note, code was added to the style sheet /MasterStuff/Styles.css for the visual effects and this was appended under the comment /* Accordion Control */ in the new project download above.

the Accordion Control: from the Ajax Control Tookit

This is the Accordion control that was added to the file: [AcctMenu.Master], don't forget to register the assembly for the AjaxControlToolkit on the top of the page...

<%@ Master Language="C#" MasterPageFile="~/MasterStuff/Site.master" CodeFile="~/MasterStuff/AcctgMenu.master.cs" Inherits="AcctgMenu"%> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajx" %>

<asp:Content id="Content1" ContentPlaceholderID="ChildContent" runat="server">
  <div id="R_mainWrapper"><asp:ContentPlaceHolder id="MainContent" runat="server" /></div>
    
  <div id="leftContent">
    <p style="text-align: center;">
      <asp:Label ID="DateDisplay" runat="server"></asp:Label>
    </p>
    
    <h3>Accounting Menu</h3>       

  <asp:ScriptManager ID="ScriptManager1" runat="server" />
  <ajx:Accordion ID="AccountingMenu" runat="server" TransitionDuration="250" FramesPerSecond="40"
    FadeTransitions="true" 
    HeaderCssClass="acc-header" ContentCssClass="acc-content" HeaderSelectedCssClass="acc-selected"
    SuppressHeaderPostbacks="true">
   <Panes>
      <ajx:AccordionPane ID="AccordionPane1" runat="server" >
        <Header>&nbsp;Main</Header>
          <Content>  
            <ul class="SideUl">
              <li>
                <asp:LinkButton ID="lnkb1" runat="server" OnClick="MenuLinkButton_OnClick" 
                CommandArgument="AcctgHome.aspx" Text="Accounting Home" />
              </li>  
              <li>
                <asp:LinkButton ID="lnkb2" runat="server" OnClick="MenuLinkButton_OnClick" 
                CommandArgument="AcctgAbout.aspx" Text="About Accounting" />
              </li>  
            </ul>
        </Content>
      </ajx:AccordionPane>
              
      <ajx:AccordionPane ID="AccordionPane2" runat="server">
        <Header>&nbsp;Receivables</Header>
          <Content>  
            <ul class="SideUl">
              <li>
                <asp:LinkButton ID="lnkb3" runat="server" OnClick="MenuLinkButton_OnClick" 
                CommandArgument="SO.aspx" Text="Sales Order" /></li>  
              <li>
                <asp:LinkButton ID="lnkb4" runat="server" OnClick="MenuLinkButton_OnClick"
                CommandArgument="SI.aspx" Text="Sales Invoice" />
              </li>  
            </ul>
        </Content>
      </ajx:AccordionPane>
              
       <ajx:AccordionPane ID="AccordionPane3" runat="server">
        <Header>&nbsp;Payables</Header>
          <Content>  
            <ul class="SideUl">
              <li>
                <asp:LinkButton ID="lnkb5" runat="server" OnClick="MenuLinkButton_OnClick" 
                CommandArgument="PO.aspx" Text="Purchase Order" /></li>  
              <li>
                <asp:LinkButton ID="lnkb6" runat="server" OnClick="MenuLinkButton_OnClick"
                CommandArgument="PI.aspx" Text="Purchase Invoice" />
              </li>  
            </ul>
        </Content>
      </ajx:AccordionPane>
   </Panes>
  </ajx:Accordion>
  </div>
</asp:Content>

This is the server-side code in: [AcctMenu.Master.cs]

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class AcctgMenu : System.Web.UI.MasterPage
{
  protected void Page_Load(object sender, EventArgs e)
  {
    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd");
    if (!IsPostBack)
    {
      if (Session["accAccounting.SelectedIndex"] != null)
      {
        AccountingMenu.SelectedIndex = (int)Session["accAccounting.SelectedIndex"];
      }
    }
  }

  public void SaveMenuIndex()
  {
    Session["accAccounting.SelectedIndex"] = AccountingMenu.SelectedIndex;
  }

  public void MenuLinkButton_OnClick(object sender, EventArgs e)
  {
    SaveMenuIndex();
    Response.Redirect(((LinkButton)sender).CommandArgument);
  }
}

the Way this thing works:

Page_Load() - the session variable 'accAccounting.SelectedIndex' is checked to see if it exists and if it has been set. If not, it will use whatever was set in the control as the default. Otherwise it will use the session variable to open the desired pane.
MenuLinkButton_OnClick() - this is called whenever a menu item was launched (you can see that this event was added to all the LinkButtons in the Accordion control). The first thing that happens is SaveMenuIndex() is called which will set the session variable, then the link is launched.
SaveMenuIndex() - this function sets/creates the session variable whenever it is called with the value of Accordion Control selected pane. In our case, it is only when a menu item is launched.

The key: is using a session variable for the departmental menu, we didn't want to use cookies in case the user's browser had them turned off. Also, we chose this method in case we decide on generating these menus dynamically and we now know what's needed (the OnClick event in the LinkButton).

You can now add this Accordion control to other departmental.master's menus ...even if it only has a single pane in order to maintain the style used throughout the entire site (who knows you may need to add another pain in the future (ah... we mean pane) to the control).

Screen Shot (29.41 kb)
WebPageMaster Project w/Accordian Menu Download (959.90 kb)

the WebPepper team

Nested Master Pages, Embedded Links to fill ContentPlaceHolders

the WebNeck — Sun, 24 Jan 2010 05:04:00 +0500

MasterPages Demo Project Download (33.24 kb)
Demo Screen Shot (90.06 kb)

Master Pages (1^st of a Series)

Have you been searching for a decent sample project that implements Nested Master Pages? Hard to find ...huh! Now, you got one!

Here, nested MasterPages are implemented within a application framework of four panes: the first pane, the header holding the main menu, choices made from here load the side menu in the second pane, the choices here populate the content pane and of course, there is the footer pane to hold the copyright, app version and revision info, etc. (here - ASP.net)

Building the App: The approach taken was first create a page that looks like the screen-shot shown above. By doing this, you're able to setup up your cascading style sheet (css) and visually see the grouping of the panels within the html markup which will be replaced by your [ContentPlaceHolder] controls in the Master Pages. In order to get a grip on this and to keep it simple:

no server-side coding was done
no database connection
no javascript
and no sitemap

In a real world app, these would be a necessity, to validate user credentials, populating content, error checking, etc.

You might ask "Why wasn't a site-map used?" The first reason is so you can get a handle on how embedded links are handled, with master pages it is a little different. Second, if there is a need to create the menus dynamically, lets say, in the Page_Load(), the hard-coded links are there to show you what is needed to get things working.

Various sections of the app are put into different folders based on the main menu in the header pane. (The demo could have slapped all the files in the root but then, the demo would suck and not accomplish a thing...) Also, all the Master Pages are to be stuffed in the [MasterStuff] folder to mix things up a bit. So this is our demo layout:

The Master Page for the site (Site.Master) controls these sections: Header and Footer with a [ContentPlaceHolder] to populate both the side menu and content areas.

To populate the [ContentPlaceHolder] of the Site.Master, each menu item in the header calls the associated page which has its own Master Page and is a child of the site Master Page. Since these pages are children of the site Master, they only populate/update that defined area (with the help of the css):

As you go through the code of the Demo site and get familiar with what does what, you will see that the html markup is self-explanatory... Have Fun!

The key for embedded links is:

runat="server"

and if left out, the relative paths would be 'out-of-wack' due to how MasterPages are assembled.
Tip: For an excellent article to find out more on Master Pages and how they are assembled behind the scenes check out: ASP.Net 2.0-Master Pages: Tips, Tricks, and Traps by K. Scott Allen

Demo Screen Shot (90.06 kb)

MasterPages Demo Project Download (33.24 kb)

the WebPepper team

the WebNeck

Handling ASP.Net Session Variables

Some say: Cookies "Good", Session Variables "Bad"

How Not To Implement Session Variables

Implementing Session Variables with Class

Oh, Your Site is still using Frames, Response.Redirect() isn't Working Correctly?

FrameSet: Toggle the Content Area Size

Still Using Framesets?

We Start With This:

Add the Javascript

Add code to OnClientClick Event:

We Now Are Able To Show This:

Horizontal and Vertical Image Buttons with Rollover (CSS)

Horizontal and Vertical Image Button Lists using CSS

What's Covered:

the Horizontal Layout: Images Only

the Vertical Layout: Images with Text

TreeView (Part 2: Saving and Retrieving the Selection)

Visual Studio's TreeView Control w/Checkboxes

Overview: Save, Open and Reset...

Ok, some re-work... it's only to comment one line of code

Page (Html-Markup): pgTree.aspx

Save: (Server-Side) pgTree.aspx.cs

Open: (Server-Side) pgTree.aspx.cs

Reset: (Server-Side) pgTree.aspx.cs

TreeView (Part 1: Multiple Select)

Visual Studio's TreeView Control w/Checkboxes

This control is quite basic (plan vanilla)...

User Control (html-markup): ucTree.ascx

User Control (server-side): ucTree.ascx.cs

Page (html-markup): pgTree.aspx

Page (server-side): pgTree.aspx.cs

Partial listing: Music.xml

It's About Time: Double Explorer (free)

Double Explorer: Something Worthwhile and Free

Well It's Real-Ware...

Advertising on the WebNeck

Will the WebPepper ever allow advertising on the WebNeck's site?

Why?

What does the WebPepper expect to get in return?

Then, why even share techniques that are used by the WebPepper with others?

Don't you find spam as a problem?

In Closing

Dynamic Themes with Nested Master Pages

Master Pages (3rd of a Series)

the Building Blocks: the 'New Stuff' in the App_Code and the App_Themes folders

Accordion Menu within a Nested Master Page

Master Pages (2nd of a Series)

the Definition: The way we want it to work

the Accordion Control: from the Ajax Control Tookit

the Way this thing works:

Nested Master Pages, Embedded Links to fill ContentPlaceHolders

Master Pages (1st of a Series)

Master Pages (3^rd of a Series)

Master Pages (2^nd of a Series)

Master Pages (1^st of a Series)