DEV Community: Pavel Osadchuk

Microsoft Has Killed Widgets Six Times. Here's Why They Keep Coming Back.

Pavel Osadchuk — Tue, 10 Feb 2026 03:50:26 +0000

The full history of Windows widgets, from 1997 to today.

Every constraint you'll hit today exists because of a specific past disaster.

Microsoft has been trying to solve the same UX problem since 1997: how to surface live information without making you launch an app. They've shipped six different implementations across nearly 30 years. Each one died from a different fundamental flaw — performance, security, screen space, privacy, engagement. And each death triggered the same reflex: containment.

The pattern goes like this. Microsoft releases widgets into the wild. Users or attackers find the breaking point. Microsoft panics, kills the feature, and ships the next version locked inside a tighter box. Active Desktop splashed HTML across the wallpaper — performance collapsed, so Vista contained widgets in a rigid sidebar. Users hated losing screen space, so Windows 7 freed gadgets to float anywhere — then a security exploit blew the whole platform apart. Windows 8 responded by locking widgets into a full-screen Start Screen nobody wanted. The cycle repeats: build, ship, backlash, kill, rebuild with more walls.

Understanding why each containment failed tells you exactly what constraints shape the platform you'd build on today. Every design decision in the current architecture — the declarative Adaptive Cards format, the native WinUI 3 renderer, the overlay-instead-of-dock layout — exists because of a specific past disaster. The constraints you'll hit when building widgets today aren't arbitrary. They're scar tissue.

01 — The Push Era (1997–2001)

Internet Explorer 4.0 shipped in 1997 with a component called the Windows Desktop Update. It fused the Trident rendering engine into explorer.exe, turning the Windows wallpaper from a static bitmap into a live HTML surface. Microsoft called it Active Desktop.

The most visible piece was the Active Channel Bar — a vertical strip docked to the right edge of the screen, populated with branded buttons for Disney, MSNBC, Warner Bros, and CNN. Each button represented a "Channel," a website that pushed content to your machine for offline reading. The backbone was Channel Definition Format (CDF), an XML standard that told your PC which pages to download and when.

Tech note: CDF was an XML format — your modem dialed up at 2 AM, synced content, and cached it locally so you could browse "live" content without an active phone line.

A small red sparkle called the "Gleam" appeared on a channel's icon when new content arrived. It was an early attempt at the notification patterns we now take for granted. The handpicked channel lineup drew antitrust complaints, but the real killer was more mundane.

The Active Channel Bar. Courtesy of Wikipedia.

Active Desktop in action. Courtesy of toastytech.com.

Pentium I/II processors with 16–32 MB of RAM buckled under a constantly running HTML renderer. Because Trident was fused into the shell, a crash in Active Desktop crashed all of explorer.exe. Users saw a white HTML recovery screen where their wallpaper should have been. Disk I/O from background syncs ground hard drives to a halt, degrading everything else running on the machine.

"Disable Active Desktop" became the top tuning tip for Windows 98.

Microsoft had discovered its first widget lesson: ambient information cannot cost performance.

☠ Cause of Death: PERFORMANCE
Ambient info cannot cost performance. A live surface that degrades the system it runs on will always be disabled.

02 — The Glass Era (2007–2009)

The widget concept went dormant during the XP years, then resurfaced inside the troubled "Longhorn" project. The original 2002 vision was ambitious — a translucent sidebar meant to replace the system tray entirely.

The Longhorn sidebar prototype — the original vision before Vista scaled it back. Courtesy of Longhorn Wiki.

Widget configuration in Longhorn — alarm clock settings alongside the sidebar. Courtesy of Longhorn Wiki.

After Longhorn collapsed and was reset in 2004, the scope shrank. What shipped with Windows Vista in January 2007 was a supplementary pane: a dark, semi-transparent strip running the full height of the right edge of the screen.

The sidebar was a showcase for Aero Glass. The default clock gadget had a sweeping red second hand behind a reflective glass face. The CPU meter mimicked luxury car dashboard dials — metallic bezels, needles that jittered physically as load spiked, turning red as they approached 100%. Eleven gadgets shipped in total, and thousands more followed.

Vista's sidebar with the Gadget Gallery — clock, stocks, weather, and the 150-pixel tax on your workspace.

Tech note: A .gadget file was a renamed ZIP containing HTML, CSS, JScript, and an XML manifest. Building one took an afternoon.

The problem was physical. Most monitors in 2007 were 4:3 or 5:4, and the sidebar permanently consumed around 150 pixels of horizontal space. On a 1280×1024 display, that's over 10% of your workspace. Power users disabled it on day one. The sidebar.exe process compounded the issue — it leaked memory steadily, consuming 50–100 MB on systems where 1 GB of RAM was the minimum spec.

Microsoft had attempted containment: give widgets a fixed home, keep things tidy. But rigid docking doesn't work when screen space is scarce.

☠ Cause of Death: SCREEN SPACE
Rigid docking doesn't work when screen space is scarce. Widgets that steal workspace will be closed.

03 — The Free Era (2009–2012)

Windows 7 freed the gadgets. Microsoft dropped the sidebar container entirely, renamed the feature Desktop Gadgets, and let users drag widgets anywhere on screen. Gadgets snapped magnetically to screen edges and to each other. A new "Aero Peek" button in the taskbar made all windows transparent on hover, so you could glance at your gadgets without minimizing your work.

The third-party ecosystem exploded. DeviantArt and WinCustomize communities produced GPU temperature monitors, Winamp remote controls, elaborate calendar suites. It was the golden age of desktop customization.

It was also a security catastrophe hiding in plain sight.

Desktop gadgets ran as HTML Applications with full local machine trust. No sandbox. A gadget could read files, write to the registry, and execute system commands.

In July 2012, at Black Hat in Las Vegas, researchers Mickey Shkatov and Toby Kohlenberg presented "We Have You By The Gadgets." The attack chain was elegant and devastating: intercept the HTTP traffic of a weather gadget on a shared network, inject JavaScript into the XML data stream, use that JavaScript to instantiate an ActiveX control like WScript.Shell, then execute arbitrary code on the target machine. A weather widget became a backdoor.

Black Hat 2012: "We Have You By The Gadgets" — the presentation that killed Desktop Gadgets.

The researchers also demonstrated a distribution vector — since .gadget files were just renamed ZIPs, an attacker could package a trojan inside a seemingly innocent clock skin. Users would install it without triggering antivirus warnings, because the code executed within the trusted sidebar.exe process.

Tech note: Security Advisory 2719662 told all Vista/7 users to disable the sidebar. A "Fix It" tool permanently killed sidebar.exe via the registry. The online gadget gallery was taken offline.

Microsoft's response was nuclear. By the time Windows 8 launched in October 2012, the entire gadget engine was ripped from the codebase. Freedom without a sandbox was a death sentence. Everything Microsoft built after this moment was shaped by the security lesson. The move to declarative Adaptive Cards — JSON that describes a UI, never executes code — exists because of Black Hat 2012.

☠ Cause of Death: SECURITY
Freedom without a sandbox is a death sentence. Declarative UI (Adaptive Cards) exists because of this failure.

04 — The Metro Era (2012–2021)

Windows 8 made a radical bet: tiles ARE the launcher. The Start Menu disappeared, replaced by a full-screen Start Screen — a grid of rectangular tiles that doubled as widgets. When "live," a tile flipped or slid to reveal content: unread email counts, weather forecasts, news headlines.

The Windows 8.1 Start Screen — Live Tiles as the primary launcher. Bold, polarizing, and ultimately rejected by desktop users.

The technology was elegant. Apps pushed tiny XML payloads through Windows Notification Services (WNS) to update their tiles without running a background process. Battery impact was near zero. Developers chose from a predefined catalog of XML templates — TileWideSmallImageAndText03 and friends — which enforced visual consistency but prevented any custom layout.

Tech note: The key security insight carried forward: the tile system rendered data, never executed code. That principle survives in today's Adaptive Cards.

The user experience was a disaster. On a desktop PC, checking your weather tile meant leaving your work, entering the full-screen Start Screen, then navigating back. That context switch enraged productivity users. Enterprise customers called it a dealbreaker.

There was a deeper problem. Tiles were read-only. You couldn't check off a to-do, pause a song, or reply to a message from the tile. Clicking always launched the full app. Compared to the interactive gadgets of Windows 7 — where you could type notes, adjust sliders, and control media players directly on the desktop — this felt like a clear regression.

Windows 10 tried a compromise — tiles went back into a traditional Start Menu. But third-party developers never invested in WNS backends. Building a live tile meant setting up a cloud service to format XML payloads and push them through Microsoft's notification infrastructure — a nontrivial cost for a feature most users barely noticed. By 2020, Start Menus were filled with static, lifeless squares. When Windows 11 launched in 2021, Live Tiles were gone.

The Windows 10 compromise — Live Tiles back in a traditional Start Menu. Courtesy of windowslatest.com.

Containment attempt number two, even more extreme than Vista's sidebar. Widgets must live alongside your work, not in a separate universe.

☠ Cause of Death: ENGAGEMENT
Read-only tiles in a walled garden killed developer investment. Widgets must be interactive and coexist with your workflow.

05 — The Interlude (2015–2021)

Before the current Widget Board, Microsoft tried two half-measures.

Cortana Cards (2015–2020) were the most capable widgets Microsoft ever shipped. The assistant scraped your email for flight confirmations and showed gate info. It read your calendar and estimated commute times. It tracked packages automatically. It surfaced sports scores for teams you followed, restaurant suggestions based on your location, and weather forecasts tuned to your daily routine. Users managed these through a settings panel called the "Notebook," where they explicitly declared their interests.

Cortana Cards — weather, travel, currency, all powered by deep personal data access. Courtesy of The New York Times.

All of this required deep access to your email, location, and calendar data. Users saw a company reading their emails. Most disabled Cortana entirely.

The catch: disabling Cortana left the dashboard empty — a blank panel with nothing to show. In May 2020, Microsoft pivoted Cortana to a productivity chatbot and removed the cards.

