ASP.NET Core 从后端代码修改cshtml页面元素、新增页面项方法咨询

ASP.NET Core Razor Pages 实现后端修改页面内容的方案 #

ASP.NET Core 不再支持传统 ASP.NET Web Forms 中 runat="server" 服务端控件、后台直接操作控件属性的开发模式，改为采用模型绑定 + Razor 标记的渲染逻辑，具体实现方式如下：

1. 修改h2标签文本内容 #

• 首先在对应 cshtml.cs 的 PageModel 类中定义公共字符串属性：

// cshtml.cs 代码
public string QuestionLabelText { get; set; }

• 需要修改文本时直接给该属性赋值即可：

QuestionLabelText = "需要显示的文本";

• 最后修改 cshtml 页面的h2标签，移除 runat="server" 属性，通过Razor语法绑定属性：

<h2 id="QuestionLabel">@Model.QuestionLabelText</h2>

2. 后端向空div添加子元素 #

如果是服务端渲染阶段添加子元素，可按以下方式实现：

• 在 PageModel 类中定义公共列表属性存储子项数据：

// cshtml.cs 代码
// 可根据需求自定义存储的类型，比如自定义类存储子元素的标签、内容、样式等信息
public List<string> DivChildItems { get; set; } = new List<string>();

• 需要添加子项时直接操作该列表：

DivChildItems.Add("第一个子项内容");
DivChildItems.Add("第二个子项内容");

• 在cshtml页面的div中通过循环渲染子元素：

<div id="目标div的id">
    @foreach (var item in Model.DivChildItems)
    {
        <!-- 这里可根据需求替换为p、span、div等任意子元素标签，也可绑定属性、样式 -->
        <span>@item</span>
    }
</div>

如果需要在页面加载完成后动态新增子项，可将后端数据传递到前端后，通过JavaScript操作DOM实现。

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