---
sidebar_position: 5
title: Creation of the form
---

## Creation of the form

We will use the same form as the one on the `Add.razor` page, the only differences are:

* The default value for the "Enchant categories" & "Repair with" lists so that they are checked when displaying the form.
* Image display

Open the `Pages/Edit.razor` page and modify it as follows:

```cshtml title="Pages/Edit.razor"
@page "/edit/{Id:int}"

<h3>Edit</h3>

<EditForm Model="@itemModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="display-name">
            Display name:
            <InputText id="display-name" @bind-Value="itemModel.DisplayName" />
        </label>
    </p>
    <p>
        <label for="name">
            Name:
            <InputText id="name" @bind-Value="itemModel.Name" />
        </label>
    </p>
    <p>
        <label for="stack-size">
            Stack size:
            <InputNumber id="stack-size" @bind-Value="itemModel.StackSize" />
        </label>
    </p>
    <p>
        <label for="max-durability">
            Max durability:
            <InputNumber id="max-durability" @bind-Value="itemModel.MaxDurability" />
        </label>
    </p>
    <p>
        Enchant categories:
        <div>
            @foreach (var item in enchantCategories)
            {
                <label>
                    <input type="checkbox" @onchange="@(e => OnEnchantCategoriesChange(item, e.Value))" checked="@(itemModel.EnchantCategories.Contains(item) ? "checked" : null)" />@item
                </label>
            }
        </div>
    </p>
    <p>
        Repair with:
        <div>
            @foreach (var item in repairWith)
            {
                <label>
                    <input type="checkbox" @onchange="@(e => OnRepairWithChange(item, e.Value))" checked="@(itemModel.RepairWith.Contains(item) ? "checked" : null)" />@item
                </label>
            }
        </div>
    </p>
    <p>
        <label>
            Current Item image:
            @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
            {
                <img src="images/@(itemModel.Name).png" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="max-width: 150px"/>
            }
            else
            {
                <img src="images/default.png" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="max-width: 150px"/>
            }
        </label>
    </p>
    <p>
        <label>
            Item image:
            <InputFile OnChange="@LoadImage" accept=".png" />
        </label>
    </p>
    <p>
        <label>
            Accept Condition:
            <InputCheckbox @bind-Value="itemModel.AcceptCondition" />
        </label>
    </p>

    <button type="submit">Submit</button>
</EditForm>
```