I have Razor Page with the following piece of code to create a link that adds a dynamic value to the route when clicked. This works perfectly.
<a class="page-link" asp-route-systemRightsPage="#(i.Index)">#i.Index</a>
Now, I have different values for the route, in this case I'm using systemRightsPage, but I also have 3 more types that I can navigate to (personsPage, personRightsPage, errorsPage), and so on.
Is it possible to use somehow a dynamic value on the asp-route-{value} part?
I tried using this:
<a class="page-link" asp-route-#(RouteValue)="#(i.Index)">#i.Index</a>
This code renders correctly in HTML to:
<a class="page-link" asp-route-personpage="2">2</a>
But the link doesn't work anymore, as nothing happens if I click it.
Has anyone done anything similar?
You can use the all-route-data attribute to pass arbitrary parameter names and their values:
#{var values = new Dictionary<string,string>{{"personpage", "2"}};}
<a asp-page="/whatever" asp-all-route-data="values">Click</a>
https://www.learnrazorpages.com/razor-pages/tag-helpers/anchor-tag-helper
Related
my project is made blazor server
I got a text editor that works with blazor(.razor) .
But all my default pages are razor pages (.cshtml).
How to access with blazor(.razor) parameter in cshtml?
I initially used asp-for .
And I tried to use url/{value} method through navlink.
When I used navlink in cshtml, the button did not appear.
i find that no!
Is what I'm trying to do possible?
<a asp-page="./ViewBorad" asp-route-boradid="#Model.board.board_id" > AddText</a>
<li class="nav-item px-3">
<NavLink class="nav-link" href="/MyPage/ViewBorad/#Model.board.board_id">
<span class="oi oi-plus" aria-hidden="false"></span> ViewBorad
</NavLink>
</li>
You can navigate to a Razor page from Blazor by using the NavigationManager.NavigateTo method which takes two parameters. The first parameter is the url to navigate to, including a parameter the called method gets, the second named forceLoad, which takes a boolean value... The default value is false, but you should pass a true value.
Search Google for the string enet stackoveflow Blazor OpenIDConnect, inspect the results where I show how to call a Razor page from a Razor component (Blazor), how to pass a parameter to and back.
Incidentally, you can also use the NavLink or the Html anchor element (a element) for this.
I'm fairly new to changing paths / position of page so I would like a little help on this.
Say, when a button is clicked, I want to scroll down to another portion of the page. (where id of that section is 'xyz') however, I'm using an entirely different component to access that section.
If I were to use href, I can easily do : href="/app/appid#xyz"
however, if appid is a variable retrieved from the ts file, how can I insert it into my href?
It's easier to to use [routerlink]="['app', appid]" but how can I insert the "#xyz" into my string?
Or is there a completely separate and easier functionality I can use?
Thank you
Add the frament attribute:
<a [routerLink]="['app', appid] fragment="xyz">Link</a>
https://angular.io/api/router/RouterLink
I have one problem with generating routerLinks in my application.
I retrieve the menu structure from API. Fetch it when app initializes, store it in the Observable and then simply show it.
The part of the structure im showing is pretty straightforward.
<ng-container *ngFor="let item of menuItems">
<h5 class="dekstop-submenu-heading">{{ item.name }}</h5>
<ul class="desktop-submenu-list" [ngClass]="{'desktop-submenu-list-wrap': item.subItems.length > 5}">
<li *ngFor="let subItem of item.subItems" class="desktop-submenu-item">
<a [attr.aria-label]="subItem.name" [routerLink]="subItem.url">{{ subItem.name }}</a>
</li>
</ul>
</ng-container>
The problem comes when there is an url with an anchor to specific page part, i.e. /some-component/description#specific.
Angular routerLink is generated properly but the href isn't, it is decoded to /some-component/description%23specific.
I can't get rid of this behaviour, I've tried decoding it with decodeURIComponent but with no effects..
Do you have any idea what causes such behaviour? Such a simply thing makes a lot of troubles..
You just need to send the url and the element id in a separate directive.
If you have control over the subItem.url then just rename it to /description and subItem.fragment to specific and then change the template like this:
[routerLink]="subItem.url" [fragment]="subItem.fragment"
If you don't have control over subItem.url, then just perform a split on %23:
const [url, ...fragment] = subItem.url.split('%23');
[routerLink]="url" [fragment]="fragent.join('%23')"
You can handle query params in routerLink directive
I think this will help you
<a [attr.aria-label]="subItem.name" [routerLink]="subItem.url"
queryParamsHandling="preserve">{{ subItem.name }}</a>
I want to call a function in type script component from <a> tag using href like this:
<a href="fun()" ></a>
Is it possible in some way? Note that I need only this way. Using a click event does not help in my case.
I tried already this:
<a href="javascript:fun()">
But it does not work.
thanks!
you cannot call function in href use role attribute and make <a> as button and call the function with (click)
<a role="button" (click)="func()"></a>
I know this is an old question. This worked for me on Angular 6 -
CSV Template
Something I noticed when addressing a similar issue is that you can surround your function call with {{ }} to have angular actually call the function.
In my particular problem, I was trying to generate a dynamic link based on other information so I did something like
html:
typescript:
generateCustomLink(data: any) : string {
return 'http://www.google.com';
}
For new visitors, you can also call like below:
in mycomponent.component.html
<a class="dropdown-item" (click)="onLogoutClick()">Logout</a>
And, and in mycomponent.component.ts
onLogoutClick() {
console.log("Logout Clicked");
//define your logic
}
When I click a link (brandname) in front end, I need send a request to the server using th:href in thymeleaf. For that I followed below code
<a th:href="#{*{category.url}}" th:text=*{brandname}></a>
category.url and brandname values are coming dynamically from their respective Objects, But for above request I need to append extra content for that I tried something like below
<a th:href="#{*{category.url}+'?someExtraContent'}" th:text=*{brandname}></a>
and it is adding the extra content successfully, now my task is that 'extra content' I need to append dynamically, I read Local Variable concept in thymeleaf and I tried below code to append content to the request url dynamically
<a th:with="var=*{brandname}" th:href="#{*{category.url}+'?'+var}" th:text=*{brandname}></a>
I assumed that the var will stores the value and it will append to the request url but it is not happening I am getting the url like below
Ex:
localhost:8080/mycompany/mens?var
But I need something like below
Ex:
localhost:8080/mycompany/mens?nike
can anyone help me how to append dynamic content to the request url in thymeleaf
I found solution,
Previous code
<a th:with="var=*{brandname}" th:href="#{*{category.url}+'?'+var}" th:text=*{brandname}></a>
I replaced above code with
<a th:with="var=*{brandname}" th:href="#{*{category.url}+'?'+${var}}" th:text=*{brandname}></a>
Now I am able to append the dynamic content to my request url...
I have changed this var to ${var}