BTI420 notes – Wed Apr 2

Topics that are useful for the programming assignment.

.

Conditional menu item

The _Layout.cshtml asset is used to render the default layout for views in your app.

It includes a menu. The Bootstrap framework defines its appearance and behaviour.

We can add conditional menu choices to this menu. What condition? Anything you can imagine.

A popular condition is ‘security’. In other words, if a user is authenticated, or authenticated and in a specific role, you may want to show one or more menu items.

The User property can be queried for answers to these questions. It’s available in a controller and in a view. From the MSDN Library, the User property type is iPrincipal, which “represents the security context of the user on whose behalf the code is running, including that user’s identity… and any roles to which they belong.”

The two security-related conditions above can be queried with “User.Identity.IsAuthenticated” and “User.IsInRole(“<rolename>”). The SecurityUsersAndRoles code example (on GitHub) shows these conditions in action:

menu-conditional-security

.

Dropdown menu item

The Bootstrap framework enables you to predictably and easily create a dropdown menu. The technique is fully described in the Bootstrap documentation on “Dropdowns“.

Here’s a summary:

  • The menu choices in the dropdown are implemented as a nested unordered list
  • The top-level <li> uses a specific CSS class, and its content is an <a> that has specific attributes
  • The nested <ul> uses a specific CSS class
  • Its links can be generated by the ActionLink HTML Helper, or by normal <a> elements

Here’s the code for a typical implementation:

menu-dropdown-code

.

Here’s how the menu is rendered, showing the new “Admin tasks” menu:

menu-dropdown-before

.

Here’s what it looks like when the “Admin tasks” menu item is clicked:

menu-dropdown-after

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: