EditForm, input fields

Question

I have this model:

public class RecipeDto
    {
        public int Id { get; set; }

        [Required(ErrorMessage = "Title is required")]
        public string Title { get; set; }

        [Required(ErrorMessage = "Description is required")]
        public string Description { get; set; }

        [Required(ErrorMessage = "Ingredients are required")]
        public List<string> Ingredients { get; set; }

        [Required(ErrorMessage = "Directions are required")]
        public List<string> Directions { get; set; }

        [Range(0, int.MaxValue, ErrorMessage = "Preparation time must be a positive number")]
        public int PreparationTimeInMinutes { get; set; }

        [Range(0, int.MaxValue, ErrorMessage = "Cooking time must be a positive number")]
        public int CookingTimeInMinutes { get; set; }

        [Range(0, 20, ErrorMessage = "Servings must be a positive number with 20 as a limit")]
        public int Servings { get; set; }

        public string ImageUrl { get; set; }

        public DateTime CreatedAt { get; set; }

        public List<CategoryDto> Categories { get; set; }
    }

I want to create a Razor component to Create a recipe. But don't know which input should I use with the properties of type List<string>.
Is it even posible or should I change the type?
On my mind it only comes to use InputText. I will appreciate any advice regarding the CreateRecipe component.

Tuhin Paul · Answer

Hello Rositsa, You can use the InputTextArea component to allow users to input a list of strings for the Ingredients and Directions properties. Here's an example implementation of the CreateRecipe component using InputTextArea: @page "/create-recipe" @using System.Collections.Generic @using MyRecipes.Shared @using Microsoft.AspNetCore.Components.Forms Create Recipe Title recipe.Title)" /> Description recipe.Description)" /> Ingredients recipe.Ingredients)" /> Directions recipe.Directions)" /> Preparation Time (minutes) recipe.PreparationTimeInMinutes)" /> Cooking Time (minutes) recipe.CookingTimeInMinutes)" /> Servings recipe.Servings)" /> Image URL recipe.ImageUrl)" /> Categories -- Select a category -- @foreach (var category in categories) { @category.Name } Add Category @foreach (var category in recipe.Categories) { @category.Name RemoveCategory(category)">Remove } recipe.Categories)" /> Create Recipe @code { private RecipeDto recipe = new RecipeDto(); private List categories = new List (); private int selectedCategory; protected override async Task OnInitializedAsync() { categories = await recipeService.GetCategories(); } private void AddCategory() { var category = categories.FirstOrDefault(c => c.Id == selectedCategory); if (category != null && !recipe.Categories.Contains(category)) { recipe.Categories.Add(category); } } private void RemoveCategory(CategoryDto category) { recipe.Categories.Remove(category); } private async Task UpdateRecipe() { var result = await RecipeService.UpdateRecipe(recipe); if (result.Success) { NavigationManager.NavigateTo("/recipes"); } else { ErrorMessage = result.ErrorMessage; } } private async Task AddNewRecipe() { var result = await RecipeService.CreateRecipe(recipe); if (result.Success) { NavigationManager.NavigateTo("/recipes"); } else { ErrorMessage = result.ErrorMessage; } } private void RemoveCategory(CategoryDto category) { recipe.Categories.Remove(category); } private void AddIngredient() { recipe.Ingredients.Add(""); } private void RemoveIngredient(int index) { recipe.Ingredients.RemoveAt(index); } private void AddDirection() { recipe.Directions.Add(""); } private void RemoveDirection(int index) { recipe.Directions.RemoveAt(index); } } In the above code, there are methods for updating, adding and removing a recipe. There are also methods for adding and removing ingredients and directions from the recipe, as well as removing a category.

Tuhin Paul · Answer

Using lazy-loading for the categories list, instead of loading all the categories during the component initialization, consider using lazy-loading to load them only when they are needed. This can improve the initial load time of the page and reduce unnecessary network traffic. private Lazy >> categories; protected override async Task OnInitializedAsync() { categories = new Lazy >>(() => recipeService.GetCategories()); } private async Task > GetCategories() { return await categories.Value; }