[Sample of Mar 26th] Basic ASP.NET Menu control demo
 |
 |
|
 |
 |
|
Sample Downloads
C# version: https://code.msdn.microsoft.com/CSASPNETMenu-c2048f94
VB version: https://code.msdn.microsoft.com/VBASPNETMenu-a82fa7c3
Today’s code sample demonstrates how to bind the ASP.NET Menu Control to the Database. All the contents of the Menu control are generated dynamically, if we want to add some new navigation items into the website, we only need to insert some data to the database instead of modifying the source code.
You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.
Introduction
The sample demonstrates how to bind the ASP.NET Menu Control to the Database. All the contents of the Menu control are generated dynamically, if we want to add some new navigation items into the website, we only need to insert some data to the database instead of modifying the source code.
Running the Sample
Please follow these demonstration steps below.
Step 1: Open the CSASPNETMenu.sln. Expand the CSASPNETMenu web application and press Ctrl + F5 to show the CSASPNETMenu.aspx.
Step 2: We will see a Menu control on the page, you can click the Menu items and jump to the Test.aspx page.
Step 3: If you want to change the url string variables to your website’s pages, you need to modify the DataTable object in the code-bebind page (CSASPNETMenu.aspx.cs). Perhaps we need a table in DataBase for managing menu items content and navigator url, you can also create a database file to constitute a DataTable like this sample.
Step 4: Validation finished.
Using the Code
Step 1. Create a C# "ASP.NET Empty Web Application" in Visual Studio 2010 or Visual Web Developer 2010. Name it as " CSASPNETMenu ". The project includes two web form pages for demonstrating how to bind Menu control with a DataTable variable.
Step 2. Add two web form pages in the root directory of the application, name them as “CSASPNETMenu.aspx”, “Test.aspx”. The CSASPNETMenu page is used to show Menu control and redirect to the Test page by clicking the items of Menu.
Step 3. Drag and Drop a Menu control to the CSASPNETMenu page, you can set the styles of the Menu to make it looks better. Then you can begin to write C# code for generating DataTable variable and bind it to the Menu control, in this sample, we create a GetData() method to generate data.
The following code is used to generate a DataTable variable and fill it with some default value:
public DataSet GetData()
{
// In order to test, we use the memory tables as the datasource.
DataTable mainTB = new DataTable();
DataColumn mainIdCol = new DataColumn("mainId");
DataColumn mainNameCol = new DataColumn("mainName");
DataColumn mainUrlCol = new DataColumn("mainUrl");
mainTB.Columns.Add(mainIdCol);
mainTB.Columns.Add(mainNameCol);
mainTB.Columns.Add(mainUrlCol);
DataTable childTB = new DataTable();
DataColumn childIdCol = new DataColumn("childId");
DataColumn childNameCol = new DataColumn("childName");
// The MainId column of the child table is the foreign key to the main table.
DataColumn childMainIdCol = new DataColumn("MainId");
DataColumn childUrlCol = new DataColumn("childUrl");
childTB.Columns.Add(childIdCol);
childTB.Columns.Add(childNameCol);
childTB.Columns.Add(childMainIdCol);
childTB.Columns.Add(childUrlCol);
// Insert some test records to the main table.
DataRow dr = mainTB.NewRow();
dr[0] = "1";
dr[1] = "Home";
dr[2] = "Test.aspx";
mainTB.Rows.Add(dr);
DataRow dr1 = mainTB.NewRow();
dr1[0] = "2";
dr1[1] = "Articles";
dr1[2] = "Test.aspx";
mainTB.Rows.Add(dr1);
DataRow dr2 = mainTB.NewRow();
dr2[0] = "3";
dr2[1] = "Help";
dr2[2] = "Test.aspx";
mainTB.Rows.Add(dr2);
DataRow dr3 = mainTB.NewRow();
dr3[0] = "4";
dr3[1] = "DownLoad";
dr3[2] = "Test.aspx";
mainTB.Rows.Add(dr3);
// Insert some test records to the child table
DataRow dr5 = childTB.NewRow();
dr5[0] = "1";
dr5[1] = "ASP.NET";
dr5[2] = "2";
dr5[3] = "Test.aspx";
childTB.Rows.Add(dr5);
DataRow dr6 = childTB.NewRow();
dr6[0] = "2";
dr6[1] = "SQL Server";
dr6[2] = "2";
dr6[3] = "Test.aspx";
childTB.Rows.Add(dr6);
DataRow dr7 = childTB.NewRow();
dr7[0] = "3";
dr7[1] = "JavaScript";
dr7[2] = "2";
dr7[3] = "Test.aspx";
childTB.Rows.Add(dr7);
// Use the DataSet to contain that two tables.
DataSet ds = new DataSet();
ds.Tables.Add(mainTB);
ds.Tables.Add(childTB);
// Build the relation between the main table and the child table.
ds.Relations.Add("Child", ds.Tables[0].Columns["mainId"], ds.Tables[1].Columns["MainId"]);
return ds;
}
Step 4. Then we need to create a GenerateMenuItem method for binding DataTable to the Menu control, and we need only execute this method when CSASPMETMenu page is loaded for the first time.
The following code is used to bind DataTable to the Menu control when page is loaded for the first time.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GenerateMenuItem();
}
}
public void GenerateMenuItem()
{
// Get the data from database.
DataSet ds = GetData();
foreach (DataRow mainRow in ds.Tables[0].Rows)
{
// Load the records from the main table to the menu control.
MenuItem masterItem = new MenuItem(mainRow["mainName"].ToString());
masterItem.NavigateUrl = mainRow["mainUrl"].ToString();
Menu1.Items.Add(masterItem);
foreach (DataRow childRow in mainRow.GetChildRows("Child"))
{
// According to the relation of the main table and the child table, load the data from the child table.
MenuItem childItem = new MenuItem((string)childRow["childName"]);
childItem.NavigateUrl = childRow["childUrl"].ToString();
masterItem.ChildItems.Add(childItem);
}
}
}
Step 5. Build the application and you can debug it.