CODEWITHSUNDEEP
c#blazorblazor-webassembly
Jim
Jim

Reputation: 479

Razor Webassembly using EditForm not working for me

I'm using blazor webassembly, and trying to do something really simple - fire an event once a form has been completed...

The code below doesn't work, I've tried every different combo of "onsubmit" I can think of... what am I doing wrong?

@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();
    }

}

Upvotes: 0

Views: 1992

Answers (2)

Jim
Jim

Reputation: 479

OnSubmit actually works (but not onsubmit - it was all down to case) as per the documentation. I'm new to Blazor, and find this mixing of cases quite confusing, as sometimes things are camel case, sometimes lower and sometimes a mix it's a real head scratcher.

Doesn't help that the intellisense in visual studio doesn't really work, and not being able to debug, whilst making changes seems like madness (you can debug but changes aren't reflected in the browser, or you can "Run without Debugging" and then refreshing browser does include any changes - well, I only want to do that whilst debugging, seems obvious to me!)

Upvotes: 0

enet
enet

Reputation: 45626

EditForm is a Blazor component which allow you to attach two event handlers to it. The first, OnValidSubmit is fired when you hit the "submit" button. Put code in this handler that as for instance, perform a Web Api call in order to save your form data in a database.

The second attribute property which is exposed by the EditForm component is OnInvalidSubmit. This is fired when you hit the "submit" button as well, but your data did not pass validation. You can put in the event handler some code that, as for instance, display a message to the user, perform some checks, etc.

Note that in the following code I've altered onsubmit="@addGroup" to OnValidSubmit="addGroup"

Note: I did not check the rest of your code...

Note that no submit action is ever taken place. Indeed, the "submit" event is triggered, but then canceled by the framework. Blazor is an SPA framework. No traditional post back, no post get delete, etc. Http requests.

@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();
    }

}

Upvotes: 2

Related Questions