Example Form (Simple)

Example Explanation

RfModalCard makes use of Bulma modal.

Below showcases a page that allows you to edit user data via a RfModalCard.

How the Code Flows

The page first loads the current user during the OnInitialized. The page then displays the current user in a component written to be reusable on multiple example pages (UserCard). The UserCard has an edit button built in with an event callback via UserCard.OnEdit.

Once the edit button is clicked the page fires OnUserCardEditCallback instantiating a new instance of EditUserFormData and flipping the EditModalIsVisible boolean. This instance EditUser, is directly used within the RfModalCard edit form.

Why not Use CurrentUser?

There is two main reasons not to use the UserData property.

• First, the data coming from the backend isn't meant to be used as the edit form data. It might seem like it while initialy coding the edit modal but you will quickly find that some things may be optional, may require helper functions to properly display, or require different requirement attributes that the backend model doesn't have to support.
• Secondly, the user has the option to cancel out of the request to edit. If you were to pass in the original model the changes would be reflected on the page even if they pressed close.

At this point the modal is open and the fields can be tweaked and saved. The code makes use of the form OnValidSubmit to ensure validation is correct. Since we have the save button in the Foot it is outside of the form requiring the EditForm.id to be set and the button's form attribute set to the same value. This allows the user to full power of the HTML form as well as Blazor code.

Finally the user clicks save calling OnValidSubmit=OnSaveUserClick allowing the code to update CurrentUser from the values within EditUser and closing the form.