Stop duplicating history with streaming-enhanced-form PRG. Fixes #51674 (#53301)

# Stop duplicating history with streaming-enhanced-form PRG

Makes the post-redirect-get pattern work without duplicating history entries.

## Description

The PRG pattern is common but has the annoying disbenefit that, after submitting a form, the browser's "back" button doesn't work as normal because there is a duplicated history entry. The user has to click "back" twice or more times depending on how many times they have submitted the form.

In the case of enhanced navigation, Blazor fixes this by explicitly avoiding duplicated history entries. But this wasn't implemented for the streaming+enhanced case. This PR adds the avoid-duplication behavior in that case too.

Fixes #51674

## Customer Impact

Without this, the PRG pattern would work nicely on an enhanced form, but if you then also enabled streaming SSR for that form, it would go back to duplicating history entries and forcing the user to click "back" multiple times.

**NOTE**: This PR still doesn't implement non-duplication in the non-enhanced-nav case (with or without streaming). That's out of scope because without enhanced nav, our code doesn't control how the response is handled, so we have to accept the default browser behavior (which does duplicate the history entries after PRG).

## Regression?

- [ ] Yes
- [x] No

[If yes, specify the version the behavior has regressed from]

## Risk

- [ ] High
- [x] Medium
- [ ] Low

There's some pretty intricate logic for the interactions between streaming, enhanced nav, redirections, and the history stack. This adds another case. Mitigations:

 * We have pretty extensive tests for all the combinations we can think of
 * The way the change is structured, it *should* not impact other cases

## Verification

- [x] Manual (required)
- [x] Automated

## Packaging changes reviewed?

- [ ] Yes
- [ ] No
- [x] N/A