News and Interests (April 2021) took a simpler approach — a weather icon on the Windows 10 taskbar that expanded into a news flyout on hover. The hover trigger was the problem. Users moving their mouse toward the system tray accidentally opened a panel of headlines. IT administrators scrambled to disable it via Group Policy. The feature was labeled bloatware within weeks of launch.

News and Interests — the accidental hover trigger that got it labeled bloatware within weeks.

Both attempts proved a consistent pattern: users want glanceable information but reject anything that feels invasive or disruptive. These two failures directly shaped what came next.

☠ Cause of Death: PRIVACY & DISRUPTION
Users want glanceable info but reject anything invasive. Widgets must be intentional, never accidental.

06 — The Board Era (2021–2024)

Windows 11 shipped in October 2021 with a dedicated Widgets Board — a panel that slides out from the left edge of the screen when you press Win + W or click the weather icon on the taskbar. The board is an overlay, not a docked sidebar, so it claims zero permanent screen space.

The Widget Board rendered everything through Edge WebView2, the Chromium-based web control shipped as part of the Windows Web Experience Pack. Widget providers implemented the IWidgetProvider COM interface and defined their UI using Adaptive Cards — a JSON format that describes layout declaratively. No executable code, no scripts. The host parses data, never runs it. This eliminated the entire class of remote code execution attacks that killed Desktop Gadgets in 2012. But the rendering was still web-based. Users could see msedgewebview2.exe processes in Task Manager when the board opened, often consuming hundreds of megabytes of RAM.

The original Widget Board at launch — everything rendered through Edge WebView2, news feed and widgets mixed together.

Microsoft opened the board to third-party developers in 2023. Spotify added playback controls. Facebook Messenger shows recent conversations. Phone Link surfaces mobile notifications. Xbox Game Pass highlights new releases. Unlike Live Tiles, these widgets are interactive — you can pause a track, check a box, or reply to a message without leaving the board. For web developers, the PWA widget path is the most accessible entry point. Define widgets in your web app manifest, and they appear natively on the board. No Win32 code, no UWP packaging — your existing web stack works. That low barrier to entry is a deliberate correction from the Live Tiles era, where standing up a WNS backend cost more effort than most developers were willing to spend.

The architecture was secure — sandboxed web content can't touch your file system. But the WebView2 rendering layer, the forced MSN news feed, and the lack of user control over the board's content drew persistent criticism. Something had to change.

☠ Cause of Death: WEBVIEW2 & FORCED FEED
Secure but heavy. The WebView2 renderer and mandatory MSN feed drew persistent criticism until the EU forced a rebuild.

07 — The Start Experiences Era (2024–Present)

In mid-2024, Microsoft began rebuilding the board. The forcing function was the EU's Digital Markets Act, which required Microsoft to open the Widget Board to third-party feed providers in the European Economic Area. To comply, Microsoft separated the MSN content pipeline into a replaceable Store-updatable component — the Microsoft Start Experiences app — making it one feed provider among many rather than a hardwired default. The compliance overhaul gave Microsoft the opportunity to rebuild the rendering layer too: widget rendering moved from WebView2 to native WinUI 3.

Adaptive Card JSON now maps directly to WinUI 3 XAML controls: a TextBlock in your card becomes an actual Microsoft.UI.Xaml.Controls.TextBlock on screen. Widgets inherit Fluent Design theming, high-contrast modes, and accessibility automatically. The memory footprint dropped — a native WinUI 3 control is far lighter than a DOM element inside a Chromium instance.

Tech note: The transition rolled out first to EEA users through KB5040546 in the Beta channel (July 2024). By late 2025, the WinUI 3 board, Widgets/Discover split, and optional MSN feed had expanded to all Windows 11 users.

The rebuilt Widget Board — native WinUI 3 rendering, Widgets/Discover split, optional feed.

The latest evolution arrived in early 2026: Lock Screen widgets. Weather, sports scores, and traffic now appear before you log in. Third-party apps can participate too. It's a full conceptual circle back to the "glance and go" vision that started this story in 1997 — except now the hardware can handle it, the sandbox keeps it safe, and the user stays in control. Microsoft appears to have realized that widgets shouldn't compete with applications for desktop space. They belong in the liminal moments of computing — the glance before you unlock, the pause between tasks.

Lock Screen widgets — the "glance and go" vision from 1997, finally realized 30 years later.

With 250+ million monthly active Windows users, the potential reach for widget developers is enormous. Whether the platform delivers depends on how Microsoft navigates the tensions that killed every previous attempt.

✅ Status: STILL ALIVE
Declarative JSON. Native WinUI 3 rendering. Overlay layout. Interactive widgets. Opt-in data access. Optional feed. Every past lesson encoded in architecture.

What the Cycle Produced

The current Widget Board is the scar tissue made manifest. Declarative JSON with no executable code (security). Native WinUI 3 rendering, migrated off the original WebView2 pipeline (performance). An overlay, not a dock (screen space). Interactive widgets (engagement). Opt-in data access (privacy). Every lesson encoded in architecture.

But it's not perfect. The developer API has constraints that limit what you can build. The discoverability problem — most Windows users have never pressed Win + W — remains unsolved. And while the news feed is finally optional, the tension between Microsoft's desire to monetize the Discover surface and users' desire for a clean utility board is far from resolved.

Those constraints, and how to work within them to ship something useful, are what the rest of this series will cover.

The Six Eras at a Glance

Era	Years	Killed By
The Push Era	1997–2001	Performance
The Glass Era	2007–2009	Screen Space
The Free Era	2009–2012	Security
The Metro Era	2012–2021	Engagement
The Interlude	2015–2021	Privacy & Disruption
The Board Era	2021–Present	Still Alive ✅

This is Part 1 of my Windows Widgets Development Series.

Building a widget for your product? I offer fixed-price widget development for online products.

Exploring htmx with Razor Pages: An Old New Web Development Approach?

Pavel Osadchuk — Tue, 29 Aug 2023 22:10:38 +0000

In the realm of web development, it's crucial to stay updated with the latest tools and methodologies. One such tool creating a buzz is htmx. I am usually not swayed by the 'shiny object syndrome', but I worked a lot with Razor Pages recently, and touched a lot of jQuery, which started to annoy me a bit.

However, after watching a video from @t3dotgg I was convinced that htmx might be helpful here and that it could fit me nicely. So, I decided to go through some use cases for it and do some tests to check if it is any good.

💡 The results of these tests are available in the repo.
The demo application is hosted on Azure free plan and is available here.
To get maximum from this article you need to be familiar with ASP.NET MVC or RazorPages

1. Introduction

First, let me briefly introduce what htmx and Razor Pages are:

htmx is a js library that gives access to AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML, using attributes. The library is built around "Hypermedia-Driven Application Architecture," which, in simple terms, could be described as "return HTML instead of JSON."

Razor Pages extends ASP.NET Core MVC, making coding page-focused scenarios easier and more productive than controllers and views. Razor Pages group the action (called a handler) and the viewmodel (called a PageModel) in one class and link it to a view. It uses a routing convention based on location and name in a Pages folder. This tends to keep Razor Pages and its handlers smaller and more focused while at the same time making it easier to find and work with.

I also want to mention pico.css. This is a minimal CSS framework for semantic HTML. It focuses on using simple native HTML tags as much as possible and provides consistent adaptive spacings and typography on all devices.

2. Background

Before I dive into integrating htmx and Razor Pages, let me briefly describe each technology. Both are praised for simplifying web development, but what are they?

2.1. htmx

htmx started as an intercooler.js - a small helper library to make AJAX calls through HTML tag attributes.

  <!-- This anchor tag posts to '/click' when it is clicked -->
  <a ic-post-to="/click">
    Click Me!
  </a>

Asynchronous JavaScript And XML (AJAX)To retrieve data from a web server, AJAX utilizes a blend of a browser's built-in XMLHttpRequest object and JavaScript and HTML DOM to display or utilize the data. However, newer browsers can use the Fetch API instead of the XMLHttpRequest Object. XML in the name is obsolete and misleading, in fact, any data could be transported: from JSON to HTML.

Around three years ago, intercooler 2.0 (renamed to htmx 1.0) has been released. It was smaller, more expressive, and no longer depended on jQuery.

  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

htmx intend to help web developers to create dynamic, interactive web content without the overhead of complex JavaScript frameworks.

Leveraging HTML attributes allows seamless partial page updates, delivering the power of AJAX, CSS Transitions, WebSockets, and Server-Sent Events.

I would not talk about WebSockets and SSE or try them, though, because:

They have experimental support
If I want WebSockets and SSE, I probably would use Blazor and SignalR

2.1.1. AJAX

The core of htmx is a set of attributes that allow you to issue AJAX requests directly from HTML:

Attribute	Description
`hx-get`	Issues a `GET` request to the given URL
`hx-post`	Issues a `POST` request to the given URL
`hx-put`	Issues a `PUT` request to the given URL
`hx-patch`	Issues a `PATCH` request to the given URL
`hx-delete`	Issues a `DELETE` request to the given URL

Each of these attributes takes a URL to issue an AJAX request to. The element will issue a request of the specified type to the given URL when the element is triggered:

<div hx-put="/messages">
    Put To Messages
</div>

This tells the browser:

When a user clicks on this div, issue a PUT request to the URL /messages and load the response into the div

By default, AJAX requests are triggered by the “natural” event of an element:

input, textarea & select are triggered on the change event
form is triggered on the submit event
everything else is triggered by the click event

The hx-trigger attribute could change this to specify which event will cause the request. Here is a div that posts to /mouse_entered when a mouse enters it:

<div hx-post="/mouse_entered" hx-trigger="mouseenter">
    [Here Mouse, Mouse!]
</div>

2.1.2. CSS Transitions

htmx makes it easy to use CSS Transitions without javascript. Imagine that we need to replace content by htmx via an AJAX request with this new content:

