Navigation with a ternary operator to set active class to the DIRECTORY link - php-7

All my pages are in DIRECTORIES and are ALL named index.php
I use independent modules, each in its own directory, so that they can be dropped into any web app. The links and the URLs end with: "directory_name/".
basurl(); is a function to simplify links.
init.php
defined('PDQURL') or define('PDQURL', 'http://pdq/dev/');
function base_url($location) {return PDQURL.$location;}
nav.php
<a class="nav-link" href="<?=base_url('index.php')?>">Home</a>
<a class="nav-link" href="<?=base_url('conversions/')?>">Conversions</a>
<a class="nav-link" href="<?=base_url('employees/')?>">Employees</a>

You have to get the current URL of your page. Actually there are different ways to get the current url with php. I 'm using the following piece of code.
$current = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http")
. "://" . $_SERVER[HTTP_HOST] . $_SERVER[REQUEST_URI];
After you 've got the current called uri, juxt compare it with your base url.
<a class="nav-link<?= base_url('example.php') == $current ? ' active-link' : '' ?>">Example</a>
This means, that if you call your example.php page, and the current url matches the result of your base_url() function, the active-link css class will be displayed.

Related

Change asp-page attribute value based on condition in razor pages

When a click on a link the pages should be displayed on userroles.Say for example if the userrole is superadmin,then the user will have access to PageA.If the userrole is admin,then the user will have access to PageB. What i tried is ,
#if (Context.Session.GetString("userrole") == "superadmin")
{
var HomepageUrl = "/PageA";
}
else
{
var HomepageUrl = "/PageB";
}
<a asp-area="" asp-page="#HomepageUrl"></a>
But im getting error like "HomepageUrl doesnot exist in the current context".
Any help would be appreciated.
You can try to use the conditional operator ?:,here is an official doc,here is a demo:
<a asp-area="" asp-page="#(Context.Session.GetString("userrole") == "superadmin"?"/PageA":"/PageB")">link</a>

Razor Pages Tag Helper with Dynamic Parameters Assigning Current Url as Href

I'm running into trouble trying to set anchor tag helper parameters dynamically and looking for some help.
I have a nav that is a view component inside the shared _Layout.cshtml page that populates departments from a model.
#model List<DepartmentModel>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
Here is the InvokeAsync() from my View Component class
public async Task<IViewComponentResult> InvokeAsync()
{
var departments = _catalogService.GetNavDepartments();
return View(departments);
}
When I first launch the page, all the hrefs are populating correctly.
"catalog/departments/department-name-1/department-id-1"
"catalog/departments/department-name-2/department-id-2"
"catalog/departments/department-name-3/department-id-3"
If I click on one of the links, like the first link for example, I go to the proper department page "catalog/departments/department-name-1/department-id-1"
However, once I click that first link and navigate to the respective page, all the nav hrefs populate to the current url "catalog/departments/department-name-1/department-id-1" instead of the originally generated hrefs. This makes it so I can't navigate to another department.
Here is my route in the Startup.cs
services.AddRazorPages().AddRazorPagesOptions(options => {
options.Conventions.AddPageRoute("/Catalog/Departments", "{dName}/{dId}");
});
Based on the convention above, it eliminates the "catalog/department" piece of the url but I added it in this description for a sense of what I'm trying to accomplish. Even if I add this template to the page that populates the "catalog/departments" url, I get the same result.
#page "{dName}/{dId}"
Can anyone help me figure out what I am missing? Thanks in advance!
******** UPDATE ********
Currently, the only way I am able to get this to work is by adding the cache tag helper.
<cache>
<ul class="nav">
#foreach (var d in Model)
{
<li>
<a asp-page="catalog/departments" asp-route-departmentName="#d.Name" asp-route-departmentId="#d.Id">#d.Name</a>
</li>
}
</ul>
</cache>
This doesn't seem like a proper fix. Seems more of a hack then anything. Anybody have any ideas? Thanks!

Right way of using asp-page and asp-route in asp.net core razor pages between _layout and index page

Below is the file structure
I have default Index page under Pages folder, which has layout as _LayoutHarman.cshmtl
Code : Pages/Shared/_LayoutHarman.chtml
header menu : pages are in subfolder.ie category folder in this case
<a asp-route-cat_slug="electronic" asp-page="./category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="./category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="./category/index" >Toy</a>
footer menu : pages are on root folder
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
<a asp-page="./privacy" >Privacy</a>
Code : Pages/category/Index.cshtml
#page "{cat_slug?}/{pageIndex:int?}"
#model bList.Pages.category.IndexModel
#{
}
<nav aria-label="Page navigation example">
<ul class="pagination text-center">
#if(Model.prev_no!=0){
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.prev_no"> Previous</a></li>
}
#if (Model.no_more_record != "YES")
{
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.next_no">Next</a></li>
}
</ul>
</nav>
Here Next/ previous button generate url as follow
https://localhost:8080/category/toy/1
https://localhost:8080/category/toy/2
https://localhost:8080/category/toy/3
respective on selected category
Issue : When i visit on category page and click on prev or next button and then try to click on link Contact,Terms,Privacy i.e (which is on _LayoutHarman.cshtml) or on header menu then href become blank.
Edited One:
Code: On _LayoutHarman.cshtml
HeaderMenu:
<a href="./category/toy" >toy</a>
Footer Menu
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
Code: On Category/Index.html page
Prev</li>
Next
Now on Next/ Prev button click , header menu generates url as
https://localhost:44382/category/toy/category/toy hence error page occurs. but for footer menu contact/term/privacy works properly
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Do you really need all this extra server side processing, asp-route-cat_slug asp-page?
Can't you just use plain old fashion HTML hyperlink? As for the dynamic parameters maybe you can set only them...
View category
Just an idea to think on...
Cheers

VUE scroll-to from subpage to index page anchor

I am trying to scroll via v-scroll-to to an anchor in frontpage it works fine but if i navigate from subpage to indexpage anchor doesnt work because the anchor not in the DOM. How can is solve this problem?
<a v-for="menuItem in menuItems" :key="menuItem.id" :class="{'is-active': activeMenuItem === menuItem}" :href="menuItem.url" v-scroll-to="menuItem.url">{{ menuItem.text !== '' ? $t(menuItem.text) : '' }}</a>
The menuItem.url included the anchor.
Please refer this issue because might be useful for you.
https://github.com/rigor789/vue-scrollto/issues/100
I haven't used vue-scrollto, but according to this issue, it probably works by the following code.
<a v-for="menuItem in menuItems" :key="menuItem.id" :class="{'is-active':
activeMenuItem === menuItem}" :href="menuItem.url" #click="$scrollTo('#element')">{{
menuItem.text !== '' ? $t(menuItem.text) : '' }}</a>

How can you get an attribute using Selenium 2 and PHPUnit?

I'm trying to follow the URL of a hidden Log Out link. The HTML looks like this:
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://www.ananda.org/wp-login.php?action=logout&_wpnonce=f633c2d0a4">Log Out</a> </li>
Getting the element is straightforward:
$link = $this->byXPath( '//*[#id="wp-admin-bar-logout"]/a' );
Can I get attributes?
You can get attributes of elements, apparently, though I couldn't find this documented anywhere.
Here's the complete solution I used:
protected function doLogout() {
$this->url('/wp-admin');
$link = $this->byXPath( '//*[#id="wp-admin-bar-logout"]/a' );
$this->url( $link->attribute('href') );
}