Blazor/Documentation/docusaurus/docs/edit-item/use-model.md

sidebar_position	title
6	Using the model

Using the model

We are going to set up the code for editing an item.

Open the file Pages/Edit.razor.cs and modify as follows:

public partial class Edit
{
	[Parameter]
	public int Id { get; set; }

	/// <summary>
	/// The default enchant categories.
	/// </summary>
	private List<string> enchantCategories = new List<string>() { "armor", "armor_head", "armor_chest", "weapon", "digger", "breakable", "vanishable" };

	/// <summary>
	/// The current item model
	/// </summary>
	private ItemModel itemModel = new()
	{
		EnchantCategories = new List<string>(),
		RepairWith = new List<string>()
	};

	/// <summary>
	/// The default repair with.
	/// </summary>
	private List<string> repairWith = new List<string>() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };

	[Inject]
	public IDataService DataService { get; set; }

	[Inject]
	public NavigationManager NavigationManager { get; set; }

	[Inject]
	public IWebHostEnvironment WebHostEnvironment { get; set; }

	protected override async Task OnInitializedAsync()
	{
		var item = await DataService.GetById(Id);

		var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");

		if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
		{
			fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
		}

		// Set the model with the item
		itemModel = new ItemModel
		{
			Id = item.Id,
			DisplayName = item.DisplayName,
			Name = item.Name,
			RepairWith = item.RepairWith,
			EnchantCategories = item.EnchantCategories,
			MaxDurability = item.MaxDurability,
			StackSize = item.StackSize,
			ImageContent = fileContent
		};
	}

	private async void HandleValidSubmit()
	{
		await DataService.Update(Id, itemModel);

		NavigationManager.NavigateTo("list");
	}

	private async Task LoadImage(InputFileChangeEventArgs e)
	{
		// Set the content of the image to the model
		using (var memoryStream = new MemoryStream())
		{
			await e.File.OpenReadStream().CopyToAsync(memoryStream);
			itemModel.ImageContent = memoryStream.ToArray();
		}
	}

	private void OnEnchantCategoriesChange(string item, object checkedValue)
	{
		if ((bool)checkedValue)
		{
			if (!itemModel.EnchantCategories.Contains(item))
			{
				itemModel.EnchantCategories.Add(item);
			}

			return;
		}

		if (itemModel.EnchantCategories.Contains(item))
		{
			itemModel.EnchantCategories.Remove(item);
		}
	}

	private void OnRepairWithChange(string item, object checkedValue)
	{
		if ((bool)checkedValue)
		{
			if (!itemModel.RepairWith.Contains(item))
			{
				itemModel.RepairWith.Add(item);
			}

			return;
		}

		if (itemModel.RepairWith.Contains(item))
		{
			itemModel.RepairWith.Remove(item);
		}
	}
}

The changes from the add page are:

• Using the OnInitializedAsync method to retrieve the item relative to its identifier
• Retrieve an item instead of creating a new one
• Using template to modify data