前台多个div控件隐藏显示切换时页面白色闪烁

yct0605 2018-07-07 07:26:55
前台页面内有三个div服务器控件（同样大小，不同背景图片）和一个定时器控件timer，后台使用this.div_ybxx.Style["Display"] = "Block"或"None" 进行显示和隐藏控制，现在使用定时器Timer1_Tick事件，每格5秒钟控制一个div控件显示，其余两个div控件隐藏，以及数据读取显示，本机测试页面刷新时无白色闪烁，部署到服务器上后，客户端连接测试发现每次div控件显示时都会出现白色闪烁，整个页面没有设置刷新，但div切换时感觉会带动页面闪烁，求大家给个解决的办法，谢谢！
前台页面：


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Plan_L5.cs" Inherits="Line5_Plan" %>



<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>信息</title>

</head>

<body>

   <form id="form1" runat="server">

       <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

       <asp:UpdatePanel ID="UpdatePanel1" runat="server">

       <ContentTemplate>  

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

        <div id="div_ybxx" runat="server" style="width:100%; height:100%; top: 0px; left:0px; position: fixed; background-image: url('../images/ybxx.jpg');"> 

            <asp:UpdatePanel ID="UpdatePanel2" runat="server">

            <ContentTemplate>   

            <table id="tb_ybxx" style="width:100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

             </table>

            </ContentTemplate>

            </asp:UpdatePanel>

        </div>

        <div id="div_jbgx" runat="server" style="width:100%; height:100%; top: 0px; left:0px; position: fixed; background-image: url('../images/jbgx.jpg');"> 

            <asp:UpdatePanel ID="UpdatePanel3" runat="server">

            <ContentTemplate>

            <table id="tb_jbgx" style="width:100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

            </table>

            </ContentTemplate>

            </asp:UpdatePanel>

        </div>

      </ContentTemplate>

      </asp:UpdatePanel>

    </form>

</body>

</html>

//后台代码

public partial class Line5_Plan : System.Web.UI.Page

{

    public static int flag     = 0;

    public static int flagYB   = 0;

    public static int SelCount = 0;

    public static int jdbfb    = 0;

    public static int jdwith   = 0;



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled  = true;

        }

    }



    protected void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;

        flag++;



        switch (flag)

        {

            case 1:

                this.div_ybxx.Style["Display"] = "Block"; //显示

                this.div_jbgx.Style["Display"] = "None";  //隐藏



                flagYB++;

                switch (flagYB)

                {

                    case 1:

                        ReadYBInfo_1(0, 9, 1);

                        flag = 0;

                        break;

                    case 2:

                        ReadYBInfo_1(9, 18, 2);

                        flag = 0;

                        break;

                    case 3:

                        ReadYBInfo_1(18, 27, 3);

                        flagYB = 0;

                        break;

                }

                break;

            case 2:

                this.div_ybxx.Style["Display"] = "None";   //隐藏

                this.div_jbgx.Style["Display"] = "Block";  //显示

                flag = 0;

                break;

            default:

                flag   = 0;

                flagYB = 0;

                break;

        }



        Timer1.Interval = 10000;

        Timer1.Enabled  = true;

    }



    private void ReadYBInfo_1(int SNo,int ENo,int flag)

    {

       //

    }

}
...全文
575 30 打赏 收藏 转发到动态 举报
写回复
用AI写文章
30 条回复
切换为时间正序
请发表友善的回复…
发表回复
非专业开发Five 2018-07-16
  • 打赏
  • 举报
 回复
引用 29 楼 yct0605 的回复:
[quote=引用 27 楼 xomix 的回复:]


protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {



        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

        //你应该在这里连接数据库，读取表中的字段然后返回成一个组合，比如List啊比如你自己定义的每个控件的值的 键值对啊。

 

        //我在这里把从数据库中采集的数据写在这里，然后直接返回到具体的timer方法中，由timer去做修改table的操作。

        //现在只能显示this.div_ybxx.InnerHtml = (await ReadYBInfo_1()) + flag.ToString();  flag数值增加能看到这是当然的，你看看timer方咯

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;//不解释了这是关闭自己防止多次执行

        flag++;//flag这个你之前就有很多我保留了

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";//这是隐藏显示切换代码

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";//这个跟上面一样，这里的写法是如果隐藏就显示否则就隐藏

        if (this.div_ybxx.Style["Display"] == "None")//这里是具体修改div内元素的代码你当然不能按照这个直接修改div的InnerHtml了，你的lable修改应该放在这里啊。

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }//修改代码结束，这里的if else就是看修改哪个div



        Timer1.Interval = 1000;//重新执行timer不解释了

        Timer1.Enabled = true;

    }

已经可以显示了，但部署到服务器上之后，客户端浏览的时候还是会有短暂的闪烁白屏的现象，System.Threading.Thread.Sleep(1000)已经调整了，但效果不是很好。可能和经过光纤+多个交换机，有延时有关吧，不过还是十分感谢您的指导，谢谢！[/quote]
System.Threading.Thread.Sleep(1000)是用来模拟你客户端耗时操作的，你实际有了耗时操作就把他去掉。
其他没啥了
非专业开发Five 2018-07-13
  • 打赏
  • 举报
 回复 


protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {



        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

        //你应该在这里连接数据库，读取表中的字段然后返回成一个组合，比如List啊比如你自己定义的每个控件的值的 键值对啊。

 

        //我在这里把从数据库中采集的数据写在这里，然后直接返回到具体的timer方法中，由timer去做修改table的操作。

        //现在只能显示this.div_ybxx.InnerHtml = (await ReadYBInfo_1()) + flag.ToString();  flag数值增加能看到这是当然的，你看看timer方咯

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;//不解释了这是关闭自己防止多次执行

        flag++;//flag这个你之前就有很多我保留了

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";//这是隐藏显示切换代码

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";//这个跟上面一样，这里的写法是如果隐藏就显示否则就隐藏

        if (this.div_ybxx.Style["Display"] == "None")//这里是具体修改div内元素的代码你当然不能按照这个直接修改div的InnerHtml了，你的lable修改应该放在这里啊。

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }//修改代码结束，这里的if else就是看修改哪个div



        Timer1.Interval = 1000;//重新执行timer不解释了

        Timer1.Enabled = true;

    }
非专业开发Five 2018-07-13
  • 打赏
  • 举报
 回复
引用 25 楼 yct0605 的回复:
[quote=引用 23 楼 xomix 的回复:]
[quote=引用 19 楼 yct0605 的回复:]
大神，你的代码是html的页面是吧，我想用aspx的页面，你的代码放上去提示找不到异步的async命名空间

异步是.NET 4.5的特性，所以要求最低.NET版本为4.5。[/quote]
大神，现在可以切换两个div了，但是table里面的文字都没有了，这是什么情况？


protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        //这里连接数据库，读取表中的字段值赋值给前台的label控件



        //我在这里把从数据库中采集的数据写在这里，然后把取到的数值赋值给table里面的td内的label控件，但是label并没有显示出来，

        //现在只能显示this.div_ybxx.InnerHtml = (await ReadYBInfo_1()) + flag.ToString();  flag数值增加能看到

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }

         // 前台的table表格

            <tr style="height:130px">

                 <td style="width:2%"></td>

                 <td style="text-align: center">牌号</td>

                 <td style="text-align: center"><asp:Label ID="lb_ph1" runat="server" Text=""></asp:Label></td>

                 <td style="text-align: center"><asp:Label ID="lb_ph2" runat="server" Text=""></asp:Label></td>

             </tr>

            //前台的“牌号”不显示，lb_ph1和lb_ph2也不显示，只有一个空白的背景图片在切换
