STEP 17 Implementing Update Action

Improvement: Add "Update" Functionality to the Blazor Form

In the previous step, we added the "Add Member" functionality to the Blazor form and removed the corresponding button from the Main form. Now, we will implement the "Update Member" functionality.

Step 16.1: Update the Blazor Form

Step 16.1.1: Update or Add

To determine whether to call the Update or Add method, we need to check if the current member has an ID. We can modify the HTML code accordingly:

@if (currentMember.Id > 0)
{
  <button type="button" class="btn btn-outline-primary btn-sm" @onclick="() => UpdateMember()">Update</button>
}
else
{
  <button type="button" class="btn btn-outline-primary btn-sm" @onclick="() => AddMember()">Add</button>
}

Step 16.1.2: Implement the UpdateMember Action

Now that we have a working knowledge of the AddMember action, adding the UpdateMember action is easier. We can add the following code to the Member.razor page:

private void UpdateMember()
{
  messageBroker.UpdateMember(currentMember);
  currentMember = new();
}

However, there is something else we need to address. Currently, currentMember will never have an ID as we did not populate it when reading a member. Therefore, we also need to modify the EditMember method:

private void EditMember(Member member)
{
  currentMember = member;
  messageBroker.EditMember(member.Id);
}

Step 16.2: Update the MessageBroker

Similar to the previous step where we added the AddMember method and AddMemberEvent event, we need to add the UpdateMember method and UpdateMemberEvent to the MessageBroker.cs:

public event EventHandler UpdateMemberEvent;

public void UpdateMember(Member member)
{
	UpdateMemberEvent?.Invoke(this, new MemberEventArgs(member));
}

Step 16.3: Update the Main Form

The Main form needs to respond to the UpdateMemberEvent, so we need to subscribe and unsubscribe accordingly:

// Subscribe
messageBroker.UpdateMemberEvent += UpdateMember;

// Unsubscribe
messageBroker.UpdateMemberEvent -= UpdateMember;

Since we cannot simply write a function to perform the update, we need to use the existing legacy code. Similar to the previous steps, we need to populate the TextBoxes and call the Update method:

private void UpdateMember(object sender, EventArgs e)
{
	Member member = ((MemberEventArgs)e).Member;

	if (member != null)
	{
		txt_firstname.Text = member.FirstName;
		txt_lastname.Text = member.LastName;
		txt_address.Text = member.Address;
		Update(this, null);
	}
}

We can also remove the "Update" button from the Main form.

Result: Update Members from the Blazor Form

By implementing the "Add Member" functionality in the previous step and adding the "Update Member" functionality in this step, we have successfully updated members from the Blazor form. All this was accomplished by utilizing the existing functions in the legacy codebase.

BACK: STEP 16 Add member functionality to HTML page

FORWARD: STEP 18 Implementing Clear Action