From 19cdd0910570f77659e449e2514730062a900436 Mon Sep 17 00:00:00 2001 From: Phil Haack Date: Tue, 2 Jan 2024 11:58:38 -0800 Subject: [PATCH 1/5] Update formaction demo to show the issue When there's an input field, the formaction on a button doesn't work. Also add example with no formaction --- Pages/Demos/FormAction.cshtml | 8 +++++++- Pages/Demos/FormAction.cshtml.cs | 17 +++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/Pages/Demos/FormAction.cshtml b/Pages/Demos/FormAction.cshtml index 396beab..98846df 100644 --- a/Pages/Demos/FormAction.cshtml +++ b/Pages/Demos/FormAction.cshtml @@ -1,7 +1,6 @@ @page @model DemoWeb.Pages.Demos.FormAction - @{ Layout = "Shared/_Layout"; } @@ -9,6 +8,13 @@
+
The following problems occurred when submitting the form:
+
+ + + +
+
\ No newline at end of file diff --git a/Pages/Demos/FormAction.cshtml.cs b/Pages/Demos/FormAction.cshtml.cs index 6b0af33..f2dd104 100644 --- a/Pages/Demos/FormAction.cshtml.cs +++ b/Pages/Demos/FormAction.cshtml.cs @@ -1,5 +1,6 @@ using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; +using System.ComponentModel.DataAnnotations; namespace DemoWeb.Pages.Demos; @@ -8,6 +9,15 @@ public class FormAction : PageModel [TempData] public string? StatusMessage { get; set; } + [BindProperty] + public InputModel Input { get; set; } = new(); + + public class InputModel + { + [Display(Name = "Name")] + [Required, StringLength(50)] + public string? Name { get; set; } + } public IActionResult OnPostSubmitAsync() { @@ -22,4 +32,11 @@ public IActionResult OnPostSave() return RedirectToPage(); } + + public IActionResult OnPost() + { + StatusMessage = "The button with no formaction was clicked"; + + return RedirectToPage(); + } } \ No newline at end of file From 8656c3cca0a96277c3189e1354ed7d5fdf9749ec Mon Sep 17 00:00:00 2001 From: Phil Haack Date: Tue, 2 Jan 2024 11:59:29 -0800 Subject: [PATCH 2/5] Use the submitter's formaction if specified When clicking a submit button with a formaction, we need to honor that formaction. --- src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.ts b/src/index.ts index d79c30f..ccf3e87 100644 --- a/src/index.ts +++ b/src/index.ts @@ -806,6 +806,11 @@ export class ValidationService { submitterInput.value = submitter.getAttribute('value'); form.appendChild(submitterInput) } + + const formAction = submitter.getAttribute('formaction'); + if (formAction) { + form.action = formAction; + } } form.submit(); From 7be16570d57d39eac2a000af4b7023c4862b045d Mon Sep 17 00:00:00 2001 From: Phil Haack Date: Tue, 2 Jan 2024 12:49:42 -0800 Subject: [PATCH 3/5] Make sure we reset the formaction on the submit button --- src/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index ccf3e87..e5fa214 100644 --- a/src/index.ts +++ b/src/index.ts @@ -796,6 +796,7 @@ export class ValidationService { // Because the submitter is not propagated when calling // form.submit(), we recreate it here. const submitter = submitEvent.submitter; + let initialFormAction = form.action; if (submitter) { const name = submitter.getAttribute('name'); // If name is null, a submit button is not submitted. @@ -814,6 +815,10 @@ export class ValidationService { } form.submit(); + + if (form.action != initialFormAction) { + form.action = initialFormAction; + } } } @@ -830,7 +835,7 @@ export class ValidationService { let invalidFormInputUIDs = formInputUIDs.filter(uid => this.summary[uid]); if (invalidFormInputUIDs.length > 0) { - var firstInvalid = this.elementByUID[invalidFormInputUIDs[0]] as HTMLElement; + const firstInvalid = this.elementByUID[invalidFormInputUIDs[0]] as HTMLElement; if (firstInvalid) { firstInvalid.focus(); } From d028b526ed0433ed4a3b874288af55f52e75cc4b Mon Sep 17 00:00:00 2001 From: Phil Haack Date: Fri, 5 Jan 2024 13:40:56 -0800 Subject: [PATCH 4/5] Wrap in try/finally just in case Co-authored-by: Keith Dahlby --- src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index e5fa214..e4a7408 100644 --- a/src/index.ts +++ b/src/index.ts @@ -814,9 +814,9 @@ export class ValidationService { } } - form.submit(); - - if (form.action != initialFormAction) { + try { + form.submit(); + } finally { form.action = initialFormAction; } } From 95b6ad1074a25869f846d957c324432257174384 Mon Sep 17 00:00:00 2001 From: Phil Haack Date: Fri, 5 Jan 2024 13:41:12 -0800 Subject: [PATCH 5/5] Use const instead of let Co-authored-by: Keith Dahlby --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index e4a7408..f7380ac 100644 --- a/src/index.ts +++ b/src/index.ts @@ -796,7 +796,7 @@ export class ValidationService { // Because the submitter is not propagated when calling // form.submit(), we recreate it here. const submitter = submitEvent.submitter; - let initialFormAction = form.action; + const initialFormAction = form.action; if (submitter) { const name = submitter.getAttribute('name'); // If name is null, a submit button is not submitted.