Fix #3885: only re-render the component when message changed.

[zyhfish]

Fix #3885: only re-render the component when message changed.

[sbwalker]

@zyhfish Static rendering does not support buttons with onclick handlers - which is why the close option was changed to a hyperlnk.

[zyhfish]

Hi @sbwalker, the hyper link doesn't work well in static mode, it cause different behaviors, that's why I changed it to button, and I verified both with Static and Interactive mode, it works fine in the module management page with below steps:

1. create a new module with "Oqtane" in the owner name field;
2. click save button will display the module message;
3. click X button to close the message.

[sbwalker]

@zyhfish I know these render modes are a bit confusing. In order to test this scenario in both render modes you need to ensure your Site Settings are set to use Static render mode (the default). However, when you create a new module from the module template, by default all of its module components are configured to be Interactive. So when you run the module, the site will be Static but the module components will be rendered Interactively. And since interactivity is inherited it means that the ModuleMessage component inherits the Interactive rendering from the module component. This is why the button onclick handler in the ModuleMessage is working for you (which is a clear indicator that that module is running interactively as button onclick does not fire at all in static rendering).

In order to change the behavior of the module to use Static rendering, you need to modify the Index.razor component and uncomment the line:

    public override string RenderMode => RenderModes.Static;

This will result in the module component using Static rendering within the Static site. And you will notice in this configuration the button onclick will no longer function properly.

The way this was resolved for the 5.1 release was the ModuleMessage was modified to use a form element and button onsubmit handler - which is supposed to work in both Interactive and Static rendering. And it does work in most cases... however there is a case where it does not work. You can see the problem in action by visiting this page https://www.oqtane.org/blog scrolling to the bottom, enter your email address, and click Subscribe. The blog module will display a ModuleMessage component however if you click the Close X icon, an error message will be displayed in the browser "Error: 400 Bad Request". In a development environment the error message is a bit more detailed and will say "Cannot submit the form 'ModuleMessageForm##' because no form on the page currently has that name" - which was described in the Issue #4246. I personally think this is another bug in Blazor however it is not acceptable behavior so there needs to be a solution in Oqtane.

The solution I found for static render mode was to use a hyperlink. However it does not seem to work well in interactive render mode. So perhaps this is another case where we need to include conditional logic in ModuleMessage to handle both render modes. For static it can use a hyperlink and interactive it can use button onclick.

I will merge your PR and make the necessary changes.

In the future if Microsoft fixes the form onsubmit behavior we may be able to revert back to a single solution which can support both render modes (I still need to log this issue in the Blazor repo with a simplistic repro example).

[sbwalker]

@zyhfish #4269 includes conditional logic to support static render mode. I tested the following scenarios:

Static module component

1. AddModuleMessage called in OnParametersSet
2. AddModuleMessage called in onsubmit event handler raised by form element button

Interactive module component

1. AddModuleMessage called in OnParametersSet
2. AddModuleMessage called in onclick event handler raised by standard button

These all appear to work now. And the RenderModeBoundary is only rendering a ModuleMessage component if a message needs to be displayed - which resolves the original issue identified related to performance/scalability. Thank you!!