<div id="div1">Original Content</div>
<!-- replaced -->
<div id="div1" class="red">New Content</div>

Note two things:

The div has the same id in the original and the new content
The red class has been added to the new content

Given this situation, we can write a CSS transition from the old state to the new state:

.red {
    color: red;
    transition: all ease-in 1s ;
}

When htmx swaps in this new content, it will do so in such a way that the CSS transition will apply to the new content, giving you a smooth transition to the new state. It happened because we keep its id stable across requests.

2.1.3. The philosophy behind "Hypermedia-Driven Applications"

I would not delve into details here, but it is worth mentioning because it's a pretty interesting concept. They wrote a book on it, read it sometime.

In short, it's all about the central role of HTML (or hypermedia) in driving and representing the state of web applications. Instead of relying heavily on intricate client-side scripting or full-page reloads to reflect changes in application state, this principle endorses the use of hypermedia itself.

The application state evolves fluidly by allowing individual page pieces to update in response to user actions or events, reducing the need for heavy JavaScript while promoting a more resilient and accessible web experience.

We did this with early ASP.NET MVC applications, utilizing jQuery to render partials, and now the proposal is to revert to this method for the sake of simplicity.

2.2. Razor Pages

Razor Pages, introduced in ASP.NET Core 2.0, offer a streamlined alternative to the MVC UI pattern, which Microsoft has supported since 2009.

While MVC promotes separation of concerns, it often creates a sprawling structure of controllers, views, and viewmodels across multiple folders. In contrast, Razor Pages encapsulate the action (referred to as a handler) and the viewmodel (now the PageModel) in a single class, directly tied to a corresponding Razor Page.

All these pages reside in a central Pages folder, following a naming-based routing convention. Handlers, prefixed with HTTP verbs like OnGet, simplify actions, typically returning the associated page by default. This structure enables concise, focused pages, making an application's navigation and updates more intuitive.

Razor Pages overall a vast topic, but I want to point out two essential for the htmx parts of it: handlers and partials

2.2.1. Razor Pages Handlers

Handler methods are the public methods in Razor Pages PageModel and they are automatically executed on a request, implicitly returning a result for the current page.

The Razor Pages framework uses a naming convention to select the appropriate handler method to execute. The default convention works by matching the HTTP method used for the request to the name of the method, which is prefixed with "On": OnGet(), OnPost(), OnPut() or async versions OnPostAsync(), OnGetAsync(), etc.

Handler methods can return void, Task if asynchronous, or an IActionResult (or Task<IActionResult>).

IActionResult: The IActionResult return type is appropriate when multiple ActionResult return types are possible in an action. The ActionResult types represent various HTTP status codes. Any non-abstract class deriving from ActionResult qualifies as a valid return type. Some common return types in this category are BadRequestResult (400), NotFoundResult (404), and OkObjectResult (200).

public class ValidationModel : PageModel
{
    public void OnGet()
    {
    }

    public IActionResult OnPost()
    {
        return Page();
    }
}

Razor Pages include a feature called "named handler methods". This feature enables you to specify multiple methods that can be executed for a single verb.

    public IActionResult OnGetItem()
    {
        return Partial("_ItemPartial");
    }

    public IActionResult OnPostItem()
    {
        return Partial("_ItemPartial");
    }

We could use tag helpers to generate links like /validation?handler=Item , where the handler would be set as a query parameter. There is also an option to generate path links like /validation/Item by setting a page route @page "{handler?}"

Tag Helpers: Tag Helpers in Razor files allow server-side code to create and render HTML elements. They include built-in helpers for common tasks like creating forms, links, and loading assets. Custom Tag Helpers can also be created in C# to target elements by name, attribute, or parent tag.

<!-- Razor code -->
<article>
    <a asp-page="Validation" asp-page-handler="Item">Link</a>
</article>

<!-- HTML code -->
<article>
    <a href="/validation?handler=Item">Link</a>
</article>

Unfortunately, these Tag Helpers exist only for <a> and <form> tags. One of the questions htmx trying to solve is Why should only <a> and <form> be able to make HTTP requests? so we could call handlers from any tag. MVC provides a way to generate a handler with a helper function: @Url.Page("BulkUpdate", "Activate") - would generate /BulkUpdate?handler=Activate .

But in htmx context, handlers usually belong to the same page, so to make it easier, I wrote a simple URL helper method:

public static class UrlHandlerExtensions
{
    public static string Handler(this IUrlHelper urlHelper, string handler, object? values = null)
    {
        // Convert the values object to a dictionary
        var routeValues = new RouteValueDictionary(values)
        {
            ["handler"] = handler // Add the handler to the dictionary
        };

        var url = urlHelper.RouteUrl(new UrlRouteContext
        {
            Values = routeValues
        });

        return url;
    }
}

It could be used with any HTML tag to set the handler URL to a htmx attribute:

<button class="outline" hx-delete="@Url.Handler("Item", new { id = Model.Id })" antiforgery="true">
    Delete
</button>

2.2.2. Razor Pages Partials

Partial Views in Razor Pages contain reusable HTML and code snippets that simplify complex pages by breaking them into smaller units.

Partial Views in ASP.NET MVC were introduced with the initial release of ASP.NET MVC itself. ASP.NET MVC 1.0 was officially released in March 2009, and from that first version, developers could use partial views to encapsulate and reuse parts of their views.

Partial Views are set up as cshtml files that do not take part in routing, so they do not have @page directive. Usually, partials are used to reuse some code on razor pages with the use of partial tag helper.

<partial name="_ItemPartial" model="Model.UserInfo" />

On top of that PageModel provides a set of methods that implement IActionResult , one of them: Partial - would apply the model, render a partial HTML view to the response, and return it as a response body.

Method	Description
`Page()`	Creates a PageResult object that renders the page.
`Partial(String)`	Creates a PartialViewResult by specifying the name of a partial to render.
`Partial(String, Object)`	Creates a PartialViewResult by specifying the name of a partial to render and the model object.

That gives us the ability to define razor partial view

@model Xakpc.RazorHtmx.Data.UserInfoViewModel

<tr>
    <td>@Model.FirstName</td>
    <td>@Model.Email</td>
    <td>
        <button class="outline" hx-get="@Url.Handler("EditItem", new { id = Model.Id })">
            Edit
        </button>
    </td>
</tr>

and return it as generated HTML in a response

    public IActionResult OnGetItem(int id)
    {
        var item = TestData.Users.First(x => x.Id == id);

        return Partial("_TableRow", item);
    }

<tr>
    <td>Krystal</td>
    <td>krystal.heaney@bergnaummetz.us</td>
    <td>
        <button class="outline" hx-get="/edit-row?id=2&amp;handler=EditItem">
            Edit
        </button>
    </td>
</tr>

And we could also re-use the exact partial for the initial page generation

        <tbody hx-target="closest tr" hx-swap="outerHTML">
        @foreach (var userInfo in Model.Users)
        {
            <partial name="_TableRow" model="userInfo"/>
        }
        </tbody>

In my opinion this feature is a single reason why Razor Pages could even work with htmx.

3. Setting the Stage: Prerequisites and Initial Setup

To start, you don't need much - an installed dotnet core SDK and a favorite editor. I use Visual Studio because it's been my default editor since version VS 2013. But VS Code, or VS on Mac, or anything else, is fine. Check official tutorial if you feel stuck.

Run the following command to create a new Razor Pages project:

dotnet new webapp -o RazorHtmx

It would create a default project with Bootstrap and jQuery applied by default. I prefer to use pico.css in my projects, so I have a reduced version (you can check it here), but unfortunately, it's not a template yet.

3.1. Integrating htmx into Razor Pages

To integrate htmx, you should include the js file into _Layout. Choose whatever option you prefer from docs#installing. I downloaded and included htmx.min.js to a head tag of _Layout.cshtml

_Layout.cshtml: Web apps use a common layout for consistency. This includes elements like headers, navigation, and footers. Layout files reduce duplicate code and the default layout for ASP.NET Core is named _Layout.cshtml.

<head>
    <!-- rest of the code -->
    <script src="~/js/htmx.min.js" asp-append-version="true"></script>
</head>

4. Making First htmx Call in Razor

As I mentioned earlier, my aim was to explore each example from the htmx examples page to understand what is possible and how that could be helpful. The first example is click-to-edit, which is my perfect use case.

The click-to-edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.

The example ended with several files

_Partial.cshtml to present record
_Edit.cshtml to present form for editing
ClickToEdit.cshtml to present the page
ClickToEdit.cshtml.cs for PageModel
UserInfoViewModel.cs for model

Let me describe each of them.

UserInfoViewModel.cs

It's a pretty generic model class. Each property has data annotation to render labels in forms.

    public class UserInfoViewModel
    {
        public int Id { get; set; }

        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Display(Name = "Email")]
        public string Email { get; set; }

        [Display(Name = "Status")]
        public string? Status { get; set; }

        public Guid RowId { get; set; } = Guid.Empty;
    }

ClickToEdit.cshtml.cs

PageModel for this page consists of all required handler methods, basic OnGet for initial loading, a couple named GET handlers to show the edit form and view form, and PUT method to update form data.

public class ClickToEditModel : PageModel
{
    public UserInfoViewModel UserInfoViewModel { get; set; }

    public void OnGet()
    {
        UserInfoViewModel = GetUserInfo(1);
    }

    public IActionResult OnGetPartial(int id)
    {
        UserInfoViewModel = GetUserInfo(id);
        return Partial("_Partial", UserInfoViewModel);
    }

    public IActionResult OnGetEdit(int id)
    {
        UserInfoViewModel = GetUserInfo(id);
        return Partial("_Edit", UserInfoViewModel);
    }

    public IActionResult OnPutEdit(UserInfoViewModel userInfoViewModel)
    {
        UserInfoViewModel = userInfoViewModel;
        return Partial("_Partial", UserInfoViewModel);
    }
}

ClickToEdit.cshtml

The page itself is nothing other than a placeholder for partials. Instead of using <partial> tag helper, I'm using Html.PartialAsync helper method, but the outcome would be the same.

