如何在.NET 5的.NET Core Web应用后端访问并修改HTML标签

.cshtml.cs是Razor Pages的PageModel后端文件，要操作前端<div id="log_wrapper"></div>的内容，根据场景有以下几种实现方式：

方案1：服务端渲染时直接绑定内容（最常用） #

该方案适合页面首次加载时，后端直接给div填充内容的场景：

1. 在你的.cshtml.cs PageModel类中定义public公共属性，用于存储div的内容：

public class YourPageModel : PageModel
{
    // 存储div要渲染的内容
    public string LogWrapperContent { get; set; }

    public void OnGet()
    {
        // 此处替换为你的业务逻辑，生成要展示的内容
        LogWrapperContent = "<p>日志初始化完成，当前时间：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "</p>";
    }
}

2. 修改.cshtml中的div标签，绑定上述属性：

<!-- 如果内容不需要渲染HTML标签，直接写@LogWrapperContent即可，会自动转义避免XSS风险 -->
<div id="log_wrapper" name="log_wrapper">
    @Html.Raw(LogWrapperContent)
</div>

注意：仅在你确认内容完全安全的情况下使用@Html.Raw()，该方法会直接渲染HTML标签，不对特殊字符做转义。

方案2：页面加载后异步更新div内容 #

该方案适合页面加载完成后，需要根据用户操作、定时任务等动态从后端获取新内容更新div的场景：

1. 在.cshtml.cs中添加处理异步请求的接口方法：

public class YourPageModel : PageModel
{
    // 处理POST请求的更新日志接口
    public IActionResult OnPostUpdateLog()
    {
        // 替换为你的业务逻辑，获取最新日志内容
        string latestLog = $"<p>日志更新于：{DateTime.Now:yyyy-MM-dd HH:mm:ss}</p>";
        return Content(latestLog);
    }
}

2. 在.cshtml中添加JS代码，触发更新时请求后端接口修改div内容：

// 可绑定按钮点击、定时器等事件触发该方法
function updateLog() {
    fetch('/你的页面路由?handler=UpdateLog', {
        method: 'POST',
        headers: {
            // 携带Razor Pages默认的防跨站请求伪造令牌，避免请求被拦截
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        }
    })
    .then(res => res.text())
    .then(newContent => {
        document.getElementById('log_wrapper').innerHTML = newContent;
    })
}

方案3：控制div的显示隐藏、样式等属性 #

如果不需要修改内容，只需要控制div的显示状态、样式类等属性，可以直接绑定属性值：

1. 在.cshtml.cs中定义控制属性：

public class YourPageModel : PageModel
{
    // 控制div是否显示
    public bool IsLogVisible { get; set; } = true;
    // 控制div的样式类
    public string LogWrapperClass { get; set; } = "log-default";

    public void OnGet()
    {
        // 业务逻辑判断后修改属性值
        IsLogVisible = false;
        LogWrapperClass = "log-hidden";
    }
}

2. 在.cshtml的div标签上绑定属性：

<div 
    id="log_wrapper" 
    name="log_wrapper"
    class="@LogWrapperClass"
    style="@(IsLogVisible ? "" : "display:none;")"
>
    固定内容
</div>

注意事项 #

• 所有需要在.cshtml中访问的PageModel属性，必须用public修饰，否则无法读取
• 纯文本内容填充不要用@Html.Raw()，避免XSS注入风险
• 异步POST请求必须携带防伪造令牌，否则会被.NET默认的安全机制拦截返回400错误

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