I have created a user interface where users can add or delete values from a sql table. The edit button, running off a separate page, is supposed to display the number selected as a placeholder value and push the changed number.
here is the main page which takes you to the edit form:
@page "/"@inherits NumberDataModel<h1>Data</h1><p>Displays id's</p><div class="row"><div class="col-md-6"><a href='/list/add' class="btn btn-primary" role="button"><i class="fas fa-user-plus"></i> Add Number</a></div><div class="input-group col"><input type="text" class="form-control" placeholder="Search number by ID" @bind="SearchString" @bind:event="oninput" @onkeyup="FilterVeh" />@if (vehList == null){<p><em>Loading...</em></p>}else{ @if (vehList.Count > 0) {<table class="table table-striped align-middle table-bordered"><thead class="table-success"><tr class="text-center"><th>Numbers</th></tr></thead><tbody> @foreach (var veh in vehList) {<tr class="text-center"><td>@veh.Number</td><td><a href='/list/edit' class="btn btn-outline-dark" role="button">Edit</a><button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteVehModal" @onclick="(() => DeleteConfirm(veh.Number))"> Delete</button></td></tr> }</tbody></table><div class="modal fade" id="deleteVehModal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h3 class="modal-title">Delete Number?</h3><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><h4>Do you want to delete this Number ??</h4><table class="table"><tbody><tr><td>number</td><td>@veh.Number</td></tr></tbody></table></div><div class="modal-footer"><button class="btn btn-danger" @onclick="(async () => await DeleteNumber(veh.Number))" data-bs-dismiss="modal">YES</button><button class="btn btn-warning" data-bs-dismiss="modal">No</button></div></div></div></div> } else {<div class="d-flex justify-content-center"><h4>No record found</h4></div> }}The edit razor form:
@page "/list/edit"@inherits EditNumberModel<h1>@Title Number</h1><p style="font-size:1vw;">No duplicate numbers.</p><EditForm Model="@veh" OnValidSubmit="EditNumber"><DataAnnotationsValidator /><div class="mb-3"><label for="number" class="form-label">Number</label><div class="col-md-4"><!--Add minlenght="1" maxlenght="7" before 'Required'--><InputText class="form-control" @bind-Value="veh.Number" placeholder= "@veh" required /></div><ValidationMessage For="@(() => veh.Number)" /></div><div class="form-group"><button type="submit" class="btn btn-primary">Edit</button><button type="button" class="btn btn-light" @onclick="Cancel">Cancel</button></div></EditForm>And the cs page attached to the razor page:
using Microsoft.AspNetCore.Components;using Fireserver.Data;using Fireserver.Models;using System;using Fireserver.Interface;namespace Fireserver.Pages{ public class EditNumberModel : ComponentBase { [Inject] protected NumberService NumberService { get; set; } = null!; [Inject] public NavigationManager? UrlNavigationManager { get; set; } [Parameter] public string? vehID { get; set; } protected string Title = "Edit"; public Number veh = new(); protected async Task EditNumber() { { if (vehID != null) { Title = "Edit"; veh = await NumberService.Details(vehID); await Task.Run(() => { NumberService.Edit(veh); }); } } } public void Cancel() { if (UrlNavigationManager != null) { UrlNavigationManager.NavigateTo("/"); } } }}NumberService Page:
`using Fireserver.Interface;using Fireserver.Models;
namespace Fireserver.Data{public class NumberService{private readonly INumber objnumber;
public NumberService(INumber _objnumber) { objnumber = _objnumber; } public Task<List<Number>> GetNumberList() { return Task.FromResult(objnumber.GetAllNumbers()); } public void Create(Number number) { objnumber.AddNumber(number); } public Task<Number> Details(string id) { return Task.FromResult(objnumber.GetNumberData(id)); } public void Edit(Number number) { objnumber.UpdateNumber(number); } public void Delete(string id) { objnumber.DeleteNumber(id); }}}`
The page should at least display the value you clicked on in the form as well as push the new change.
But the edit button refuses to work at allI and only the from page string is what is displayed in the form entry h.
I have tried changing the intial values that are looked at by the interface itself, to no change.