为什么我的数据绑定不起作用，并且始终是无效的

Question

我正在尝试将数据添加到数据库中。我尝试Blazor和.NET core：

这是控制器中的代码：

 [Route("AddCarBlazor")]
 [HttpPost]
        public IActionResult PostBlazor(Car car)
        {
            if (car.CarId == 0)
            {
                // New
                car.Created = DateTime.Now;
                _context.Cars.Add(car);
                _context.SaveChanges();
                return Ok();
            }
            else
            {
                // Update
                var c = _context.Cars.First(e => e.CarId == car.CarId);
                c.Brand = car.Brand;
                c.Color = car.Color;
                c.Model = car.Model;
                c.LastChange = DateTime.Now;
                c.TopSpeed = car.TopSpeed;
                _context.SaveChanges();
                return Ok();
            }
        }

我的 CAR 模型看起来像：

public class Car
    {
        [Key]
        public long CarId { get; set; }
        public string Created { get; set; }
        public string LastChange { get; set; }
        public string Brand { get; set; }
        public string Model { get; set; }
        public string Color { get; set; }
        public long TopSpeed { get; set; }
    }

我称此方法为这样：

  private async Task AddCar()
    {
        await Http.PostJsonAsync(baseUrl + "/AddCarBlazor/", carobject);
        await Refresh();
    }

当我填写表格并按添加按钮时， CAR对象始终 null

这是我带有数据标记的表格：

<form>
    <div class="row">
        <div class="form-group col-sm-3">
            <label>Brand</label>
            <input input type="text" @bind="@carobject.Brand" class="form-control" placeholder="Enter brand" />
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-3">
            <label>Model</label>
            <input type="text" @bind="@carobject.Model" class="form-control" placeholder="Enter model" />
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-3">
            <label>Color</label>
            <input type="text" @bind="@carobject.Color" class="form-control" placeholder="Enter color" />
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-3">
            <label>TopSpeed</label>
            <input type="number" @bind="@carobject.TopSpeed" class="form-control" placeholder="Enter speed" />
        </div>
    </div>
    <div class="btn-group mr-2">
        <button class="btn btn-danger mr-1" onclick=@AddCar>Save changes</button>       
    </div>
</form>

我在 addcar 方法上放了一个断点。我从字段中获得值，但是当它转到控制器时，它将变成 null 。

我遵循本教程：

https://learn.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view= aspnetcore-3.0

如何从字段中保存值并将其发送到数据库？

Answer 1

i测试一个效果很好的演示，您可以参考下面的代码：

1.car.cs(命名空间Blazor.models(

public class Car
{
    public long CarId { get; set; }       
    public string Brand { get; set; }
    public string Model { get; set; }
}

2。addcar.razor

@page "/car"
@using System.Net.Http
@inject HttpClient Http
@using Blazor.Models
<Editform Model="carobject">
    <div class="row">
        <div class="form-group col-sm-3">
            <label>Brand</label>
            <input   @bind="@carobject.Brand" class="form-control" placeholder="Enter brand" />
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-3">
            <label>Model</label>
            <input  @bind="@carobject.Model" class="form-control" placeholder="Enter model" />
        </div>
    </div>
    <div class="btn-group mr-2">
        <button class="btn btn-danger mr-1" onclick="@AddCar">Save changes</button>
    </div>
</Editform>
@functions {

[Parameter]
private Car carobject { get; set; } = new Car();
private async Task AddCar()
{       
    await Http.PostJsonAsync(baseUrl + "/AddCarBlazor/", carobject);
    //await Refresh();
}
}

3.WEB API CORS配置：

 app.UseCors(corsbuilder => {
            corsbuilder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
        });
 app.UseHttpsRedirection();
 app.UseAuthentication();
 app.UseMvc();

4.Action：

[Route("AddCarBlazor")]
[HttpPost]
public IActionResult PostBlazor([FromBody]Car car)

Answer 2

经过一个周末的研究，我有了解决方案！

我在 carservice.cs 中更改了我的方法：

public async Task AddCar(Car car)
{
        var client = new HttpClient { BaseAddress = new Uri("https://localhost:44369/api/car/") };
        await client.SendJsonAsync(HttpMethod.Post, "AddCar", car);
}

然后，我在剃须刀页面中调用此方法：

async Task AddCar()
{
    await CarService.AddCar(car);
    car = new CarService.Car();
    await LoadCarData();
}

我还制作了这样的服务的新对象：

CarService.Car car = new CarService.Car();

我将 car.cs 的模型移至 carservice.cs