Active Search

[genifycom]

Hi Egil,

I am trying to get the active search https://htmx.org/examples/active-search/ working with Blazor SSR.

While I can get the POST request in the Blazor OnInitialized, I cannot seem to find the Body. HtmxRequest does not have it.

When using the HTMX element (hard to find any detailed documentation on input with hx-post)

<input class="form-control" type="search" name="search" placeholder="Begin Typing To Search Customers..."  
       hx-post="/examples/active-search"  
       hx-trigger="input changed delay:500ms, search"  
       hx-target="#search-results"  
       hx-indicator=".htmx-indicator">

then it appears that the POST body contains e.g. "search=a".

Trying to get that value.

Do you have any code for this one?

Thanks,
Dave

[genifycom]

Ok, got it all working. Don't want to mess up your project, but here is the working page. Woohoo!

Love the idea. Blazor SSR is crucial to me because of running SSR in AWS Lambda serverless.

In such a scenario (which I have been using successfully for numerous client projects) only supports SSR.
There is no SignalR or Blazor WASM in the AWS Serverless environment.

To fully render this page, you will need bars.svg in folder img under wwwroot to see the searching icon.
Not sure if line three (the HtmxRoute) is needed.

@inherits ConditionalComponentBase
@page "/examples/active-search"
@attribute [HtmxRoute("/examples/active-search", Methods = [HttpMethods.Post])]

<PageTitle>Htmxor - Examples - Active Search</PageTitle>
<h1>Active Search</h1>
<p>This is a Htmxor version of the <a href="https://htmx.org/examples/active-search/" title="Active Search example">Active Search</a> example at htmx.org.</p>

<h3>
    Search Contacts
    <span class="htmx-indicator">
        <img src="/img/bars.svg" /> Searching...
    </span>
</h3>

<input class="form-control" type="search" name="search" placeholder="Begin Typing To Search Customers..."
       hx-post="/examples/active-search"
       hx-trigger="input changed delay:500ms, search"
       hx-target="#search-results"
       hx-indicator=".htmx-indicator">

<table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="search-results">
        <HtmxFragment>
            @foreach (var contact in data)
            {
                <tr>
                    <td>@contact.FirstName</td>
                    <td>@contact.LastName</td>
                    <td>@contact.Email</td>
                </tr>
            }
        </HtmxFragment>
    </tbody>
</table>

@code {
    [SupplyParameterFromForm] //The input tag with hx-post posts a body containing the string (using the name attribute)
    private string search { get; set; } = string.Empty;

    private IEnumerable<Contact> data = Enumerable.Empty<Contact>();

    protected override void OnInitialized()
    {
        Thread.Sleep(1000); //Simulate a delay in order to show the searching icon
        data = string.IsNullOrEmpty(search)
            ? Contacts.Data.Values.Take(30)
           : Contacts.Data.Values.Where(c => (c.FirstName + " " + c.LastName).Contains(search, StringComparison.InvariantCultureIgnoreCase));
    }
}

[egil]

Nice, feel free to submit a PR with your implementation. Do suggest you change OnInitialized to OnInitializedAsync and use await Task.Delay(1000); instead, as Thread.Sleep(1000); blocks a thread.

[genifycom]

I have run into an interesting issue. When I run this as serverless in AWS Lambda DotNet it mostly works.

I have a feeling that because the HX-XSRF-TOKEN changes with each request, that this causes a problem in AWS Lambda. So the backend AWS Lambda will spin up a new container on request.

So what would happen if the server that served the Counter page (as an example) was restarted?

I notice that the .AspNetCore.Antiforgery token stays the same between requests, but the HX-XSRF-TOKEN changes with each request.

The behavior I see is that after fully refreshing the page the counter PUT gets a 200. But after some time, the PUT fails with a 400.

This might be because AWS shuts down the container and then starts up a new one for the new request.

Do you think this might be the issue? If so, how might I resolve it?

[egil]

The updates to HX-XSFR-TOKEN are something I have experimented with limiting, but I did not find a solution the last time a looked at it. We need that to prevent bad actors from sending requests to your endpoints (i.e. CSRF attacks).

I do not know how AWS Lamdbda works thought, but the entire point of Htmxor/Blazor SSR is that it is stateless, so it should not cause problems if your server is going offline and comes back online again. You can test it locally by restarting the server locally and keeping the browser open.

However, there is a another option than to rely on HX-XSFR-TOKEN headers. Just include a <AntiforgeryToken /> inside a form next to the input element, and submit the form when the input field changes. That will include the token as form post data, which may work better with AWS.

E.g. (untested):

<form hx-trigger="input[@name='search'] changed delay:500ms" 
      hx-post="/examples/active-search"
      hx-target="#search-results"
      hx-indicator=".htmx-indicator"
      hx-include="this">
  <AntiforgeryToken />
  <input class="form-control" type="search" name="search" placeholder="Begin Typing To Search Customers...">
</form>

[genifycom]

Ok resolved. It was because of Microsoft ant forgery token and Data Protection.

The HX-XSFR-TOKEN works just fine.

Thank you for your notes :)

[egil]

What did you change to make it work?

[genifycom]

This change was specific to AWS Lambda. Because AWS lambda can restart the server at any point we need to use DataProtection

https://docs.aws.amazon.com/lambda/latest/dg/security-dataprotection.html

https://github.com/normj/ServerlessTODOListTutorial/blob/master/DotnetTryMaterial/ASP.NETCoreFrontend/ParameterStoreDataProtection.md

NormJ on the AWS Dotnet Lambda team uses:

// Register AWS System Manager's parameter store as the persistence for data protection keys.
services.AddDataProtection()
    .PersistKeysToAWSSystemsManager("/ServerlessTODOList/DataProtection");

[egil]

I wonder if I can mitigate this safely if I implement a retry logic in htmxor that automatically retrieve new keys if a request fails.