We Keep Coding

Dynamic Navbar links in the shared layout MVC/Razor

I would like links on the navigation bar to appear or disappear depending upon the data in the database. All the nav bar links are in _Layout.cshtml which is being used by all pages.
<ul>
#if (User.Identity.IsAuthenticated)
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bookings</a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("All Bookings", "GetAllBookings", "Booking")</li>
<li>#Html.ActionLink("Member's Dashboard", "GetBookingsByStatus", "Booking")</li>
</ul>
</li>
</ul>
I would like member's dashboard to only appear if they are a member and have certain attributes in their profile. What is the best way to dynamically changing the nav bar links depending upon the data in database?

even in your sample code, you can just leave out the list items by wrapping them in an #if conditional and checking their permissions in whatever method you see fit.
However, I hope I'm pointing out the obvious, but this method only hides the link. It doesn't prevent the user from typing it in or using a bookmark. You will also need to duplicate the security check in your controller.

How can I control the class name rendered with use of MvcSiteMap().Menu()?

When using Nuget package "MvcSitemapProvider Mvc5", I have learned to use the following technique when I want to show only a specific branch of the overall sitemap.
#Html.MvcSiteMap().Menu(new { name = "Mammals" });
While the correct content is rendered, an unfortunate site-effect is that a class name is defined along with the rendered list. I call this unfortunate because Bootstrap renders this as a menu by virtue of the ID and class names. I want it to be a simple unstyled list.
My question is whether there is a way to override this so that I can have the unordered list without any ID or class names -- or perhaps assign names of my choosing?
<ul id="menu" class="nav navbar-nav">
<li>
#* sitemap content... *#

Here is one possible approach, but I present it with caution because it changes an existing helper. Since I'm not going to use the MVC Sitemap Provider for horizontal menus, this will suit my purposes.
I found the file "MenuHelperModel.cshtml" in Views > Shared > DisplayTemplates and made this change:
#*
This is the original. I took this out so it wouldn't be renderd as a menu.
<ul id="menu" class="nav navbar-nav">
This is adapted so that I can show parts of the sitemap as
plain lists and not as menus.
*#
<ul>
#foreach (var node in Model.Nodes)
{
<li>
#Html.DisplayFor(m => node)
#if (node.Children.Any())
{
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>

<li class=disabled not working for disable an option in the menu

I will like to know how to disable ChoiceC from this menu if the user is not logon to the
current site using the loging page.
The ChoiceC option will be only available to the user which have connected to the site had been approved.
Can you provide me link or example on how to perform this task with C# ?
I tried to had the class="disabled" but it didn't do anything ie the option is still available.
<div id="menu">
<ul id="menua"; class="ul menua">
<li style="text-align:center;padding:9px;" class="smallwhitetext"></li>
<li>ChoiceA</li>
<li>MenuA
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</li>
<li>Choice B</li>
<li class="disabled">
Choice C
</li>
</ul>
</div>

I'd recommend a two-step approach. First, don't have the C# code output the link in the list item if they're not logged in. Second, change the style of the list item by applying a class to that item to indicate to the user that they're not logged in and thus the item is unavailable.
Simply applying a class to that item wont work.

I'm not sure what method you use to build the menu and choices, but normally this could best be done when the page is generated at the server. Just wrap your conditional choice inside an if-statement where you check the approval. Here is some pseudo code for the old style:
<ul>
<li>ChoiceA</li>
<li>MenuA
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</li>
<li>ChoiceB</li>
<% if( userIsAuthenticated) { %>
<li>ChoiceC</li>
<% } %>
</ul>
Now I know there are many ways to go about outputting HMTL with MVCs and templates and stuff, but since you didn't mention any specific technique I went for the old style.
Hope it helps!
EDIT
You could also skip the mixing of C# and HTML like one used to do in ASP and still do in PHP and others by simply:
if(userIsAuthenticated) {
Response.Write(#"<li>Choice C</li>");
}
The downside is that when you get a lot of quotes its easier to miss some and a bit harder to read. Plus you wont get code coloring for the HTML.
Note: The # is for verbatim string literals which escape every special character except quotes. You escape these using double quotes instead of the usual \.

<ul id="menua"; class="ul menua">
<li>Option A</li>
<li>Option B</li>
<% if(userIdAuthenticated) { %>
<li>Option C </li>'
<% } %>
</ul>
This is working but still have a small error.
The only error I got is the top ul which is underline in green with the following error message Validation (XHTML5) Text is not allowed between the opening and closing tag for element ul.

Moving or clicking objects around in a list

I'm trying to create a way of moving "chapters" around. My problem is that I can't get my head around to how. If any of you guys have an idea or example of how you've done it, it would be great.
I was thinking something like a list. Where you can drag or click "chapters" around.
like this:
Chapter A
Chapter A.a
Chapter A.a.a
Chapter A.a.b
Chapter A.b
Chapter B
Chapter B.b
Chapter C
The thing is, if I just have a button for moving up and down, then I would need additional buttons for when moving to a chapter from A to C.
PS: The project is in .cshtml.
Edit: each child-chapter has a value which holds the id of its parent. When moving around this id will change, and then be saved when the user i happy with the current order.

I would suggest having a re-usable, sorting widget to simply order elements around, and then have 3 (in this case): one for the chapters, one for the sections and one for the sub-sections. You can show and hide the corresponding widget based on what's currently selected.
Furthermore, you can show each item as an accordion (again, one for chapters, one for sections, etc.). By default you can reorder the chapters. Once you select one, you can view and reorder its sections, and once you select a section... well, you get the idea.
Hope it helps!

jQuery UI has a great widget for this called 'sortable'. Here is a working jsfiddle that does what I think you are looking for. Use the sortable and connected lists examples.
<ul class="sortable">
<li class="ui-state-default">Chapter 1</li>
<li class="ui-state-default">Chapter 2</li>
<li class="ui-state-default">Chapter 3
<ul class="sortable">
<li class="ui-state-default">Chapter 3a</li>
<li class="ui-state-default">Chapter 3b</li>
<li class="ui-state-default">Chapter 3c</li>
</ul>
</li>
<li class="ui-state-default">Chapter 4
<ul class="sortable">
<li class="ui-state-default">Chapter 4a</li>
<li class="ui-state-default">Chapter 4b</li>
<li class="ui-state-default">Chapter 4c</li>
</ul>
</li>
<li class="ui-state-default">Chapter 5</li>
</ul>
$(function() {
$( ".sortable" ).sortable({
revert: true,
connectWith: ".sortable"
});
$( "ul, li" ).disableSelection();
});

How to achieve (auto) code format selection of any html code via jQuery / C# ? (Any solution)

Our application can share code. For example user is sharing the html code as follows
<div id="nav-vert-one">
<ul>
{{for GroupCollection}}
<li>
{{:Name}}
('{{:GroupId}}')">
</li>
{{/for}}
</ul>
which is not in a perfect format .... Now i need to achieve the (auto) code formatting ...
i.e. after auto code format click, it should look like
<div id="nav-vert-one">
<ul>
{{for GroupCollection}}
<li> {{:Name}}
('{{:GroupId}}')"></li>
{{/for}}
</ul>
So, is there ready made plugin available or is there any way(s) to achieve it either via jQuery or C#?

There is a jQuery plugin called jquery-htmlClean: http://code.google.com/p/jquery-clean/
I tried it with your code sample, this is the output:
<div>
<ul>
{{for GroupCollection}}
<li>
{{:Name}} ('{{:GroupId}}')">
</li> {{/for}}
</ul>
</div>
You can try it here: http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm