MasterPage：

http://forums.asp.net/p/1371287/2867278.aspx

http://forums.asp.net/p/1367012/2843903.aspx

http://forums.asp.net/p/1353270/2776218.aspx

http://forums.asp.net/p/1324661/2641317.aspx

How to use a strongly typed reference to master page in content page?

We can place a @ MasterType directive in our content page to do this.

For example, see the following markup code of master page

<asp:Label ID="lblMessage" runat="server" Text="I am a MasterPage"></asp:Label>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

Code-behind:

public string Message

get { return lblMessage.Text; }

set { lblMessage.Text = value; }

Markup code of content page:

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

<%@ MasterType VirtualPath="~/MasterPage.master" %>

Code-behind:

Master.Message = "I Love ASP.NET!";

We need to set this line in Web.config file if we use above code,

We must use the following markup code in the content page if we do not assign any master page in the Web.config,

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

<%@ MasterType VirtualPath="~/MasterPage.master" %>

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

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

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

http://forums.asp.net/p/1174398/1980954.aspx

http://forums.asp.net/p/609559/620839.aspx

http://forums.asp.net/p/1358205/2794157.aspx

How to add HtmlMeta from content page?

See the following code,

HtmlMeta metaTag = new HtmlMeta();

metaTag.Name = "keywords";

metaTag.Content = "ASP.NET,C#,VB";

Header.Controls.Add(metaTag);

Now run the application and open the source code in the client side, we will see the bellow line,

http://forums.asp.net/p/1385135/2942780.aspx

http://forums.asp.net/p/1007704/1381203.aspx

http://forums.asp.net/p/1340962/2715956.aspx

http://forums.asp.net/p/1385201/2943162.aspx

http://forums.asp.net/p/1357221/2789468.aspx

http://forums.asp.net/p/1217546/2170120.aspx

How to add CSS or JavaScript from content page dynamically?

Page class contains a public property named Header. we can convert HTML head tag to the corresponding server control by adding runat=”server” to its definition and then access the head tag in code behind. Now see the code,

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, we will see,

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

How to change the master page at runtime?

We can use the following code to do this,

protected void Page_PreInit(object sender, EventArgs e)

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

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

else

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

We must put the code in Page_PreInit which will be executed just before the Render event.

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

How to use nested master page?

See the following complete code, this code show us how to nested master page step by step.

parent.master 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 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 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

What are themes and skins?

Refer this link,

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

How to change themes dynamically?

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 fires but before the Init event fires.

protected void Page_PreInit(object sender, EventArgs e)

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

string thm;

if (thm != null)

DropDownList1.Text = thm;

Page.Theme = 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);

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

How to access all TreeNodes in a TreeView control?

We can use a recursive function to implement it, please reference below sample code:

protected void Page_Load(object sender, EventArgs e)

foreach (TreeNode node in tvDemo.Nodes)

SetNode(node);

void SetNode(TreeNode node)

if (node.ChildNodes.Count > 0)

foreach (TreeNode childnode in node.ChildNodes)

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

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

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

How to expand or collapse all of TreeNodes with JavaScript?

We can expand and collapse all TreeNodes in server side, but it needs a post back. For avoiding this unnecessary behavior, we can use JavaScript to do this task.

In the below sample code, 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 one “expandAll” is used to determine whether or not to expand the TreeView control.

See the below complete code,

<%@ 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>

Related threads,

http://forums.asp.net/p/1355481/2779144.aspx

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

How to check/uncheck TreeNodes checkbox?

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

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

It is easy to do this in server side. For some reason, we do not want to post back, so, for preventing this behavior, we can use JavaScript to accomplish this task.

In the below functions:

· 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 below complete 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)

{

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

How to generate a TreeView based on the folder structure?

Sometimes, we need to generate a TreeView based on the folders structure dynamically.

In the below methods,

· 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.

See the below complete code,

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

}

Related threads,

http://forums.asp.net/p/1378432/2920430.aspx

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

How to add a confirm dialog for each TreeNode?

When we click on a TreeNode, it will navigate to another page directly. But sometimes, we need to popup a dialog to ask the user to confirm to access the page or not.

See the below complete 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)