When a form is actually... oh it's a form

A question for you.

If you head to your favourite search engine and enter a search term, what happens when you click the button to perform the search?

In most cases (and all the ones I checked) you’ll find yourself looking at a page of search results.

Take a look at the URL for the page and you’ll see your search term included in the URL’s query string.

Fun fact, most of the time it’s in a query string value named, simply, q.

How this works is fairly straightforward, you might even say ‘old school’.

Here’s a simplified version of the markup from the duck duck go search page.

<form method="GET" action="https://duckduckgo.com">
    <input type="text" name="q"/>
</form>

What’s interesting is that search engines have operated this way for years, pretty much since they were first invented.

And at first glance you might think, well isn’t there a better way to handle search than a simple form and redirect? I mean it IS 2023.

We’ve got single page applications, global app state and components now don’t you know!

But then when you step back and consider what people do with these search results - bookmark them, maybe share with someone else…

It suddenly makes sense that the URL would include everything needed to re-run the search.

In Blazor you can read read values from the query string using the handy SupplyParameterFromQuery attribute.

@code {

    [SupplyParameterFromQuery(Name="q")]
    public string SearchTerm { get; set; }
    
    protected override async Task OnInitializedAsync()
    {
       // do something with the search term
    }

}

Put this together with .NET 8 running in static server-side rendering mode and you can quickly create your own ‘simple search page’.

@page "/"

<form method="GET">
    <input type="text" name="q" />
    <button type="submit">Search</button>
</form>

<div>
    <!-- show search results here -->
</div>

@code {

    [SupplyParameterFromQuery(Name="q")]
    public string SearchTerm { get; set; }
    
    protected override async Task OnInitializedAsync()
    {
       // do something with the search term
    }

}

When submitted the form will perform an HTTP get request to this same page, at which point the entered search term will be available via the SearchTerm property.

Remember the basics

It’s easy to automatically reach for ‘advanced’ solutions when we’re building our web apps in 2023…

But, sitting just beneath all the layers of abstraction are some pretty fundamental pillars of the web.

And it’s worth remembering they exist because, sometimes, a form is all you need.

Next up