Author: SteveSandersonMS

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -53,19 +53,24 @@ class BlazorStreamingUpdate extends HTMLElement {
               const isFormPost = node.getAttribute('from') === 'form-post';
               const isEnhancedNav = node.getAttribute('enhanced') === 'true';
               if (isEnhancedNav && isWithinBaseUriSpace(destinationUrl)) {
+                // At this point the destinationUrl might be an opaque URL so we don't know whether it's internal/external or
+                // whether it's even going to the same URL we're currently on. So we don't know how to update the history.
+                // Defer that until the redirection is resolved by performEnhancedPageLoad.
+                const treatAsRedirectionFromMethod = isFormPost ? 'post' : 'get';
+                const fetchOptions = undefined;
+                performEnhancedPageLoad(destinationUrl, /* interceptedLink */ false, fetchOptions, treatAsRedirectionFromMethod);
+              } else {
                 if (isFormPost) {
                   // The URL is not yet updated. Push a whole new entry so that 'back' goes back to the pre-redirection location.
-                  history.pushState(null, '', destinationUrl);
+                  // WARNING: The following check to avoid duplicating history entries won't work if the redirection is to an opaque URL.
+                  // We could change the server-side logic to return URLs in plaintext if they match the current request URL already,
+                  // but it's arguably easier to understand that history non-duplication only works for enhanced nav, which is also the
+                  // case for non-streaming responses.
+                  if (destinationUrl !== location.href) {
+                    location.assign(destinationUrl);
+                  }
                 } else {
                   // The URL was already updated on the original link click. Replace so that 'back' goes to the pre-redirection location.
-                  history.replaceState(null, '', destinationUrl);
-                }
-                performEnhancedPageLoad(destinationUrl, /* interceptedLink */ false);
-              } else {
-                // Same reason for varying as above
-                if (isFormPost) {
-                  location.assign(destinationUrl);
-                } else {
                   location.replace(destinationUrl);
                 }
               }

src/Components/Web.JS/src/Rendering/StreamingRendering.ts

@@ -132,10 +132,10 @@ function onDocumentSubmit(event: SubmitEvent) {
 
     event.preventDefault();
 
-    const url = new URL(event.submitter?.getAttribute('formaction') || formElem.action, document.baseURI); 
-    const fetchOptions: RequestInit = { method: method}; 
+    const url = new URL(event.submitter?.getAttribute('formaction') || formElem.action, document.baseURI);
+    const fetchOptions: RequestInit = { method: method};
     const formData = new FormData(formElem);
-   
+
     const submitterName = event.submitter?.getAttribute('name');
     const submitterValue = event.submitter!.getAttribute('value');
     if (submitterName && submitterValue) {
@@ -153,8 +153,8 @@ function onDocumentSubmit(event: SubmitEvent) {
     } else {
       // Setting request body and content-type header depending on enctype
       const enctype = event.submitter?.getAttribute('formenctype') || formElem.enctype;
-      if (enctype === 'multipart/form-data') { 
-        // Content-Type header will be set to 'multipart/form-data' 
+      if (enctype === 'multipart/form-data') {
+        // Content-Type header will be set to 'multipart/form-data'
         fetchOptions.body = formData;
       } else {
         fetchOptions.body = urlSearchParams;
@@ -170,7 +170,7 @@ function onDocumentSubmit(event: SubmitEvent) {
   }
 }
 
-export async function performEnhancedPageLoad(internalDestinationHref: string, interceptedLink: boolean, fetchOptions?: RequestInit) {
+export async function performEnhancedPageLoad(internalDestinationHref: string, interceptedLink: boolean, fetchOptions?: RequestInit, treatAsRedirectionFromMethod?: 'get' | 'post') {
   performingEnhancedPageLoad = true;
 
   // First, stop any preceding enhanced page load
@@ -232,8 +232,9 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
       // For 301/302/etc redirections to internal URLs, the browser will already have followed the chain of redirections
       // to the end, and given us the final content. We do still need to update the current URL to match the final location,
       // then let the rest of enhanced nav logic run to patch the new content into the DOM.
-      if (response.redirected) {
-        if (isGetRequest) {
+      if (response.redirected || treatAsRedirectionFromMethod) {
+        const treatAsGet = treatAsRedirectionFromMethod ? (treatAsRedirectionFromMethod === 'get') : isGetRequest;
+        if (treatAsGet) {
           // For gets, the intermediate (redirecting) URL is already in the address bar, so we have to use 'replace'
           // so that 'back' would go to the page before the redirection
           history.replaceState(null, '', response.url);

src/Components/Web.JS/src/Services/NavigationEnhancement.ts

@@ -1466,6 +1466,8 @@ public void SubmitButtonFormenctypeAttributeOverridesEnhancedFormEnctype()
     [Fact]
     public void EnhancedFormThatCallsNavigationManagerRefreshDoesNotPushHistoryEntry()
     {
+        GoTo("about:blank");
+
         var startUrl = Browser.Url;
         GoTo("forms/form-that-calls-navigation-manager-refresh");
         var guid = Browser.Exists(By.Id("guid")).Text;
@@ -1482,6 +1484,30 @@ public void EnhancedFormThatCallsNavigationManagerRefreshDoesNotPushHistoryEntry
         Browser.Navigate().Back();
         Browser.Equal(startUrl, () => Browser.Url);
     }
+    
+    [Fact]
+    public void EnhancedFormThatCallsNavigationManagerRefreshDoesNotPushHistoryEntry_Streaming()
+    {
+        GoTo("about:blank");
+
+        var startUrl = Browser.Url;
+        GoTo("forms/form-that-calls-navigation-manager-refresh-streaming");
+
+        // Submit the form
+        Browser.FindElement(By.Id("some-text")).SendKeys("test string");
+        Browser.Equal("test string", () => Browser.FindElement(By.Id("some-text")).GetAttribute("value"));
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        // Wait for the async/streaming process to complete. We know this happened
+        // if the loading indicator says we're done, and the textbox was cleared
+        // due to the refresh
+        Browser.Equal("False", () => Browser.FindElement(By.Id("loading-indicator")).Text);
+        Browser.Equal("", () => Browser.FindElement(By.Id("some-text")).GetAttribute("value"));
+
+        // Checking that the history entry was not pushed
+        Browser.Navigate().Back();
+        Browser.Equal(startUrl, () => Browser.Url);
+    }
 
     // Can't just use GetAttribute or GetDomAttribute because they both auto-resolve it
     // to an absolute URL. We want to be able to assert about the attribute's literal value.

src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs

@@ -0,0 +1,41 @@
+@page "/forms/form-that-calls-navigation-manager-refresh-streaming"
+@using Microsoft.AspNetCore.Components.Forms
+@attribute [StreamRendering]
+@inject NavigationManager Nav
+
+<h3>Form That Calls NavigationManager.Refresh() with streaming</h3>
+
+<form data-enhance @onsubmit="@RefreshAfterDelayAsync" @formname="form-refresh" method="post">
+    <AntiforgeryToken />
+    <input id="some-text" name="SomeText" value="@SomeText" />
+    <button id="submit-button">Submit</button>
+</form>
+
+<p>Loading: <span id="loading-indicator">@loading</span></p>
+
+@if (missingText)
+{
+    <p>Enter some text, so you can see it go back to blank after the refresh happened.</p>
+}
+
+@code {
+    [SupplyParameterFromForm]
+    public string SomeText { get; set; }
+
+    bool loading;
+    bool missingText;
+
+    async Task RefreshAfterDelayAsync()
+    {
+        if (string.IsNullOrEmpty(SomeText))
+        {
+            missingText = true;
+        }
+        else
+        {
+            loading = true;
+            await Task.Delay(1000);
+            Nav.Refresh();
+        }
+    }
+}