2

I'm having a problem in my blazor app.

After onclick trigger in my button, i call function CheckSchedule

enter image description here

I sucessfully call the method but my problem is I think my page initialized again because the page call my all my lifecycle method again. The page run protected override async Task OnInitializedAsync() again.

enter image description here

protected override async Task OnInitializedAsync() { try { if (Branches == null) { Branches = await BranchService.GetBranches(); branchList = Branches.OrderBy(branch => branch.name).ToList(); } } catch (Exception ex) { ErrorMessage = ex.Message; } }

can i know why this is happening? because it resets my list again which is should be not.

Update: Hi everyone, my problem solved by removing HTML form.

Thank you

Karl Christian Gutierrez Abant
  • 31
  • 2
  • Have you tried @onclick="() => CheckSchedule()" already? If it doesn't work, try enets solution and if you are still having issue then I think you should take a break, drink a glass of water and delete the page and add the page again with your code. – Abdullah Rana Oct 07 '22 at 11:47

1 Answers1

2

Credits go to @enet for figuring out the issue.

Solution

In your screenshot, it appears that you have not set the type of button. Try adding type="button" as an attribute to your button and see if that solves the issue.

Reason why OnInitializedAsync is called when you click the button

When you do not specify the type of button, it defaults to type="submit". Now usually this isn't an issue, however if a button of type="submit" is inside of a <form>, it causes an http request to happen. This will cause your page to refresh and your component to be recreated.

Incidentally, why do you check if Branches == null in the init method ? Can it be otherwise.

enet
  • 41,195
  • 5
  • 76
  • 113
Jesse Good
  • 50,901
  • 14
  • 124
  • 166
  • 1
    I believe you've got it wrong this time... Think again about what is pre-rendering and what the OP describes. `In Blazor Server, OnInitializedAsync is called twice by default.` That's right. But we are now after the pre-rendering (or rendering) has taken place: The user now triggers a method by clicking a button... this should not result in re-loading the Index page. I believe the issue is related to 1. The button element does not contain the type attribute set to the `button` value, and thus it defaults to `submit`, combining with the fact (my assumption right now) – enet Oct 06 '22 at 06:43
  • that the button element is embedded within a form element, and thus, when you click on the button, a traditional http request happens, and the form is posted to no where. As this post request results in the flow of the app outside the boundary of the app space, when it returns in empty hands, the Index page is reloaded ( created a new). Even if I'm wrong, attributting the issue to pre-rendering is wrong. – enet Oct 06 '22 at 06:43
  • 1
    @enet: That is a good guess. I think you might be right. I will delete this answer, can you post a separate answer? – Jesse Good Oct 06 '22 at 06:55
  • No, don't delete your answer, just change it to reflect my guess. I could answer it before, but I didn't want to... for some reason. – enet Oct 06 '22 at 07:10
  • @enet I'm guessing the same, and some short googling might confirm it: [What is the default button type](https://stackoverflow.com/questions/31644723/what-is-the-default-button-type#:~:text=For%20most%20browsers%20the%20default%20type%20of%20button%20is%20submit%20.&text=This%20attribute%20declares%20the%20type%20of%20the%20button.) – DanielD Oct 06 '22 at 07:23
  • @DanielD, yes, but there must be another condition here: That is, that this button is embedded within a form element... – enet Oct 06 '22 at 07:29