@page "/click-to-edit"
@model ClickToEditModel

<article>
    @await Html.PartialAsync("_Partial", Model.UserInfoViewModel)
</article>

Now, about partials. We have two of them - one renders a form, and another renders a view. Note that none of the HTML tags have classes because I use the semantic HTML CSS library pico.css. This approach significantly reduces the size of the partial. Consider the bulk that would be added if you were to use a class loaded with Tailwind CSS attributes.

First, _Partial.cshtml

@model Xakpc.RazorHtmx.Data.UserInfoViewModel

<div hx-target="this" hx-swap="outerHTML">
    <p>
        <strong><label asp-for="@Model.FirstName"></label></strong>
        @Model.FirstName
    </p>
    <p>
        <strong><label asp-for="@Model.LastName"></label></strong>
        @Model.LastName
    </p>
    <p>
        <strong><label asp-for="@Model.Email"></label></strong>
        @Model.Email
    </p>
    <button hx-get="@Url.Page("ClickToEdit", "Edit", new { id = Model.Id })">
        Click To Edit
    </button>
</div>

hx-target="this" makes a div that updates itself when changed. It's also inherited, so it works when placed on the parent element.
hx-swap="outerHTML" instructs to replace the entire target element with the response.
hx-get="@Url.Page("ClickToEdit", "Edit", new { id = Model.Id })" would generate a URL to ClickToEdit.OnGetEdit handler method and would pass id query parameter.

<button hx-get="/click-to-edit?id=1&handler=Edit">
        Click To Edit
</button>

_Edit.cshtml

@model Xakpc.RazorHtmx.Data.UserInfoViewModel

<form hx-put="@Url.Page("ClickToEdit", "Edit")"
      hx-target="this" hx-swap="outerHTML">

    @Html.AntiForgeryToken()
    <input asp-for="Id" type="hidden"/>

    <label asp-for="@Model.FirstName"></label>
    <input asp-for="@Model.FirstName" type="text" required/>

    <label asp-for="@Model.LastName"></label>
    <input asp-for="@Model.LastName" type="text" required/>

    <label asp-for="@Model.Email"></label>
    <input asp-for="@Model.Email" type="email" required/>

    <div class="grid">
        <button>Submit</button>
        <button hx-get="@Url.Page("ClickToEdit", "Partial", new { id = Model.Id })" class="secondary">Cancel</button>
    </div>
</form>

@Html.AntiForgeryToken() will generate a hidden field with an anti-forgery token to prevent CSRF vulnerabilities. More on this later.
hx-put="@Url.Page("ClickToEdit", "Edit")" will perform PUT a request to OnPutEdit handler because updates should be PUT according to RESTful best practices.
hx-target="this" makes a div that updates itself when changed. It's also inherited and works when placed on the parent element.
hx-swap="outerHTML" instructs to replace the entire target element with the response.
hx-get="@Url.Page("ClickToEdit", "Partial", new { id = Model.Id })" will perform GET request to OnGetPartial handler and set query parameter id to model id. This query would return rendered HTML of the record view:

    <div hx-target="this" hx-swap="outerHTML">
        <p>
            <strong><label for="FirstName">First Name</label></strong>
            Kennedy
        </p>
        <p>
            <strong><label for="LastName">Last Name</label></strong>
            Heaney
        </p>
        <p>
            <strong><label for="Email">Email</label></strong>
            kennedy_heaney@botsford.uk
        </p>
        <button hx-get="/click-to-edit?id=1&amp;handler=Edit">
            Click To Edit
        </button>
    </div>

As a result, a fully functional click-to-edit form in Razor Pages and htmx with 100-120 lines of code.

5. Exploring Other htmx Use-Cases

I surely could not even try to describe every feature htmx has. I selected a couple of examples that might be useful references for any web application.

5.1. Progress Bar

The progress bar is a very simple partial, just two lines. Having it as a separate file is almost a crime, but unfortunately, it's how it is.

@model int

<progress id="progress" value="@Model" max="100"></progress>

But I want to show you here is a _ProgresPartial, which hosts a progress bar.

Based on the progress model (is progress done or not), we could alter how this partial is rendered and what hx-trigger value is set. This is a primary function of Razor markup syntax.

Therefore, we could decide on the application's state and what should be returned as a view on the backend, which is very convenient.

@model Progress

<div hx-trigger="done" hx-get="@Url.Handler("Progress")" hx-swap="outerHTML" hx-target="this">
    @if (Model.Done)
    {
        <h3 role="status" tabindex="-1" autofocus>Complete</h3>
    }
    else
    {
        <h3 role="status" tabindex="-1" autofocus>Running</h3>
    }

    <div
        hx-get="@Url.Handler("Progress")"
        hx-trigger="@(Model.Done ? "none" : "every 600ms")"
        hx-target="this"
        hx-swap="innerHTML">
        <partial name="_ProgressBarPartial" model="@Model.Value"/>
    </div>

    @if (Model.Done)
    {
        <button hx-post="@Url.Handler("Start")" antiforgery="true" classes="add show:600ms">
            Restart Job
        </button>
    }
</div>

5.2. Table Scroll, Edit, Delete

Building interactive tables is a common task of any web application. With the help of htmx, we could easily expand a static table with scroll loading in place of edit and deletion.

I implemented several tests related to tables:

Infinite Scroll
Table Row Edit
Table Row Delete

For infinite scroll, we have a partial in the tbody

        <tbody id="tbody">
            @await Html.PartialAsync("_TableBody", Model.UsersTable)
        </tbody>

The partial would draw table rows, and the last row would add hx-get attribute with revelaed trigger.

@foreach (var userInfo in Model.Users)
{
    @if (userInfo == Model.Users.Last())
    {
        <tr hx-get="@Url.Page("InfiniteScroll", "Page", new { page = Model.Page + 1 })"
            hx-trigger="revealed"
            hx-swap="afterend"
            hx-indicator="#ind">
            <td>@userInfo.FirstName @userInfo.LastName</td>
            <td>@userInfo.Email</td>
            <td>@userInfo.RowId.ToString("N").ToUpperInvariant()</td>
        </tr>
    }
    else
    {
        <tr>
            <td>@userInfo.FirstName @userInfo.LastName</td>
            <td>@userInfo.Email</td>
            <td>@userInfo.RowId.ToString("N").ToUpperInvariant()</td>
        </tr>
    }
}

The handler method load and render the next page of rows. There is also Task.Delay to simulate some loading.

    public async Task<IActionResult> OnGetPageAsync(int page)
    {
        await Task.Delay(1000);

        var data = TestData.Users.GetRange(page * PageSize, PageSize);

        return Partial("_TableBody", data);
    }

Here is how it works:

For table editing, I have two partials, for presenting and for editing, which are swapped on the button click.

<tr>
    <td>@Model.FirstName</td>
    <td>@Model.Email</td>
    <td>
        <button class="outline" hx-get="@Url.Handler("EditItem", new { id = Model.Id })">
            Edit
        </button>
    </td>
</tr>

<tr>
    <td>
        <input type="text" asp-for="@Model.FirstName"/>
    </td>
    <td>
        <input type="email" asp-for="@Model.Email"/>
    </td>
    <td>
        <button hx-get="@Url.Handler("Item", new { id = Model.Id })" class="secondary" style="margin-bottom: 6px;">
            Cancel
        </button>
        <button hx-put="@Url.Handler("Item", new { id = Model.Id })" hx-include="closest tr" antiforgery="true">
            Save
        </button>
    </td>
</tr>

Handlers for this page are straightforward: get item, get item form, update (put) item

    public IActionResult OnGetItem(int id)
    {
        var item = TestData.Users.First(x => x.Id == id);

        return Partial("_TableRow", item);
    }

    public IActionResult OnGetEditItem(int id)
    {
        var item = TestData.Users.First(x => x.Id == id);

        return Partial("_TableRowForm", item);
    }

    public IActionResult OnPutItem(UserInfoViewModel user)
    {
        var item = TestData.Users.First(x => x.Id == user.Id);
        item.FirstName = user.FirstName;
        item.Email = user.Email;

        return Partial("_TableRow", item);
    }

And now we can easily update table rows

Delete Row has a similar table row partial, but with hx-delete handler, because REST.

<tr>
    <td>@Model.FirstName @Model.LastName</td>
    <td>@Model.Email</td>
    <td>@Model.Status</td>
    <td>
        <button class="outline" hx-delete="@Url.Handler("Item", new { id = Model.Id })" antiforgery="true">
            Delete
        </button>
    </td>
</tr>

On the delete call, the handler would return 200 OK with an empty body instructing htmx to remove the row. We also use hx-confirm tag to confirm deletion

        <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
        @foreach (var userInfo in Model.Users)
        {
            @await Html.PartialAsync("_TableRow", userInfo)
        }
        </tbody>

There is also some transition animation

Let's look at a couple of practical scenarios where htmx and Razor Pages integration shines.

5.3. Dialogs and tabs

A full code listing of how HTML5 dialogs could be created with htmx and Razor Pages. In this example, I used some JavaScript to show and hide the dialog.

At the same time, when dialog is shown, htmx would issue a get request to get data from the page handler and set the result as dialog content.

Actual dialog content would be generated on the backend from Razor partial.

<!-- DialogsHtml.cshtml --> 
@page "/dialogs-html"
@model DialogsHtmlModel

<!-- The Dialog -->
<dialog id="myDialog">
    <article id="dialogContent">
    </article>
</dialog>

<article>
    <!-- Trigger buttons -->
    <button data-target="myDialog"
            hx-get="@Url.Handler("Modal")"
            hx-target="#dialogContent"
            hx-trigger="click"
            onClick="showDialog()">
        Show Dialog
    </button>
</article>

@section Scripts
{
    <script>
        function showDialog() {
            const dialog = document.getElementById('myDialog');
            dialog.showModal(); // Opens the dialog
        }

        function closeDialog() {
            const dialog = document.getElementById('myDialog');
            dialog.close(); // Closes the dialog
        }
    </script>

}

