Rositsa Ruseva

Rositsa Ruseva

  • 1.4k
  • 209
  • 28.4k

Problem with EditForm (razor component)

Mar 15 2023 5:39 AM

I have an issue with the Forms. At first it was without a problem but after that I got an error.
This is the fist component:
 

@page "/recipe/create"
@using Model
@using DataAccess.Data
@using Models;
@using Microsoft.AspNetCore.Components.Forms


<div class="row mt-2 mb-5">
    <h3 class="card-title text-info mb-3 ml-3">@Title Recipe</h3>
    <div class="col-md-12">
        <div class="card-body">
            <EditForm Model="RecipeModel">
                <div class="form-group">
                    <label>Title</label>
                    <InputText @bind-Value="RecipeModel.Title" class="font-control"></InputText>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <InputText @bind-Value="RecipeModel.Description" class="font-control"></InputText>
                </div>
                <div class="form-group">
                    <label>Number of Ingredients</label>
                    @{
                        var ingredientsString = RecipeModel.Ingredients != null ? string.Join(',', RecipeModel.Ingredients) : string.Empty;
                    }

                    <InputTextArea @bind-Value="@ingredientsString" class="font-control"></InputTextArea>

                </div>
            </EditForm>
        </div>
    </div>
</div>
@code {
    private RecipeDto RecipeModel { get; set; } = new RecipeDto();
    private string Title { get; set; } = "Create";
    private DataAccess.Data.Recipe Recipe { get; set; } = new DataAccess.Data.Recipe();

    private void CreateRecipe()
    {
        // Save the recipe to a database or other storage mechanism
    }
}

And I get this error:
Error (active)    RZ9985    Multiple components use the tag 'EditForm'. Components: BakingBeyondRecipesServer.Pages.EditForm, Microsoft.AspNetCore.Components.Forms.EditForm 

And I have an warning and when I try to open this page there is a message displayed that there is nothing  to show.
 

@page "/category/create"
@using DataAccess.Data
@using Models;
@using Microsoft.AspNetCore.Components.Forms

<div class="row mt-2 mb-5">
    <h3 class="card-title text-info mb-3 ml-3">Create New Category</h3>
    <div class="col-md-12">
        <div class="card-body">
            <EditForm Model="CategoryModel" OnValidSubmit="@HandleValidSubmit">
                <div class="form-group">
                    <label>Name</label>
                    <InputText @bind-Value="CategoryModel.Name" class="font-control"></InputText>
                </div>
                <button type="submit" class="btn btn-primary">Create</button>
            </EditForm>
        </div>
    </div>
</div>

@code {
    private DataAccess.Data.Recipe Recipe { get; set; } = new DataAccess.Data.Recipe();
    private DataAccess.Data.Category Category {get;set;} = new DataAccess.Data.Category();
    private CategoryDto CategoryModel = new CategoryDto();

    private void HandleValidSubmit()
    {
        // Perform actions on form submission
    }
}
I get those warnings:

Warning (active)    RZ10012    Found markup element with unexpected name 'EditForm'. If this is intended to be a component, add a @using directive for its namespace.       


Warning (active)    RZ10012    Found markup element with unexpected name 'InputText'. If this is intended to be a component, add a @using directive for its namespace.       
 


Answers (3)