Response code 400: PUT method

Question

Hi, After following test and debug of my code I don't arrive to resolve this issue.

A you can Suivi is null. I don't how I can fix this issue. hereafter the extract of my code. I will appreciate some helps on this problem. Thanks in advance

<RadzenDataGrid @ref="grid"   ...  Data="@developers" TItem="SuiviBE" />
          <Template Context="developers">
         
          <RadzenDataGrid  @ref="gridaction"  ...  Data="@developers.ActionItems" TItem="ActionItem"/>

          </Template>




@code{
RadzenDataGrid<ActionItem>? gridaction;
RadzenDataGrid<SuiviBE>? grid; 

    [Parameter] public bool WithColumnPicker { get; set; } = false;
    [Parameter] public int suivibeId { get; set; } 
    [Parameter] public int ActionItemId { get; set; }

    ActionItem act = new ActionItem();
  
    IEnumerable<SuiviBE>? developers;

    protected override async Task OnInitializedAsync()
    {
        developers= await client.GetFromJsonAsync<SuiviBE[]>($"api/etude");
        
    }  

    async Task CreationAction(int actionId)
    {     
        act.SuiviBEId = actionId;
        var result = await DialogService.OpenAsync("Description de l'action", ds =>
        @<div>                                        
               <div class="row">
                     <div class="col">
                         <RadzenHtmlEditor @bind-Value=@act.DescriptionA style="height: 500px; margin-bottom: 1rem;" UploadUrl="upload/image" />
                         <RadzenButton Text="Update" Icon="report" ButtonStyle="ButtonStyle.Light" Click=@CreateActionList />
                     </div>
                </div>  
       </div>
      ); 
    }
    
   async Task CreateActionList()
    {  
     await client.PutAsJsonAsync($"api/etude/{act.SuiviBEId}", act);
     uriHelper.NavigateTo($"/etude");
   } 

PUT method :

        [HttpPost]
        public async Task<ActionResult<SuiviBE>> PostAsync([FromBody] SuiviBE developer)
        {
            _context.Add(developer);
            await _context.SaveChangesAsync();
            return CreatedAtAction(nameof(Get), new { id = developer.SuiviBEId }, developer);
        }

I define the class SuiviBE and ActionItem as below

public class SuiviBE
    {
        [Key]
        public int SuiviBEId { get; set; }
        ...
        public List<ActionItem>? ActionItems { get; set; }
    }
      

    public class ActionItem
    {

        public int ActionItemId { get; set; }
        ....
        public int SuiviBEId { get; set; }
        public SuiviBE SuiviBE { get; set; }
    }

ApplicationDbContext :

    public class ApplicationDbContext : ApiAuthorizationDbContext<ApplicationUser>
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options,
        IOptions<OperationalStoreOptions> operationalStoreOptions) : base(options, operationalStoreOptions)
       {
       }
        public DbSet<SuiviBE> SuiviBEs { get; set; }
        public DbSet<ActionItem> ActionItems { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);

            modelBuilder.Entity<ActionItem>()
                .HasOne(p => p.SuiviBE)
                .WithMany(b => b.ActionItems);
        }

       
     }

Answer 1

Your current design uses EF entities in the user interface (Blazor), the Web API interface, and database interface which is not sensible. The Blazor application should use view models located in the Blazor application for binding UI elements. The Blazor to Web API interface should use a different data interface shared between the Blazor and Web API projects. Usually these interfaces are called DTOs or POCOs. The EF entities should only interface with the database tables and not get past Web API.

I created a Hosted Blazor WASM and committed the solution to GitHub. the project uses the blog and post examples from the Entity Framework reference documentation on this site. This IS NOT PRODUCTION CODE! But, feel free to make any modification you like.
https://github.com/mjgebhard/BlazorWasmIdentity

Answer 2

Variable values may be getting lost because the dialog spawns a different thread. Try:

    async Task CreationAction(int actionId)
    {     
        act.SuiviBEId = actionId;
        var result = await DialogService.OpenAsync("Description de l'action", ds =>
        @<div>                                        
               <div class="row">
                     <div class="col">
                         <RadzenHtmlEditor @bind-Value=@act.DescriptionA style="height: 500px; margin-bottom: 1rem;" UploadUrl="upload/image" />
                         <RadzenButton Text="Update" Icon="report" ButtonStyle="ButtonStyle.Light" Click=@CreateActionList(act) />
                     </div>
                </div>  
       </div>
      ); 
    }
    
   async Task CreateActionList(ActionItem paramAct)
    {  
     await client.PutAsJsonAsync($"api/etude/{act.SuiviBEId}", paramAct);
     uriHelper.NavigateTo($"/etude");
   } 

Answer 3

I don't understand why SuiviBE is null . It's seems that FK

You defined SuiviBE as a non-null member of ActionItems. You can try setting SuiviBE to a nullable type but this will affect the database too. The best approach, as explained to you many times over the last year, is to stop passing Entities between the Blazor and Web API application.

    public class ActionItem
    {
        public int ActionItemId { get; set; }

        ....

        public int? SuiviBEId { get; set; }

        public SuiviBE? SuiviBE { get; set; }
    }

Answer 4

So I don't understand why you ask me to give the method Put.

I asked for the Put method because the subject of your thread is "Response code 400: PUT method" and you did not include the actual PUT action.
I tested the PUT method in this thread with nullable properties and the action no longer returns the validation error.

        public int? SuiviBEId { get; set; }
        public SuiviBE? SuiviBE { get; set; }

There are other issues due to the design but the validation error is gone.

Answer 5

[HttpPost] public async Task<ActionResult<SuiviBE>> PostAsync([FromBody] SuiviBE developer) { _context.Add(developer); await _context.SaveChangesAsync(); return CreatedAtAction(nameof(Get), new { id = developer.SuiviBEId }, developer); }