Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renerick/htmx.oob
A builder for appending out of band fragments to ASP.NET core responses
https://github.com/renerick/htmx.oob
aspnetcore htmx
Last synced: 3 months ago
JSON representation
A builder for appending out of band fragments to ASP.NET core responses
- Host: GitHub
- URL: https://github.com/renerick/htmx.oob
- Owner: Renerick
- License: mit
- Created: 2022-07-02T13:41:57.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-19T16:39:40.000Z (6 months ago)
- Last Synced: 2024-10-14T19:42:35.853Z (3 months ago)
- Topics: aspnetcore, htmx
- Language: C#
- Homepage:
- Size: 22.5 KB
- Stars: 22
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Htmx.Oob
A response builder to add [htmx OOB](https://htmx.org/attributes/hx-swap-oob/) fragments to ASP.NET core responses.
Use it to add View Components and Partial views to your action result and
update corresponding parts of pages from a single response.
## How to use
After installing the package, use `OobView` extension method to create `OobView` partial and then
`WithOob` extension method to initialize `HtmxOobBuilder` instance.
To add fragments to it, use corresponding methods: `AddViewComponent`, `AddPartial` and `AddDeleteOob`.
The last one is a special case, used to simplify elements removal without rendering full fragment.
```csharp
// this example will result in two view components in the response,
// one of which is out of band
return this.OobView(
ViewComponent("Test")
.WithOob()
.AddViewComponent("Test")
);
```
Builder methods have overloads that match standard methods used to return ViewComponents/Partials
as action result, so you can pass arguments and view models as usual. They also accept `swap` argument,
which is `true` by default. This all works from controllers and Razor Pages handlers.
Your fragments must be modified to support the swap value. In case of partials, the value
is passed in the ViewData dictionary and can be accessed with `ViewData["Swap"]` or `ViewBag.Swap`
```html
Partial @(new Random().Next())
```
In case of View Components, the value will be passed as an argument of invoke method. You will have
to pass it to the view yourself
```csharp
public Task InvokeAsync(string? swap)
{
return Task.FromResult(View(new { Swap = swap }));
}
```
Refer to [Example](Htmx.Oob.Example) project for more details on how to use it.
## How it works
Under the hood, the builder is used as a model of `OobView` partial. When rendered,
this partial renders all items of the builder as a single page.
## You may also like
- [JalexSocial/Rizzy](https://github.com/JalexSocial/Rizzy) - [Docs on OOB swaps](https://jalexsocial.github.io/rizzy.docs/docs/htmx/out-of-band-swapping/)
## License
This repo is licensed under the terms of [MIT License](LICENSE)
-----
[htmx](https://github.com/bigskysoftware/htmx) is licensed under the terms of [BSD Zero-Clause License](https://github.com/bigskysoftware/htmx/blob/master/LICENSE)