.net后台逐行动态输出html标签

Question

本人打算做一个类似于软件安装时的动态效果，想让后台函数在运行过程中，不断的向前台写数据来表明当前软件的运行状态，但是总是所有后台代码运行完毕之后统一出现在前台，后来使用ajax方法，但还是实现不了，求高手帮忙！
前台JS代码

    <script language="javascript" type="text/javascript">
    function CompareInfo(InfoId) {
        jQuery.ajax(
        {
            url: 'CompareInfo.aspx?InfoId=' + InfoId,
            dataType: 'text',
            success: function (data, textStatus) {
                $("#Compare").html(data);

            }
        });
     }
</script>

后台代码：

        public void Com()
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "JSFunction", "CompareInfo('1');", true);  调用其它函数()
        ScriptManager.RegisterStartupScript(this, this.GetType(), "JSFunction", "CompareInfo('2');", true);  调用其它函数()...
    }

ajax调用的页面代码：

   private void Info(int InfoId)
    {
        if (InfoId == 1)
        {
            Response.Write("<div><span class='STYLE10'>比对开始...比对进行过程中请勿关闭本页面！</span></div>");
        }
        if (InfoId == 2)
        {
            Response.Write("<span class='STYLE10'>正在检测当前模板启用状态...</span>");
        }
    }

现在的运行效果是等到后台函数完整运行之后，才调用一次AJAX返回InfoId=1时的值。。

想要实现逐行显示的功能，望高手帮忙！

Answer 1

该回答引用ChatGPT

看到您的代码，我想到一种方法是使用setTimeout函数，每隔一段时间就调用一次Ajax。下面是代码示例：

---

前台JS代码：

<script language="javascript" type="text/javascript">
var InfoId = 1;
function CompareInfo() {
    jQuery.ajax(
    {
        url: 'CompareInfo.aspx?InfoId=' + InfoId,
        dataType: 'text',
        success: function (data, textStatus) {
            $("#Compare").html(data);
            if (InfoId < 2) {
                InfoId ++;
                setTimeout(CompareInfo, 1000);  // 每隔1秒调用一次
            }
        }
    });
}
</script>

后台代码：

public void Com()
{
    CompareInfo();
}

您可以根据自己的需求调整setTimeout函数的时间。

---

如果您的数据比较多，可以考虑使用长连接，在后台不断地向前台写数据。您可以使用SignalR技术实现长连接。希望以上内容能够对您有所帮助。