如果单元格在 asp.net 中每 3 秒生成一次随机数,则更改 GridView 单元格的颜色

Change GridView Cells colour if the cells have the Random number generated every 3 seconds in asp.net

我有一个动态生成的多个 GridView 放置在一个更新面板中,它的数据源来自数据库。 我想要做的是更改包含每三秒生成的所有 90 个随机数的 Gridview 单元格的颜色。我遇到问题的部分是页面一直等到所有随机数生成并显示最终输出,而不是每次随机数出现时更新 Gridview 单元格颜色 generated.I 知道问题出在页面上生命周期的事情,但是,我不知道如何解决这个问题。有人可以指导我吗?

 namespace validation
   {
    public partial class index : System.Web.UI.Page
   {
    int countTik;
    protected void Page_Load(object sender, EventArgs e)

    {               
                //Calling javascript 
                // ScriptManager.RegisterClientScriptBlock(this,GetType(), "mykey", "myFunction();", true);
                // GridView gridview = new GridView();
                //HiddenField1.Value = "2";
                DataAccessForUserInterface ds = new DataAccessForUserInterface();
                countTik = ds.selectAll();
                for (int k = 1; k <= countTik; k++)
                {
                    UpdatePanel updatePanel = new UpdatePanel();
                    updatePanel.ID = "panel"+k;
                    string Ticketname = "TicketNo" + k;
                    GridView gridview = new GridView();
                    RetriveTickets RetTik = new RetriveTickets();
                    List<RetriveTickets> Ticketdata = ds.GetMasterDetails(Ticketname).ToList();
                    RetTik.row1 = Ticketdata[0].row1;
                    RetTik.row2 = Ticketdata[0].row2;
                    RetTik.row3 = Ticketdata[0].row3;

                    DataTable dataTable1 = new DataTable();
                    dataTable1.Columns.Add("1");
                    dataTable1.Columns.Add("2");
                    dataTable1.Columns.Add("3");
                    dataTable1.Columns.Add("4");
                    dataTable1.Columns.Add("5");
                    dataTable1.Columns.Add("6");
                    dataTable1.Columns.Add("7");
                    dataTable1.Columns.Add("8");
                    dataTable1.Columns.Add("9");

                    //rows

                    // List<int> first = new List<int>();
                    foreach (var item in Ticketdata[0].row1)
                    {
                        var row = dataTable1.NewRow();
                        row["1"] = item.C0;
                        row["2"] = item.C1;
                        row["3"] = item.C2;
                        row["4"] = item.C3;
                        row["5"] = item.C4;
                        row["6"] = item.C5;
                        row["7"] = item.C6;
                        row["8"] = item.C7;
                        row["9"] = item.C8;

                        dataTable1.Rows.Add(row);

                    }



                    DataTable dataTable2 = new DataTable();
                    dataTable2.Columns.Add("1");
                    dataTable2.Columns.Add("2");
                    dataTable2.Columns.Add("3");
                    dataTable2.Columns.Add("4");
                    dataTable2.Columns.Add("5");
                    dataTable2.Columns.Add("6");
                    dataTable2.Columns.Add("7");
                    dataTable2.Columns.Add("8");
                    dataTable2.Columns.Add("9");
                    //rows
                    foreach (var item in Ticketdata[0].row2)
                    {
                        var row = dataTable2.NewRow();
                        row["1"] = item.C0;
                        row["2"] = item.C1;
                        row["3"] = item.C2;
                        row["4"] = item.C3;
                        row["5"] = item.C4;
                        row["6"] = item.C5;
                        row["7"] = item.C6;
                        row["8"] = item.C7;
                        row["9"] = item.C8;

                        dataTable2.Rows.Add(row);
                    }


                    DataTable dataTable3 = new DataTable();
                    dataTable3.Columns.Add("1");
                    dataTable3.Columns.Add("2");
                    dataTable3.Columns.Add("3");
                    dataTable3.Columns.Add("4");
                    dataTable3.Columns.Add("5");
                    dataTable3.Columns.Add("6");
                    dataTable3.Columns.Add("7");
                    dataTable3.Columns.Add("8");
                    dataTable3.Columns.Add("9");


                    //rows
                    foreach (var item in Ticketdata[0].row3)
                    {
                        var row = dataTable3.NewRow();
                        row["1"] = item.C0;
                        row["2"] = item.C1;
                        row["3"] = item.C2;
                        row["4"] = item.C3;
                        row["5"] = item.C4;
                        row["6"] = item.C5;
                        row["7"] = item.C6;
                        row["8"] = item.C7;
                        row["9"] = item.C8;

                        dataTable3.Rows.Add(row);
                    }

                    dataTable2.Merge(dataTable3);
                    dataTable1.Merge(dataTable2);

                    gridview.ID = "gridview" + k;
                    gridview.CssClass = "table table-bordered table-dark";
                    //gridview.AutoGenerateColumns = true;
                    //gridview.HeaderStyle.CssClass = "table-primary";
                    gridview.ShowHeader = false;
                    gridview.DataSource = dataTable1;
                    //  gridview.DataBound += new EventHandler(groupHeader);
                    gridview.RowDataBound += new GridViewRowEventHandler(Gv_RowDataBound);

                    gridview.DataBind();
                    GridViewRow rows = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                    TableHeaderCell cell = new TableHeaderCell();
                    cell.Text = "Customer Name";
                    cell.ColumnSpan = 5;
                    rows.Controls.Add(cell);

                    cell = new TableHeaderCell();
                    cell.ColumnSpan = 4;
                    cell.Text = "Ticket Number";
                    rows.Controls.Add(cell);

                    // row.BackColor = Color.BlanchedAlmond;
                    gridview.HeaderRow.Parent.Controls.AddAt(0, rows);
                    updatePanel.ContentTemplateContainer.Controls.Add(gridview);
                    grid1.Controls.Add(updatePanel);

                }
        StartCounting();
    }

    //fill color of already generated random number stored in database and that exist on the gridview on page load
    private void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        DataAccessForUserInterface da = new DataAccessForUserInterface();
        int[] randomList = da.getRandom();
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            for (int r = 0; r < 90; r++)
            {
                for (int i = 0; i <= 8; i++)
                {

                    int num = Convert.ToInt32(e.Row.Cells[i].Text);
                    if (num != 0 && num == randomList[r])
                    {
                        //e.Row.BackColor = Color.Red;
                        e.Row.Cells[i].BackColor = Color.Green;

                    }
                }
            }
        }

    }

    public int[] StartCounting()
    {
        int[] random = new int[90];   
        {
            int[] randomNumber = new int[90];
            int count = 0;

            for (int i = 0; i < randomNumber.Length; i++)

            {
                Random rnd = new Random();
                int num = rnd.Next(1, 91);

                if (randomNumber.Contains(num))
                {
                    i--;

                }
                else
                {

                    randomNumber[i] = num;
                    int countingNumber = randomNumber[i];
                    count++;
                    DataAccessForUserInterface da = new DataAccessForUserInterface();
                    da.insertRandom(countingNumber); // Store Random number generated on Database
                    Task.Delay(3 * 1000).Wait();
                    for(int GridCount=1;GridCount<=countTik;GridCount++)
                    {
                        GridView gv = (GridView)FindControl("gridview"+GridCount);
                        foreach (GridViewRow row in gv.Rows)
                        {
                            for (int cellIndex = 0; cellIndex < 9; cellIndex++)
                            {
                                if (row.Cells[cellIndex].Text.Equals(countingNumber))
                                {
                                    row.BackColor = Color.Green;
                                }
                            }
                        }
                    }                  
                       
                }

            }
            return randomNumber;

        }
    }

    }
  }

