EditForm Not Showing Blazor

Question

I've made a database with a table called item, im trying to insert some new items with the help of but it wont show on my html page in the browser.

The code looks like this and i have no clue what the most of it does, but it looks almost exactly like the code in the video im following.

@page "/addingredient"
@using DataAccess
@using BlazorApp.Models

@inject IMySQLDataAccess _data
@inject IConfiguration _config

<PageTitle>Add Ingredient</PageTitle>
<h1>Add Ingredient</h1>

<EditForm Model="@newItem" OnInvalidSubmit="@InsertItem">
    <label for="name">Ingredient Name</label>
    <input type="text" id="name" @bind-value="addItem.Name">

    <label for="exp">Expiration Date</label>
    <input type="datetime" id="date" @bind-value="addItem.Expiration">

    <label for="q">Quantity</label>
    <input type="number" id="q" @bind-value="addItem.Quantity">

    <label for="qt">Quantity Type</label>
    <input type="text" id="qt" @bind-value="addItem.Qtype">
</EditForm>




@code {
    private ItemModel newItem = new ItemModel();

    public class AddItem
    {
        public string? Name { get; set; }
        public DateTime Expiration { get; set; }
        public int Quantity { get; set; }
        public string? Qtype { get; set; }
    }

    private AddItem addItem = new AddItem();

    private async Task InsertItem()
    {
        ItemModel a = new ItemModel
        {
            ItemName = new string(addItem.Name),
            Expiration = new DateTime(addItem.Expiration.Year, addItem.Expiration.Month, addItem.Expiration.Day, addItem.Expiration.Hour, addItem.Expiration.Minute, addItem.Expiration.Second),
            Quantity = new int(addItem.Quantity),
            Qtype = new string(addItem.Qtype)

        };
        string sql = "INSERT INTO item (ItemName,Expiration,Quantity,Qtype) VALUES (@ItemName,Expiration,Quantity,Qtype);";
        await _data.SaveData(sql, a, _config.GetConnectionString("MySQLConnection"));
        await OnInitializedAsync();
        a = new ItemModel();
        addItem = new AddItem();
    }
}

I also only get one error message: 'int' does not contain a constructor that takes 1 argument in line 47

Answer 1

int and string are both primitive type variables thus you can set their values directly

ItemModel a = new ItemModel()
    {
        ItemName = addItem.Name,
        Expiration = new DateTime(addItem.Expiration.Year, addItem.Expiration.Month, addItem.Expiration.Day, addItem.Expiration.Hour, addItem.Expiration.Minute, addItem.Expiration.Second),
        Quantity = addItem.Quantity,
        Qtype = addItem.Qtype

    };

Quantity = new int(addItem.Quantity), //will not compile

Furthermore, I suggest using InputText and InputNumber inside the edit form for the binding to work

Example:

<EditForm Model="@newItem">
    <label>Name:</label>
    <InputText @bind-Value="newItem.Name"></InputText>
</EditForm>

Answer 2

This line:

Quantity = new int(addItem.Quantity),

Should change to

Quantity = addItem.Quantity,