can i access blazor(.razor) in razor page(cshtml)? - razor

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.

Related

Is it possible to use a dynamic value in asp-route-{value}?

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

Get the last 2rd item in HTML

I have used Django to develop a webapp
In the admin model, I used Django simple UI package, I want to choose the last 2rd one in the list(models)
How could I slice in the below?
<div v-for="(c,j) in models" :key="c.name" class="quick-wrap">
<a href="javascript:;" #click="openTab(c,(j+1)+'')">
<span class="icon" :class="c.icon"></span>
<span class="card-name" v-text="c.name"></span>
</a>
</div>
Not sure what last 2rd means, but if you want the last 2 items in what appears to be a context variable called models you can do that in the view you use to call this html file. Using a slice on your queryset you should be able to pass models[-2:] to get the last two and pass that instead of models. Vue may have a way to slice as well, but if you can do it in the view, it probably makes sense to do so.

Angular 8 routerLinks create decoded href with # to %23

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>

how to append variable value to th:href in thymeleaf

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}

class attribute in Razor

I am building a MVC4 app (my first) and using Razor for the first time as well.
I am currently building a simple site and using MVCSitemapProvider for the Menu and Breadcrumb stuff.
In my menu i need to output some css class depending on if the current item is active and a custom class i added to the mvc.sitemap.
This is what i have;
<li class="
#if (node.IsCurrentNode){<text>active </text>}
#if (node.Children.Any()){<text>has-sub</text>}
">
The above works as expected - but it does not look nice in a view source for instance.
The class attribute is always shown - even if it is empty?
You can use Conditional Attributes in Web Pages 2 (MVC 4) to cause the class attribute and its value to render only if the expression you pass in does not result in null:
<li class="#(node.IsCurrentNode ? "active" : null)">