I have downloaded a template for my app. I have to replace the menu links of this template with my project url links.
Code block of the menu link in template page::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Item 2
</span>
</a>
I have to use this with::
#Html.ActionLink("Program", "Index", "karyakramModels")
I tried with the code ::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
#Html.ActionLink("Program", "Index", "karyakramModels")
</span>
</a>
I am not getting the CSS design with this code. Thank You!!!
As you have icon () inside the anchor tag, I would suggest #Url.Action() to use
<a href="#Url.Action('actionName', 'controllerName')" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Program
</span>
</a>
Related
In my Thymeleaf + Spring Boot project, I have a sidebar that has href link to part of sidebar (see code below). The problem it wouldn't 'uncollapse' when click on it. If I change it to href to outside (ie. www.yahoo.com) it works. With thymeleaf, how do I get the href link to part of page to work? Appreciate the help!
<li>
<a data-toggle="collapse" href="#myLinks">
<i class="material-icons">image</i>
<p> Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="myLinks">
<ul class="nav">
<li>
<a th:href="#{http://www.yahoo.com}">
<span class="sidebar-mini"> Y </span>
<span class="sidebar-normal"> Yahoo </span>
</a>
</li>
</ul>
</div>
</li>
I'm wondering how do I implement a star rating system in ASP .NET MVC when the stars are encapsulated in a Ul, li.
I'm using https://htmlstream.com/preview/unify-v2.5.1/e-commerce/page-single-product-2.html as a layout.
The code below is within my form post method
#using (Html.BeginForm("Index", "Drink", FormMethod.Post))
{
....
<!-- Rating -->
<div class="col-5 col-sm-4 col-md-3">
<h3 class="h6 mb-1">Rate:</h3>
<ul class="js-rating u-rating-v1 g-font-size-20 g-color-gray-light-v3 mb-0" data-hover-classes="g-color-primary">
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-line-height-1_4">
<i class="fa fa-star"></i>
</li>
</ul>
<!-- End Rating -->
</div>
....
}
I'm wondering how do I let my controller know what the selected rating is?
I am trying to figure out the best way to use authentication to control which ul tag is displayed
Curent html
//wrap all this is authentication razor code?
<!-- START Profile button menu -logged in -->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Profile</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-envelope-open pull-right"></i>
<span class="badge badge-primary pull-right">3</span>Inbox
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-user pull-right"></i>
<span class="badge badge-success pull-right">1</span>Profile
</a>
</li>
<li>
<a tabindex="-1" href="javascript:void(0)">
<i class="si si-settings pull-right"></i>Settings
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Lockout">
<i class="si si-lock pull-right"></i>Lock Account
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Logout">
<i class="si si-logout pull-right"></i>Log out
</a>
</li>
</ul>
<!-- END Profile button menu -logged in-->
<!-- START Profile button menu - not logged in-->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Login">
<i class="si si-logout pull-right"></i>Login
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Register" asp-action="Register">
<i class="si si-lock pull-right"></i>Register
</a>
</li>
</ul>
<!-- END Profile button menu - not logged in -->
I found a blog post by Dave Paquette on custom tag helpers to accomplish this, but I couldn't get it to work. This html is in my partial view of my header navigation so I can't (or don't know how to check for this in the controller) so I opted to test for logged in user using Razor.
I don't see any blogs or tuorials on simple logged in user check. They all have to do with policy's, claims, etc. I just simply want to know if the user is logged in or not and display the ul dependent on that.
I think you need to use SignInManager to see if there is any user logged in. This will use Claims. If you are using the AplicationUser model you can do the following.
On your razor page use:
inject SignInManager<ApplicationUser> SignInManager
And then:
#if (SignInManager.IsSignedIn(User))
{
//some html...
}
I have an angular 2 application that uses bootstrap 3.3.7 and jquery 1.12.4. The code is as follows:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle"
title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
>
<span class="sr-only">More actions</span>
<i class="fa fa-ellipsis-v fa-lg" ></i>
</button>
<ul class="dropdown-menu dropdown-menu-right menu" role="menu">
<li>
<button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
>
<i class="fa fa-files-o" (click)="Copy($event)"></i>
Copy
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move">
<i class="fa fa-arrows" (click)="Move($event)"></i>
Move
</button>
</li>
<li>
<button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share">
<i class="fa fa-share " (click)="Share($event)"></i>
Share
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete">
<i class="fa fa-trash" (click)="removeItem($event)"></i>
Delete
</button>
</li>
</ul>
</div>
The dropdown menu appears fine. But clicking on the individual buttons in the list is not invoking the associated event handler. This issue is occurring on Safari browser on iOS and Chrome on Android. However, it works perfectly on Edge and Chrome on the laptop/desktop.
I have tried various solutions provided for earlier versions of Bootstrap on stackoverflow and github, but they aren't working.
How do I get this to work?
I resolved this issue by using the dropdown from ng2-bootstrap --> https://github.com/valor-software/ng2-bootstrap
I have a portion of code for Navigation Bar in the header of the website.
I repeat it within of several views.
The code is almost equal for all views, change just for setting css class "active" for setting the background color of <li> TAG.
Partial Views
#Model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
I call it in the views in this way:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml")
I would to pass a parameter to #Html.Partial and then in the PartialView to test a value and flagging class="active" when occurs a condition!
For example:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml", "Print")
in the view, something like this:
</li>
<li class="(#Model=="Check")?"active":"">
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
but it doesn't work!
How can I do?
Many thanks to all.
The way you are calling the partial view looks okay, you just need to change the way you choose your class:
<li class="#(Model == "Check" ? "active":"")">
the Model is how you receive your parameter, and this is a way you can choose a class within a razor condition. You can see another example of how too choose your class within a condition with asp mvc razor.
You should have something like this:
#model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="#(Model=="Print"?"active":"")">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
Please notice that # is before the parenthesis ( not after it in class.