Master Pages, Themes and Navigation Controls FAQ

Page class contains a public property named Header. You can convert HTML head tag to the corresponding server control by adding runat=”server” to its definition. Then you can access the head tag in code behind:

HtmlLink cssLink = new HtmlLink();

cssLink.Href = "~/css.css";

cssLink.Attributes.Add("rel", "stylesheet");

cssLink.Attributes.Add("type", "text/css");

Header.Controls.Add(cssLink);

HtmlLink jsLink = new HtmlLink();

jsLink.Href = "~/js.js";

jsLink.Attributes.Add("language", "javascript");

jsLink.Attributes.Add("type", "text/javascript");

Header.Controls.Add(jsLink);

Now run the application and view the html source of the page:

Related threads,

http://forums.asp.net/t/1377840.aspx

http://forums.asp.net/t/1274180.aspx

http://forums.asp.net/t/812415.aspx

http://forums.asp.net/t/1167113.aspx

http://forums.asp.net/t/1023605.aspx

http://forums.asp.net/p/1259642/2350917.aspx

http://forums.asp.net/p/974674/2185721.aspx

http://forums.asp.net/p/1011033/2899195.aspx

http://forums.asp.net/p/1063197/1537104.aspx

http://forums.asp.net/p/1207405/2129938.aspx

6. How do I change the master page at runtime? [top]

Use following code:

protected void Page_PreInit(object sender, EventArgs e)

{

if (Session["user"] == null)

this.Page.MasterPageFile = "~/MasterPage2.master";

else

this.Page.MasterPageFile = "~/MasterPage1.master";

}

The key here is to put the code in Page_PreInit.

Related threads,

http://forums.asp.net/t/1170081.aspx

http://forums.asp.net/t/1260175.aspx

http://forums.asp.net/t/986565.aspx

http://forums.asp.net/t/1294163.aspx

http://forums.asp.net/p/1140254/1832376.aspx

7. How do I use nested master page? [top]

Following code will show how to implement nested master page step by step:

parent.master markup code:

<% @ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<title>Untitled Page</title>

</head>

<body>

<div>

<h1>

Parent Master</h1>

This is parent master content.</p>

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

</div>

</form>

</body>

</html>

child.master markup code:

<%@ Master Language="C#" MasterPageFile="~/parent .master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<asp:Panel runat="server" ID="panelMain" BackColor="lightyellow">

<h2>

Child master</h2>

<asp:Panel runat="server" ID="panel1" BackColor="lightblue">

<p>

This is child master content.</p>

<asp:ContentPlaceHolder ID="ChildContent1" runat="server" />

</asp:Panel>

<asp:Panel runat="server" ID="panel2" BackColor="pink">

<p>

This is child master content.</p>

<asp:ContentPlaceHolder ID="ChildContent2" runat="server" />

</asp:Panel>

<br />

</asp:Panel>

</asp:Content>

child.aspx markup code:

<%@ Page Language="C#" MasterPageFile="~/child.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ChildContent1" runat="server">

<asp:label runat="server" id="Label1" text="Child label1" font-bold="true" />

<br />

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ChildContent2" runat="server">

<asp:label runat="server" id="Label2" text="Child label2" font-bold="true" />

</asp:Content>

Related threads,

http://forums.asp.net/t/1059255.aspx

http://forums.asp.net/t/1270231.aspx

http://forums.asp.net/t/923612.aspx

http://forums.asp.net/p/1338093/2701349.aspx

http://forums.asp.net/p/1345334/2733082.aspx

Themes and Skins [top]

8. What are themes and skins? [top]

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server. Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will contain skins. Themes are defined in special directories in your Web site or on your Web server.

A skin file has the file name extension .skin and contains property settings for individual controls such as Button, Label, TextBox, or Calendar controls. Control skin settings are like the control markup itself, but contain only the properties you want to set as part of the theme.

Please refer to following link for more information:

http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx

9. How do I change themes dynamically? [top]

We can programmatically set the theme for a page, but the Theme property must be set in the PreInit event of a page. This is because the skins in a Theme are applied after the PreInit event but before the Init event.

