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?
Related
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
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 added a side-nav version of Materialize with icons in my page. But when I click to expand and show the side-nav, the icons are stacking diagonally. I can't figure out why.
Here is the code I'm using for this.
<div class="navbar-fixed">
<nav class="headerRow">
<div id="adminMenu" class="nav-wrapper">
BASTAS
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>
<i class="medium material-icons">home</i>
</li>
<li>
<i class="medium material-icons">card_giftcard</i>
</li>
<li>
<i class="material-icons">dashboard</i>
</li>
<li>
<i class="material-icons">group</i>
</li>
<li>
<i class="material-icons">groupadd</i>
</li>
<li>
<i class="material-icons">system_update_alt</i>
</li>
<li>
<i class="material-icons">email</i>
</li>
<li>
<i class="material-icons">settings</i>
</li>
</ul>
<ul class="side-nav" id="narrower">
<li>
<i class="material-icons">home</i>Home
</li>
<li>
<i class="small material-icons">card_giftcard</i>Give
</li>
<li>
<i class="small material-icons">dashboard</i>Dash
</li>
<li>
<i class="small material-icons">group</i>Recipients
</li>
<li>
<i class="material-icons">groupadd</i>Add Recipients
</li>
<li>
<i class="material-icons">system_update_alt</i>Import
</li>
<li>
<i class="material-icons">email</i>Send Reminder
</li>
<li>
<i class="material-icons">settings</i>Settings
</li>
</ul>
</div>
</nav>
Any help with this would be greatly appreciated. I've searched around, and not come across this issue with other posts.
You probably tried changing li height. I've done this before and someone on materialize chatter helped me, I don't remember his name. I know it is old, but it could help someone else:
.side-nav li>a,.side-nav li>a>i.material-icons {
height: 42px;
line-height: 42px;
}
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.
I am rendering this partial in adminlte.html.erb file but it is not loading properly. I tried to put this code inside the admin file itself which is rendering this partial but it is still not loading properly.I also checked in other browsers.When I inspect the element,the sidebar suddenly loads by itself.
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<%= image_tag("user2-160x160.jpg", class: 'img-circle')%>
<!-- <img src="images/user2-160x160.jpg" class="img-circle" alt="User Image" />-->
</div>
<div class="pull-left info">
<p>abcd</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<!--Dashboard-->
<li class="active treeview">
<a href="/">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-circle-o pull-right"></i>
</a>
</li>
<!-- Dashboard END -->
<!--USER-->
<li class="treeview">
<a href="#">
<i class="fa fa-user"></i> <span>Manage User</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="active"></i> Create User</li>
<li><i class="fa fa-circle-o"></i> List User</li>
</ul>
</li>
<!-- USER END -->
<!--MY_PROJECT -->
<li class="treeview">
<a href="#">
<i class="fa fa-sitemap"></i>
<span>My Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Active</li>
<li><i class="fa fa-circle-o"></i> Completed</li>
<li><i class="fa fa-circle-o"></i> Hold</li>
</ul>
</li>
<!--END MYPROJECT-->
<!--FOLLOW UPS -->
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-envelope"></i> <span>Followups</span>
<small class="label pull-right bg-yellow">12</small>
</a>
</li>
<!--END FOLLOW UPS -->
<!--FOLLOW UPS -->
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-laptop"></i> <span>Manage RMs</span>
</a>
</li>
<!--END FOLLOW UPS -->
<!-- CALLS -->
<li class="treeview">
<a href="call_records/">
<i class="fa fa-mobile"></i>
<span>Calls</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Open</li>
<li><i class="fa fa-circle-o"></i> All</li>
<li><i class="fa fa-circle-o"></i> Rejected</li>
</ul>
</li>
<!--END CALLS -->
<!-- CONTACTS -->
<li class="treeview">
<a href="#">
<i class="fa fa-file-audio-o"></i>
<span>Contacts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> +New Contact</li>
<li><i class="fa fa-circle-o"></i> Assigned</li>
<li><i class="fa fa-circle-o"></i> Open</li>
<li><i class="fa fa-circle-o"></i> All</li>
<li><i class="fa fa-circle-o"></i> Rejected</li>
</ul>
</li>
<!--END CONTACTS -->
<!-- ACTIONS -->
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Actions</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<!--END ACTIONS -->
</ul>
</section>
<!-- /.sidebar -->
</aside>
I'm rendering this partial like
<html>
<body>
<%= render partial: 'layouts/admin_lte_2_sidebar' %>
</body>
</html>
Please help me out to solve the issue. Thanks in advance.
This is because of the height value in slimScrollDiv
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 480px;">
What you can do from here on is to modify your css into
.slimScrollDiv{height: auto !important;}
This will not limit the height of the div