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

我的汽车模型如下：

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

当我填写表单并按添加按钮时，汽车对象始终为空

这是我的数据绑定表格：

<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://docs.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-3.0

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

Answer 1

我测试了一个运行良好的演示，您可以参考下面的代码：

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。动作：

[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

为什么我的数据绑定不起作用并且总是为空？

2 个答案: