使用ScriptManager+UpdatePanel+Timer控件实现在GridView中倒计时功能

最新推荐文章于 2020-05-25 11:51:04 发布

完美的神速

最新推荐文章于 2020-05-25 11:51:04 发布

阅读量1.6k

点赞数 1

分类专栏： asp.net

本文链接：https://blog.csdn.net/luanjun123456/article/details/40781185

版权

asp.net 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前在论坛中看到一位朋友要在asp.net GridView控件中实现如图的功能

其实这个效果要是在asp.net mvc中是很好实现的，我们可以写js去实现，但是在webform中，尤其是原生控件中，实现起来就不是那么得心应手，因为要在原生的控件中使用js，还是比较麻烦的。

但是，微软给我们提供了AJAX控件，虽然和传统意义上的ajax有些不同，但完全可以达到传统ajax的效果。

话不多说，上代码。

实体类（习惯了，可以不用）：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication
{
    public class Times
    {

<span style="white-space:pre">	</span>//时间
        public DateTime TestTime { get; set; }
    }
}

webform:

拖入一个ScriptManager和GridView控件，并给GridView添加两列。剩余时间列转换为模板。

编辑模板：

拖入UpdatePanel控件，并在UpdatePanel控件中拖入一个Timer和Label控件。因为我们是按秒倒计时的，所以我们要将Timer控件的属性Interval改为1000。

以上都完成以后，我们还有一步更为重要，设置UpdatePanel的Triggers属性，也就是触发器属性，笔者之前在没有设置该属性之前，每次都是页面整体刷新，后来才知道，要想实现UpdatePanel的刷新，就要设置Triggers属性，这也就是asp.net AJAX局部刷新的原理所在。

我们的触发器就是Timer的Tick事件。

以下是webform的全代码，你设置过后，应该是这样的：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication.WebForm2" %>

<!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">
    <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
                        </asp:ScriptManager>
        <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="TestTime" HeaderText="时间" />
                <asp:TemplateField HeaderText="剩余时间">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
                                </asp:Timer>
                                <asp:Label ID="Label1" runat="server" Text="" ></asp:Label>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                            </Triggers>
                        </asp:UpdatePanel>
                        
                        <br />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

后台代码：

using System;
using System.Collections;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                //添加测试数据
                List<Times> list = new List<Times>();
                list.Add(new Times { TestTime = DateTime.Parse("2014-11-30") });
                list.Add(new Times { TestTime = DateTime.Parse("2014-11-8") });
                list.Add(new Times { TestTime = DateTime.Parse("2014-10-31") });

                gvList.DataSource = list;
                gvList.DataBind();
            }
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            for (int i = 0; i < gvList.Rows.Count; i++)
            {
                if (gvList.Rows[i].RowType == DataControlRowType.DataRow)
                {
                    Label lbl = (Label)gvList.Rows[i].FindControl("Label1");
                    TimeSpan ts = new TimeSpan();
                    ts = Convert.ToDateTime(gvList.Rows[i].Cells[0].Text) - DateTime.Now;
                    if (ts.Days < 0)
                    {
                        lbl.Text = "已过期";
                        lbl.ForeColor = Color.Red;
                    }
                    else
                    {
                        lbl.Text = string.Format("{0}天{1}小时{2}分钟{3}秒", ts.Days, ts.Hours, ts.Minutes, ts.Seconds);
                        lbl.ForeColor = Color.Blue;
                    }
                }
            }
        }
    }
}

运行效果：