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