protected void Page_PreInit(object sender, EventArgs e)

{

string thm;

thm = (string)Session["themeSelected"];

if (thm != null)

{

Page.Theme = thm;

DropDownList1.Text = thm;

}

else

{

Session["themeSelected"] = DropDownList1.Text;

Page.Theme = "Blue";

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

Session["themeSelected"] = DropDownList1.Text;

Server.Transfer(Request.FilePath);

}

Related threads:

http://forums.asp.net/t/1094690.aspx

http://forums.asp.net/t/879808.aspx

http://forums.asp.net/t/1138835.aspx

http://forums.asp.net/p/1106977/1695768.aspx

http://forums.asp.net/p/1383293/2936429.aspx

http://forums.asp.net/p/1363437/2822860.aspx

Navigation controls [top]

10. How do I access all TreeNodes in a TreeView control? [top]

We can use a recursive function to do this, please refer to following code:

protected void Page_Load(object sender, EventArgs e)

{

foreach (TreeNode node in tvDemo.Nodes)

{

SetNode(node);

}

void SetNode(TreeNode node)

{

if (node.Depth != 0)

{

//some code

}

if (node.ChildNodes.Count > 0)

{

foreach (TreeNode childnode in node.ChildNodes)

{

SetNode(childnode);

}

Related threads:

http://forums.asp.net/t/1378432.aspx

http://forums.asp.net/p/1374742/2885991.aspx

http://forums.asp.net/p/1362784/2820103.aspx

11. How do I expand or collapse all TreeNodes with JavaScript? [top]

We can expand and collapse all TreeNodes on the server side, but it needs a post back. To avoid this, we can use JavaScript.

In the sample code below, the function “TreeviewExpandCollapseAll” is used to demonstrate how to expand or collapse a TreeView. The function takes two parameters, the first parameter “treeViewId” is the TreeView control’s ID, and the second parameter “expandAll” is used to determine whether or not to expand the TreeView control.

See the complete code below:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>TreeView Demo</title>

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);

}

function GetParentByTagName(parentTagName, childElementObj) {

var parent = childElementObj.parentNode;

while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {

parent = parent.parentNode;

}

return parent;

} </script>

</head>

<body>

<div>

<asp:TreeView ID="TreeViewDemo" runat="server" ExpandDepth="1">

<Nodes>

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A" Value="A">

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A1" Value="A1">

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A11" Value="A11"></asp:TreeNode>

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A12" Value="A12"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A2" Value="A2">

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A21" Value="A21"></asp:TreeNode>

<asp:TreeNode NavigateUrl="http://www.asp.net" Text="A22" Value="A22"></asp:TreeNode>

</asp:TreeNode>

</Nodes>

</asp:TreeView>

<a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', true)">Expand

All</a> <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', false)">

Collapse All</a>

</div>

</form>

</body>

</html>

http://forums.asp.net/p/1359189/2799350.aspx

12. How do I check/uncheck TreeNodes checkbox? [top]

When we set ShowCheckBoxes="All", we would like to provide a feature if people select the Root Node’s checkbox, then all its child nodes’ checkboxes are checked automatically.

When the parent node is checked, all the child nodes should check automatically; when one child node is unchecked, the parent node should be unchecked.

In the functions below:

· OnTreeClick: used to check parent and child node

· CheckUncheckChildren: used to check or uncheck the child node

· CheckUncheckParents: used to check or uncheck the parent node

· AreAllSiblingsChecked:used to check all siblings node

· GetParentByTagName: used to get parent tag name

See the complete code below:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

TreeViewDemo.Attributes.Add("onclick", "OnTreeClick(event)");

}

</script>

<title>TreeView</title>

//************************** Treeview Parent-Child check behavior ****************************//

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;

if(nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node

{

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 child is 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;

}

</script>

</head>

<body>

<div>

<asp:TreeView ID="TreeViewDemo" runat="server" ShowCheckBoxes="All">

<Nodes>

<asp:TreeNode Text="My Computer">

<asp:TreeNode Text="Favorites">

<asp:TreeNode Text="News">

<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com" />

<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com" />

</asp:TreeNode>

<asp:TreeNode Text="Technology">

<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com" />

<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net" />

<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com" />

<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com" />

</asp:TreeNode>

<asp:TreeNode Text="Shopping">

<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com" />

<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com" />

</asp:TreeNode>

<asp:TreeNode Text="City Links">

<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com" />

<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com" />

</asp:TreeNode>

<asp:TreeNode Text="Music Links">

<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com" />

</asp:TreeNode>

</Nodes>

</asp:TreeView>

</div>

</form>

</body>

</html>

Related threads:

http://forums.asp.net/t/1367074.aspx

http://forums.asp.net/t/976122.aspx

http://forums.asp.net/t/1088627.aspx

13. How do I generate a TreeView based on the folder structure? [top]

Please see following example:

· SetNodes: used to change the navigation URL by iterating through all nodes

· OutputDirectory: used to output a directory to a node

· ConvertFileToRelativePaths: used to convert the path

· GenerateDirectoryTree: used to generate a directory tree

· BindDirectoryToDropDownList: used to bind directories to the DropDownList control

Markup code (MyWebsiteTreeView.aspx):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyWebsiteTreeView.aspx.cs"

Inherits="MyWebsiteTreeView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:TreeView ID="TreeView1" runat="server">

</asp:TreeView>

<asp:DropDownList ID="ddlRootDirectory" runat="server">

</asp:DropDownList>

<asp:Button ID="btnGenerateDirectoryTree" runat="server" Text="Ggenerate Directory Tree"

onclick="btnGenerateDirectoryTree_Click" />

</div>

</form>

</body>

</html>

Behind code (MyWebsiteTreeView.aspx.cs):

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

public partial class MyWebsiteTreeView : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindDirectoryToDropDownList(ddlRootDirectory);

}

/// <summary>

/// Change the tree

/// </summary>

/// <param name="node"></param>

void SetNodes(TreeNode node)

{

string ab = node.NavigateUrl;

node.NavigateUrl = node.NavigateUrl.Replace("FAQ\\", "");//FAQ is the directory name

node.NavigateUrl = node.NavigateUrl.Replace("\\", "/");//For Firefox and IE

if (node.ChildNodes.Count > 0)

{

foreach (TreeNode childNode in node.ChildNodes)

{

SetNodes(childNode);

}

/// <summary>

/// Output Directory to a node

/// </summary>

/// <param name="directory"></param>

/// <param name="parentNode"></param>

/// <returns></returns>

TreeNode OutputDirectory(System.IO.DirectoryInfo directory, TreeNode parentNode)

{

// validate param

if (directory == null) return null;

// create a node for this directory

TreeNode DirNode = new TreeNode(directory.Name);

// get subdirectories of the current directory

System.IO.DirectoryInfo[] SubDirectories = directory.GetDirectories();

// output each subdirectory

for (int DirectoryCount = 0; DirectoryCount < SubDirectories.Length; DirectoryCount++)

{

OutputDirectory(SubDirectories[DirectoryCount], DirNode);

}

// output the current directories files

System.IO.FileInfo[] Files = directory.GetFiles();

for (int FileCount = 0; FileCount < Files.Length; FileCount++)

{

//if (Files[FileCount].Extension == ".htm")

//{

string filename = ConvertFileToRelativePaths(Files[FileCount].FullName, "FAQ");//FAQ is the directory name

DirNode.ChildNodes.Add(new TreeNode(Files[FileCount].Name, Files[FileCount].Name, "", filename, "_blank"));

//}

}

// if the parent node is null, return this node

// otherwise add this node to the parent and return the parent

if (parentNode == null)

{

return DirNode;

}

else

{

parentNode.ChildNodes.Add(DirNode);

return parentNode;

}

/// <summary>

/// Convert File To Relative Paths

/// </summary>

/// <param name="fileName"></param>

/// <param name="rootName"></param>

/// <returns></returns>

string ConvertFileToRelativePaths(string fileName, string rootName)

{

return fileName.Substring(fileName.LastIndexOf(rootName));

}

/// <summary>

/// Generate Directory Tree

/// </summary>

/// <param name="tv"></param>

void GenerateDirectoryTree(TreeView tv)

{

tv.Nodes.Clear();

System.IO.DirectoryInfo RootDir = new System.IO.DirectoryInfo(Server.MapPath("~/" + ddlRootDirectory.SelectedValue + "/"));

//set the root as "~/"

if (ddlRootDirectory.SelectedValue == "Root")

{

RootDir = new System.IO.DirectoryInfo(Server.MapPath("~/"));

}

// output the directory into a node

TreeNode RootNode = OutputDirectory(RootDir, null);

// add the output to the tree

TreeView1.Nodes.Add(RootNode);

foreach (TreeNode node in tv.Nodes)

{

SetNodes(node);

}

/// <summary>

/// bind data to DropDownList

/// </summary>

/// <param name="ddl"></param>

void BindDirectoryToDropDownList(DropDownList ddl)

{

ddl.Items.Clear();

System.IO.DirectoryInfo RootDir = new System.IO.DirectoryInfo(Server.MapPath("~/"));

System.IO.DirectoryInfo[] SubDirectories = RootDir.GetDirectories();

ddl.Items.Add("Root");

foreach (DirectoryInfo dir in SubDirectories)

{

ddl.Items.Add(dir.Name);

}

/// <summary>

/// Generate the tree

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void btnGenerateDirectoryTree_Click(object sender, EventArgs e)

{

GenerateDirectoryTree(TreeView1);

}

http://forums.asp.net/p/1364377/2828536.aspx

14. How do I add a confirmation dialog for each TreeNode? [top]

Normally, the current page will be redirected to another page directly when you click on a TreeNode. If you want to popup a confirmation dialog before redirecting, you can use following code:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

protected void Page_Load(object sender, EventArgs e)

{

string confirmMessage = "Yes/No?";

// write a function for popup a confirm dialog

string script = @"function treeNodeConfirmation(mEvent, text)

{

var o;

// Internet Explorer

if (mEvent.srcElement)

{

o = mEvent.srcElement;

}

// Netscape and Firefox

else if (mEvent.target)

{

o = mEvent.target;

}

if(o.tagName == 'A' || o.tagName == 'a')

{

return confirm (text);

}

}";

// regist the function

ScriptManager.RegisterClientScriptBlock(myTreeView, typeof(TreeView), "treeNodeClickConfirm", script, true);

// add the function to the TreeView’s Attributes

// it means when the client users click the TreeNodes, it will popup a confirm // dialog.

myTreeView.Attributes.Add("onclick", "javascript:return treeNodeConfirmation(event, '" + confirmMessage + "')");

}

</script>

</head>

<body>

<div>

<asp:TreeView ID="myTreeView" runat="server">

<Nodes>

<asp:TreeNode Text="My Computer">

<asp:TreeNode Text="Favorites">

<asp:TreeNode Text="News">

<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com" />

<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com" />

</asp:TreeNode>

<asp:TreeNode Text="Technology">

<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com" />

<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net" />

<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com" />

<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com" />

</asp:TreeNode>

<asp:TreeNode Text="Shopping">

<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com" />

<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com" />

</asp:TreeNode>

<asp:TreeNode Text="City Links">

<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com" />

<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com" />

</asp:TreeNode>

<asp:TreeNode Text="Music Links">

<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com" />

</asp:TreeNode>

</Nodes>

</asp:TreeView>

</div>

</form>

</body>

</html>

Related threads:

http://forums.asp.net/t/1020789.aspx

http://forums.asp.net/t/1355481.aspx

http://forums.asp.net/p/1353925/2771697.aspx

http://forums.asp.net/p/1353925/2790985.aspx

15. How do I add Master Pages on the existing web forms? [top]

For more information refer to following link:

http://forums.asp.net/t/1244510.aspx

16. How do I build a TreeView by using AJAX? [top]

For more information refer to following link:

http://www.codeproject.com/KB/aspnet/TreeViewAjax.aspx

17. How do I use multiple sitemap files in ASP.NET 2.0? [top]

For more information refer to following link:

http://www.codeproject.com/KB/aspnet/MutlipleSiteMap.aspx