<!-- DialogsHtml.cshtml.cs --> 
public class DialogsHtmlModel : PageModel
{
    public void OnGet()
    {
    }

    public IActionResult OnGetModal()
    {
        return Partial("_ModalPartial", ("Model Content Header", """
                Nunc nec ligula a tortor sollicitudin dictum in vel enim.
                Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
                Sed eleifend a dui nec ullamcorper.
                Praesent vehicula lacus ac justo accumsan ullamcorper.
                """));
    }
}

<!-- _ModalPartial.cshtml -->
@model (string Header, string Text)

<header>
    <a href="#close" aria-label="Close" class="close" onclick="closeDialog(); return false;"></a>
    @Model.Header
</header>
<div>
    <p>
        @Model.Text
    </p>
</div>

A full code listing of how tabs could be created with htmx and Razor Pages. Here, I have tabs div, which is replaced with tab partial.

The interesting part is a load trigger, which is fired on page load to get the initial tab. That could be done through a razor like I did previously, as well.

<!-- Tabs.chtmls -->
@page "/tabs-hateoas"
@model TabsModel

<div id="tabs"
     hx-get="@Url.Handler("Tab1")"
     hx-trigger="load delay:100ms"
     hx-target="#tabs"
     hx-swap="innerHTML">
</div>

<!-- Tabs.chtmls.cs -->
public class TabsModel : PageModel
{
    public void OnGet()
    {
    }

    public IActionResult OnGetTab1()
    {
        return Partial("_Tab1Partial");
    }

    public IActionResult OnGetTab2()
    {
        return Partial("_Tab2Partial");
    }

    public IActionResult OnGetTab3()
    {
        return Partial("_Tab3Partial");
    }
}

<!-- _Tab1Partial.cshtml -->
<div class="grid">
    <button hx-get="@Url.Handler("Tab1")">Tab 1</button>
    <button hx-get="@Url.Handler("Tab2")" class="outline">Tab 2</button>
    <button hx-get="@Url.Handler("Tab3")" class="outline">Tab 3</button>
</div>

<article>
    <div>
        some text...
    </div>
</article>

<!-- _Tab2Partial.cshtml -->
<div class="grid" role="tablist">
    <button hx-get="@Url.Handler("Tab1")" class="outline">Tab 1</button>
    <button hx-get="@Url.Handler("Tab2")">Tab 2</button>
    <button hx-get="@Url.Handler("Tab3")" class="outline">Tab 3</button>
</div>

<article>
    <div>
        some text 2...
    </div>
</article>

<!-- _Tab3Partial.cshtml -->
<div class="grid" role="tablist">
    <button hx-get="@Url.Handler("Tab1")" class="outline">Tab 1</button>
    <button hx-get="@Url.Handler("Tab2")" class="outline">Tab 2</button>
    <button hx-get="@Url.Handler("Tab3")">Tab 3</button>
</div>

<article>
    <div>
        some text 3...
    </div>
</article>

Tabs, in my case, are buttons, but it still looks good

5.4. Live search feature on a Razor Page

Here we use keyup trigger to send a search query to OnPostSearch handler, which would render partial based on search results.

<!-- ActiveSearch.cshtml -->
@page "/active-search"
@model ActiveSearchModel

<article>
    <h3>
        Search Contacts
        <span class="htmx-indicator" aria-busy="true">Searching...</span>
    </h3>

    <input type="search" name="search"
           placeholder="Begin Typing To Search Users..."
           hx-post="@Url.Handler("Search")"
           hx-trigger="keyup changed delay:500ms, search"
           hx-target="#search-results"
           hx-indicator=".htmx-indicator"
           antiforgery="true"/>

    <table class="table">
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
        </thead>
        <tbody id="search-results">
        </tbody>
    </table>
</article>

<!-- ActiveSearch.cshtml.cs -->
public class ActiveSearchModel : PageModel
{
    public void OnGet()
    {
    }

    public IActionResult OnPostSearch(string search)
    {
        if (search == null || string.IsNullOrEmpty(search))
        {
            return Partial("_TableBody", new List<UserInfoViewModel>());
        }

        var users = TestData.Users.Where(u => u.Email.Contains(search.ToLowerInvariant())).ToList();

        if (users.Any())
        {
            return Partial("_TableBody", users);
        }

        return Partial("_TableBody", TestData.Users.Take(7).ToList());
    }
}

<!-- _TableBody.cshtml -->
@model List<Xakpc.RazorHtmx.Data.UserInfoViewModel>

@foreach (var userInfo in Model)
{
    <tr>
        <td>@userInfo.FirstName</td>
        <td>@userInfo.LastName</td>
        <td>@userInfo.Email</td>
    </tr>
}

Here is how it works

5.5 Animations

While my primary focus wasn't on aesthetics during testing, it's worth noting that it could be done. htmx supports CSS transitions so we could apply some cool animations to our partials.

@page "/animations"
@model AnimationsModel

<article>
    <h2>Using the View Transition API</h2>
    <div class="slide-it">
        <partial name="_SwapContentPartial", model="@("Initial Content", "Swap It")"/>
    </div>
</article>

