click on edit button then not open the employee edit page

Question

I am calling blazor server side getemp webapi in client side

I have two record in table

blazor server side getemp web api work fine

EmpsController.cs

namespace CrudBlazorServerApp.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class EmpsController : ControllerBase
    {
        private readonly sqldbcontext _context;

        public EmpsController(sqldbcontext context)
        {
            _context = context;
        }    
        
        // GET: api/Emps
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Emp>>> Getemps()
        {
            return await _context.emps.ToListAsync();
        }
 
        [HttpGet("{id}")]
        public async Task<ActionResult<Emp>> GetEmp(int id)
        {
            var emp = await _context.emps.FindAsync(id);

            if (emp == null)
            {
                return NotFound();
            }

            return emp;
        }

I am calling getemp webapi in client side when user click on edit button but editemployee page not open

DisplayEmployeeData.razor

     <tbody>
            @foreach (var emp in empList)
            {
            <tr>
                <td>@emp.empid</td>
                <td>@emp.username</td>
                <td>@emp.empaddress</td>
                <td>@emp.password</td>
                <td>@emp.country</td>
                <td>
                    <a href='/EditEmployee/@emp.empid'>Edit</a>
                </td>
            </tr>
            }
        </tbody>

I create a editemployee page in pages folder

EditEmployee.razor

@using CrudBlazorServerApp.Data
@page "/EditEmployee/empid/"
@inject HttpClient Http
@using System.Net.Http

<h4>Edit Employees</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="username" class="control-label">username</label>
                <input for="username" class="form-control" bind="@emp.username" />
            </div>
            <div class="form-group">
                <label asp-for="empaddress" class="control-label">empaddress</label>
                <input asp-for="empaddress" class="form-control" bind="@emp.empaddress" />
            </div>
            <div class=" form-group">
                <label asp-for="password" class="control-label">password</label>
                <input asp-for="password" class="form-control" bind="@emp.password" />
            </div>
            <div class=" form-group">
                <label asp-for="country" class="control-label">country</label>
                <input asp-for="country" class="form-control" bind="@emp.country" />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

@code {

    Emp emp;
    protected override async Task OnInitializedAsync() =>
        emp = await Http.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/getemp/" + emp.empid);
}

Hierarchy Of Project

getemp webapi work fine but when I click on edit button then not open the editemployee page

which place I am doing wrong?

Answer 1

There in EditEmployee.razor

@page "/EditEmployee/empid/"

Should be :

@page "/EditEmployee/{id}"

And the code should be:

@using CrudBlazorServerApp.Data
@page "/EditEmployee/{id}"
@inject HttpClient Http
@using System.Net.Http

<h4>Edit Employees</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        @if (emp != null)
        {
        <form>
            <div class="form-group">
                <label for="username" class="control-label">username</label>
                <input for="username" class="form-control" bind="@emp.username" />
            </div>
            <div class="form-group">
                <label asp-for="empaddress" class="control-label">empaddress</label>
                <input asp-for="empaddress" class="form-control" bind="@emp.empaddress" />
            </div>
            <div class=" form-group">
                <label asp-for="password" class="control-label">password</label>
                <input asp-for="password" class="form-control" bind="@emp.password" />
            </div>
            <div class=" form-group">
                <label asp-for="country" class="control-label">country</label>
                <input asp-for="country" class="form-control" bind="@emp.country" />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-default" />
            </div>
        </form>
        }
    </div>
</div>

@code {

    Emp emp;
    protected override async Task OnInitializedAsync() =>
        emp = await Http.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/getemp/" + emp.empid);
}

@code {

    [Parameter]
    public string Id { get; set; }

    Emp emp;
    protected override async Task OnInitializedAsync() =>
        emp = await Http.GetFromJsonAsync<Emp>("https://localhost:44333/api/emps/getemp/" + Id);
}

Doc : https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-parameters