How to: Add Navigation Elements to a Content Page

Applies To: Windows Server 2012 Essentials, Windows Home Server 2011, Windows Storage Server 2008 R2 Essentials, Windows Small Business Server 2011 Essentials

You can add a Breadcrumb control and a Search Box control to provide navigation functionality to pages.

To add a breadcrumb control

1. Open Visual Studio 2010 as an administrator by right-clicking the program in the Start menu and selecting Run as administrator.

2. Open the .aspx.cs file for the content page.

3. Add the following code to the Page_Load method in the .aspx.cs file:

   this.Breadcrumb.AddNode("node1");  
   

   Where node1 is the name that appears in the Breadcrumb list.

4. To include a link for the node, add the link information after the node string, such as the following example, which links to another content page:

   this.Breadcrumb.AddNode("node2", VirtualPathUtility.ToAbsolute("~/" +   
      this.WebAddIn.Path + "/ContentPage1.aspx"));  
   

5. Save the .aspx.cs file.

6. Publish the application.

To add a search box

1. Open Visual Studio 2010 as an administrator by right-clicking the program in the Start menu and selecting Run as administrator.

2. Open the .aspx.cs file for the content page.

3. Add the following code to the Page_Load method in the .aspx.cs file:

   this.SearchBox.Visible = true;  
   

4. To populate the search box with initial text, you can use the Watermark property, such as the following example:

   this.SearchBox.Visible = true;  
   this.SearchBox.Watermark = "Search Here!";  
   

5. You can add events to the search box. The following code example shows how to add an event that adds a node to the breadcrumb when a search is performed:

   this.SearchBox.Visible = true;  
   this.SearchBox.Watermark = "Search Here!";  
   this.SearchBox.Search += new EventHandler(SearchBox_Search);  
   
   void SearchBox_Search(object sender, EventArgs e)  
   {  
      this.Breadcrumb.AddNode("Searched");  
   }  
   

6. You can also use JavaScript to provide search results. For example, the following code shows how to use the showAlert JavaScript function to provide information:

   this.SearchBox.OnClientSearch = string.Format("showAlert('{0}');",   
   RemoteAccessUser.Current.AccountName);  
   

   OnClientSearch initiates the search on the client.

7. Save the .aspx.cs file.

8. Publish the application.