.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>