Enhance forms should isolate updates to their own DOM subtree or a specified element

[Ali1Jamal]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

In Blazor SSR with enhanced navigation (Enhance on ), when a page has multiple components, submitting one form causes the entire page to re-render based on the parameters from [SupplyParameterFromForm]. This often results in:
• Other forms being reset unintentionally
• Unrelated components receiving unexpected updates or data loss

Describe the solution you'd like

Add an option to to limit the update scope to only the child DOM subtree of the submitted form or
another element.

Possible approach:
• A new parameter for EditForm like IsolatedEnhanceName="form1" to scope rendering to the form’s children or to scope to any element with attribute maybe like form-isolated-name="form1".

its will looks like this:
<EditForm Enhance IsolatedEnhanceName="form1" >
if there element with :

<div form-isolated-name="form1">
</div>

it will only update the child of this div , else it will update only child of that form.

Additional context

No response

[javiercn]

@Ali1Jamal thanks for contacting us.

Other forms being reset unintentionally.
Unrelated components receiving unexpected updates or data loss

Can you give us more details about when this is happening in your app/site? Are those components interactive components on the page?

[Ali1Jamal]

Thanks, @javiercn, for your response!

Apologies for the typo — I meant enhanced forms, not enhanced navigation. When using Blazor SSR dotnet 9, if a page is marked with the [ExcludeFromInteractiveRouting] attribute this means happen only in static render mode not in interactive page,

I’ll share a screen recording and the page component to provide more info about the problem.
code:

@page "/forms"
@attribute [ExcludeFromInteractiveRouting]
<h3>forms</h3>
<EditForm FormName="NameForm" Model="Model" Enhance>
    <InputText @bind-Value="Model.Name"></InputText>
    <br/>
    <button type="submit">submit</button>
</EditForm>
<br/>
<p>Model name is: @Model.Name</p>

<hr/>
<EditForm FormName="AgeForm" Model="Model2" Enhance>
    <InputNumber @bind-Value="Model2.Age"></InputNumber>
    <br/>
    <button type="submit">submitAge</button>
</EditForm>
<p>Age is: @Model2.Age</p>

@code {
    [SupplyParameterFromForm(FormName = "NameForm")]
    public ModelName Model { get; set; } = new();
    
    [SupplyParameterFromForm(FormName = "AgeForm")]
    public ModelAge Model2 { get; set; } = new();
    
    public class ModelName
    {
        public string Name { get; set; } = string.Empty;
    }
    
    public class ModelAge
    {
        public int Age { get; set; }
    }
}

video:

Screen.Recording.2025-05-12.at.5.11.54.PM.mov

[javiercn]

@Ali1Jamal thanks for the additional details.

You need to initialize SupplyParameterFromForm inside OnInitializedAsync and check that no value has been assigned to it by model binding (similar to how SupplyParameterFromQuery parameters work).

The other aspect is that I do not think we will ever do a feature to "isolate" updates to some forms. I think this could be classified as either a "bug" because we should be preserving existing state for forms or a "feature" because preserving the state of other forms is not something that we can do at the framework level and requires the user to specify what behavior they want (we can't differentiate when the form has been reset from the server explicitly vs when no values were provided, so we might need on attribute to know which forms we should preserve the values from or reset.

The model for enhanced nav works by updating the entire document, and having a model where it happens only in a subset can cause problematic situations, for example, a component doing that to a form could cause other parts of the page to not receive updates and make it really hard to troubleshoot the problem.