如何在.aspx页面不使用JavaScript实现类似Razor C#的动态添加div功能

ASP.NET Web Forms原生支持服务端代码内嵌渲染，完全可以实现类似Razor的动态内容生成效果，无需借助JavaScript，也无需迁移到.cshtml页面，常用方案有两种：

方案1：内嵌服务端代码块 #

这是最接近Razor写法的方案，直接在.aspx页面的指定位置插入C#逻辑代码即可：

1. 首先在后台.aspx.cs文件中定义公开的数据源，确保前台页面可以访问：

// 后台页面类中声明公共数据源，可根据业务需求赋值
public List<你的数据模型类> 动态数据列表 { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 给数据源赋值，比如从数据库、接口查询数据
        动态数据列表 = GetYourDataFromService();
    }
}

2. 在.aspx页面的指定元素内部直接写循环、判断等C#逻辑：

<!-- 你要插入动态div的指定容器 -->
<div id="target-container">
    <% foreach (var dataItem in 动态数据列表) { %>
        <!-- 这里就是你要动态生成的div结构，可自由调整 -->
        <div class="dynamic-div">
            <span><%: dataItem.字段1 %></span>
            <p><%: dataItem.字段2 %></p>
        </div>
    <% } %>
</div>

语法说明：

• <% %> 包裹的是纯服务端C#代码，支持循环、分支判断等所有C#语法
• <%: 内容 %> 是编码输出，等价于Razor的@，会自动对内容做HTML编码，避免XSS风险
• 不需要编码的场景可以用<%= 内容 %>输出

方案2：使用Repeater数据绑定控件 #

如果希望代码分离更规范，符合Web Forms的开发惯例，可以用轻量的Repeater控件实现：

1. 前台.aspx页面指定容器中放入Repeater控件，定义生成模板：

<div id="target-container">
    <asp:Repeater ID="rptDynamicDiv" runat="server">
        <ItemTemplate>
            <!-- 动态div结构，和你要生成的内容完全一致 -->
            <div class="dynamic-div">
                <span><%# Eval("字段1") %></span>
                <p><%# Eval("字段2") %></p>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

2. 后台.cs文件中绑定数据源即可：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var 动态数据列表 = GetYourDataFromService();
        rptDynamicDiv.DataSource = 动态数据列表;
        rptDynamicDiv.DataBind();
    }
}

说明：Repeater控件不会生成任何额外的冗余标签，完全按照你定义的ItemTemplate输出内容，最终生成的静态HTML和手写的完全一致。

两种方案均在服务端完成全部渲染，返回给浏览器的是纯静态HTML内容，完全不需要依赖JavaScript执行。

内容的提问来源于stack exchange，提问作者עומר אנגי