6

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

 11 months ago
source link: https://jonhilton.net/blazor-search-page/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

October 17, 2023 · 2 minute read · Tags: blazor

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

How to accept Stripe payments via Blazor in .NET 8

Present a checkout form and handle payments

How to migrate your Blazor Server app to .NET 8

What does it take to migrate your pre .NET 8 Blazor server app to the new framework

How I use Docker to deploy my Blazor apps to affordable hosting

Sign up for the Practical ASP.NET Weekly

Simplify your web app. Ship your features. One practical tip every Tuesday.

I respect your email privacy. Unsubscribe with one click.

 


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK