Blazor中EditForm不显示及代码报错问题求助

1. 解决编译错误 #

你遇到的'int'不包含接受1个参数的构造函数错误，是因为值类型不需要用new关键字构造赋值。修改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)
};

修改后：

ItemModel a = new ItemModel
{
    ItemName = addItem.Name,
    Expiration = addItem.Expiration,
    Quantity = addItem.Quantity,
    Qtype = addItem.Qtype
};

2. 修复EditForm不显示/无法提交的问题 #

（1）统一表单绑定的Model #

你的EditForm绑定的是newItem，但所有输入框绑定的是addItem，这会导致Blazor无法正确处理表单状态，甚至引发渲染异常。将EditForm的Model改为addItem：

<EditForm Model="@addItem" OnValidSubmit="@InsertItem">

（2）添加提交按钮 #

原表单没有提交按钮，用户无法触发提交操作，在EditForm内部添加按钮：

<button type="submit">添加食材</button>

（3）修正表单事件 #

OnInvalidSubmit仅在表单验证失败时触发，应使用OnValidSubmit（验证通过后触发），确保提交逻辑正常执行。

3. 修复SQL语句参数错误 #

你的SQL插入语句中，仅@ItemName是参数，其他字段未加@前缀，会被MySQL当成列名而非参数，导致插入失败：

原SQL：

string sql = "INSERT INTO item (ItemName,Expiration,Quantity,Qtype) VALUES (@ItemName,Expiration,Quantity,Qtype);";

修改后：

string sql = "INSERT INTO item (ItemName,Expiration,Quantity,Qtype) VALUES (@ItemName,@Expiration,@Quantity,@Qtype);";

4. 移除冗余代码 #

await OnInitializedAsync();和a = new ItemModel();属于冗余代码，直接清空addItem即可重置表单状态。

完整修正后的代码 #

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

@inject IMySQLDataAccess _data
@inject IConfiguration _config

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

<EditForm Model="@addItem" OnValidSubmit="@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-local" 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">

    <button type="submit">添加食材</button>
</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 = addItem.Name,
            Expiration = addItem.Expiration,
            Quantity = addItem.Quantity,
            Qtype = addItem.Qtype
        };
        string sql = "INSERT INTO item (ItemName,Expiration,Quantity,Qtype) VALUES (@ItemName,@Expiration,@Quantity,@Qtype);";
        await _data.SaveData(sql, a, _config.GetConnectionString("MySQLConnection"));
        addItem = new AddItem();
    }
}

另外注意：HTML中datetime类型输入框应改为datetime-local，这样浏览器会显示适配的日期时间选择器，更方便用户输入。

内容的提问来源于stack exchange，提问作者Oscar Petersen