0

Asp.net 4.0/C# SQL 2008 の使用

グリッドビューを含むページがあります。有効期限に達するまで逆方向にカウントする HH:MM:SS 形式のカウントダウン クロックが必要です。私のコードは、グリッドビューの最初の行のクロックを正しく表示していますが、追加の行は JavaScript クロックを実行していません。

テスト目的で、一般的な主キー、有効期限、および現在の日付を含む基本的なストアド プロシージャがあります。2 つの日付の差を取得してフォーマットする JavaScript 関数を呼び出します。 グリッドビューの各行にカウントダウン クロック タイマーを表示するための支援をお願いします。

現在の SQL コード:

create proc dbo.tmpdate2 as
begin
select 1 as ElementID, DATEADD(HH,1,GETDATE()) AS ExpDate, getdate() as NowDate
union all
select 2 as ElementID, DATEADD(HH,2,GETDATE()) AS ExpDate, getdate() as NowDate
END

現在の ASPX Gridview コード:

     <asp:GridView ID="GridView1" runat="server" BackColor="White" 
    BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
    ForeColor="Black" GridLines="Vertical">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:TemplateField HeaderText="Todays Date">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"><%# Eval("NowDate")%></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Expiration Date">
            <ItemTemplate>
                <div>
                <label id="ElementID"><label>
                <script language="javascript" type="text/javascript">
                    function Countdown(ElementID, ExpDateTimeString, NowDateTimeString) {
                        var NowDateTime = new Date(NowDateTimeString);
                        var ExpDateTime = new Date(ExpDateTimeString);

                        // convert the current date and the target date into miliseconds                       
                        var NowDateTimeMS = (NowDateTime).getTime();
                        var ExpDateTimeMS = (ExpDateTime).getTime();

                        // find their difference, and convert that into seconds                 
                        var TimeLeftSecs = Math.round((ExpDateTimeMS - NowDateTimeMS) / 1000);

                        if (TimeLeftSecs < 0) {
                            TimeLeftSecs = 0;
                        }

                        var Hours = Math.floor(TimeLeftSecs / (60 * 60));
                        TimeLeftSecs %= (60 * 60);
                        var Minutes = Math.floor(TimeLeftSecs / 60);
                        if (Minutes < 10) {
                            Minutes = "0" + Minutes;
                        }
                        TimeLeftSecs %= 60;
                        var Seconds = TimeLeftSecs;
                        if (Seconds < 10) {
                            Seconds = "0" + Seconds;
                        }

                        document.getElementById('ElementID').innerHTML = Hours + ":" + Minutes + ":" + Seconds;

                        // increment the NowDateTime 1 second
                        NowDateTimeMS += 1000;
                        NowDateTime.setTime(NowDateTimeMS);
                        // recursive call, keeps the clock ticking
                        var FunctionCall = "Countdown('" + ElementID + "','" + ExpDateTime + "','" + NowDateTime + "');";
                        setTimeout(FunctionCall, 1000);
                    }
                </script>
                <script language="javascript" type="text/javascript">

                        var NowDateTime = new Date('<%# Eval("NowDate") %>');
                        var ExpDateTime = new Date('<%# Eval("ExpDate") %>');
                        var ElementID = "00:00:00"; 

                        // recursive call, keeps the clock ticking
                        var FunctionCall = "Countdown('" + ElementID + "','" + ExpDateTime + "','" + NowDateTime + "');";
                        setTimeout(FunctionCall, 1000);
                </script>
                </div>
            </ItemTemplate>
        </asp:TemplateField>


    </Columns>
    <FooterStyle BackColor="#CCCC99" />
    <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#F7F7DE" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FBFBF2" />
    <SortedAscendingHeaderStyle BackColor="#848384" />
    <SortedDescendingCellStyle BackColor="#EAEAD3" />
    <SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>

現在の ASPX.CS コード:

protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection thisConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["SomeConnectionString2"].ConnectionString);

        SqlCommand command = new SqlCommand("tmpdate2", thisConnection);
        command.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter adapter = new SqlDataAdapter(command);

        DataTable table = new DataTable();

        adapter.Fill(table);

        GridView1.DataSource = table;
        GridView1.DataBind();
    }
4

1 に答える 1

0

アイデアは、ジェネリックメソッドを持ち、各行でそのメソッドを呼び出すことです...例:

テーブルの列は次のとおりにする必要があります。

    <ItemTemplate>
        <span id="timer_<%# Container.DataItemIndex %>" 
              class="timer" 
              data-start="<%# Eval("EndDate")%>"></span>
    </ItemTemplate>
</asp:TemplateField>

次に、ページの最後のブロックで、タイマーのカウントダウンを行い、次のように要素<script>ごとに起動する必要があります。.timer

jQuery を使用して単純化する

<script>
$(function() {
    $(".timer").each(function() {
        var startTime = $(this).data("start");
        Countdown($(this).attr("id"), startTime, new date());
    });
});

function Countdown(ElementID, ExpDateTimeString, NowDateTimeString) { 
    // your countdown...
}
</script>
于 2013-05-04T22:17:42.143 に答える