好吧,当您 post-back 时,即使在更新面板中,网页也会向上传送到服务器。 运行s 背后的代码——全部。当该代码 运行s 时,网页已在服务器上运行。用户看不到控件的任何更改(他们的桌面上只有一份网页副本)。

只有在代码 100% 完成、完成并退出后,用户才会看到来自您的代码的任何更新。当代码存在时,整个页面(或更新面板)现在返回客户端并更新。

所以,很明显,更新背后的任何代码 - 所有这些代码都将出现在“一次性”或“一次更新”中。

此处需要基本了解网页的工作原理。

你有这个:

注意上面的超级小心-注意在网络服务器端没有网页是活动的。

您没有此设置:

并且您没有此设置:

所以,您只需要一个位于客户端的网页。

如果用户点击一个按钮,甚至是更新面板中的一个按钮,那么 post-back 就会启动,你有这个:

页面被发送到网络服务器(它就在那里 - 等待任何用户 post 返回页面 - 不仅仅是你的页面!!!!

因此,页面传送到 Web 服务器。

你现在有这个:

现在,公平地说,上面的网页副本还位于用户桌面上 - 但他们看到了小旋转器 - 页面正在等待后面所有和 100% 的代码完成.

事实上,您永远不会使用隐藏代码直接与用户交互。

您的服务器端代码仅与网页交互 - 并且页面在服务器上出现的时间很短。

虽然 运行s 后面的代码,您正在更新服务器端浏览器的副本 - 用户无法看到任何机会。事实上,在大多数情况下,更新的顺序并不重要,因为所有更改都必须完成。

一旦您的代码完成 运行ning,然后整个页面(或更新面板)现在返回客户端浏览器,页面加载,JavaScript 开始运行,现在您可以看到来自代码背后的更新。

因此,它们似乎总是一次性更新 - 而不是逐个控制。

即使您在代码中进行了延迟 - 您所要做的只是将页面在服务器上延迟更长的时间 - 但客户端不会看到任何更新。

因此,在更新发生后(所有代码都已完成 运行ning),然后,页面才返回客户端,如下所示:

此时,服务器丢弃您的网页,销毁该页面 class,甚至您所有的代码变量现在都超出了范围。非常像退出子例程调用时 - 该子程序(或现在的网页)的局部变量和值超出范围。

Web 服务器现在正等待任何用户 post 返回页面(或部分 post 通过更新面板返回 - 但两种方式的过程都是相同的)。

因此,您不能延迟代码。

你必须让后面的代码完成。

因此,如果您希望用户“看到”页面更新(在您的例子中是方块),那么您必须使用几种方法之一:

一种方式:

您放入一个 JavaScript 计时器,并让它单击更新面板中的更新按钮(即使是隐藏的按钮)。每次点击(比如每半秒一次),就会在后面的代码中更新一个方块,然后更新面板将显示这些结果。

另一种方法是使用 JavaScript 计时器,它每秒调用一次 JavaScript 例程(或者半秒,或其他)。

该 js 例程将因此调用服务器端 web 方法,获取 ONE 控件或文本框的值,并更新它。这通常称为 ajax 调用。

这可能是一段复杂的代码。更糟糕的是,您要更新的方块嵌套在 gridview 中,使 js 代码更加困难。

最简单的方法?

设置代码隐藏例程,使用 session() 计数器(或视图状态)。

将计时器控件放入更新面板。

让计时器控件调用您对网格例程的更新,让它每秒调用一次。当计时器例程触发时,您更新 1 个框,增加计数器(以更新下一个框),然后代码退出。

因此,您必须设置一个只能修改其中一个文本框并退出的例程。您还需要一些递增的计数器。

因此,对于每个计时器触发器,您的计时器代码都会调用 udpate 例程 - 更新一个文本框、递增计数器,然后就完成了。

当定时器cde 计算出你刚刚更新了最后一个框,然后定时器事件可以关闭定时器触发器,页面刷新将停止。

一个非常简单的例子是让一个文本框从 1 计数到 10,并且每次都更新。

如果我们只是运行一个for/next循环,把1到10放在文本框中,当用户点击按钮时,代码可以运行,推1,然后2 等进入文本框。但由于上面的 post-back 和往返图,用户只会看到“10”作为最终结果。

所以,让我们完成 1 到 10,使用更新面板和简单的文本框。

所以,我们有这个标记:

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="txtCount" runat="server" 
                    Height="42px"
                    Width="42px"
                    Font-Size="XX-Large"
                    Text="0"
                    style="text-align: center">
                </asp:TextBox>
                <br />
                <asp:Button ID="Button1" runat="server" Text="Start Timer"  CssClass="btn" OnClick="Button1_Click"/>

                <asp:Timer ID="Timer1" runat="server" 
                 Enabled="False" 
                 Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
            </ContentTemplate>

        </asp:UpdatePanel>

我们后面的代码可以是这样的:

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Session["MyCount"] = 0;
        Timer1.Interval = 1000; // tick our timer each second
        Timer1.Enabled = true;
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        int? MyCount = Session["MyCount"] as int?;

        if (MyCount < 10 )
        {
            MyCount = MyCount + 1;
            txtCount.Text = MyCount.ToString();
            Session["MyCount"] = MyCount;
        }
        else
        {
            // we are done, stop the timer
            Timer1.Enabled = false;
        }
    }

我们现在 see/have 这个:

所以,我建议您在测试页上试试这个。放入该文本框、计时器和更新面板。

请注意,如果您只是 运行 在后面的代码中循环 1 到 10(没有计时器),那么代码会 运行、更新文本框(1 到 10) ,但您永远看不到结果,因为您只需参考上面的 post-back 图表即可了解其工作原理。

所以,你需要“运行”你必须创建新值的代码,但你需要一个计时器,一个时间计数器,每次你增加计时器,你更新一个网格中的框,然后每次计时器触发时,您都必须更新另一个框。

当计数器更新了所有新更改后,您的代码可以设置计时器 enabled = false 以停止此更新过程。