Problem with the displaying of a razor component

Question

I have this razor component:

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

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

And I have those warnings:

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.

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.

I don't know what I'm missing.

This is how it looks when I start the program:
Add Category

Tuhin Paul · Answer

Some improvements: @using Microsoft.AspNetCore.Components.Forms @page "/category/create" @using DataAccess.Data.Category @using Models.Category Create New Category Name categoryModel.Name)" /> Create @code { private RecipeModel newRecipe { get; set; } = new RecipeModel(); private CategoryDto categoryModel = new CategoryDto(); private void HandleValidSubmit() { // Perform actions on form submission } }

Tuhin Paul · Answer

Instead of using @using DataAccess.Data and @using Models, it's better to specify the exact namespace that you need. This helps to avoid namespace conflicts and makes the code easier to read. For example, if you only need the Category class from DataAccess.Data, you can use @using DataAccess.Data.Category. Also Rather than using Recipe and Category as variable names, it's better to use more descriptive names that convey their purpose. For example, if Recipe represents the recipe being created, you can use NewRecipe or RecipeModel. In the Name input field, font-control should be form-control. The code doesn't include any validation for the Name field. It's better to add validation to ensure that the user enters a valid category name.

Tuhin Paul · Answer

You need to add the using directive for the Microsoft.AspNetCore.Components.Forms namespace in order to use the InputText and EditForm components. @using Microsoft.AspNetCore.Components.Forms This should resolve the warnings.