Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Restore NavMenu item when clicking it

$
0
0

I have a list being shown on a page that is filtered by a bool parameter that I'm using to pass to a component:

ProjectList.razor:

@if (IsDetail == true){<ProjectDetail OnDetailShown="UpdateDetailView"></ProjectDetail>}else{<a class="btn btn-primary" @onclick="() => OnClick(projectId)"  @onclick:preventDefault>DETAILS</a>}@code{    public bool IsDetail { get; set; }    private void UpdateDetailView()    {        IsDetail = false;    }    private void OnClick(int projectId)    {        IsDetail = true;        Project = Projects.First(x => x.ProjectId == projectId);    }}

and my component ProjectDetail:

<h3>Project Details</h3><button class="btn btn-primary" @onclick="OnClick">Save</button>@code {    [Parameter]    public bool IsDetail { get; set; }    private void OnClick()    {        OnDetailShown.InvokeAsync(false);    }}

the idea here is that when user clicks on the button "DETAILS" in the list of projects, the onClick sets the "isDetail" to true and this hides the entire list and shows the detail via the ProjectDetail component.and from the component, when clicking "save" sends back the "isDetail" as false, so it shows the list again and hides the details.

this right now is working. however my small issue is that when clicking the navigation navbar on the left, if I click the "Project list" link when the details are being shown, the isDetail being "true" doesn't make visible the entire list.

How can I do so that when the user clicks also the "project list" button on the navigation:

<div class="nav-item px-3"><NavLink class="nav-link" href="projectList"><span class="oi oi-plus" aria-hidden="true"></span> Project List</NavLink></div>

the isDetail is changed to false so it shows the list again and hide the details?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>