How To: C# and ASP.Net Menu

Ok, so I figured that I start putting some of my personal programming feats up here on my blog. Recently, I have been working on a simple menu system. I wanted to do something similar to the menu system that is on MSDN, but they use an xml file which would make me do more work. Here is how I got my menu system:

I made small square buttons with text either a + and - to represent a menu that can be expanded and colapsed, or a * for a menu button that can't be expanded.

So here is an example of one of my buttons that represent this:

<asp:button id="Button_Project" runat="server" tooltip="Click here to view my programs" borderwidth="1px" size="Smaller" backcolor="Transparent" names="Garamond" bordercolor="RoyalBlue" height="15px" width="15px" borderstyle="Solid" forecolor="RoyalBlue" text="+"/>

I then put another button to the right of this with no borders. I didn't want to use a label, so that the user can also click on the name to have the menu expanded.
So here is the button that looks like text to the right:

<asp:button id="Button_Projects" runat="server" size="Smaller" backcolor="Transparent" height="20px" width="53px" borderstyle="None" forecolor="RoyalBlue" text="Projects"/>

Now when any of these buttons are clicked, I will want to expand and show the inner menu options. To do this I made a string variable, in this case ProjectsBR, to expand within the aspx file. This is done by:

<%=ProjectsBR%>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

I use the spaces to represent a shift to the right, so that the inner menu options look like a tree.

In the aspx.cs file I assign the global variable:

protected string ProjectsBR;

In the Page_Load function I have the following:

if(this.Button_Project.Text == "+")
{
ProjectsBR = "";
}
else
{
ProjectsBR = "<br>";
}

If the button's text is a expanded then I want brackets, else I want nothing.

So on the aspx file I have several more buttons that represents the inner menu. These button's visiablility are set to false, so that they don't show unless I ask them to. So, when the button is pressed, I change the text to either + or -, then show or hide the buttons, and set ProjectBR to the necessary string value.

private void Button_Project_Click(object sender, System.EventArgs e)
{
if(this.Button_Project.Text == "+")
{
this.Button_Project_ASP.Visible = true;
this.Button_Project_ASP2.Visible = true;
this.Button_Project_C.Visible = true;
this.Button_Project_C2.Visible = true;
this.Button_Project_CGI.Visible = true;
this.Button_Project_CGI2.Visible = true;
this.Button_Project_Csharp.Visible = true;
this.Button_Project_Csharp2.Visible = true;
this.Button_Project_DB.Visible = true;
this.Button_Project_DB2.Visible = true;
this.Button_Project_Java.Visible = true;
this.Button_Project_Java2.Visible = true;
this.Button_Project_Misc.Visible = true;
this.Button_Project_Misc2.Visible = true;
this.Button_Project_Paper.Visible = true;
this.Button_Project_Paper2.Visible = true;
this.Button_Project_Python.Visible = true;
this.Button_Project_Python2.Visible = true;
this.Button_Project.Text = "-";
this.ProjectsBR = "<br>";
}
else //if(this.Button_Project.Text == "-")
{
this.Button_Project_ASP.Visible = false;
this.Button_Project_ASP2.Visible = false;
this.Button_Project_C.Visible = false;
this.Button_Project_C2.Visible = false;
this.Button_Project_CGI.Visible = false;
this.Button_Project_CGI2.Visible = false;
this.Button_Project_Csharp.Visible = false;
this.Button_Project_Csharp2.Visible = false;
this.Button_Project_DB.Visible = false;
this.Button_Project_DB2.Visible = false;
this.Button_Project_Java.Visible = false;
this.Button_Project_Java2.Visible = false;
this.Button_Project_Misc.Visible = false;
this.Button_Project_Misc2.Visible = false;
this.Button_Project_Paper.Visible = false;
this.Button_Project_Paper2.Visible = false;
this.Button_Project_Python.Visible = false;
this.Button_Project_Python2.Visible = false;
this.Button_Project.Text = "+";
this.ProjectsBR = "";
}
}

Thats' basically it, all in a nut-shell