.Net MVC：Razor渲染视图后返回浏览器前如何获取序列化字符串？

当然有办法！我之前在做.NET项目结合React SSR的时候刚好折腾过这个需求，给你分享几个实用的方案：

方案1：通过ActionFilter拦截响应流捕获内容 #

这是最直接的方式——我们可以替换HttpContext的响应流为内存流，让Razor视图渲染到这个内存流里，等渲染完成后读取内容、修改（注入React组件），再把处理后的内容写回原始响应流。

先写一个自定义的ActionFilter：

public class CaptureViewContentFilter : IAsyncActionFilter
{
    public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
    {
        // 保存原始响应流，后续要恢复
        var originalBodyStream = context.HttpContext.Response.Body;
        
        try
        {
            // 用内存流替换响应流，用来捕获渲染后的HTML
            using var memoryStream = new MemoryStream();
            context.HttpContext.Response.Body = memoryStream;

            // 继续执行后续流程（包括Razor视图渲染）
            var executedContext = await next();

            // 只有视图正常渲染完成时才处理内容
            if (executedContext.Exception == null && context.HttpContext.Response.StatusCode == StatusCodes.Status200OK)
            {
                // 重置内存流指针，读取渲染后的HTML
                memoryStream.Seek(0, SeekOrigin.Begin);
                var viewHtml = await new StreamReader(memoryStream).ReadToEndAsync();

                // 这里就是核心操作：注入React SSR内容和水化脚本
                // 假设你已经有生成React组件SSR HTML和初始状态的方法
                var reactSsrHtml = GenerateReactServerRenderedContent();
                var hydrationScript = GenerateHydrationScript();
                
                // 替换视图里提前留好的占位符，比如<!-- REACT_MOUNT_POINT -->
                var modifiedHtml = viewHtml.Replace("<!-- REACT_MOUNT_POINT -->", reactSsrHtml + hydrationScript);

                // 把修改后的内容写回内存流，再复制到原始响应流
                memoryStream.SetLength(0);
                await new StreamWriter(memoryStream).WriteAsync(modifiedHtml);
                memoryStream.Seek(0, SeekOrigin.Begin);
                await memoryStream.CopyToAsync(originalBodyStream);
            }
        }
        finally
        {
            // 一定要恢复原始响应流，避免后续流程出问题
            context.HttpContext.Response.Body = originalBodyStream;
        }
    }

    // 示例方法：实际要根据你的React SSR逻辑实现（比如用ReactJS.NET或调用Node服务）
    private string GenerateReactServerRenderedContent()
    {
        // 生成React组件的服务器端渲染HTML
        return "<div id=\"react-root\">Hello React (SSR)</div>";
    }

    // 示例方法：生成React水化需要的脚本（注入初始状态）
    private string GenerateHydrationScript()
    {
        var initialState = new { Username = "testUser" };
        var serializedState = System.Text.Json.JsonSerializer.Serialize(initialState);
        return $"<script>window.__INITIAL_STATE__ = {serializedState};</script><script src=\"/js/react-hydrate.js\"></script>";
    }
}

然后在Program.cs里注册这个Filter，让它全局生效：

builder.Services.AddControllersWithViews(options =>
{
    options.Filters.Add<CaptureViewContentFilter>();
});

之后只需要在你的Razor视图里加上占位符，比如：

<div class="container">
    <!-- 其他Razor内容 -->
    <!-- REACT_MOUNT_POINT -->
</div>

方案2：自定义RazorView精细控制渲染过程 #

如果需要更深入地控制视图渲染的细节，可以自定义一个RazorView，重写它的渲染方法直接捕获输出内容。

先创建自定义的RazorView类：

public class ReactInjectableRazorView : RazorView
{
    public ReactInjectableRazorView(IRazorPage page, IViewEngine viewEngine, IReadOnlyDictionary<string, object> viewData, ILoggerFactory loggerFactory) 
        : base(page, viewEngine, viewData, loggerFactory)
    {
    }

    public override async Task RenderAsync(ViewContext context)
    {
        // 保存原始的输出Writer
        var originalWriter = context.Writer;
        using var stringWriter = new StringWriter();
        
        // 让视图渲染到StringWriter里
        context.Writer = stringWriter;
        await base.RenderAsync(context);
        
        // 获取渲染后的HTML内容
        var viewHtml = stringWriter.ToString();
        
        // 注入React相关内容
        var modifiedHtml = viewHtml.Replace("<!-- REACT_MOUNT_POINT -->", GetReactContent());
        
        // 把处理后的内容写回原始Writer
        await originalWriter.WriteAsync(modifiedHtml);
        context.Writer = originalWriter;
    }

    private string GetReactContent()
    {
        // 这里同样实现你的React SSR和水化逻辑
        var initialState = new { Items = new[] { "Item1", "Item2" } };
        var serializedState = System.Text.Json.JsonSerializer.Serialize(initialState);
        return $"<div id=\"react-root\">React SSR Content</div><script>window.__INITIAL_STATE__ = {serializedState};</script>";
    }
}

接下来需要一个自定义的ViewEngine来返回这个自定义View，不过这个方案相对复杂，适合需要对视图渲染做更多定制的场景，一般来说方案1已经足够满足需求了。

一些注意事项 #

• 要避免在响应已经开始发送后再修改内容，所以尽量在Action执行初期就替换响应流。
• 对于大型视图，内存流可能会占用较多内存，你可以考虑用流式处理的方式（比如边读边修改边输出）来优化性能。
• React SSR的实现可以选择ReactJS.NET（直接在.NET环境渲染React组件），或者搭建一个Node服务来处理渲染，根据你的技术栈和性能需求选择。

内容的提问来源于stack exchange，提问作者mche