单击编辑按钮然后不打开员工编辑页面

Question

我在客户端调用 blazor 服务器端 getemp webapi

我在table

中有两条记录

blazor 服务器端 getemp web api 工作正常

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;
        }

我在客户端调用 getemp webapi 当用户点击编辑按钮但 editemployee 页面未打开时

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>

我在 pages 文件夹中创建了一个 editemployee 页面

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);
}

项目层次结构

getemp webapi 工作正常但是当我点击编辑按钮然后不打开 editemployee 页面

我哪里做错了？

Answer 1

在EditEmployee.razor

@page "/EditEmployee/empid/"

应该是：

@page "/EditEmployee/{id}"

代码应该是：

@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);
}

文档：https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-parameters

单击编辑按钮然后不打开员工编辑页面

click on edit button then not open the employee edit page

blazor

blazor-server-side

blazor-client-side

webapi