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

来源：互联网发布：人物关系网络算法编辑：程序博客网时间：2024/05/18 20:50

之前在论坛中看到一位朋友要在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;                    }                }            }        }    }}

运行效果：

希望本篇博文可以帮助到你，欢迎讨论。

0 0