How to use a countdown timer inside Repeater ItemTemplate

Hi

This a common task for Auction bid, events, promotions, project deadline etc.

For this sample we need to create a sql table and one stored procedure:

GO

CREATE TABLE MMAuctionSystem_Auctions(

[AuctionID] [int] IDENTITY(1,1) NOT NULL,

[AuctionType] [int] NOT NULL,

[ProductName] [nvarchar](255) NOT NULL,

[Description] [nvarchar](500) NOT NULL,

[Price] [MONEY] NOT NULL,

[ThumbImage] [nvarchar](100) NOT NULL,  

[EndsDate] [datetime] NOT NULL,

[HasFinished] [bit] NOT NULL,

[TimeCreated] [datetime] NOT NULL,

[TimeFinished] [datetime] NOT NULL,

 CONSTRAINT [PK_MMAuctionSystem_Auctions] PRIMARY KEY CLUSTERED  (AuctionID))

GO

GO

INSERT INTO MMAuctionSystem_Auctions(AuctionType, ProductName, Description, Price, ThumbImage, EndsDate, HasFinished, TimeCreated, TimeFinished)

VALUES (5, 'Samsung Galaxy (White)', 'Samsung Galaxy S2 (White)', 345.0000, 'Samsung-Galaxy-S2-w.jpg', '2012-05-16 20:34:18.550', 0, '2012-05-16 20:34:18.550', '2012-05-16 20:34:18.550')

GO

INSERT INTO MMAuctionSystem_Auctions(AuctionType, ProductName, Description, Price, ThumbImage, EndsDate, HasFinished, TimeCreated, TimeFinished)

VALUES (5, 'Samsung Galaxy (Black)', 'Samsung Galaxy S2 (Black)', 299.0000, 'Samsung-Galaxy-S2-b.jpg', '2012-05-18 20:34:18.550', 0, '2012-05-18 20:34:18.550', '2012-05-18 20:34:18.550')

GO

GO

CREATE PROCEDURE MMAuctionSystem_AuctionsGetAll

AS

SELECT * FROM [MMAuctionSystem_Auctions]

GO

Use the default.aspx page to display the countdown timer:

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

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

    <div>

        <asp:Repeater ID="Repeater1" runat="server">

            <ItemTemplate>

                <br />

                <%# Eval("Price")%>

                <br />

                <%# Eval("ProductName")%>

                <br />

                <asp:UpdatePanel runat="server" ID="TimedPanel" UpdateMode="Conditional">

                    <Triggers>

                        <asp:AsyncPostBackTrigger ControlID="UpdateTimer" EventName="Tick" />

                    </Triggers>

                    <ContentTemplate>

                        <%# Eval("EndsDate")%><br />

                        Time left<br />

                        <%# GetTimeLeft((DateTime)Eval("EndsDate")).ToString() %>

                    </ContentTemplate>

                </asp:UpdatePanel>

                <asp:Timer runat="server" ID="UpdateTimer" Interval="1000" />

                <br />

            </ItemTemplate>

        </asp:Repeater>

    </div>

    </form>

Code behind default.aspx.cs:

protected void Page_Load(object sender, EventArgs e)

    {

        SqlConnection thisConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString);

        SqlCommand command = new SqlCommand("MMAuctionSystem_AuctionsGetAll", thisConnection);

        SqlDataAdapter adapter = new SqlDataAdapter(command);

        DataTable table = new DataTable();

        adapter.Fill(table);

        Repeater1.DataSource = table;

        Repeater1.DataBind();

    }

    protected string GetTimeLeft(DateTime EndsDate)

    {

        string FormatDate = "MM/dd/yyyy HH:mm:ss";

        string newenddate = EndsDate.ToString(FormatDate);

        DateTime myDate1 = CurrentTime();

        DateTime myDate2 = DateTime.Parse(newenddate);

        return (myDate2 - myDate1).ToString();

    }

    private DateTime CurrentTime()

    {

        string FormatDate = "MM/dd/yyyy HH:mm:ss";

        // If your local time needs to be fixed (- or +) hours.

        DateTime currentServerTime = DateTime.Now.AddHours(0);

        return DateTime.Parse(currentServerTime.ToString(FormatDate));

    }