如何在客户端调用创建 WebApi(Blazor Server App)(Blazor WebAssembly)

Question

我创建了一个 blazor 服务器应用项目，并使用了在 crud api 框架中构建的 webapi。

EmpsController.cs

[Route("api/[controller]")]
[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();
}
[HttpPost]
public async Task<ActionResult<Emp>> PostEmp(Emp emp) //I want to call this webapi in clientside(webassembly app)
{
_context.emps.Add(emp);
await _context.SaveChangesAsync();
return CreatedAtAction("GetEmp", new { id = emp.empid }, emp);
}

然后我创建一个 blazor 网页程序集项目并创建一个 Razor 组件

注册剃刀

@page "/registration"
@using Newtonsoft.Json;
@inject NavigationManager navigationManager
<h3>Registration</h3>
@using CrudBlazorServerApp.Data
<div>
UserName: <input type="text" id="txtusername" placeholder="Enter Your UserName" @bind="@username" required /><br />
Address: <input type="text" id="txtempaddress" placeholder="Enter Your Address" @bind="@address" required /><br />
Password:  <input type="text" id="txtpassword" placeholder="Enter Your Password" @bind="@password" required /><br />
Country: <input type="text" id="txtcountry" placeholder="Enter Your Country" @bind="@country" required /><br />
<button @onclick="Create">Submit</button><br /><br /><br /><br />
<a href="https://localhost:44399/">Click Here For Login</a>
</div>
@code {
string username = "";
string address = "";
string password = "";
string country = "";
Emp empList = new Emp();
protected async Task Create()
{
var client = new HttpClient();
HttpResponseMessage response = await client.PostAsJsonAsync<Emp>("https://localhost:44333/api/emps",empList);
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Add("Accept", "application/json");
@if (response.IsSuccessStatusCode)
{
var returnuserdata = await response.Content.ReadAsStringAsync();
var userdata = JsonConvert.DeserializeObject(returnuserdata);
if (userdata != null)
{
navigationManager.NavigateTo("/login");
}
else
{
navigationManager.NavigateTo("/registration");
}
}
}
}

服务器端(Blazor 服务器应用项目)

https://i.stack.imgur.com/t6GVI.png

客户端(WebAssembly Project)

https://i.stack.imgur.com/JZxua.png

我正在尝试创建记录，但未创建记录？

我错过了什么？

哪个地方需要纠正？

Answer 1

由于我们在 POST 中没有关于模型的任何信息，所以我使用 Delphi 符号假设属性名称。Blazor 使用新System.Text.Json进行序列化，如果未设置，它将尝试以区分大小写的形式分析数据。(PostAsJsonAsync<T>也在后台使用新的 api) 这可能是问题的一个可能来源。

若要解决此问题，可以将设置传递给序列化程序。例如：

var serializeOptions = new JsonSerializerOptions
{
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
};
var jsonString = JsonSerializer.Serialize(empDetails, serializeOptions);

从提供的信息来看，这是我能想到的唯一问题。您也可以尝试添加输入验证，例如FluentValidator。

Answer 2

不应以这种方式创建HttpClient，您需要以与FetchData示例在基本示例应用中相同的方式进行注入 https://gist.github.com/SteveSandersonMS/7c5e80ebf7f238505f1281f550666600

尝试添加

@using System.Net.Http
@inject HttpClient client;

在页面顶部。更改Create方法，如下所示：

protected async Task Create()
{
HttpResponseMessage response = await client.PostAsJsonAsync<Emp>("https://localhost:44333/api/emps",empList);
@if (response.IsSuccessStatusCode)
{
var userdata = response.Content.ReadFromJsonAsync<YourExpectedResult>();
if (userdata != null)
{
navigationManager.NavigateTo("/login");
}
else
{
navigationManager.NavigateTo("/registration");
}
}
}

我使用YourExpectedResult作为您期望的类型，因为您的示例没有说明您要反序列化为哪种类型。

更多信息： https://learn.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-3.1