как вызвать create webapi (приложение сервера Blazor) на стороне клиента (веб-сборка Blazor)

Я создаю проект серверного приложения Blazor и использую webapi, встроенный в каркас crud api.

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 и создаю компонент бритвы

Registration.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

клиентская сторона (проект веб-сборки)

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

Я пытаюсь создать запись, но запись не создана?

что мне не хватает?

какое место нужно исправить?


c# blazor blazor-webassembly blazor-server-side blazor-client-side
person Nath Shivanand    schedule 31.08.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Поскольку у нас нет никакой информации о модели в POST, я предполагаю, что имена свойств используются в нотации Delphi. Blazor использует новый System.Text.Json для сериализации, и если он не установлен, он попытается проанализировать данные в чувствительной к регистру форме. (PostAsJsonAsync<T> также использует новый api в фоновом режиме) Это может быть одним из возможных источников проблемы.

Чтобы исправить это, вы можете передать настройки сериализатору. Например:

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

Судя по предоставленной информации, это единственная проблема, о которой я мог подумать. Вы также можете попробовать добавить проверку ввода, например FluentValidator.

person Zsolt Bendes    schedule 31.08.2020
comment
не решить проблему, пока я пытаюсь решить проблему - person Nath Shivanand; 01.09.2020

arrow_upward
1
arrow_downward

Вы не должны создавать 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://docs.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-3.1

person Quango    schedule 31.08.2020