Working on a blazor server application and trying to make the multi level Navigation menu
Under Shared Component Navmenu.razor file, i added the code which is copied from bootstrap
https://getbootstrap.com/docs/4.0/components/navbar/
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
After running this changes the menu item seems to be added to layout , but dropdown behaviour is not working
After further search and adding jquery library to the _Host.cshtml , head section like below
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
the menu managed to show the behaviour of dropdown
Is this is recommended to use jquery inside the blazor but colors or styles seems to be overridden as in picture
Is really no easy-way to make a multi level Nav Menu in Blazor ?
The answer to your problem is you should make a component out of it.
For example,
Start by creating a component with a boolean and a string.
Then create an element and give it the #onclick attribute. When the user clicks on the element, it fires the onclick event and it switches the boolean value to the opposite of what it was.
Finally, a string property tracks the boolean value and outputs the appropriate string that contains the style needed to show or hide a particular element.
CollapsableMenuItem.razor
<button #onclick="ToggleVisibility" class="btn btn-link" style="cursor:pointer;">Click me</button>
<br />
<span class="nav-item" style="#_style">
I'm invisible until you click on the button
</span>
#code {
private bool _collapsed;
private string _style
=> _collapsed ? "visibility:visible;" : "visibility:hidden;";
public Task ToggleVisibility() {
_collapsed = !_collapsed;
return Task.CompletedTask;
}
}
I created this .NET Fiddle to see it in action:
https://blazorfiddle.com/s/229e32g4
As Dennis mentioned, you can build a component out of it.
However, if you are fine with the basic functionality offered by bootstrap, just go with it. I have used it extensively without any issues. Also,
There is no harm in using JavaScript with Blazor. A lot of libraries use it all the time. For some browser interactions (page refresh, getting viewport size etc) you have to use JavaScript.
If you use bootstrap 5, there is no jQuery. It's pure JavaScript
Most importantly, it's painful to get animation right in blazor. While you will get the core collapse/expand functionality very easily in blazor, the animation is tricky.
Finally, your styles are wonky because there is a conflict in styling between nav-link that comes bundled with the visual studio template and nav-link as described in bootstrap. Keep one of your choice. You will find the template css under the razor file of the menu component. Delete or mark !important depending on style that you want to keep.
Related
I'm trying to select a HTML drop-down option through c# however Im not sure where to start. Could someone give a basic example.
Thanks in advance
Edited: This drop down I'm selecting is on someone's web page off the internet.
Edited: Below is the html on the webpage:
The drop down menu that contain "Ratings Data Upload" is what I am after to select.
<li class="dropdown ">
<a class="dropdown-toggle" role="button" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="">
Ratings Data Upload
</li>
There is a great browser automation framework called Selenium. Your next step should be using tutorials or online training content to learn Selenium (or another tool).
Selecting a drop down value with Selnium is as easy as:
Select objSelect =new Select(driver.findElement(By.id("search-box-id")));
objSelect.selectByVisibleText("Name of option shown to user");
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.
I've got a MVC core 2 project that works fine on my development server. Once I publish it to the production server, I can't get any of my buttons to work. I can navigate to all of the pages, my Javascript and JQuery seem to work fine, but if there is a button, it will not fire upon being clicked. To be clear, navigation buttons, input buttons (or buttons used for navigation, input, etc.) will not work.
I'm thinking I'm missing some sort of library (bootstrap?), but not sure. Any ideas of what or how to go about finding what?
UPDATE
I deleted and uploaded everything again and that took care of my input buttons not working (must have had some old files left in the root); however, I still can't get my navigation buttons to work. I don't get any errors when I click on them that I can see and below is my nav code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DropDownTest<span class="caret" style="background-color:transparent;"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a asp-area="" asp-controller="Home" asp-action="Something1">Something1</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Something2">Something2</a></li>
..etc
</ul>
</div>
I know there can be some peculiarities in Visual Studio where it highlights #URL as not existing in the current context, but it still works. The problem I have however I think is different.
I am writing an application at the moment, I have completed numerous admin screens all within there own area. The main area until now only had a ViewStart pointing to a _Layout which detected if you were logged in or not displayed a login page (which works) if you aren't and a series of hyper links if you are that take you to the admin pages - which all work.
In the _Layout the #Url is highlighted as does not exist in the current context - but works fine.
Now I have started writing the main area, so have added an Index.cshtml, this has a #model which is highlighted as does not exist in the current context, but I am able to access the data within without issue.
The problem is any anchor I add in the page and set the URL using #Url.Action doesn't work, they all say does not exist in the current context and when you view the source of the page the href= is missing as it the URL.
If I manually code the href= it does appear in the source and does work.
Update:
So further to comment 2 below, I now have...
<div class="btn-toolbar">
<a href="#Url.Action("new")" class="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-plus"></i>
Create Company
</a>
</div>
#Html.ActionLink("Create Company","New","Summary")
In my chtml page and...
User Admin
Customer Admin
In my _Layout in which the cshtml is rendered, but the resulting html is...
User Admin
Customer Admin
Logout
<h2>
Overview Screen
</h2>
<br/>
<div class="btn-toolbar">
<a class="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-plus"></i>
Create Company
</a>
</div>
Create
So as you can see, the anchor and #Url.Action works fine in the _Layout, but neither the #Url.Action nor #Html.ActionLink generates a URL.
Use single quotes around the #Url.Action code.
<a href='#Url.Action("new")' class="btn btn-primary btn-sm">
<a href='#Url.Action("index", "Users", new {area = "Admin"})'>User Admin</a>
<a href='#Url.Action("index", "Companies", new {area = "Admin"})'>Customer Admin</a>
You should check routing. If ok then check plesk version, because if it is old or not updated then your pages will not working and this error will always appear.
I had this problem, too.
I think this is related to Attribute Routing and routing precedence. This may happen if you have routes.MapMvcAttributeRoutes(); after a default routes.MapRoute definition in your RouteConfig.cs file.
You may want to move routes.MapMvvAttributeRoutes() before other routes.MapRoute definition.
I have the following problem: I'm making a site in Orchard and have to apply a design made by some design company. They delivered html and CSS (+ LESS) and I have to make it into a theme.
I get it done for the most part except the menu's. I want to apply a class to the nav tag in the following code, but I can't make any alternates for that end up rendering it.
<article class="widget-navigation widget-menu-widget widget" shape-id="18">
<nav shape-id="19">
<ul class="menu menu-main-menu" shape-id="19">
<li class="current first" shape-id="22">
Home
</li>
<li shape-id="24">
Something1
</li>
<li shape-id="26">
Something2
</li>
<li class="last" shape-id="28">
Something3
</li>
</ul>
</nav>
</article>
How do I influence the rendering of my menu's so that I can apply proper CSS to it? The only alternates that I can make either contain only:
#Model.Text
or:
#Display(Model.Menu)
I think you can create a custom shape for the menu, inside Views/Menu-Main.cshtml, as explained on this page. From there on, you can pretty much do whatever you want to the shape. For example
#{
// Model is Model.Menu from the layout (Layout.Menu)
var tag = Tag(Model, "ul");
var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);
if (items.Any()) {
items[0].Classes.Add("first");
items[items.Count - 1].Classes.Add("last");
}
}
<nav class='my-custom-class'>
#tag.StartElement
#DisplayChildren(Model)
#tag.EndElement
</nav>
I haven't actually tried this so apologies if I'm not 100% correct, but this should get you in the right direction at least.
Also, the sample code above is just a slightly modified version of the original menu's code, best part about Orchard is that it's open source... You can view the original code here