[/quote]
位置放错了。


    protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            //这是异步方法的核心，你需要把耗时操作都写在这里面，甚至说严格点你需要把整个方法都写在这里面

            System.Threading.Thread.Sleep(500);//这里模拟的是具体的耗时操作，你在实际代码中需要用实际耗时操作替换这一句

            return divid;//这里的返回值要和Task<string> 的尖括号中一致，不仅是这个Task 包括这个方法也要一致。

        });

    }


注意一下这些对应关系就行了，这就是个异步方法的具体写法，你按照你的实际工作改造一下尖括号里面的返回值就行了，要注意不要在这里面修改任何页面数据，而应该在这里面把需要修改的值返回给主界面由主界面修改页面。
yct0605 2018-07-13
  • 打赏
  • 举报
 回复
引用 27 楼 xomix 的回复:


protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {



        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

        //你应该在这里连接数据库，读取表中的字段然后返回成一个组合，比如List啊比如你自己定义的每个控件的值的 键值对啊。

 

        //我在这里把从数据库中采集的数据写在这里，然后直接返回到具体的timer方法中，由timer去做修改table的操作。

        //现在只能显示this.div_ybxx.InnerHtml = (await ReadYBInfo_1()) + flag.ToString();  flag数值增加能看到这是当然的，你看看timer方咯

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;//不解释了这是关闭自己防止多次执行

        flag++;//flag这个你之前就有很多我保留了

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";//这是隐藏显示切换代码

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";//这个跟上面一样，这里的写法是如果隐藏就显示否则就隐藏

        if (this.div_ybxx.Style["Display"] == "None")//这里是具体修改div内元素的代码你当然不能按照这个直接修改div的InnerHtml了，你的lable修改应该放在这里啊。

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }//修改代码结束，这里的if else就是看修改哪个div



        Timer1.Interval = 1000;//重新执行timer不解释了

        Timer1.Enabled = true;

    }

已经可以显示了，但部署到服务器上之后，客户端浏览的时候还是会有短暂的闪烁白屏的现象，System.Threading.Thread.Sleep(1000)已经调整了，但效果不是很好。可能和经过光纤+多个交换机，有延时有关吧，不过还是十分感谢您的指导，谢谢！
yct0605 2018-07-12
  • 打赏
  • 举报
 回复
引用 23 楼 xomix 的回复:
[quote=引用 19 楼 yct0605 的回复:]
大神，你的代码是html的页面是吧，我想用aspx的页面，你的代码放上去提示找不到异步的async命名空间

异步是.NET 4.5的特性，所以要求最低.NET版本为4.5。[/quote]
大神，现在可以切换两个div了，但是table里面的文字都没有了，这是什么情况？


protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        //这里连接数据库，读取表中的字段值赋值给前台的label控件



        //我在这里把从数据库中采集的数据写在这里，然后把取到的数值赋值给table里面的td内的label控件，但是label并没有显示出来，

        //现在只能显示this.div_ybxx.InnerHtml = (await ReadYBInfo_1()) + flag.ToString();  flag数值增加能看到

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }

         // 前台的table表格

            <tr style="height:130px">

                 <td style="width:2%"></td>

                 <td style="text-align: center">牌号</td>

                 <td style="text-align: center"><asp:Label ID="lb_ph1" runat="server" Text=""></asp:Label></td>

                 <td style="text-align: center"><asp:Label ID="lb_ph2" runat="server" Text=""></asp:Label></td>

             </tr>

            //前台的“牌号”不显示，lb_ph1和lb_ph2也不显示，只有一个空白的背景图片在切换
yct0605 2018-07-12
  • 打赏
  • 举报
 回复
引用 23 楼 xomix 的回复:
[quote=引用 19 楼 yct0605 的回复:]
大神，你的代码是html的页面是吧，我想用aspx的页面，你的代码放上去提示找不到异步的async命名空间

异步是.NET 4.5的特性，所以要求最低.NET版本为4.5。[/quote]
了解，才看明白是什么情况，感谢大神啊，还有你这样热心人，一步步叫我怎么做。
非专业开发Five 2018-07-11
  • 打赏
  • 举报
 回复
