.NET (C#) Integration

Extend the Razor engine with an HtmlHelper extension. This allows you to render Partial Views as PulsePoint components seamlessly.

ASP.NET Core Demo

Ep. 05
.NET 9

Razor Extensions

06:10

The Implementation

PulsePointExtensions.cs
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Text.RegularExpressions;

public static class PulsePointExtensions
{
    public static async Task<IHtmlContent> ComponentAsync(
        this IHtmlHelper html, 
        string partialName, 
        object model)
    {
        // 1. Render Partial to String
        var content = await html.PartialAsync(partialName, model);
        
        using var writer = new StringWriter();
        content.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
        var htmlString = writer.ToString();

        // 2. Transform <script> tags
        // This prevents immediate execution
        var pattern = @"<script(?![^>]*\btype=)";
        var replacement = "<script type=\"text/pp\"";
        
        var compiled = Regex.Replace(htmlString, pattern, replacement);

        // 3. Return Safe HTML
        return new HtmlString(compiled);
    }
}
Views/Home/Index.cshtml
@model MyApp.ViewModels.DashboardViewModel

<h1>Dashboard</h1>

<!-- Usage -->
@await Html.ComponentAsync("_UserCard", new { Name = "Admin", Role = 1 })


<!-- Views/Shared/_UserCard.cshtml -->
@model dynamic

<div class="card">
    <h2>Hello, {name}</h2>
    
    <script>
        // C# Props -> JS State
        const [name, setName] = pp.state("@Model.Name");
    </script>
</div>
Python / Django Next: Node.js / Express