Warm tip: This article is reproduced from stackoverflow.com, please click
asp.net-core blazor c# http razor

Why is my data binding not working and is always null?

发布于 2020-03-27 10:19:45

I am trying to add data to the database. I experimenting with Blazor and .NET core:

This is my code in the controller:

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

My car model looks like this:

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

I call this method like this:

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

When I fill in the form and press add button the car object is always null

This is my form with the databinding:

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

I have put a breakpoint on the addCar method. I get the values from the fields but when it goes to the controller it becomes null.

I have following this tutorial:

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

How can I save the values from the fields and send it to the database?

Questioner
Fearcoder
Viewed
98
Fearcoder 2019-07-08 14:24

After a weekend of research I have the solution!

I have changed my method in CarService.cs like this:

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

Then I call this method in my razor page like this:

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

I also made a new object of the service like this:

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

And I moved the model of Car.cs into CarService.cs