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