@section Styles
{
  <style>
   @@keyframes fade-in {
     from { opacity: 0; }
   }

   @@keyframes fade-out {
     to { opacity: 0; }
   }

   @@keyframes slide-from-right {
     from { transform: translateX(90px); }
   }

   @@keyframes slide-to-left {
     to { transform: translateX(-90px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
   ::view-transition-new(slide-it) {
     animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }
</style>
}

In partial, we instruct htmx to use transition.

@model (string Title, string Button)

<h6>@Model.Title</h6>
<button hx-get="@Url.Handler("NewContent")" hx-swap="innerHTML transition:true" hx-target="closest div">
    @Model.Button
</button>

This gives us nice animation.

6. Benefits of the Integration

Simplicity, simplicity, simplicity.

I am a huge advocate of simplicity. I work with highly complex systems in my daily job, where dozens of microservices process gigabytes of data 24/7.

Probably, that's why I wouldn't say I like to overcomplicate anything. And like Razor Pages was invented to simplify MVC web development, pico.css was invented to simplify web design, so as far as I see, htmx could be the tool to simplify interactivity.

But these are all personal preferences. Let's evaluate what actual benefits Razor Pages together with htmx might produce.

6.1. Speed and Efficiency: Faster page loads and enhanced user experience.

htmx allows for seamless partial page updates, meaning web pages can reflect real-time data changes without requiring a complete page refresh. This leads to a more interactive and immersive user experience, particularly beneficial for applications where up-to-the-minute data display is crucial, like dashboards or monitoring systems.

Due to the lightweight nature of htmx, only necessary data is transferred between client and server. This minimizes the bandwidth usage and server processing power required for each user interaction, making it possible to serve more users without a proportional resource increase.

6.2. Maintainability: Separation of concerns with Razor's code-behind model and htmx's lightweight nature.

Razor Pages is MPA (Multi-Page Application) framework. It is designed for creating web applications where each user interaction or action corresponds to a different web page loaded from the server.

Historically, dotnet developers relied on JavaScript and jQuery to add interactivity. I believe there was never a "best-way" of how to organize JavaScript: there was a custom colocation option cshtml.js, section @Scripts , setup grunt and npm aside dotnet project, but most of the time, js was simply dumped into wwwroot folder.

htmx takes razor page concept of self-contained Page with its associated logic, data model, and view and adds interactivity there but keeps it clean and maintainable.

6.3. Simplified Development Workflow

By merging Razor Pages and htmx, developers can enjoy a more streamlined development process. The inherent structure of Razor Pages, which emphasizes a clear delineation between view and logic, combined with the straightforward integration of htmx, reduces the learning curve for new team members.

This synergy minimizes the need for extensive reliance on JavaScript for dynamic content, which can often introduce complexities. As a result, development teams can bring features to market faster and address bugs or changes with greater agility.

7. Potential Challenges and Solutions

While the benefits of this integration are numerous, like all technologies, it comes with its set of challenges.

7.1. Antiforgery Token

Running the code below to update data will result in the error: Response Status Error Code 400 from /click-to-edit?handler=Edit

<form hx-put="@Url.Page("ClickToEdit", "Edit")" 
        hx-target="this" 
        hx-swap="outerHTML"> 
   <!-- form body -->
</form>

This is because any POST or PUT request to the razor page requires AntiforgeryToken to prevent CSRF attacks.

Cross-Site Request Forgery (CSRF) is an attack where a malicious entity tricks a user's browser into performing undesired actions on a trusted site where the user is authenticated. This is possible because browsers automatically include cookies, including session cookies, with requests.

To counteract this, many sites employ CSRF tokens, generated server-side. These tokens, which can be created per session or request, ensure that every action taken on a site is genuinely intended by the authenticated user.

The server validates the token with every request; if they don't match, the request is denied, potentially flagging it as a CSRF attempt.

Antiforgery Token check could be disabled by applying [IgnoreAntiforgeryToken(Order = 1001)] attribute on the page model, but that is a security risk.

You could manually expand forms and add anti-forgery token with a helper method @Html.AntiForgeryToken(). This would provide tokens as a hidden field and include it into form data.

Tokens also could be provided as a header. It is considered a more secure option, and we could add a header to our htmx request using hx-headers attribute.

<form hx-put="@Url.Page("ClickToEdit", "Edit")" 
    hx-headers='{"RequestVerificationToken": "@Model.AntiforgeryToken"}'
    hx-target="this" hx-swap="outerHTML" >

For forms, it is better to use the helper method. But to add tokens to other HTML elements, such as <button> or <input> I created a helper tag class. It would generate hx-headers tag and set token value when I add an attribute antiforgery="true" to element.

[HtmlTargetElement("input", Attributes = AntiForgeryAttributeName)]
[HtmlTargetElement("button", Attributes = AntiForgeryAttributeName)]
public class AntiForgeryHeaderTagHelper : TagHelper
{
    [HtmlAttributeNotBound]
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    [HtmlAttributeName(AntiForgeryAttributeName)]
    public bool AntiForgery { get; set; }

    private const string AntiForgeryAttributeName = "antiforgery";
    private readonly IAntiforgery _antiforgery;

    public AntiForgeryHeaderTagHelper(IAntiforgery antiforgery)
    {
        _antiforgery = antiforgery;
    }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (AntiForgery)
        {
            var token = _antiforgery.GetAndStoreTokens(ViewContext.HttpContext).RequestToken;
            var currentHeaderValue = output.Attributes["hx-headers"]?.Value.ToString();
            var newHeaderValue = $"\"RequestVerificationToken\": \"{token}\"";

            if (string.IsNullOrEmpty(currentHeaderValue))
            {
                output.Attributes.SetAttribute("hx-headers", newHeaderValue);
            }
            else
            {
                // Append the anti-forgery token to existing hx-headers
                newHeaderValue = $"{currentHeaderValue}, {newHeaderValue}";
                output.Attributes.SetAttribute("hx-headers", newHeaderValue);
            }
        }
    }
}

7.2. Validation

MVC and DataAttributes provide a lot of helpers to generate validation. Unfortunately, most of it is designed for jquery.validate.js and jquery.validate.unobtrusive.js.

On the other hand, htmx is designed to utilize HTML5 validation.

Of course, we could disable client-side validation and write everything by hand, but that sounds annoying.

services.AddRazorPages()
    .AddViewOptions(options =>
    {
        options.HtmlHelperOptions.ClientValidationEnabled = false;
    });

At the moment I didn't found a good solution for that. I could see a several options here:

Link together HTML 5 and MVC-generated validation, by writing custom js code
Link together MVC-generated validation and htmx, but keep using jquery.validate

If you know a solution to that problem, feel free to ping me.

8. Conclusion

To sum it up, I tried different use cases of htmx and dotnet Razor Pages during my tests. In this article, I presented the history of htmx and Razor Pages, and show you how they can be integrated seamlessly.

I was impressed by how a technology from 2009, partials, integrates so well with htmx. It also fits well with Razor Pages and pico.css, which I often use for side projects. I only have positive impressions here:

It works with razor and MVC partials perfectly
It's a good fit with semantic HTML CSS libraries
It's two times smaller than jQuery
It's straightforward to use

Regarding the negative aspects

There is no IntelliSense support of htmx tags in Visual Studio yet (there is for Visual Studio Code)
Need to figure out validation to reuse all that helpers Razor Pages provides
Some kind of fragments would be nice
htmx might not be accepted by enterprises where dotnet is most used

That would be all. Once again, the source code of my tests is available on github, the demo project deployed on Azure, and if you have any questions, feel free to ping me on Twitter, sorry, on 𝕏.

9. Further Reading/References

In the future, I might explore some more advanced scenarios, like validation, boosting, history, and maybe even touch hyperscript (but I doubt that; it does not bring me joy at first glance).

Some useful resources

How to create Sitemap.xml for ASP.net Core Razor Pages

Pavel Osadchuk — Wed, 16 Aug 2023 17:16:34 +0000

Recently I wanted to create a sitemap for my Razor Page web application. Adding a sitemap to a website is a relatively straightforward process, but I found out that many examples over the web are a bit outdated. So I decided to document how I added it.

The following information is related to Microsoft.AspNetCore.App version 7.0.7.

In general, creating a sitemap.xml for web applications can significantly enhance their search engine visibility. A sitemap provides a roadmap for search engine bots, enabling them to index your website content more efficiently.

Step 1: Understand the Structure of `sitemap.xml`

A sitemap XML file lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it changes, and its importance relative to other URLs).

Here is a very basic XML sitemap that includes the location of a single URL:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://www.example.com/foo.html</loc>
        <lastmod>2022-06-04</lastmod>
    </url>
</urlset>

There are more parameters defined in the protocol specification, but Google claims to ignore them, so I think they could be omitted:

Google ignores <priority> and <changefreq> values.

Google uses the <lastmod> value if it's consistently and verifiably (for example by comparing to the last modification of the page) accurate.

Step 2: Create a Model for the Sitemap

First, I created a model for the sitemap node. This model will represent individual URLs, their priority, and other metadata.

    public class SitemapNode
    {
        public SitemapFrequency? Frequency { get; set; }
        public DateTime? LastModified { get; set; }
        public double? Priority { get; set; }
        public string Url { get; set; }
    }

    public enum SitemapFrequency
    {
        Never,
        Yearly,
        Monthly,
        Weekly,
        Daily,
        Hourly,
        Always
    }

There is another approach if I wanted to use serialization, which would look a bit clearer, but it takes twice as many lines of code, so I skipped it.

[XmlRoot("urlset", Namespace = "http://www.sitemaps.org/schemas/sitemap/0.9")]
public class SitemapUrlSet
{
    [XmlElement("url")]
    public List<SitemapNode> SitemapNodes { get; set; } = new List<SitemapNode>();
}

public class SitemapNode
{
    [XmlElement("loc")]
    public string Url { get; set; }

    [XmlElement("lastmod")]
    public DateTime? LastModified { get; set; }

    [XmlElement("changefreq")]
    public SitemapFrequency? Frequency { get; set; }

    [XmlElement("priority")]
    public double? Priority { get; set; }
}

public enum SitemapFrequency
{
    [XmlEnum("never")]
    Never,

    [XmlEnum("yearly")]
    Yearly,

    [XmlEnum("monthly")]
    Monthly,

    [XmlEnum("weekly")]
    Weekly,

    [XmlEnum("daily")]
    Daily,

    [XmlEnum("hourly")]
    Hourly,

    [XmlEnum("always")]
    Always
}

Step 3: Setting Up the Method to Generate Sitemap Nodes

I needed a service or method that will generate the sitemap nodes based on my website's content. To generate URLs for Razor Pages, you typically could use PageLink or LinkGenerator. I used the last one:

    public class SitemapModel : PageModel
    {
        private readonly LinkGenerator _linkGenerator;

        public SitemapModel(LinkGenerator linkGenerator)
        {
            _linkGenerator = linkGenerator;
        }

        // ... rest of the code
    }

Creating a sitemap for static pages is easier by hardcoding them. Blog pages or other dynamic content are taken from a database or file system (in my case) based on where they are stored.

Method GetUriByPage from provides an absolute URL based on page name - handy.

    public class SitemapModel : PageModel
    {   
        // ... rest of the code   
        public IReadOnlyCollection<SitemapNode> GetSitemapNodes()
        {
            var nodes = new List<SitemapNode>
            {
                new()
                {
                    Url = _linkGenerator.GetUriByPage(HttpContext, "/Index"),
                    Priority = 1,
                },
                new()
                {
                    Url = _linkGenerator.GetUriByPage(HttpContext, "/Tools/CreateCode"),
                    Priority = 0.9
                },
                new()
                {
                    Url = _linkGenerator.GetUriByPage(HttpContext, "/Legal/Privacy"),
                    Priority = 0.6
                },
                new()
                {
                    Url = _linkGenerator.GetUriByPage(HttpContext, "/Legal/TermsOfService"),
                    Priority = 0.6
                }
            };

            foreach(...)
            {
                // fill nodes from blog index
            }

            return nodes;
        }
    }

Step 4: Creating the Sitemap Page

Then I added a new Razor Page Sitemap.cshtml that will be responsible for generating the sitemap.xml. When users or search engine bots access this page, it should return the sitemap in XML format. This is an elegant trick: we return the razor page Sitemap.cshtml as an XML file.

@page
@model Xakpc.Project.Pages.SitemapModel
@{
    Layout = null;
    Response.ContentType = "text/xml";
}
<?xml version="1.0" encoding="UTF-8" ?>
@Html.Raw(Model.RawXmlData)

Another required step is to set up the app to return this file by /sitemap.xml path. It is done in options of AddRazorPages method like this:

builder.Services.AddRazorPages()
    .AddRazorPagesOptions(options =>
{
    options.Conventions.AddPageRoute("/sitemap", "Sitemap.xml");    
});

Step 5: Formatting the XML

On the sitemap Razor Page model, I formatted the sitemap nodes into XML format. For that, I manually built XML file with XElements

    public class SitemapModel : PageModel
    {   
        // ... rest of the code  

        /// <summary>
        /// Serializes to raw XML
        /// </summary>
        public string GetSitemapDocument(IEnumerable<SitemapNode> sitemapNodes)
        {
            XNamespace xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9";
            var root = new XElement(xmlns + "urlset");

            foreach (var sitemapNode in sitemapNodes)
            {
                var urlElement = new XElement(
                    xmlns + "url",
                    new XElement(xmlns + "loc", Uri.EscapeUriString(sitemapNode.Url)),
                    sitemapNode.LastModified == null ? null : new XElement(
                        xmlns + "lastmod",
                        sitemapNode.LastModified.Value.ToLocalTime().ToString("yyyy-MM-ddTHH:mm:sszzz")),
                    sitemapNode.Frequency == null ? null : new XElement(
                        xmlns + "changefreq",
                        sitemapNode.Frequency.Value.ToString().ToLowerInvariant()),
                    sitemapNode.Priority == null ? null : new XElement(
                        xmlns + "priority",
                        sitemapNode.Priority.Value.ToString("F1", CultureInfo.InvariantCulture)));
                root.Add(urlElement);
            }

            var document = new XDocument(root);
            return document.ToString();
        }
    }

The other option is to use serialization (if you map classes with attributes - I skipped that part)

public string GetSitemapDocument(IEnumerable<SitemapNode> sitemapNodes)
{
    var sitemapUrlSet = new SitemapUrlSet { SitemapNodes = sitemapNodes.ToList() };

    var xmlSerializer = new XmlSerializer(typeof(SitemapUrlSet));

    using var stringWriter = new StringWriterUtf8();
    using var xmlTextWriter = XmlWriter.Create(stringWriter, new XmlWriterSettings { Indent = true });

    xmlSerializer.Serialize(xmlTextWriter, sitemapUrlSet);

    return stringWriter.ToString();
}

And all that is left is to call methods in OnGet method and set bound property

    public class SitemapModel : PageModel
    {   
        // ... rest of the code  

        /// <summary>
        /// Gets the raw XML data
        /// </summary>
        [BindProperty(SupportsGet = true)]
        public string RawXmlData { get; set; }

        public void OnGet()
        {
            var nodes = GetSitemapNodes();
            RawXmlData = GetSitemapDocument(nodes);
        }
    }

Step 6: Register the Sitemap with Search Engines

After the sitemap is successfully set up, it's a good idea to register it with major search engines like Google and Bing. This will ensure that they know your sitemap's existence and can crawl your website more effectively.

Google: Use Google Search Console to submit your sitemap.
Bing: Use Bing Webmaster Tools to submit your sitemap.

Conclusion

Final Sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://contoso.com/</loc>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://contoso.com/make-code</loc>
        <priority>0.9</priority>
    </url>
    <url>
        <loc>https://contoso.com/legal/privacy</loc>
        <priority>0.6</priority>
    </url>
    <url>
        <loc>https://contoso.com/legal/termsofservice</loc>
        <priority>0.6</priority>
    </url>
    ...
</urlset>

As you can see, setting up a sitemap.xml in a Razor Pages application is straightforward. Following the steps above and adding the appropriate code ensures your website is more visible and accessible to search engines.

Write and Read Google Spreadsheet from Telegram bot with Google Cloud Functions

Pavel Osadchuk — Fri, 19 Feb 2021 22:31:16 +0000

Recently I faced a request

I'm tracking the number of days off each person in my company in google sheets, where I manually add/subtract their remaining days off. Can a telegram bot show them how many days off they have left once they search for their names?

The answer is yes, and here is how to do that with Google Cloud Functions and API.chat chatbot platform in under 100 lines of code.

Setup Google Functions

First, you need to set up cloud functions and give them access to our document.

Overall you will need two functions: gsheet-get to provide answers and gsheet-add to register users. Let's create them.

We do not care about the function code yet. When you set up the first function GCloud will probably ask you to enable Billing and, most importantly, will create a Service account - App Engine default service account. Usage of this account will allow you to perform server to server, app-level authentication later.

But you do need to give access rights to our document to this account.

The document itself is quite simple

Function `google-sheet-add`

This function will store the user channel (telegram in the case), chat id, and a name to your table. Google Functions support different languages, including .net core 3.1, but I found out that node.js gives more compact code, so let's stick to it, and sorry for dotnetish code-style

const { google } = require('googleapis');

exports.main = async (req, res) => {
  let auth = await google.auth.getClient({ scopes: ['https://www.googleapis.com/auth/spreadsheets'] });  
  let sheets = google.sheets({ version: 'v4', auth });
  try
  {
    await sheets.spreadsheets.values.append({
      spreadsheetId: "INSERT-SHEET-ID-HERE",
      range: "Days!A:C",
      valueInputOption: "RAW",
      insertDataOption: "INSERT_ROWS",
      resource: {
        values: [
          [req.query.channel, req.query.id, req.query.name]
        ],
      },
      auth: auth
    });    
    res.status(200).send();
  }
  catch (err)
  {
    res.status(500).send({ err })
  }
};

The code here will append provided values as a new row to the Days sheet. API.chat will provide user data such as channel, chat id, and the name of the user.

Don't forget to add googleapis dependency into package.json

{
  "dependencies": {
    "googleapis": "^42"
  }
}

The main need for this function is to match actual people with their telegram account. There could be more sophisticated ways to do this, but for now this simple way: ask user name - is enough.

That will give you all the required information about the user and you could start calculating his day-offs.

Function `google-sheet-get`

The second function is for getting data from Google Spreadsheet.

const { google } = require('googleapis');

exports.main = async (req, res) => {
  const chatId = req.query.id;
  const auth = await google.auth.getClient({ scopes: ['https://www.googleapis.com/auth/spreadsheets'] });  
  const sheets = google.sheets({ version: 'v4', auth });
  try 
  {
    let sheet = await sheets.spreadsheets.values.get({
      spreadsheetId: 'INSERT-SHEET-ID-HERE',
      range: 'Days!A:D'
    });

    const rows = sheet.data.values;
    if (rows.length) {
      let finded = rows.find(el => el[1] === chatId)      
      if (finded === undefined) {     
        res.status(200).send({ CorrelationId: req.query.request, Messages: [ "Information not availible" ] });
      } else {      
        res.status(200).send({ CorrelationId: req.query.request, Messages: [ `You have ${finded[3]} days off` ] });
      }
    } else {
      console.warn('No data found.');
      res.status(200).send({ CorrelationId: req.query.request, Messages: [ "No data found" ] });
    }
    res.status(200).send();
  }
  catch  (err)
  {
    console.error('The API returned an error: ' + err)
    res.status(500).send({ err })
  }
};

The main thing I found out here is that google.sheets API filter does not allow you to filter on actual data - only on metadata. That's why you need to get the entire sheet and filter it in code. Like I said before, API.chat will provide your endpoint with chat-id for filtering. From there you can return a formatted string with the answer like that

{
  "Messages": [
    "You have 7 days off"
  ]
}

Chatbot Scenario

Now when you have all endpoints in place and working you can create an actual chatbot. I will use my very own chatbot builder API.chat. A scenario might be very simple, like that

<bot>
  <states>
    <state name="Start">
      <transition input="register" next="Registration">Please enter your name</transition>
      <transition input="*" next="Start" pending_keyboard="Register Me">Hello. Please Register first</transition>      
    </state>
    <state name="Registration">      
      <transition input="*" next="Registered" morphology="msg" action="https://us-central1-REDACTED.cloudfunctions.net/gsheet-add?name={msg}" no_stop="true">Welcome!</transition>
    </state>
    <state name="Registered">
      <transition input="days" next="Registered" action="https://us-central1-REDACTED.net/gsheet-get" pending_keyboard="Days Off"/>
      <transition input="*" next="Registered" pending_keyboard="Days Off">Press the button to get your Days off</transition>
    </state>
  </states>
</bot>

What we do here is register the user, asking his or her name, and pass it into gsheet-add action in query. After registration user stays in the Registered state forever with the ability to request their days-off through gsheet-get action at any time.

All that's left is to PUT this scenario to the chatbot scenario endpoint and our bot is ready to deliver.

curl -v -X PUT "https://bot.api.chat/v1/bots/botName/scenario"
-H "Content-Type: application/xml"
-H "Cache-Control: no-cache"
-H "Ocp-Apim-Subscription-Key: REDACTED"
--data-raw '<bot>
  <states>
    <state name="Start">
      <transition input="register" next="Registration">Please enter your name</transition>
      <transition input="*" next="Start" pending_keyboard="Register Me">Hello. Please Register first</transition>      
    </state>
    <state name="Registration">      
      <transition input="*" next="Registered" morphology="msg" action="https://us-central1-REDACTED.cloudfunctions.net/gsheet-add?name={msg}" no_stop="true">Welcome!</transition>
    </state>
    <state name="Registered">
      <transition input="days" next="Registered" action="https://us-central1-REDACTED.cloudfunctions.net/gsheet-get" pending_keyboard="Days Off"/>
      <transition input="*" next="Registered" pending_keyboard="Days Off">Press the button to get your Days off</transition>
    </state>
  </states>
</bot>'

Out tiny chatbot is ready

Let's count code lines

google-sheet-add: 25
google-sheet-get: 30
scenario: 15
overall: 70 lines of code

Not bad

My jeans tear down today due to extensive SITTING, what should I replace them with?

Pavel Osadchuk — Mon, 14 Dec 2020 13:07:46 +0000

Hello, dev. I have a genuine question, but let me share a little background first. My nice pair of jeans was torn down today in the crotch area due to extensive sitting I presume. While I probably can fix it in the shop or replace it, I rather move to something more robust, because this was not the first pair that was torn down that way.

And the question is: what pants should I buy next? Which one combines practicality, robustness, comfort, and fit the best lifestyle of a developer (who mostly sits)?

P.S. The only option out of choice is sweatpants, they are home wear, and for me, it's critical to separate work and home wear to have at least some stability during the day.

Bootstrap+Blazor essentials

Pavel Osadchuk — Tue, 13 Oct 2020 15:09:24 +0000

When you start a new Blazor project it will quickstart you with a default Bootstrap template. But when you spent several weeks or months on the project you starting to notice that there is a lot of duplicate HTML code that can be refactored and moved into components.

In this post, I want to give you some advice on how and which Bootstrap components you can wrap into .razor components to make your code simpler, easier to maintain, and expandable.

xakpc / Xakpc.BlazorBits.Bootstrap

Sample project for https://dev.to/xakpc/ article

All these components are alterations of what I use every day in my projects. Why not share the same? In real projects, there is usually some CSS template used that could alter the component significantly.

These examples use clean Bootstrap and can be the foundation that could be altered for your CSS template. That's why I usually just copy-paste them across projects and tune to fit the current CSS template, instead of moving them to separate NuGet package;

Bootstrap has more than 20 components, but for this article, I keep only the ones that used very often and make a great example for you where to go from hereby.

Button
Button Group
Card
Progress
Spinner
Toast
Modals

Next time - Form and Form Components in Blazor with MVVM

Button

The most basic component is a button. Because I use MVVM my button is based on the ICommand interface

When you add action to button's ICommand AddCommand = new Command<int>(DoAdd); take notice of the action

private void DoAdd(int p)
{
    Value += p;
    StateHasChanged(); // <--- not gonna work without it
}

I found out that onaction will re-render only the component it belongs to. Even if actual action changes something from another (parent) component. But when you use ViewModel there is no need in StateHasChanged call here because the View should be subscribed to INotifyPropertyChanged anyway.

Button Group

Button group wraps several command buttons in a single neat component. I usually use it for data table editing

The component is rather simple, you can use icons instead of text for a better look, but the main thing that it nicely fits Blazor way of building tables.
You could pass commands and current item to ViewModel for processing. If you have a lot of tables in your app that saves tons of space also, you get consistency across tables and can easily adapt styles in the future.

<tbody>
    @foreach (var item in Items)
    {
        <tr>
            <td>@item</td>
            <td><RowButtonGroup 
                    EditCommand="EditItemCommand" 
                    DeleteCommand="DeleteItemCommand" 
                    Parameter="item"/></td>
        </tr>
    }
</tbody>

Card

For me, the card is the primary component of any web app. This component wrap most of the basic HTML card into several optional RenderFragments. You can expand it further to add an optional card-image or list-group block.

I noticed that some folks missing the fact that you can use several RenderFragment inside your component. Well, you can and it allows you to use your components like that

<Card Title="Special title treatment">
    <Body>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </Body>
    <Footer>
        2 days ago
    </Footer>
</Card>

Please note

[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> InputAttributes { get; set; } 
    = new Dictionary<string, object>();

This parameter is used on card to catch-all unmatched attributes that you want to assign to it <div class="card @Class" @attributes="InputAttributes">. It's usually a good practice to include such catch-all property to every custom component. Saves some time on unmatched exceptions later. But be aware where you put it, for some components, it might be wise to apply attributes to the child or not apply it at all.

Progress Bar

Small component but I want to show it here as an example of the power of Blazor components and proper MVVM usage.

Progress Bar with MVVM Example

Let's dig into the example of usage of ProgressBar with backing it ViewModel.

View

<h2 class="mt-3">Interactive (with VM)</h2>
<ProgressBar Progress="@DataContext.Progress" Class="mt-2 mb-2">@((DataContext.Progress/100f).ToString("P0"))</ProgressBar>
<CommandButton class="btn-primary" Command="@DataContext.Add">+</CommandButton>
<CommandButton class="btn-secondary" Command="@DataContext.Subtract">-</CommandButton>

As you can see View is quite simple: we have progress which is transformed like that @((DataContext.Progress/100f).ToString("P0")) for display only and couple buttons with commands Add and Subtract.
These actions are calculated in ViewModel. To ensure that ViewModel created, initialized, and linked I use ContextComponentBase as a base class for all my pages.

Page code-behind looks like this

    public partial class Progresses
    {
        [Inject]
        protected new ProgressViewModel DataContext
        {
            get => base.DataContext as ProgressViewModel;
            set => base.DataContext = value;
        }
    }

Ensure that .razor page itself is inherited from the proper class

@page "/progress"
@inherits Xakpc.BlazorBits.Bootstrap.ViewModels.ContextComponentBase;

That's all we need for View, let's switch to ViewModel!

ViewModel

First, check out the previous code snippet. Our ViewModel is Injected into our View - so let's not forget to add it in Startup.cs

services.AddScoped<ProgressViewModel>();

I recommend read several times about Scopes in Blazor. Once I lost a day trying to fix a problem caused by misunderstanding Blazor DI Scopes.
Finally a ViewModel itself

public class ProgressViewModel : ViewModelBase
{
    private int _progress;

    public ProgressViewModel()
    {
        Add = new Command<int>(i => Progress += 1, i => Progress < 100);
        Subtract = new Command<int>(i => Progress -= 1, i => Progress > 0);
    }

    public int Progress
    {
        get => _progress;
        set { _progress = value; OnPropertyChanged(nameof(Progress)); }
    }

    public override Task InitializeAsync()
    {
        Progress = 22;
        return base.InitializeAsync();
    }

    public ICommand Add { get; set; }
    public ICommand Subtract { get; set; }
}

I will not go deep into VM, only point to main things

InitializeAsync called once per scope on first page-load - that means once per connection for Blazor Server because we added it with AddScope;
Commands set Progress which fire OnPropertyChanged which fire StateHasChanged which fire page redraw;
Commands have CanExecute func to ensure that Progress in range 0-100;
CanExecute also used to disable buttons when needed;

Spinner

Spinner is another simple example of how easy to wrap into a Razor component.

Toasts

For toasts, I usually don't use a Bootstrap component but a nice Blazor port of very popular toastr.js

sotsera / sotsera.blazor.toaster

A Toastr.js port to Blazor in pure .Net.

Sotsera.Blazor.Toaster

A Blazor port of Toastr.js to Server and Webassembly Blazor Apps.

The transitions are implemented using System.Threading.Timer timers so the resource usage should be closely monitored when using the server-side hosting model.

Only for server-side projects

The static assets from Razor Component Libraries are available by default only in Development mode. They can be enabled on Production using the UseStaticWebAssets() method in the Program.cs file as in the following example:

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStaticWebAssets();
            webBuilder.UseStartup<Startup>();
        });

