The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
#{
if (ViewBag.PageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
}
else
{
<a class="page-link disabled">«</a>
}
}
</li>
#{
var currentPage= ViewBag.PageNumber;
for (var i = 1; i <= ViewBag.totalCount; i++)
{
<li #(currentPage== i ? "class= page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.PageNumber< ViewBag.totalCount)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
}
else
{
<a class="page-link disabled">»</a>
}
</li>
</ul>
</div>
The part that should show the active item is this, but for some reason, this class is not working
<li #(currentPage== i ? "class= page-item active" : "")>
HTML output:
As can be seen in HTML, the class is called, but it doesn't pass anything to it...
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
<a class="page-link" href="/Barcos?numeroPagina=1">«</a>
</li>
<li>
<a class="page-link" href="/Boats?pageNumber=1">1</a>
</li>
<li class="page-item" active="">
<a class="page-link" href="/Boats?pageNumber=2">2</a>
</li>
<li>
<a class="page-link disabled">»</a>
</li>
</ul>
</div>
You're not adding quotes to the class property value, adding quotes will make your HTML render properly:
<li #Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>
Related
I have a search input box to take a string in the frontend with suchfensterAction. The result seems to be correct. But when I click to page 2 or higher I always get the suchfensterAction and never the higher paginated page.
(static function() {
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'Myext', 'Myext',
[...\Controller\MyextController::class => 'suchfenster, list,show, new, .....
To show the result in the frontend with pagination i have used following controller code:
...
public function suchfensterAction()
{
return $this->htmlResponse();
}
public function listAction(int $currentPage = 1): \Psr\Http\Message\ResponseInterface
{
$args=$this->request->getArguments();
$gefunden=$this->absolventenRepository->search($this->request->getArguments());
$itemsPerPage = 15;
$arrayPaginator = new \TYPO3\CMS\Extbase\Pagination\QueryResultPaginator($gefunden,
$currentPage, $itemsPerPage);
$pagination = new SimplePagination($arrayPaginator);
$this->view->assignMultiple(
[
'paginator' => $arrayPaginator,
'pagination' => $pagination,
'pages' => range(1, $pagination->getLastPageNumber()),
]
);
return $this->htmlResponse();
}
...
and the templates suchfenster.html
<f:form action ="list" >
<f:form.textfield autofocus ="1" name="query" value="{queryvalue}" placeholder = '{text}' />
<f:form.submit value="Suchen"/><br>
</f:form>
...
und list.html
...
<table>
<f:for each="{paginator.paginatedItems}" as="item" iteration="iterator">
<tr><f:render partial="Item.html" arguments="{item:item}" /></tr>
</f:for>
</table>
<f:render partial="Paginator.html" arguments="{pagination: pagination, pages: pages,
paginator: paginator}" />
...
My Paginator.html:
<ul class="pagination pagination-block">
<f:if condition="{pagination.previousPageNumber} &&
{pagination.previousPageNumber} >= {pagination.firstPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'pagination.first')}">
<i class="material-icons">first_page</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'pagination.previous')}">
<i class="material-icons">chevron_left</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">first_page</i></li>
<li class="disabled"><i class="material-icons">chevron_left</i></li>
</f:else>
</f:if>
<f:for each="{pages}" as="page">
<li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'active', else:'waves-effect')}">
{page}
</li>
</f:for>
<f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'pagination.next')}">
<i class="material-icons">chevron_right</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'pagination.last')}">
<i class="material-icons">last_page</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">chevron_right</i></li>
<li class="disabled"><i class="material-icons">last_page</i></li>
</f:else>
</f:if>
</ul>
Where I have to control the argument 'currentPage'? bzw. where I have to increment 'currentPage'?
I have created a common layout for my views, so i put it in the shared folder.
launching the project the index method of the controller trigger and return me the layout with all the images, however when i click on an item in the navbar,which trigger the appropriate an action method,the images from the layout disappear !?
this is my Tag Helpers in the Layout :
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav">
<li class="nav-item navbar1 ">
<a class="nav-link" asp-controller="Home" asp-action="Index"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="WhoWeAre"><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="Privacy"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
and those are the action methods :
public IActionResult Index()
{
return View("WhoWeAre");
}
public IActionResult WhoWeAre()
{
return View();
}
public IActionResult ContactUs()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
M i doing something wrong ?
Update1:
for the image i have a logo in the navbar :
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav">
<li class="nav-item navbar1 ">
<a class="nav-link" asp-controller="Home" asp-action="Index"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="WhoWeAre"><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="Specialites"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<!-- this is the logo-->
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">....
and in the footer , i have the logo again and some other images:
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>......
Your image source is relative. MVC uses routing, which makes your URL paths look like "folders".
So "Home" is /, which is the default route, but "Who we are" is /Home/WhoWeAre. This causes the images to be looked up in respectively /images/decoupage/logo-white.png and /Home/images/decoupage/logo-white.png.
Given the images are in the root folder, and not in /Home, you need to prefix your image URLs with /.
I have been trying to get this to work but doesn't seem to work. Basically I need a dynamic navbar. The pre-built .NET template actually has already generated a _LoginPartial.cshtml, which already changes the navbar depending on whether a user is login or not. I have been trying to edit the navbar so that it supports another level of change to check if a user is on a specific page then it will show more or less items depending on whether a boolean (showAll) is set to true or false. However is there a way to set the boolean based on the page? Currently I test it by changing manually and the logic works. I need a dynamic way to control it programmatically. Thank you for your help!
#using Microsoft.AspNetCore.Identity
#inject SignInManager<IdentityUser> SignInManager
#inject UserManager<IdentityUser> UserManager
#{bool showAll = false;}
#if (SignInManager.IsSignedIn(User) && showAll == true)
{
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link">Home</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Contact" class="nav-link">Contact</a></li>
</ul>
<form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Action("Index", "Home", new { area = "" })" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage" class="nav-link">Hello #UserManager.GetUserName(User)!</a>
</li>
<li class="nav-item">
<button type="submit" class="btn btn-link navbar-btn navbar-link">Logout</button>
</li>
</ul>
</form>
}
else if (SignInManager.IsSignedIn(User) && showAll == false)
{
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link">Home</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a></li>
</ul>
<form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="#Url.Action("Index", "Home", new { area = "" })" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage" class="nav-link">Hello #UserManager.GetUserName(User)!</a>
</li>
<li class="nav-item">
<button type="submit" class="btn btn-link navbar-btn navbar-link">Logout</button>
</li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a asp-area="Identity" asp-page="/Account/Register" class="nav-link">Register</a></li>
<li class="nav-item"><a asp-area="Identity" asp-page="/Account/Login" class="nav-link">Login</a></li>
</ul>
}
It depends a lot on what logic is behind that variable. If you can resolve it just from the login partial, you can certainly just add the logic there. For example, you could look at the current route to figure out whether you want that value to be true or not.
You could also build your own service that you inject there which then contains the logic. This can be useful if you end up doing more complicated stuff, as you should generally try to avoid too much logic inside views.
If the value is being set outside of the partial, you could also just use the ViewData dictionary to set it. This would allow you to set the value within your controllers, and then your partial view could just retrieve the value. Something like this:
#{
bool showAll = false; // default
if (ViewData.TryGetValue("NavigationShowAll", out var value) && value is bool)
{
showAll = (bool)value;
}
}
And then, in your controller, you can just do this:
public IActionResult DoSomething()
{
ViewData["NavigationShowAll"] = true;
return View();
}
I'm having a problem implementing a toolbar for kendo grid. The problem is a partial view used to load a left-sided menu for a specific module in the website application.
So far, I have not been able to work around this, thus I'm asking here for help.
This is what the grid looks like without the left menu:
This is what the grid looks like with the left menu:
So far, this is what the menu code has:
<nav class="navbar navbar-default navbar-left" style="margin:0px; padding:0px; border-color:lightgray;">
<div class="collapse navbar-collapse" style="margin:0px; padding:0px;">
<ul class="nav navbar-">
#if (Request.IsAuthenticated)
{
<li>
<a href="#Url.Action("Index", "FicheiroIdqa")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Ficheiros Idqa
</a>
</li>
<li>
<a href="#Url.Action("Index", "ZaPe")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> ZaPes
</a>
</li>
<li>
<a href="#Url.Action("Index", "LocalColheita")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Locais Colheita
</a>
</li>
<li>
<a href="#Url.Action("Index", "FamiliaParametro")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Famílias Parâmetro
</a>
</li>
<li>
<a href="#Url.Action("", "")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Editais
</a>
</li>
<li>
<a href="#Url.Action("Index", "Resultados")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Export. Resultados
</a>
</li>
}
</ul>
</div>
And this is the code in the view, where I am calling the partial with the menu:
#model List<INL.InLabLimsAqua.OnlineResults.WebApp.ViewModels.FicheiroIdqaViewModel>
#{ ViewBag.Title = "Ficheiros Idqa"; }
<h5>#Html.ActionLink("Ersar", "Index", "Ersar") > #ViewBag.Title</h5>
<hr />
<div class="col-md-2" style="padding-left:0px; width:200px;">
#Html.Partial("~/Views/Ersar/_ErsarMenu.cshtml")
</div>
<div class="col-md-offset-1" style="padding-left:95px;">
...
grid configuration
...
</div>
I think the problem resides in the fact that the toolbar is being loaded in the same row as the left menu, and it pushes it down with its height.
Any help to fix this would be much appreciated.
I have a form where it renders partial views based on the step that you are on. I want to create a wizard type navigation at the top. How can I go about having an active class based on what partial view is rendered at the time?
I have my wizard
<div class="container wizard">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified thumbnail">
<li>
<a href="#">
<h4 class="list-group-item-heading">Step 1</h4>
<p class="list-group-item-text">Select a Loan Type</p>
</a>
</li>
<li class="active">
<a href="#">
<h4 class="list-group-item-heading active-heading">Step 2</h4>
<p class="list-group-item-text">Enter Personal Information</p>
</a>
</li>
<li class="disabled">
<a href="#">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Third step description</p>
</a>
</li>
<li class="disabled">
<a href="#">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Third step description</p>
</a>
</li>
</ul>
</div>
</div>
I tried doing
#if (#html.partialview("index") {
class="active";
}
That didn't seem to work.
UPDATE:
I've used an HTML Helper to use the active class, but it things I'm on index view because of the ajax calls.
public static string IsActive(this HtmlHelper html,
string control,
string action)
{
var routeData = html.ViewContext.RouteData;
var routeAction = (string)routeData.Values["action"];
var routeControl = (string)routeData.Values["controller"];
// both must match
var returnActive = control == routeControl &&
action == routeAction;
return returnActive ? "active" : "";
}