Background and Motivation
Blazor SSR is a fantastic way to build component first UIs. With EnhancedNavigation and EnhancedForms, the area between SSR and Interactive Mode is shrinking, and I have noticed that SSR can do MOST of what we need to do.
With several libraries out there like HTMX, this concept of declarative html seems very interesting, and it appears to be gaining a lot of movement. There are many dotnet devs that love this pattern, and they unfortunately have to ship something like Razor Pages/MVC or go the direction of a Minimal API rendering components. What I would love to see is a way that I can leverage my existing Blazor SSR setup incrementally adopt something like HTMX for better page interactivity.
Currently, we can utilize just POST requests, but it gets a little tricky when we want to support adding via POST, deleting via DELETE, and updates via PUT. Having the ability to have specific forms in a component be able to trigger specific handlers in a razor component is a dream. Having these be semantic as in POST = Add, Delete = remove, and PUT = edit, aligns really well with existing functionality.
Proposed API
namespace Microsoft.AspNetCore.Http;
+ [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
+ public sealed class SupplyParameterFromFormAttribute : CascadingParameterAttributeBase
+ {
+ public string? Name { get; set; }
+ public HttpMethod Method {get; set;} = HttpMethod.Post;
+ }Usage Examples
@page "/profile"
<p>@Email</p>
<EditForm Model="Model1" OnSubmit="Submit1" hx-delete>
<div>
<label>
Holodeck 1 Identifier:
<InputText @bind-Value="Model1!.Id" />
</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</EditForm>
@code {
[SupplyParameterFromForm(HttpMethod.Delete)]
private Holodeck? Model1 { get; set; }
void Submit1()
{
// Delete Stuff
NavigationManager.NavigateTo("/", forceLoad: true);
}
}Alternative Designs
Looking at the code, there are only a few places that would need to be changed. I would still default this to POST, but allow people to make it also listen for PUT, DELETE, and PATCH requests. I am happy to create a PR if we feel like this is something worth adding.
Risks
This could potentially add some confusion as this requires a 3rd party library like HTMX or Alpine.AJAX. If there wanted to be some work done to include this functionality into the blazor.web.js, I would happily put this to the side.
Background and Motivation
Blazor SSR is a fantastic way to build component first UIs. With EnhancedNavigation and EnhancedForms, the area between SSR and Interactive Mode is shrinking, and I have noticed that SSR can do MOST of what we need to do.
With several libraries out there like HTMX, this concept of declarative html seems very interesting, and it appears to be gaining a lot of movement. There are many dotnet devs that love this pattern, and they unfortunately have to ship something like Razor Pages/MVC or go the direction of a Minimal API rendering components. What I would love to see is a way that I can leverage my existing Blazor SSR setup incrementally adopt something like HTMX for better page interactivity.
Currently, we can utilize just POST requests, but it gets a little tricky when we want to support adding via POST, deleting via DELETE, and updates via PUT. Having the ability to have specific forms in a component be able to trigger specific handlers in a razor component is a dream. Having these be semantic as in POST = Add, Delete = remove, and PUT = edit, aligns really well with existing functionality.
Proposed API
Usage Examples
Alternative Designs
Looking at the code, there are only a few places that would need to be changed. I would still default this to POST, but allow people to make it also listen for PUT, DELETE, and PATCH requests. I am happy to create a PR if we feel like this is something worth adding.
Risks
This could potentially add some confusion as this requires a 3rd party library like HTMX or Alpine.AJAX. If there wanted to be some work done to include this functionality into the blazor.web.js, I would happily put this to the side.