引用 19 楼 yct0605 的回复:
大神，你的代码是html的页面是吧，我想用aspx的页面，你的代码放上去提示找不到异步的async命名空间

异步是.NET 4.5的特性，所以要求最低.NET版本为4.5。
非专业开发Five 2018-07-11
  • 打赏
  • 举报
 回复 




<%@ Page Language="C#" Async="true" %>

<!--这是aspx的页面头你应该看的出来吧-->

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<script runat="server">

 <!--这部分就是你以前写的aspx.cs我只不过都写在一个页面了方便你复制粘贴-->

    public static int flag = 0;

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;

        flag++;

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        if (this.div_ybxx.Style["Display"] == "None")

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }

        Timer1.Interval = 1000;

        Timer1.Enabled = true;

    }

    protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }

 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<!--这里才是以前的aspx页面代码部分，你当然要新建aspx粘贴进去了，html不报错iis已经很给你面子了-->

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>
非专业开发Five 2018-07-11
  • 打赏
  • 举报
 回复
引用 20 楼 yct0605 的回复:
[quote=引用 17 楼 xomix 的回复:]


<%@ Page Language="C#" Async="true" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">



    public static int flag = 0;

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;

        flag++;

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        if (this.div_ybxx.Style["Display"] == "None")

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }

        Timer1.Interval = 1000;

        Timer1.Enabled = true;

    }

    protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>


有异步，有变化，有sleep模拟耗时的实际例子，你新建一个页面然后把这些代码粘贴进去就可以看到全部的效果了。

代码贴到html页面运行后，可以显示，但是感觉定时器没有自动刷新，两个div也没有切换。[/quote]
你当然要新建aspx页面了，这个是有后端代码的
yct0605 2018-07-11
  • 打赏
  • 举报
 回复
引用 17 楼 xomix 的回复:


<%@ Page Language="C#" Async="true" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">



    public static int flag = 0;

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;

        flag++;

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        if (this.div_ybxx.Style["Display"] == "None")

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }

        Timer1.Interval = 1000;

        Timer1.Enabled = true;

    }

    protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>


有异步，有变化，有sleep模拟耗时的实际例子，你新建一个页面然后把这些代码粘贴进去就可以看到全部的效果了。

代码贴到html页面运行后，可以显示，但是感觉定时器没有自动刷新，两个div也没有切换。
yct0605 2018-07-11
  • 打赏
  • 举报
 回复
大神，你的代码是html的页面是吧，我想用aspx的页面，你的代码放上去提示找不到异步的async命名空间
yct0605 2018-07-11
  • 打赏
  • 举报
 回复
引用 17 楼 xomix 的回复:


<%@ Page Language="C#" Async="true" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">



    public static int flag = 0;

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;

        flag++;

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        if (this.div_ybxx.Style["Display"] == "None")

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }

        Timer1.Interval = 1000;

        Timer1.Enabled = true;

    }

    protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>


有异步，有变化，有sleep模拟耗时的实际例子，你新建一个页面然后把这些代码粘贴进去就可以看到全部的效果了。

大神真是无微不至啊，太感谢，我先测试一下
非专业开发Five 2018-07-11
  • 打赏
  • 举报
 回复 


<%@ Page Language="C#" Async="true" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">



    public static int flag = 0;

    protected async void Timer1_Tick(object sender, EventArgs e)

    {

        Timer1.Enabled = false;

        flag++;

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        if (this.div_ybxx.Style["Display"] == "None")

        {

            this.div_ybxx.InnerHtml = (await ReadYBInfo_1(div_ybxx.ID))+flag.ToString();

        }

        else

        {

            this.div_jbgx.InnerHtml = (await ReadYBInfo_1(div_jbgx.ID))+flag.ToString();

        }

        Timer1.Interval = 1000;

        Timer1.Enabled = true;

    }

    protected async System.Threading.Tasks.Task<string> ReadYBInfo_1(string divid)

    {

        return  await System.Threading.Tasks.Task<string>.Run(() =>

        {

            System.Threading.Thread.Sleep(500);

            return divid;

        });

    }



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>


