DEV Community

Cover image for State Management in WebForms Core 2 (Razor Pages Example)
Elanat Framework
Elanat Framework

Posted on

State Management in WebForms Core 2 (Razor Pages Example)

#csharp #dotnet #tutorial #webformscore

Introduction

State management in web applications has always been a tricky problem. Traditional server-side frameworks either rely on heavy session storage, complex postback mechanisms, or client-side JavaScript frameworks to keep the UI consistent. What if you could have the simplicity of server-side event handling, combined with browser-friendly state management, back/forward navigation, and multi-language portability—all without the overhead of a full SPA?

Enter WebForms Core, a revolutionary approach to state management that works across multiple programming languages and server platforms. Originally inspired by classic WebForms, this modern adaptation brings CodeBehind-style server logic to Razor Pages, while still leveraging a lightweight client-side script (WebFormsJS) to handle UI updates seamlessly.

In this example, we’ll show how you can:

  • Bind server-side click events to Razor Pages buttons
  • Track page state in a way that the browser's back and forward buttons remain functional
  • Inject dynamic content into the page without relying on ViewState or complex JavaScript frameworks

The best part? WebForms Core isn’t just a C# library—it has implementations in Java, Go, Python, PHP, Ruby, Rust, Swift, Elixir, and more, making it a truly cross-language solution. Seeing the same concept work across so many ecosystems is nothing short of astonishing for anyone who has spent time wrestling with web state management.

Let’s dive in and see how WebForms Core transforms a simple Razor Page into a stateful, interactive application with minimal boilerplate and maximum control.

Example

To use WebForms Core, first copy the WebForms class file to your project. Then create a new View file similar to the one below.

Place the following view in the "Pages" directory in the project path.

View file (Index.cshtml)

@page
@model IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core with Razor</title>
    <script type="module" src="/static/script/web-forms.js"></script>
</head>
<body>

<h3>State Test (Razor + WebForms Core)</h3>

<button id="Button1">Add State 1</button>
<button id="Button2">Add State 2</button>

@Html.Raw(ViewData["WebForms"] ?? "")

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Also, create a C# class file as follows.

C# code (Index.cshtml.cs)

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using WebFormsCore;

public class IndexModel : PageModel
{
    public IActionResult OnGet()
    {
        if (Request.Query.ContainsKey("add_state_1"))
        {
            return Button1_Click();
        }

        if (Request.Query.ContainsKey("add_state_2"))
        {
            return Button2_Click();
        }

        WebForms form = new WebForms();

        form.SetGetEvent("Button1", HtmlEvent.OnClick, "?add_state_1");
        form.SetGetEvent("Button2", HtmlEvent.OnClick, "?add_state_2");

        ViewData["WebForms"] = form.ExportToHtmlComment();

        return Page();
    }

    private IActionResult Button1_Click()
    {
        WebForms form = new WebForms();

        form.AddState("#state1");
        form.AddText("<h3>", "- New text after click 1");

        return Content(form.Response(), "text/html");
    }

    private IActionResult Button2_Click()
    {
        WebForms form = new WebForms();

        form.AddState("#state2");
        form.AddText("<h3>", "- New text after click 2");

        return Content(form.Response(), "text/html");
    }
}
Enter fullscreen mode Exit fullscreen mode

The above code is a simple example of a state management system. By executing the route, the click event is first given to the buttons with the query route. If the buttons are clicked, we detect it in the Razor Page handler by checking the query and the methods associated with the click are executed. Each of the methods adds a state to the page; this makes the back and forward buttons in the browser, consistent with the new state.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below.

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Top comments (0)