Sample

The client-side sample project has been published here.

Changes

__version 3.0.0

new configuration options for styling the toast title (ToastTitleClass) and message (ToastTitleClass) and an example for aligning their text to…

View on GitHub

I should probably try Bootrstap toasts someday.

Modal

Bootstrap has a Modal component but it is highly dependant on JavaScript. In my work with Blazor, I prefer to minimize the amount of JS code overall, so I use Blazored.Modal - an amazing native component for Modals. You should check it out.

Blazored / Modal

A powerful and customizable modal implementation for Blazor applications.

Blazored Modal

A powerful and customizable modal implementation for Blazor applications.

Documentation

For information on getting Blazored Modal setup in your application, as well as the many customisation options, please checkout our docs.

View on GitHub

And that's all for now. I am not very good at writing such long articles, so will be appreciated for any feedback.

And if you have any questions, feel free to mention me in Twitter

Using Blazor? Consider MVVM

Pavel Osadchuk — Mon, 05 Oct 2020 12:11:42 +0000

With the first glance at Blazor - a framework for building interactive client-side web UI with .NET, I have that idea - it's perfect for MVVM.

MVVM states for Model-View-ViewModel pattern.

I started with MVVM on WPF apps many years ago and spent a lot of time with MVVMLight and Xamarin, so I immediately saw an advantage of it for Blazor as well.