有异步，有变化，有sleep模拟耗时的实际例子，你新建一个页面然后把这些代码粘贴进去就可以看到全部的效果了。
非专业开发Five 2018-07-11
  • 打赏
  • 举报
 回复
引用 15 楼 yct0605 的回复:
[quote=引用 9 楼 sp1234 的回复:]
[quote=引用 1 楼 yct0605 的回复:]
网上有说javascript，以及高级一点的jQuery或则ajax，本人小白，不是很懂，有学习的网站或例子，谢谢！


前端技术，跟 asp.net 服务器端编程技术，完全不同。实际上前端是基础，最基本的前端技术学会了才能学习 asp.net。

5年前我贴出一个 updatepanel 的例子。 https://bbs.csdn.net/topics/390631332

但是实际上 10年前我就在 csdn 说很多次了，asp.net 服务器端技术对于 web 企业级应用程序开发，已经算是过时的、用户体验很不好的了。用户体验好的方式都是基于前端的（例如10年前的 silverlight、Flex、web3.0）。[/quote]
先前的例子也很有用，没有前端基础的小白先收藏了，多谢指教。[/quote]
那天我三连回复了，就没说完，你要用异步要在页面上加参数的，我等下给你一份有异步的例子。
yct0605 2018-07-11
  • 打赏
  • 举报
 回复
引用 9 楼 sp1234 的回复:
[quote=引用 1 楼 yct0605 的回复:]
网上有说javascript，以及高级一点的jQuery或则ajax，本人小白，不是很懂，有学习的网站或例子，谢谢！


前端技术，跟 asp.net 服务器端编程技术，完全不同。实际上前端是基础，最基本的前端技术学会了才能学习 asp.net。

5年前我贴出一个 updatepanel 的例子。 https://bbs.csdn.net/topics/390631332

但是实际上 10年前我就在 csdn 说很多次了，asp.net 服务器端技术对于 web 企业级应用程序开发，已经算是过时的、用户体验很不好的了。用户体验好的方式都是基于前端的（例如10年前的 silverlight、Flex、web3.0）。[/quote]
先前的例子也很有用，没有前端基础的小白先收藏了，多谢指教。
yct0605 2018-07-11
  • 打赏
  • 举报
 回复
引用 12 楼 xomix 的回复:
删除了没什么用的button，删除了没用的方法。

下面是自动切换的代码，我这边运行一切正常，你拿去慢慢研究。


