PostBack & ScriptManager Demo

This sample demonstrates the Phase 2 ClientScript postback shims. These methods return the same JavaScript strings as Web Forms, letting migrated code-behind work unchanged in Blazor.

💡 What this shows

  • GetPostBackEventReference() — returns a __doPostBack('id','arg') JS string
  • GetPostBackClientHyperlink() — returns a javascript:__doPostBack(...) URL
  • ScriptManagerShim.GetCurrent(this) — obtains a ScriptManager, registers startup scripts

1. GetPostBackEventReference

ClientScript.GetPostBackEventReference(this, "save") returns a __doPostBack call string — the same pattern Web Forms uses for server-side event wiring.

Before (Web Forms)

string script = ClientScript.GetPostBackEventReference(this, "save");
btnSave.Attributes["onclick"] = script;

After (Blazor with BWFC)

// Same API — works unchanged
_postBackScript = ClientScript.GetPostBackEventReference(this, "save");
// Wire via onclick="@_postBackScript"
Live Demo — PostBack via Button

Click the button to fire __doPostBack from JavaScript. The PostBack event on WebFormsPageBase receives it server-side.

Generated script: __doPostBack('Index', 'save')

No postback received yet.

2. GetPostBackClientHyperlink

ClientScript.GetPostBackClientHyperlink(this, "navigate") returns a javascript:__doPostBack(...) URL — drop it into an href and it triggers a postback when clicked.

Before (Web Forms)

lnk.NavigateUrl = ClientScript.GetPostBackClientHyperlink(this, "navigate");

After (Blazor with BWFC)

// Same call
_hyperlink = ClientScript.GetPostBackClientHyperlink(this, "navigate");
Live Demo — PostBack via Hyperlink

An anchor tag whose href is a javascript:__doPostBack URL:

Click to PostBack via Link

Generated href: javascript:__doPostBack('Index', 'navigate')

3. ScriptManager.GetCurrent

ScriptManager.GetCurrent(this) returns a ScriptManagerShim that wraps ClientScriptShim. You can call RegisterStartupScript on it — the same code you wrote in Web Forms.

Before (Web Forms)

var sm = ScriptManager.GetCurrent(this);
sm.RegisterStartupScript(GetType(), "init",
    "document.getElementById('target').innerText = 'Hello!';",
    true);

After (Blazor with BWFC)

// Same pattern
var sm = ScriptManagerShim.GetCurrent(this);
sm.RegisterStartupScript(GetType(), "init",
    "document.getElementById('target').innerText = 'Hello!';",
    true);
Live Demo — ScriptManager Startup Script

On first render, ScriptManagerShim.GetCurrent(this).RegisterStartupScript(...) sets the text below via JavaScript — just like Web Forms.

(waiting for startup script…)

Source Code

@page "/ControlSamples/PostBackDemo"
@inherits WebFormsPageBase

@code {
    private string _postBackScript = "";
    private string _postBackMessage = "No postback received yet.";
    private string _postBackHyperlink = "";
    private string _hyperlinkMessage = "No hyperlink postback received yet.";

    protected override void OnInitialized()
    {
        base.OnInitialized();

        // GetPostBackEventReference — same call as Web Forms
        _postBackScript = ClientScript.GetPostBackEventReference(this, "save");

        // GetPostBackClientHyperlink — same call as Web Forms
        _postBackHyperlink = ClientScript.GetPostBackClientHyperlink(this, "navigate");

        // Subscribe to PostBack event
        PostBack += (sender, args) =>
        {
            if (args.EventArgument == "save")
                _postBackMessage = $"PostBack received! Target: {args.EventTarget}, Argument: {args.EventArgument}";
            else if (args.EventArgument == "navigate")
                _hyperlinkMessage = $"Hyperlink PostBack! Target: {args.EventTarget}, Argument: {args.EventArgument}";
            StateHasChanged();
        };
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            var sm = ScriptManagerShim.GetCurrent(this);
            sm.RegisterStartupScript(GetType(), "smDemo",
                "document.getElementById('scriptmanager-target').innerText = " +
                "'ScriptManager startup script executed!';",
                true);
        }
    }
}