EditForm, input fields

Rositsa Ruseva

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 Ingredients { get; set; }

        [Required(ErrorMessage = "Directions are required")]
        public List 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 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.
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.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago

Accepted 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
        
        
    

    
        Description
        
        
    

    
        Ingredients
        
        
    

    
        Directions
        
        
    

    
        Preparation Time (minutes)
        
        
    

    
        Cooking Time (minutes)
        
        
    

    
        Servings
        
        
    

    
        Image URL
        
        
    

    
        Categories
        
            
            @foreach (var category in categories)
            {
                
            }
        
        
        
            @foreach (var category in recipe.Categories)
            {
                @category.Name 
            }
        
        
    

    


@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 Paul3y ago
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;
}
```