question

jamy avatar image
0 Votes"
jamy asked ZhiLv-MSFT answered

Editing Without Using a Dedicated Edit Page

In most Blazor WASM CRUD examples editing is performed by navigating to a dedicated page. This is a breakdown of what is the common example I have found after many searches...

  • Initial page contains a grid component

  • Each detail row has an "Edit" button or link

  • Clicking the button navigates to a new page dedicated to editing

  • The edit page retrieves the id of the model of interest

  • In the initialization of the page or dedicated edit component within makes a call to a Web API requesting the model to be edited

  • The edit form contains "Cancel" and "Save"

  • Save will usually send a HTTPPUT to update the model and retrieve the response

  • Some sort of user notification (Toast Message) is provided

  • When successful the navigation manager is used to return to the initial page containing the grid which inherently pulls a fresh copy of data


In my application I am required to mimic a Windows Desktop application.

  • One page consists of a list and an edit area

  • The user selects an item on the list

  • The items editable details are displayed directly adjacent to the list

  • The user has a save button to commit the changes

  • If the user attempts to select a different item and changes have been made they are provided a confirmation informing them that changes have been made and do they want to discard and continue

Is there a Blazor pattern that allows for a list component and a form editing component to be used on a single page?

dotnet-aspnet-core-blazor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered jamy edited
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I am confused by your response. The docs you refer to are concerning prerendering and are related to the Blazor Server hosting model, not the Blazor WASM.

I see that they are discussing using razor pages .cshtml and routable razor components.

In Blazor WASM you can nest components as well within a top-level parent component that uses a @page directive for routing. I am not sure where the benefit of bringing in MVC and using .cshtml files helps.

In a Blazor WASM app, I would do the following to nest components...

Create 3 razor components

  • People.razor (contains a directive @page "/people" to make it routable) this is the container component

  • PersonList.razor nested inside of People.razor positioned to the left

  • PersonEdit.razor nested inside of People.razor positioned to the right of PersonList.razor

The components would behave like this

  • People.razor would have a member variable SelectedPerson of type Person which would be set by an EventCallback<Person> in the PersonList.razor

  • PersonList.razor would contain a list of clickable elements each bound to a Person. Binding to @onclick and supplying a method to call invoke on the event callback passing out the selected Person

  • The PersonEdit.razor would have a public property of type Person supplied via one-way binding from the SelectedPerson in People.razor

  • PersonEdit.razor would contain a bound EditForm to the Person properties

The problem is I do not know of any built-in way to revert after a bound property is changed and cancellation of the edit is required.

0 Votes 0 ·
ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @jamy,

From your description, you want to perform CURD operations on the same page, right? If this is the case, I suggest you refer to the following example:
In the Main page, there are two parts, one for adding or editing items, and the other for displaying the data list.

121656-blazorpagecode.txt (open the attachment to check the detail code)

To display the confirm prompt, you could use JSRuntime instance.

     @inject IJSRuntime JsRuntime
        
     ...
        
     @code
     {
         //...
        
         private async Task ShowPrompt()
         {
             bool confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Are you sure?");
             if (confirmed)
             {
             // Delete!
             }
         }
        
         //...
     }

The result as below:

121657-1.gif

If you want to achieve the CRUD operations on the same line. you can search "Asp.net Blazor webassembly CRUD operations on the same line" or "Asp.net core Blazor DataGrid component" using Google or Bing, there should have multiple components to achieve it.


If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Dillion


blazorpagecode.txt (4.7 KiB)
1.gif (439.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.