How can I navigate between Razor pages in an Blazor Hybrid App? I found this explanation: https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/routing?view=aspnetcore-6.0
But I have no idea how to set the target (Razor Page) in a button for example. I like to create a navigation bar. Sorry I’m new in Blazor and Hybrid Apps.
Yes you can navigate to it via code as well.
To navigate via code you need to inject the NavigationManager class.
#inject NavigationManager navManager
and then in the code you can do this:
navManager.NavigateTo("test");
Does your question is How to set the target (Razor Component) in a button? Because Blazor App can't host a Razor Pages App, So I think it may be that you wrote Razor Component as Razor Page or I misunderstood your question. IF you want to set the target (Razor Component) in a button in navigation bar, You can do it by following the steps below:
(.NET MAUI Blazor App )
First, create a new Razor Component and set the link
#*set the link to this page *#
#page "/Test"
<h1> This is a new Test Page</h1>
#code {
//.......
}
Then in Shared/NavMenu.razor, Set the target (Razor Component) in a button in navigation bar
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<nav class="flex-column">
#*other navigation button*#
#*add the new button here*#
<div class="nav-item px-3">
#*set the link of the button*#
<NavLink class="nav-link" href="Test">
<span class="oi oi-list-rich" aria-hidden="true"></span> Test
</NavLink>
</div>
</nav>
</div>
The new navigation button you created will be displayed here.
(If I misunderstood your question please let me know and I will change my answer as soon as possible)
Related
I am working on an AspNetCore 3.1 app using a scaffolded Identity. I managed to use External Identity Providers successfully, I could customize Login.cshtml and Register.cshtml using my own styling, what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is, I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements. Please help and execuse my ignorance about razor pages if it is the reason :) . Thanks!
View I want to Customize:
My Identity Files:
I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements.
ASP.NET Core Identity is provided as a Razor Class Library in ASP.NET Core. And applications that include Identity can apply the scaffolder to selectively add the source code contained in the Identity Razor Class Library (RCL).
what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is.
To achieve your requirement, you can add and override Account\ExternalLogin, like below.
And the content of ExternalLogin.cshtml would be same as below, you can customize it with your expected style based on your actual requirement.
#page
#model ExternalLoginModel
#{
ViewData["Title"] = "Register";
}
<h1>#ViewData["Title"]</h1>
<h4>Associate your #Model.LoginProvider account.</h4>
<hr />
<p class="text-info">
You've successfully authenticated with <strong>#Model.LoginProvider</strong>.
Please enter an email address for this site below and click the Register button to finish
logging in.
</p>
<div class="row">
<div class="col-md-4">
<form asp-page-handler="Confirmation" asp-route-returnUrl="#Model.ReturnUrl" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
In my ASP.NET Core app, I have this customer view:
I have divided the view into Part 1 and Part 2. Actually I need to achieve these 2 things in ASP.NET Core MVC:
When the user clicks the Search button, load the Part 2 component.
When the user clicks pagination in part 2, I need to refresh only part 2 component.
I have decided do the part 1 as a Razor view and Part 2 as a view component. Also I want to achieve refreshing the component when the user clicks Search button (part1) and clicks the pagination (inside same component)
Please let me know whether I did correct or not?
How to send the page index to component to reload the the component with ajax when page index is clicked?
Thanks in advance. I don't expect entire code. Please let me know the logic to refresh the component.
This is the code for pagination.
<nav aria-label="Pagination" class="col-12">
<ul class="pagination justify-content-end">
<li class="page-item #prevDisabled">
<a class="page-link"
asp-controller="Home" asp-action="getcust"
asp-route-id="#(Model.Stocks.PageIndex - 1)"
aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
#foreach (var i in Model.Stocks.PageIndexesToDisplay)
{
var activeClass = i.IsActive ? "active" : "";
<li class="page-item #activeClass"><a class="page-link"
asp-controller="Home" asp-action="getcust"
asp-route-id="#(i.Index)">#i.Index</a></li>
}
<li class="page-item #nextDisabled">
<a class="page-link"
asp-controller="Home" asp-controller="Home" asp-action="getcust"
asp-route-Id="#(Model.Stocks.PageIndex + 1)"
aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Please let me know whether I did correct or not?
Nothing wrong with your implementation, looks okay. Just a side note; you may consider partial view as well instead of view component.
How to send the page index to component to reload the the component with ajax when page index is clicked?
Invoking a view component can be done via InvokeAsync method:
#await Component.InvokeAsync("PagingList", new { pageNo = 1, pageSize = 10, /* ..etc. */ })
or you can invoke the view component as a taghelper:
<vc:paging-list page-no="1" page-size="10">
</vc:priority-list>
For more details see Invoking a view component
Another approach can be done with partial view instead of view component. I've published a sample repo similar to what you want to achive but with Asp.Net Core Razor Pages and partial views and a reliable pagination control :) you can check it here:
Paging Sample Project
Paging with Ajax Live Demo
Ajax Request Using Inline Attributes
After a successful login, it is navigated to the dashboard URL. From that menu, links aren't working even though URL is changing in the address bar. router link in the menu is working when we forcefully do a page reload in the browser. otherwise, nothing is happening. There is no error in the console as well. The code is given below.
login navigation which works currently
this.usermanagementService.login('login', {username: userName, password})
.subscribe(message => {
this.jwt.saveToken(message.data.token);
if (window.localStorage.getItem('locale') === null) {
window.localStorage.setItem('locale', 'en');
}
this.router.navigate(['/dashboard']);
// More lines which handles the error section
The app menu html
<div *ngIf="m.submenus?.length > 0" class="collapse" id="{{ m.name }}" aria-expanded="false">
<ul class="flex-column pl-2 nav submenu-dark">
<li *ngFor="let secondlevel of m.submenus" class="nav-item">
<a class="nav-link collapsed text-truncate" routerLink="{{ secondlevel.slug }}"><span>{{ secondlevel.name }}</span></a>
</li>
</ul>
</div>
Currently routerlink works after we do a forceful redirect instead of angular router navigation. how to fix it?
Put the navigation URL in if a condition or in else condition.
Or another problem is your menu component did not get which user is login, so you should try event emit when user login and subscribe into menu component and set condition related to login user.
Fixed the issue with the following changes in app.component
<app-header></app-header>
<div *ngIf="router.url !== '/login'; else loginTemplateName" id="wrapper" class="toggled container-margin-fix">
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
<ng-template #loginTemplateName>
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</ng-template>
Inside the app-menu and app-footer there is an *ngIf checking whether it is not the login url. We need to add app-menu container in both cases in the app.component.html then only it will work eventhough it is hidden inside app-menu. Earlier it was just <router-outlet> only for the login route in the aapp.component.html
I have a tabs component with a template of that kind:
<div class="tabnav">
<ul>
<li v-for="tab in tabs" v-text="tab.title"></li>
</ul>
<div v-for="tab in tabs" v-html="tab.content"></div>
</div>
New tabs will be added on-demand through an Ajax request. I wonder how I can have my content (tab.content) to be automatically mounted. The new tabs are created but if I have components in this content, they are not Vueified.
What is the right approach to get this dynamic content integrated in my existing component with its specific set of methods, data, etc...?
If the only solution is to make of each content a distinct component itself, must it be named? If not, how do I integrate it in the tab?
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}