Question

asp.net - 在长篇回帖期间多次更新div InnerHTML

我有一个FileUpload控件，允许上传多个文件。当用户单击“上载”按钮时，我想显示要上载的文件列表，使用html格式化以指示当前正在上载哪个文件。我想将此html设置为更新面板中页面内部div的内部html。我想在每次循环到下一个文件时不断更改这个html。问题是，html只会在循环完成后显示最终结果，而不是在循环的每次迭代后显示它。我在更新面板中有div，每次设置内部html后都调用Update（）方法。任何人都可以帮我弄清楚如何在循环中多次更新内部html？

Import.aspx

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true" ></asp:ScriptManager>
<div>
    <b>Upload Files:</b>
    <br /><br />
    <asp:FileUpload ID="fileUpload" runat="server" Width="400px" AllowMultiple="true" />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    <br />
    <asp:UpdatePanel runat="server" ID="fileProgressUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false">
        <ContentTemplate>
            <div style="margin:20px 0px; border:1px solid black; padding:20px;">
                <div id="fileProgressDiv" runat="server"></div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Import.aspx.cs

protected void btnUpload_Click(object sender, EventArgs e)
{
    // Show files with first one in progress
    string html = "<table>";
    int index = 0;
    foreach (var postedFile in fileUpload.PostedFiles)
    {
        html += GetFileProgressHTML(GetFileName(postedFile), index == 0);
        index++;
    }
    html += "</table>";
    fileProgressDiv.InnerHtml = html;
    fileProgressUpdatePanel.Update();

    // Upload each file and indicate progress
    string completedRowsHTML = "";
    html = "";
    for (int i = 0; i < fileUpload.PostedFiles.Count; i++)
    {
        var postedFile = fileUpload.PostedFiles[i];

        ImportFile(postedFile);
        completedRowsHTML += GetFileProgressHTML(GetFileName(postedFile), false);
        html = "<table>" + completedRowsHTML;
        for (int j = i + 1; j < fileUpload.PostedFiles.Count; j++)
        {
            html += GetFileProgressHTML(GetFileName(postedFile), j == i + 1);
        }
        html += "</table>";
        fileProgressDiv.InnerHtml = html;
        fileProgressUpdatePanel.Update();
    }
}

Answer 1

我刚刚创建了一个您可以查看的完整功能示例，在这里您可以看到一些非常简单的步骤来考虑：

1）单击按钮，在那里你创建一个新的Thread来同时执行该过程，我们可以说它是一个进程工作者线程。我们还启用了一个Timer控件，它将每隔500毫秒执行一次Tick事件。

2）在流程工作者内部，我们执行计算并将最终的html设置为全局变量，一旦流程（for循环）完成，我们设置一个标志以知道流程已经完成。

3）Tick事件是更新UI的过程，您可以看到我们将全局变量的值附加到innerHtml的内容，因为我们不想丢失以前的内容。

还有更多的HTML和C＃代码，但我认为它们很容易理解。

注意：在此示例中，我们不使用jQuery，只包含Visual Stuido中包含的ASP.NET AJAX控件。仔细检查ASP.NET HTML代码。

<强> WebForm1.aspx的

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <asp:UpdatePanel runat="server" ID="fileProgressUpdatePanel">
            <ContentTemplate>
                <b>Upload Files:</b>
                <br />
                <br />
                <asp:FileUpload ID="fileUpload" runat="server" Width="400px" AllowMultiple="true" />
                <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_OnClick" />
                <br />
                <div style="margin: 20px 0px; border: 1px solid black; padding: 20px;">
                    <div id="fileProgressDiv" runat="server"></div>
                </div>
                <asp:Timer runat="server" ID="Timer1" Interval="500" Enabled="False" OnTick="Timer1_OnTick"/>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

<强> WebForm1.aspx.cs中

using System;
using System.Threading;
using System.Threading.Tasks;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        private static string _itemTemplate = "<table><tr><td>{0}</td></tr></table>";
        private static string _newHtml = string.Empty;
        private static bool _isWorking;

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnUpload_OnClick(object sender, EventArgs e)
        {
            Timer1.Enabled = _isWorking = true;

            Task.Factory.StartNew(() =>
            {
                for (var i = 0; i < 10; i++)
                {
                    _newHtml = string.Format(_itemTemplate, i);

                    //Simulate processing time
                    Thread.Sleep(1000);
                }
            })
            .ContinueWith((prevTask) =>
            {
                _isWorking = false;
            });
        }

        protected void Timer1_OnTick(object sender, EventArgs e)
        {
            if (!_isWorking)
            {
                Timer1.Enabled = false;
                fileProgressDiv.InnerHtml = fileProgressDiv.InnerHtml + string.Format(_itemTemplate, "Process Finished!");
                return;
            }

            fileProgressDiv.InnerHtml = fileProgressDiv.InnerHtml + _newHtml;
            _newHtml = string.Empty;
        }
    }
}

asp.net - 在长篇回帖期间多次更新div InnerHTML

asp.net - 在长篇回帖期间多次更新div InnerHTML

1 个答案: