SidePanel Unhandled exception rendering component:

sblb 1,166 Reputation points
2022-11-11T11:58:33.05+00:00

Hi,

I tried to implement Blazor.SidePanel component ; here in my application.

The SidePanel is implemented when I Edit the data from DataGridView : https://localhost:44354/developer/edit/1

When I open the SidePanel to creation an action I received the message :

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]  
      Unhandled exception rendering component: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.  
System.InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.  
   at Microsoft.AspNetCore.Components.Forms.EditForm.OnParametersSet()  
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()  
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()  

I don't understand why I received this message

how I did it ?

First I create the table with EF one-to-many to assure the link with the main table.

public partial class Developer  
    {  
        public int Id { get; set; }  
         public ICollection<ActionsList>? ActionsLists { get; set; }  
 }  
  
 public class ActionsList  
    {  
        [Key]     
        public int ActionId { get; set; }              
       
        public DateTime ProductionDate { get; set; }  
          
        public int DeveloperId { get; set; }  
        public Developer Developer { get; set; }  
  
    }  

Definition of the applicationdbcontext

public class ApplicationDBContext : DbContext  
    {  
        public ApplicationDBContext(DbContextOptions<ApplicationDBContext> options) : base(options)  
        {  
        }  
        public DbSet<Developer> Developers { get; set; }  
        public DbSet<ActionsList> ActionsLists { get; set; }  
                 
      
        protected override void OnModelCreating(ModelBuilder modelBuilder)  
        {  
            modelBuilder.Entity<ActionsList>()  
                        .HasOne<Developer>(s => s.Developer)  
                        .WithMany(g => g.ActionsLists)  
                        .HasForeignKey(s => s.DeveloperId);         
        }     
      
      }  

I defined the ActionsListController.cs

In Edit.razor I added the SidePanel as below

@page "/developer/edit/{developerId:int}"  
@inject HttpClient http  
@inject NavigationManager uriHelper  
@inject IJSRuntime js  
@inject ISidepanelService Sidepanel  
  
<FormEdit ButtonText="Update" dev="dev" OnValidSubmit="@EditDeveloper" />  
       
<hr />  
<h2>Open Create Form</h2>  
<SidepanelComponent @ref="createSidepanel" Title="Create" SubTitle="Starship">  
    <FormCreateSidePanel ButtonAction="Create Action"  act="@act" OnValidSubmit="@CreateActionsList" />  
</SidepanelComponent>  
  
<button @onclick="OpenCreateForm">Open Create Form</button>  
<button @onclick="Close">Close</button>  
  
<Codeblock Code="@codeblock1" />  
  
<hr />  
  
@code {  
  
    [Parameter] public int developerId { get; set; }  
  
    Developer dev = new Developer();     
      
    [Parameter] public ActionsList? act { get; set; }  
    [Parameter] public string ButtonAction { get; set; } = "Save";  
    ActionsList[]? actionslist { get; set; }   
  
    [Parameter] public int ActionId { get; set; }  
      
    protected async override Task OnParametersSetAsync()  
    {  
        dev = await http.GetFromJsonAsync<Developer>($"api/developer/{developerId}");  
        act = await http.GetFromJsonAsync<ActionsList>($"api/actionslist/{ActionId}");  
  
    }  
  
    async Task EditDeveloper()  
    {  
        await http.PutAsJsonAsync("api/developer", dev);  
        await http.GetAsync($"api/developer/GenearteEcoById/{developerId}");       
        await js.InvokeVoidAsync("alert", $"Updated Successfully!");  
        uriHelper.NavigateTo("developer");          
    }         
       
    async Task CreateActionsList()  
    {  
          await http.PostAsJsonAsync("api/actionslist", act);  
         uriHelper.NavigateTo("actionslist");  
   }  
  
    private SidepanelComponent? editSidepanel;  
    private SidepanelComponent? createSidepanel;  
    private ActionsList? actions;  
    private string codeblock1 => "<SidepanelComponent @ref=\"createSidepanel\" Title=\"CreateSidePanel\" SubTitle=\"Starship\">\n    <Create />\n</SidepanelComponent>";  
    private string codeblock2 => "<SidepanelComponent @ref=\"editSidepanel\" Title=\"EditSidePanel\" SubTitle=\"Starship\">\n    <Edit Starship=\"starship\" />\n</SidepanelComponent>";            
  
    private void OpenCreateForm() { createSidepanel.Open(); }  
  
    private void OpenEditForm() { editSidepanel.Open();}  
  
    private void Close() { createSidepanel.Close(); }  
  
    private void SoftClose() { editSidepanel.SoftClose(); }   
}  

I defined FormCreateSidePanel

@using Microsoft.Extensions.Logging  
@inject ILogger<FormCreateSidePanel> Logger  
@inject ISidepanelService Sidepanel  
@inject HttpClient http  
@inject NavigationManager uriHelper  
  
<EditForm Model="@act"  OnValidSubmit="@OnValidSubmit">  
    <DataAnnotationsValidator />  
    <ValidationSummary />     
         
        <div class="mb-3">  
            <label class="form-label">Production Date</label>  
            <InputDate class="form-control" @bind-Value="@act.ProductionDate" />  
        </div>      
        <div class="d-grid gap-2">  
            @*<button class="btn btn-outline-primary" type="submit">Create</button>*@  
             <button type="submit" class="btn btn-success">@ButtonAction </button>  
            <button class="btn btn-outline-secondary" type="reset">Reset</button>  
            <button class="btn btn-outline-danger" type="button" @onclick="Sidepanel.SoftClose">Cancel</button>  
        </div>  
</EditForm>  
  
@code {  
     [Parameter] public ActionsList? act { get; set; }  
    [Parameter] public string ButtonAction { get; set; } = "Save";  
    [Parameter] public EventCallback OnValidSubmit { get; set; }    
    
  
}  

259543-image.png

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,385 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. sblb 1,166 Reputation points
    2022-11-11T14:41:15.08+00:00

    I have moved on and I no longer have the error message;

    Now I have the result below and I can open actions create w/o any errors.

    259603-image.png

    when I open creation action (via the button) the url is https://localhost:44354/developer/edit/1 which is expected.
    now, when I click on the button save in Create Side Panel, I've the url is ``https://localhost:44354/developer/edit/1`

    async Task CreateActionsList()  
       {  
          await http.PostAsJsonAsync("api/actionslist", act);  
          uriHelper.NavigateTo($"api/developer/edit/{developerId}");  
       }  
    

    so I don't understand why I go to page with Sorry, there's nothing at this address. thenI should stay on the Edit page

    I don't know what I did wrong.

    0 comments No comments

  2. sblb 1,166 Reputation points
    2022-11-12T14:52:42.823+00:00

    This subject is closed.

    I've made a little mistake in uriHelper.NavigateTo.

    I wrote uriHelper.NavigateTo($"api/developer/edit/{developerId}"); when you have to write uriHelper.NavigateTo($"/developer/edit/{developerId}"); it's better ,no?

    0 comments No comments