在 Blazor WebAssembly 项目中，PutAsync() 方法调用失败，但调试效果不够好，无法查看发生了什么

Question

我一直在尝试学习 Blazor WebAssembly 编程，并且一直在做一个后续项目以及我正在学习的 Pluralsight 课程。

发生的情况是以下代码中的 PutAsync() 方法失败：

        public async Task UpdateEmployee(Employee employee)
        {
            try
            {
                var jsonString = JsonSerializer.Serialize(employee).ToString();
                var employeeJson =
                    new StringContent(JsonSerializer.Serialize(employee), Encoding.UTF8, "application/json");
                await _httpClient.PutAsync($"/api/employee", employeeJson);
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(ex.Message);
            }

        }

此代码位于服务类中，具有 HttpPut 属性的目标方法似乎没有被调用，或者我放置在其中的断点永远不会被命中。

  [HttpPut]
        public IActionResult UpdateEmployee([FromBody] Employee employee)
        {
            if (employee == null)
                return BadRequest();

            if (employee.FirstName == string.Empty || employee.LastName == string.Empty)
            {
                ModelState.AddModelError("Name/FirstName", "The name or first name shouldn't be empty");
            }

            if (!ModelState.IsValid)
                return BadRequest(ModelState);

            var employeeToUpdate = _employeeRepository.GetEmployeeById(employee.EmployeeId);

            if (employeeToUpdate == null)
                return NotFound();

            _employeeRepository.UpdateEmployee(employee);

            return NoContent(); //success
        }

我将断点放在if (employee == null)行上，但它没有被击中。 最初我遇到了很多断点未命中的问题，但自从我从 Firefox 切换到 Chrome 进行测试后，情况好多了。 然而，执行似乎并没有到这里。 此目标类顶部的路由属性如下所示：

 [Route("api/[controller]")]
 [ApiController]

该类本身称为EmployeeController ，所以我认为"api/employee"属性应该到达它。

我在我发布的第一个代码块中的失败代码周围添加了一个 try/catch 块，当我单步执行时，我看到在我尝试跨过 PutAsync() 方法后抛出了一个异常。 但是当我去命令窗口查看 ex.Message 的内容是什么时，我在 Visual Studio 中得到“无法评估”错误。

如果我单步执行，我会看到执行命中了显示编辑表单的 Razor 文件中的一些绑定字段，但我对 Razor 的了解还不够，无法真正推断出正在发生的事情。 那里有许多字段如下所示：

   <div class="form-group row">
            <label for="lastName" class="col-sm-3">Last name: </label>
            <InputText id="lastName" @bind-Value="@Employee.LastName" class="form-control col-sm-8" placeholder="Enter last name"></InputText>
        </div>

        <div class="form-group row">
            <label for="firstName" class="col-sm-3">First name: </label>
            <InputText id="firstName" class="form-control col-sm-8" @bind-Value="@Employee.FirstName" placeholder="Enter first name"></InputText>
        </div>

        <div class="form-group row">
            <label for="birthdate" class="col-sm-3">Birthdate: </label>
            <InputDate id="birthdate" class="form-control col-sm-8" @bind-Value="@Employee.BirthDate" placeholder="Enter birthdate"></InputDate>
        </div>

        <div class="form-group row">
            <label for="email" class="col-sm-3">Email: </label>
            <InputText id="email" class="form-control col-sm-8" @bind-Value="@Employee.Email" placeholder="Enter email"></InputText>
        </div>

然后，在某个时刻，在单步执行时，很多字段都被跳过，执行似乎突然离开了 Razor 文件。 我不知道该怎么做，而且由于过去几年我基本上没有出现在 .Net 中，这一切确实让人感觉有点不知所措。 我不太确定 PutAsync() 方法调用失败如何真正转化为这些可能的数据绑定错误，但我猜测 PutAsync() 只是调用任何具有 [HttpPut] 属性的代码的工具，并且任何类型的此方法调用之后任何地方的异常都会导致 PutAsync() 调用失败。 这是否准确？

Answer 1

尝试等待“api/employee”

var employeeToUpdate = await _employeeRepository.GetEmployeeById(employee.EmployeeId);

Answer 2

1. 不要使用没有EditForm和model或EditContext的内置表单组件。
2. 在提交之前使用DataAnnotationsValidator和/或ValidationSummary组件来验证您的表单。
3. 仅在具有验证控件时才使用OnValidSubmit方法提交表单。
4. 如果您不想使用OnValidSubmit ，请在请求PutAsync()之前检查您的EditContext验证。
5. 请查看Microsoft 文档以获取更多信息，我相信这比您所遵循的课程更清楚。

Answer 3

非常感谢大家提供的所有有用建议，尤其是浏览器开发工具控制台提示。

因此，我将System.Diagnostics.Debug.WriteLine(ex.Message)行更改为Console(ex.Message) ，我在浏览器开发工具控制台中看到的错误是：

Access to fetch at 'https://localhost:44340/api/employee' from origin 'https://localhost:44362' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

我去了Web服务的startup.cs文件中的ConfigureServices()方法，我把代码从

    services.AddCors(options =>
            {
                options.AddPolicy("Open", builder => builder.AllowAnyOrigin().AllowAnyHeader());
            });

至

            services.AddCors(options =>
            {
                options.AddPolicy("Open", builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
            });

错误消失了，员工记录现在已正确保存。 我确实意识到调用AllowAnyMethod()之类的东西并不完全是一种合理的编程实践，但就本课程而言，现在就足够了。 再次感谢大家！