Blazor/Documentation/docusaurus/docs/razor-component/complex-component-use.md

sidebar_position	title
7	Using the component

Now that our component is functional, we just have to use it, for that we just have to declare it in our page Pages/Index.razor with a fixed data.

Add method in the data service

Open the interface of the service and add a new method for get the recipes.

public interface IDataService
{
	Task Add(ItemModel model);

	Task<int> Count();

	Task<List<Item>> List(int currentPage, int pageSize);
	
	Task<Item> GetById(int id);

	Task Update(int id, ItemModel model);

	Task Delete(int id);

// highlight-next-line
	Task<List<CraftingRecipe>> GetRecipes();
}

Add method to the local service

Open the local service and implement the new method for get the recipes.

public class DataLocalService : IDataService
{

	...

	public Task<List<CraftingRecipe>> GetRecipes()
	{
		var items = new List<CraftingRecipe>
		{
			new CraftingRecipe
			{
				Give = new Item { DisplayName = "Diamond", Name = "diamond" },
				Have = new List<List<string>>
				{
					new List<string> { "dirt", "dirt", "dirt" },
					new List<string> { "dirt", null, "dirt" },
					new List<string> { "dirt", "dirt", "dirt" }
				}
			}
		};

		return Task.FromResult(items);
	}
}

Component declaration

<div>
    <Crafting Items="Items" Recipes="Recipes" />
</div>

public partial class Index
{
	[Inject]
	public IDataService DataService { get; set; }

	public List<Item> Items { get; set; } = new List<Item>();

	private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();

	protected override async Task OnInitializedAsync()
	{
		await base.OnInitializedAsync();

		Items = await DataService.List(0, await DataService.Count());
		Recipes = await DataService.GetRecipes();
	}
}

Import JavaScript files

The component is displayed but the user actions are not displayed, quite simply because we have not imported the JavaScript file for it.

Open the Pages/_Layout.cshtml file and add the following script tag:

...

<script src="Components/Crafting.razor.js"></script>

...