Like in WPF, Blazor has the most important feature - data binding. In short, you have some data, typically in a collection of some sort, and you want to display it to the user. You can 'bind' your view to the data.
Like in WPF, Blazor has two parts, the .razor page which describes your GUI in HTML, and the code-behind .razor.cs that is tied to it.

This makes Blazor MVVM default for me. So I picked some base components from old MVVM projects which I want to share.

This is ComponentBase which I use for MVVM everywhere.

The DataContext is quite basic, we only should ensure to initialize it only once for ServerPrerendering mode because it will call OnInitializeAsync twice due to, well, pre-rendering.

The only problem here is JavaScript. You cannot use js methods in OnInitializeAsync, and data initialization in OnAfterRender looks wrong to me (at least it's not what docs propose).

And there are things like js-loading indicator which need to be started if the page loaded but the data not.

Much confusing... For now, I simply move all JS initialization to OnAfterRender permanently.

And how you would solve the JS problem in the MVVM pattern?

DEV Community: Pavel Osadchuk

Microsoft Has Killed Widgets Six Times. Here's Why They Keep Coming Back.

01 — The Push Era (1997–2001)

02 — The Glass Era (2007–2009)

03 — The Free Era (2009–2012)

04 — The Metro Era (2012–2021)

05 — The Interlude (2015–2021)

06 — The Board Era (2021–2024)

07 — The Start Experiences Era (2024–Present)

What the Cycle Produced

The Six Eras at a Glance

Exploring htmx with Razor Pages: An Old New Web Development Approach?

1. Introduction

2. Background

2.1. htmx

2.1.1. AJAX

2.1.2. CSS Transitions

2.1.3. The philosophy behind "Hypermedia-Driven Applications"

2.2. Razor Pages

2.2.1. Razor Pages Handlers

2.2.2. Razor Pages Partials

3. Setting the Stage: Prerequisites and Initial Setup

3.1. Integrating htmx into Razor Pages

4. Making First htmx Call in Razor

5. Exploring Other htmx Use-Cases

5.1. Progress Bar

5.2. Table Scroll, Edit, Delete

5.3. Dialogs and tabs

5.4. Live search feature on a Razor Page

5.5 Animations

6. Benefits of the Integration

6.1. Speed and Efficiency: Faster page loads and enhanced user experience.

6.2. Maintainability: Separation of concerns with Razor's code-behind model and htmx's lightweight nature.

6.3. Simplified Development Workflow

7. Potential Challenges and Solutions

7.1. Antiforgery Token

7.2. Validation

8. Conclusion

9. Further Reading/References

How to create Sitemap.xml for ASP.net Core Razor Pages

Step 1: Understand the Structure of sitemap.xml

Step 2: Create a Model for the Sitemap

Step 3: Setting Up the Method to Generate Sitemap Nodes

Step 4: Creating the Sitemap Page

Step 5: Formatting the XML

Step 6: Register the Sitemap with Search Engines

Conclusion

Write and Read Google Spreadsheet from Telegram bot with Google Cloud Functions

Setup Google Functions

Function google-sheet-add

Function google-sheet-get

Chatbot Scenario

My jeans tear down today due to extensive SITTING, what should I replace them with?

Bootstrap+Blazor essentials

xakpc / Xakpc.BlazorBits.Bootstrap

Sample project for https://dev.to/xakpc/ article

Button

Button Group

Card

Progress Bar

Progress Bar with MVVM Example

View

ViewModel

Spinner

Toasts

sotsera / sotsera.blazor.toaster

A Toastr.js port to Blazor in pure .Net.

Sotsera.Blazor.Toaster

A Blazor port of Toastr.js to Server and Webassembly Blazor Apps.

Only for server-side projects

Sample

Changes

Modal

Blazored / Modal

A powerful and customizable modal implementation for Blazor applications.

Blazored Modal

Documentation

Using Blazor? Consider MVVM

Step 1: Understand the Structure of `sitemap.xml`

Function `google-sheet-add`

Function `google-sheet-get`