BTI420 notes – Tue Mar 31

User interface improvement topics.

.

Coverage today

Includes…

  • Bootstrap
  • Html.AntiForgeryToken() and [ValidateAntiForgeryToken]
  • Conditional menu items

.

Bootstrap styles for item-selection controls on HTML Forms

Your professor has created a document to cover this topic.

ASP.NET MVC view – Bootstrap styles for HTML select and input elements

.

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 andin 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

.

Bootstrap and themes

Every new project opens and shows the Project_Readme.html document in the Visual Studio web browser. You have probably ignored it and close it without looking at it.

Now, look at it, and notice that there are two links that point to the same place:

  • Theming using Bootstrap
  • Change the site’s theme

.

Read that section of the document before continuing…

What is Bootstrap? It is a layout and theming framework created by Twitter. It contains HTML and CSS templates.

.

Learning more about Bootstrap

Read/skim the Bootstrap Getting Started page.

When you’re ready for more, read/skim the Bootstrap CSS page.

Make no mistake – learning Bootstrap fully requires much time and effort. In this course, you are expected to have general knowledge of its benefits, but you simply don’t have time to develop expertise.

.

Changing your web site theme

Follow the instructions in the Microsoft document introduced above. Visit the Bootswatch Free Themes page.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Advertisements
  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: