Let me show an example of how to use the breadcrumb button (BCB). This example involves a four step wizard. Depending on your answer to the question you will be taken to a different view (panel). The breadcrumbbutton tracks your path, allowing you to go back at any time. This is an example only so please be forgiving of the repeated code.
The lines of code dealing with the BCB are the AddCrumb and RemoveToCrumb. The AddCrumb will add some text and a command string. The text is displayed for the end user to know what step they are/were on. The command part is for the developer. They can use that string argument to tell them what to show if a user clicks on that breadcrumb.
The RemoveToCrumb is a little trickier. It is tricky because you are tempted to pass the argument e.Index to remove. e.Index is the EventArg passed into the BCB_Click event. Index is the crumb that was clicked on. If the developer removes e.Index it will remove the breadcrumb the user is on. Remember, breadcrumbs are displayed the first time as text and then all other times as links. If you remove e.Index the whole crumb disappears. So we add 1 to the Index to remove all crumbs before this one. Because this crumb is the last in the list it will be displayed as text. You could easily modify the source code to do this "+1" for you automatically.
Here is the test page. Below is the code.
<![CDATA[
<%@ Register TagPrefix="cc1" Namespace="AdvancedControls" Assembly="AdvancedControls" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="true" %>
<script language="C#" runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
bcb.AddCrumb("Start", "pnl0");
}
private void bcb_Click(object sender, InnerInfo.AdvancedControls.BreadcrumbClickEventArgs e)
{
EnablePanel(e.Command);
//don't remove to the current one. Remove just after it
bcb.RemoveToCrumb(e.Index + 1);
}
private void btnStart_Click(object sender, System.EventArgs e)
{
bcb.AddCrumb(rblStart.SelectedItem.Text, rblStart.SelectedValue);
RadioButtonList rbl = GetList(rblStart.SelectedValue);
if(rbl != null)
{
rbl.Items.Clear();
foreach(ListItem itm in rblStart.Items)
if(!itm.Selected)
rbl.Items.Add(itm);
}
EnablePanel(rblStart.SelectedValue);
}
private void btnNext1_Click(object sender, System.EventArgs e)
{
bcb.AddCrumb(rbl1.SelectedItem.Text, rbl1.SelectedValue);
RadioButtonList rbl = GetList(rbl1.SelectedValue);
if(rbl != null)
{
rbl.Items.Clear();
foreach(ListItem itm in rbl1.Items)
if(!itm.Selected)
rbl.Items.Add(itm);
}
EnablePanel(rbl1.SelectedValue);
}
private void btnNext2_Click(object sender, System.EventArgs e)
{
bcb.AddCrumb(rbl2.SelectedItem.Text, rbl2.SelectedValue);
RadioButtonList rbl = GetList(rbl2.SelectedValue);
if(rbl != null)
{
rbl.Items.Clear();
foreach(ListItem itm in rbl2.Items)
if(!itm.Selected)
rbl.Items.Add(itm);
}
EnablePanel(rbl2.SelectedValue);
}
private void btnNext3_Click(object sender, System.EventArgs e)
{
bcb.AddCrumb(rbl3.SelectedItem.Text, rbl3.SelectedValue);
RadioButtonList rbl = GetList(rbl3.SelectedValue);
if(rbl != null)
{
rbl.Items.Clear();
foreach(ListItem itm in rbl3.Items)
if(!itm.Selected)
rbl.Items.Add(itm);
}
EnablePanel(rbl3.SelectedValue);
}
private RadioButtonList GetList(string Token)
{
switch(Token)
{
case "pnl1":
return rbl1;
case "pnl2":
return rbl2;
case "pnl3":
return rbl3;
case "pnl4":
default:
return null;
}
}
private void EnablePanel(string Token)
{
pnlStart.Visible = false;
pnl1.Visible = false;
pnl2.Visible = false;
pnl3.Visible = false;
pnlFinish.Visible = false;
switch(Token)
{
case "pnl0":
pnlStart.Visible = true;
break;
case "pnl1":
pnl1.Visible = true;
break;
case "pnl2":
pnl2.Visible = true;
break;
case "pnl3":
pnl3.Visible = true;
break;
case "pnl4":
pnlFinish.Visible = true;
break;
}
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>BreadCrumbButton Test</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<p>
<cc1:BreadcrumbButton id="bcb" runat="server" Width="400px" onclick="bcb_Click"></cc1:BreadcrumbButton><br>
<asp:Panel id="pnlStart" runat="server">
<p>Where would you like to start?</p>
<p></p>
<p>
<asp:RadioButtonList id="rblStart" runat="server">
<asp:ListItem Value="pnl1">Page 1</asp:ListItem>
<asp:ListItem Value="pnl2">Page 2</asp:ListItem>
<asp:ListItem Value="pnl3">Page 3</asp:ListItem>
<asp:ListItem Value="pnl4">Page 4</asp:ListItem>
</asp:RadioButtonList></p>
<p>
<asp:Button id="btnStart" runat="server" Text="Start" onclick="btnStart_Click"></asp:Button></asp:Panel>
<asp:Panel id="pnl1" runat="server" visible="False">
<p>#1 - Now Where?</p>
<p></p>
<p>
<asp:RadioButtonList id="rbl1" runat="server"></asp:RadioButtonList></p>
<p>
<asp:Button id="btnNext1" runat="server" Text="Next" onclick="btnNext1_Click"></asp:Button></asp:Panel>
<asp:Panel id="pnl2" runat="server" visible="False">
<p>#2 - Now Where?</p>
<p></p>
<p>
<asp:RadioButtonList id="rbl2" runat="server"></asp:RadioButtonList></p>
<p>
<asp:Button id="btnNext2" runat="server" Text="Next" onclick="btnNext2_Click"></asp:Button></asp:Panel>
<asp:Panel id="pnl3" runat="server" visible="False">
<p>#3 - Now Where?</p>
<p></p>
<p>
<asp:RadioButtonList id="rbl3" runat="server"></asp:RadioButtonList></p>
<p>
<asp:Button id="btnNext3" runat="server" Text="Next" onclick="btnNext3_Click"></asp:Button></asp:Panel>
<asp:Panel id="pnlFinish" runat="server" visible="False">#4 - You Made It. Look
at your path above.</asp:Panel>
</p>
</form>
</body>
</html>
]]>