I have 2 list pages (tasks and contacts). I'm using the NavMenu.razor that comes with the Blazor Web App for the links.
<div class="nav-item px-3"><NavLink class="nav-link" href="weather"><span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather</NavLink></div><div class="nav-item px-3"><NavLink class="nav-link" href="contact-list"><span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Contacts</NavLink></div><div class="nav-item px-3"><NavLink class="nav-link" href="task-list"><span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Tasks</NavLink></div></nav></div>For instance, if I click on Contacts and scroll down the page of 50 records, then I click Tasks, the page is already scrolled to the bottom of the 50 tasks. I was expecting when I clicked on Tasks it would start at the top of the page.
Now, if I select a contact and got to detail page and then return to contact list after a modification or cancel the list page starts at the top. In this case, I would like it to go back to the record in the list.
Here's my contacts component:
@page "/contact-list"@rendermode InteractiveServer@inject ContactService ContactService@inject NavigationManager NavigationManager<h3>Contact List</h3><table class="table table-striped"><thead><tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Actions</th></tr></thead><tbody> @foreach (var contact in Contacts) {<tr><td>@contact.FirstName</td><td>@contact.LastName</td><td>@contact.Email1</td><td><button class="btn btn-primary btn-sm" @onclick="() => EditContact(contact.Id)">Edit</button><button class="btn btn-danger btn-sm" @onclick="() => DeleteContact(contact.Id)">Delete</button></td></tr> }</tbody></table><button class="btn btn-success" @onclick="CreateContact">Add New Contact</button>@if (SelectedContact != null){<h3>@(IsEditing ? "Edit Contact" : "Create Contact")</h3><div class="form-group"><label>First Name</label><input type="text" class="form-control" @bind="SelectedContact.FirstName" /></div><div class="form-group"><label>Last Name</label><input type="text" class="form-control" @bind="SelectedContact.LastName" /></div><div class="form-group"><label>Email</label><input type="email" class="form-control" @bind="SelectedContact.Email1" /></div><button class="btn btn-primary" @onclick="SaveContact">Save</button><button class="btn btn-secondary" @onclick="CancelEdit">Cancel</button>}@code { private List<Contact> Contacts; private Contact? SelectedContact; private bool IsEditing = false; protected override void OnInitialized() { Contacts = ContactService.GetAllContacts(); } private void CreateContact() { SelectedContact = new Contact(); IsEditing = false; } private void EditContact(Guid id) { SelectedContact = Contacts.FirstOrDefault(c => c.Id == id); NavigationManager.NavigateTo($"/contact-detail/{id}"); IsEditing = true; } private void DeleteContact(Guid id) { ContactService.DeleteContact(id); Contacts = ContactService.GetAllContacts(); } private void SaveContact() { if (IsEditing) { ContactService.UpdateContact(SelectedContact); } else { ContactService.AddContact(SelectedContact); } Contacts = ContactService.GetAllContacts(); SelectedContact = null; } private void CancelEdit() { SelectedContact = null; }}Here's my tasks component:
@page "/task-list"@rendermode InteractiveServer@inject ArcTaskService TaskService@inject NavigationManager NavigationManager<h3>Task List</h3><table class="table table-striped"><thead><tr><th>Task Name</th><th>Priority</th><th>Completed</th><th>Actions</th></tr></thead><tbody> @foreach (var task in Tasks) {<tr><td>@task.TaskName</td><td>@(task.TaskPriority.HasValue ? task.TaskPriority.ToString() : "N/A")</td><td>@(task.TaskCompleted ? "Yes" : "No")</td><td><button class="btn btn-primary btn-sm" @onclick="() => EditTask(task.Id)">Edit</button><button class="btn btn-danger btn-sm" @onclick="() => DeleteTask(task.Id)">Delete</button></td></tr> }</tbody></table><button class="btn btn-success" @onclick="CreateTask">Add New Task</button>@code { private List<ArcTask> Tasks; protected override void OnInitialized() { Tasks = TaskService.GetAllTasks(); } private void CreateTask() { NavigationManager.NavigateTo("/task-detail"); } private void EditTask(Guid id) { NavigationManager.NavigateTo($"/task-detail/{id}"); } private void DeleteTask(Guid id) { TaskService.DeleteTask(id); Tasks = TaskService.GetAllTasks(); }}
