Bootstrap XML Navigation is a .NET Framework 4 project

Using Bootstrap XML Navigation:

Add the following to your sites web.config:
<pages>
  <controls>
    <add tagPrefix="jtw" assembly="BootstrapNavigation" namespace="JTW.Web.UI.WebControls" />
  </controls>
<pages>

Add a reference to the BootstrapNavigation.dll in your project.

Usage in markup:

<div class="well sidebar-nav">
  <ul class="nav nav-list">
    <jtw:BootstrapNavigation ID="userSideNavigation" runat="server" XmlInputFile="https://www.domain.com/Navigation/MainSideUserNavigation.xml" />
  </ul>
</div>

You may also use relative URLS
<div class="well sidebar-nav">
  <ul class="nav nav-list">
    <jtw:BootstrapNavigation ID="userSideNavigation" runat="server" XmlInputFile="~/Navigation/MainSideUserNavigation.xml" />
  </ul>
</div>

In MainSideUserNavigation.xml:

Your XML file can obviously be named anything you like

<?xml version="1.0" encoding="utf-8" ?>
<NavigationItems>
  <NavigationItem id="userMenuHeader" admin="false" hidden="false">
    <Name>User Menu</Name>
    <CssClass>nav-header</CssClass>
  </NavigationItem>
  <NavigationItem id="home" admin="false" hidden="false" development="false">
    <Name>Home</Name>
    <Url>../Default.aspx</Url>
    <IconClass>icon-home</IconClass>
  </NavigationItem>
  <NavigationItem id="option1" admin="false" hidden="false" dropdown="true">
    <Name>Option 1</Name>
    <Url>#</Url>
    <IconClass>icon-tasks</IconClass>
    <CssClass>dropdown</CssClass>
    <NavigationItems>
      <NavigationItem id="option1sub1" admin="false" hidden="false">
        <Name>Option 1 - Sub-Option 1</Name>
        <Url>../Option1Sub1.aspx</Url>
        <IconClass>icon-tasks</IconClass>
      </NavigationItem>
      <NavigationItem admin="false" hidden="false">
        <Name>Option 1 - Sub-Option 2</Name>
        <Url>#</Url>
        <IconClass>icon-globe</IconClass>
      </NavigationItem>
    </NavigationItems>
  </NavigationItem>
</NavigationItems>

Notice that in the above XML one of the <NavigationItem> elements (id="option1") has a nested <NavigationItems> element. Bootstrap XML Navigation recursively constructs navigation menus. This allows for fly-out, etc.

If you want sub-menus (fly-outs) to work in top navigation elements you can added the following to your site CSS:

/* added to allow for top nav bar flyouts */
.nav li.dropdown ul.dropdown-menu li:HOVER ul
{
    display:block; 
    position:absolute; 
    left:100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
 
 /* added to allow for top nav bar flyouts */
.nav li.dropdown ul.dropdown-menu ul
{
    display: none;
    float:right;
    position: relative;
    top: auto;
    margin-top: -30px;
}

Adding URL parameters to a <NavigationItem>

Quite often you need to dynamically create URL parameters at run-time for your navigation menus. You can easily do this with Bootstrap XML Navigation in your code-behind. Using the example XML and markup above, here is an example of adding URL parameters dynamically:

Dictionary<string, Dictionary<string, string>> urlParameters = new Dictionary<string, Dictionary<string, string>>();

// this adds 2 parameters to the home navigation element
Dictionary<string, string> homeParameters = new Dictionary<string,string>();
homeParameters.Add("id", "1234");
homeParameters.Add("test", "homeTest");
urlParameters.Add("home", homeParameters);

// this adds 2 parameters to the option1sub1 navigation element
Dictionary<string, string> option1sub1Parameters = new Dictionary<string, string>();
option1sub1Parameters.Add("id", "abcd");
option1sub1Parameters.Add("test", "option1sub1Test");
urlParameters.Add("option1sub1", option1sub1Parameters);

// don't forget to set the NavigationParameters property
userSideNavigation.NavigationParameters = urlParameters;

Results:
../Home.aspx?id=1234&test=homeTest

../Option1Sub1.aspx?id=abcd&test=option1sub1Test

Adding JavaScript to Navigation Elements

If your navigation item needs to run JavaScript, this again can be accomplished dynamically through code behind. Again, using the example XML and markup above:

Dictionary<string, string> urlOnClickActions = new Dictionary<string, string>();
urlOnClickActions.Add("home", "alert('Test JS 1');");
urlOnClickActions.Add("option1sub1", "alert('Test JS 2');");
userSideNavigation.OnClientClickActions = urlOnClickActions;

The above adds a JavaScript alert to the "home" and "option1sub1" navigation items.

IsAdministrator and IsDeveloper properties

In the above XML you may have noticed the "admin" and "development" attributes. Navigation items can be hidden based on a user's role. For example:

If a navigation item is marked admin="true" then the item will only be drawn to screen if the IsAdministrator property of the BootstrapNavigation object is set to true.

If a navigation item is marked development="true" then the item will only be drawn to screen if the IsDeveloper property of the BootstrapNavigation object is set to true.

You can set these in markup but it makes more sense to set them in code-behind dynamically when you perform your role-based security functions.

Pseudo-Code Example:
// construct navigation for an admin
if (user is an administrator)
{
  userSideNavigation.IsAdministrator = true;
}

else
{
  userSideNavigation.IsAdministrator = false;
}

// construct navigation for a developer
if (user is a developer)
{
  userSideNavigation.IsDeveloper= true;
}

else
{
  userSideNavigation.IsDeveloper= false;
}


The development attribute is handy when a navigation end-point isn't ready for prime-time but you want developers to be able to access it. Flip the switch to false when you're ready for the masses to use it.

Hidden

The hidden attribute is fairly self-explanatory. If you want to hide a navigation element set hidden="true". This will hide a navigation item from all users regardless of admin and development attribute settings.

Last edited Aug 18, 2012 at 12:05 AM by Thermofish, version 34

Comments

No comments yet.