使用 EditForm 的 Razor Webassembly 对我不起作用

Question

我正在使用 blazor webassembly，并尝试做一些非常简单的事情——一旦表单完成就触发一个事件...

下面的代码不起作用，我已经尝试了所有我能想到的“onsubmit”的不同组合...我做错了什么？

@page "/"

 <h4>Add Group</h4>
    <EditForm Model="@addGroupModel" onsubmit="@addGroup" >
        <InputSelect @bind-Value="addGroupModel.CowCategoryId">
            @if (CowCategories != null)
            {
                foreach (var cat in CowCategories)
                {
                    <option value="@cat.ForagePlanCowCategoryId">@cat.ForagePlanCowCategoryName</option>
                }
            }
        </InputSelect>
        <InputText @bind-Value="addGroupModel.GroupName"></InputText>
        <input type="submit" value="Add" />
    </EditForm>



@code {

    public class AddGroupModel
    {
        public int CowCategoryId { get; set; }
        public string GroupName { get; set; }

    }
    public AddGroupModel addGroupModel = new AddGroupModel();





    protected void  addGroup()
    {
        var addModel = addGroupModel;
        var cat = this.foragePlan.Categories.FirstOrDefault(c => c.ForagePlanCowCategoryId == addModel.CowCategoryId);
        if (cat == null)
        {
            cat = this.CowCategories.FirstOrDefault(c => c.ForagePlanCowCategoryId == addModel.CowCategoryId);
        }
        this.foragePlan.ForagePlanCategoryGroups.Add(new ForagePlanCategoryGroup() { ForageUtilisationFactor = 100, ForagePlanCowCategoryId = cat.ForagePlanCowCategoryId, ForagePlanCowCategory = cat, GroupName = addModel.GroupName });
        this.UpdateModel();
    }

}

Answer 1

EditForm 是一个 Blazor 组件，它允许您将两个事件处理程序附加到它。首先，当您点击“提交”按钮时，OnValidSubmit 被触发。将代码放入此处理程序中，例如，执行 Web Api 调用以将表单数据保存在数据库中。

EditForm组件公开的第二个属性属性是OnInvalidSubmit。当您也点击“提交”按钮时会触发此事件，但您的数据未通过验证。您可以在事件处理程序中放入一些代码，例如，向用户显示消息、执行一些检查等。

请注意，在下面的代码中，我已将 onsubmit="@addGroup" 更改为 OnValidSubmit="addGroup"

注意：我没有检查您的其余代码...

请注意，从未发生任何提交操作。事实上，“提交”事件被触发，但随后被框架取消。 Blazor 是一个 SPA 框架。没有传统的post返回，没有postget删除等Http请求。

@page "/"

 <h4>Add Group</h4>
    <EditForm Model="@addGroupModel" OnValidSubmit="addGroup" >
        <InputSelect @bind-Value="addGroupModel.CowCategoryId">
            @if (CowCategories != null)
            {
                foreach (var cat in CowCategories)
                {
                    <option value="@cat.ForagePlanCowCategoryId">@cat.ForagePlanCowCategoryName</option>
                }
            }
        </InputSelect>
        <InputText @bind-Value="addGroupModel.GroupName"></InputText>
        <input type="submit" value="Add" />
    </EditForm>



@code {

    public class AddGroupModel
    {
        public int CowCategoryId { get; set; }
        public string GroupName { get; set; }

    }
    public AddGroupModel addGroupModel = new AddGroupModel();


    protected void  addGroup()
    {
        var addModel = addGroupModel;
        var cat = this.foragePlan.Categories.FirstOrDefault(c => c.ForagePlanCowCategoryId == addModel.CowCategoryId);
        if (cat == null)
        {
            cat = this.CowCategories.FirstOrDefault(c => c.ForagePlanCowCategoryId == addModel.CowCategoryId);
        }
        this.foragePlan.ForagePlanCategoryGroups.Add(new ForagePlanCategoryGroup() { ForageUtilisationFactor = 100, ForagePlanCowCategoryId = cat.ForagePlanCowCategoryId, ForagePlanCowCategory = cat, GroupName = addModel.GroupName });
        this.UpdateModel();
    }

}

Answer 2

根据文档，OnSubmit 实际上有效（但不是 onsubmit - 这完全取决于大小写）。我是 Blazor 的新手，发现这种混合大小写非常令人困惑，因为有时是驼峰式大小写，有时是较低的大小写，有时是混合大小写，这真是令人头疼。

visual studio 中的 intellisense 并没有真正发挥作用，而且无法调试，同时进行更改似乎很疯狂（您可以调试，但更改不会反映在浏览器中），这无济于事，或者您可以“运行不调试”，然后刷新浏览器确实包含任何更改 - 好吧，我只想在调试时这样做，对我来说似乎很明显！）

使用 EditForm 的 Razor Webassembly 对我不起作用

Razor Webassembly using EditForm not working for me

c#

blazor

blazor-webassembly