What is a web site without a navigation system, like a menu, or in our case a tree view, which leads the user to the content? Well, probably you can’t call it a website without some sort of navigation. So let’s add a robust library-style navigation system to our HNAcme web application.
If you’ve had a lot of experience in this area, you know implementing robust navigation is one of the most complex things in web application development. Using the HNFSDK, you’ll find that it’s now a piece of cake.
In Visual Studio .Net go to the “Project” menu and select “Add Web Form…” Name this form MSTreeView.aspx.
Likewise in previous sections, make sure that the HTML code behind view looks like in the following code snippet.
<%@ Page language="c#" Codebehind="MSTreeView.aspx.cs" AutoEventWireup="false" Inherits="HNAcme.MSTreeView" smartNavigation="False"%>
<%@ Register TagPrefix="hn4f" Namespace="Hyper.Net.Framework.Web.UI" Assembly="Hyper.Net.Framework.Web.UI" %>
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Navigation - HNAcme</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<style>TABLE.TreeView {
BORDER-RIGHT: #000000 1px solid; TABLE-LAYOUT: fixed; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 100%! important; BORDER-BOTTOM: #000000 1px solid; BORDER-COLLAPSE: collapse
}
.TabCell {
BACKGROUND-POSITION: right 50%; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; BACKGROUND-REPEAT: no-repeat; HEIGHT: 22px; BACKGROUND-COLOR: #7fa3df
}
.SyncCell {
BACKGROUND-POSITION: left center; FONT-SIZE: 9px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: right
}
.TreeCell {
BACKGROUND-COLOR: #f1f1f1! important
}
</style>
</HEAD>
<body bgColor="#01478e" topMargin="0" MS_POSITIONING="GridLayout">
<form id="MSTreeView" method="post" runat="server">
<span style="COLOR: white">
<hn4f:treeviewnavigation id="TreeViewNavigation1" runat="server" MaxReturnRecords="1000" SkipInternalOnExpand="False"
TopicContentTarget="main" AutoPostBack="True" DefaultStyle="FONT-WEIGHT: bold;color:white;font-size:12px;font-family:Arial,Helvetica,Sans-Serif;"></hn4f:treeviewnavigation></span></form>
</body>
</HTML>
Code-Snippet 7 – MSTreeView.aspx HTML View
The resulting Design view should look as shown in Figure 11.
Figure 11 – MSTreeView.aspx Design View
Here we must make a few changes to the code-behind to ensure proper rendering for the TreeViewNavigation web server control.
The TreeViewNavigation web server control makes use of the Search object, found in the Hyper.Net.Framework.BOM namespace. When you understand how to use this functionality (refer to the help file), it can be used to yield any kind of result, not only for a tree view. But specifically when used with TreeView navigation, the Search object provides a quick and easy way to select all of the publications and topics you’d like to display, and allows you to match specific metadata or implement categorized views without understanding the data model of the database or performing database programming. The Search object, combined with the TreeView control, can save you a ton of work.
The Code-Snippet 8 below shows how this code-behind should look.
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Hyper.Net.Framework.BOM;
using Hyper.Net.Framework.Common;
using Microsoft.Web.UI.WebControls;
namespace HNAcme{
public class MSTreeView : System.Web.UI.Page {
protected Hyper.Net.Framework.Web.UI.TreeViewNavigation TreeViewNavigation1;
private void Page_Load(object sender, System.EventArgs e){
if(!IsPostBack){
TreeViewNavigation1.SearchCriteria =
publication.IsEffective == 1 &
publication.Audience == "Production" ;
TreeViewNavigation1.AddNewOutputNode("TREENODE",publication.Category,"{0}");
TreeViewNavigation1.AddNewOutputNode("TREENODE",publication.Title,"{0}");
Hyper.NetField[] TopicLine = new Hyper.NetField[2];
TopicLine[0] = topic.SequenceNumber;
TopicLine[1] = topic.Heading;
TreeViewNavigation1.AddNewOutputNode("TREENODE",TopicLine, "{1}");
TreeViewNavigation1.ExecuteSearch();
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e){
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent(){
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
Code-Snippet 8 – MSTreeView.aspx.cs code-behind.
The portion of the code we’re interested in is marked in bold. Here we’re saying: Format into a tree hierarchy the publication category, and beneath this the publication title, and as the 3rd and final level the heading of the topic that belongs to the publication on the 2nd level, where the publication is effective and the audience is “production” and the type of the topic is “Topic.”
As you can see again, using the HNFSDK the code we have to write is minimum and straightforward.