<%@ Page Language="C#" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)

    {

        Timer1.Interval = 100;

        Timer1.Enabled = true;

    }

    protected void Timer1_Tick(object sender, EventArgs e)

    {

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

    }

    protected void Page_Load(object sender, EventArgs e)

    {

        ScriptManager1.RegisterAsyncPostBackControl(Timer1);

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>

感谢各位大神的指导，本人前端技术为0，先慢慢学习一下
非专业开发Five 2018-07-09
  • 打赏
  • 举报
 回复 
ScriptManager1.RegisterAsyncPostBackControl(Timer1);


核心代码就这一句，没有属性设置等需要，你只要让你的回调异步即可，这东西比较新，其实就是把UpdatePanel外的东西注册为异步回调用的。
当然我写的时候全部扔进UpdatePanel里面了，所以写不写这一句无所谓。
你内部方法写的时候请写成异步的，这样就不会白屏了。
当然如果跟我这边写的一样是修改一个属性的你不写异步也可以，否则还是老老实实写成异步的。不然你的“白屏”实际上是在回调后等待timer执行完成的过程导致的。
非专业开发Five 2018-07-09
  • 打赏
  • 举报
 回复
删除了没什么用的button，删除了没用的方法。

下面是自动切换的代码，我这边运行一切正常，你拿去慢慢研究。


<%@ Page Language="C#" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)

    {

        Timer1.Interval = 100;

        Timer1.Enabled = true;

    }

    protected void Timer1_Tick(object sender, EventArgs e)

    {

        this.div_ybxx.Style["Display"]= this.div_ybxx.Style["Display"]=="None"?"Block":"None";

        this.div_jbgx.Style["Display"]=this.div_ybxx.Style["Display"]=="None"?"Block":"None";

    }

    protected void Page_Load(object sender, EventArgs e)

    {

        ScriptManager1.RegisterAsyncPostBackControl(Timer1);

        if (!IsPostBack)

        {

            Timer1.Interval = 100;

            Timer1.Enabled = true;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

    </form>

</body>

</html>
非专业开发Five 2018-07-09
  • 打赏
  • 举报
 回复 


<%@ Page Language="C#" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script runat="server">

    protected DateTime LastUpdate

    {

        get

        {

            return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);

        }

        set

        {

            ViewState["LastUpdate"] = value;

        }

    }



    protected void Button1_Click(object sender, EventArgs e)

    {

        Timer1.Interval = 100;

        Timer1.Enabled = true;

    }

    protected void Timer1_Tick(object sender, EventArgs e)

    {

        this.div_ybxx.Style["Display"] = this.div_ybxx.Style["Display"]== "None"?"Block":"None";

        this.div_jbgx.Style["Display"] = this.div_ybxx.Style["Display"]== "None"?"Block":"None";

    }

    protected void Page_Load(object sender, EventArgs e)

    {

        ScriptManager1.RegisterAsyncPostBackControl(Button1);

        if (!IsPostBack)

        {

            LastUpdate = DateTime.Now;

        }

    }

</script>



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>UpdatePanelUpdateMode Example</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="ScriptManager1"

                               runat="server" />

            <asp:UpdatePanel ID="updatepanel1" runat="server">

                <ContentTemplate>

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

                    <div id="div_ybxx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/ybxx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                            <ContentTemplate>

                                <table id="tb_ybxx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                a</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                    <div id="div_jbgx" runat="server" style="width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-image: url('../images/jbgx.jpg');">

                        <asp:UpdatePanel ID="UpdatePanel3" runat="server">

                            <ContentTemplate>

                                <table id="tb_jbgx" style="width: 100%; font-family: 微软雅黑; font-size: 34px; color: #feecdd;" border="0">

                                b</table>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

            <asp:Button ID="Button1" Text="Button1" runat="server" OnClick="Button1_Click" />

        </div>

    </form>

</body>

</html>

没什么问题，正常切换，你这边有问题我就不太了解为什么了
songlch 2018-07-09
  • 打赏
  • 举报
 回复
两个DIV都加上position:absolute;试试看，case 2那个分支的显示放在隐藏前面试试看
加载更多回复（9）
ExtAspNet_v2.3.2_dll
+为所有Panel（包括Grid,Tree,Form等）增加枚举类型Icon，其中包含1700多个小图标。 -如果Panel具有IconUrl属性，则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
+为所有Panel（包括Grid,Tree,Form等）增加枚举类型Icon，其中包含1700多个小图标。 -如果Panel具有IconUrl属性，则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
vue项目页面一闪一闪的问题解决办法（v-if闪屏、花括号闪屏）
今天遇到一个vue项目的问题，就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的，如下视频所示：vue项目页面用了v-if与v-else后一闪一闪的代码如下所示：当弹窗显示时，前台调后端接口后根据后端返回值来确定...
div+css布局的问题
2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 　（ 3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。 　 引入方式 3种：行内添加...
前端课程复习题
”当文本超出时显示为省略号。 overflow：hidden; 不显示超过对象尺寸的内容，就是把超出的部分隐藏了； text-overflow：ellipsis; 当文本对象溢出是显示…，当然也可是设置属性为 clip 不显示点点点； 单行文本溢出...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章