SidePanel Unhandled exception rendering component:

sblb 1,166 Reputation points


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  
        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)  
                        .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" />  
<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!");  
    async Task CreateActionsList()  
          await http.PostAsJsonAsync("api/actionslist", act);  
    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 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>  
@code {  
     [Parameter] public ActionsList? act { get; set; }  
    [Parameter] public string ButtonAction { get; set; } = "Save";  
    [Parameter] public EventCallback OnValidSubmit { get; set; }    


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

    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.


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

    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

    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