在我的产品表中,我有开始日期和结束日期。 我想在asp.net gridview中显示一个倒数计时器,这样它到期时将显示“ Project Ended”

它显示:但是,如何删除硬编码日期以从sql数据库中选择日期。 同样,使用硬编码日期,它在我的gridview表的第一行中仅显示一次。 这是aspx页面:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="Grid" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="ProjectID" DataSourceID="SqlDataSource1" ForeColor="Black" PageSize="50" GridLines="Vertical">
            <AlternatingRowStyle BackColor="#CCCCCC" />
            <Columns>
                 <asp:TemplateField HeaderText="S/N" HeaderStyle-Width="100">
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1 %>
                    </ItemTemplate>

<HeaderStyle Width="100px"></HeaderStyle>
                </asp:TemplateField>


                <asp:TemplateField HeaderStyle-Width="100" ShowHeader="False">
                <EditItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
                    &nbsp;<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" CssClass="glyphicon-edit"></asp:LinkButton>
                </ItemTemplate>
<HeaderStyle Width="100px"></HeaderStyle>
            </asp:TemplateField>

                <asp:TemplateField ShowHeader="false">
                <ItemTemplate>
            &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>

                <asp:BoundField DataField="ProjectID" HeaderText="ProjectID" InsertVisible="False" ReadOnly="True" SortExpression="ProjectID" />

                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Project Title" SortExpression="ProjectTitle">
                    <EditItemTemplate>
                       <asp:TextBox ID="projectT" runat="server" Text='<%#Bind("ProjectTitle")%>' Height="48px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ProjectTitle" runat="server" Text='<%#Bind("ProjectTitle") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:BoundField DataField="StartDate" ItemStyle-HorizontalAlign="Left" HeaderText="StartDate" DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" SortExpression="StartDate" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="EndDate" ItemStyle-HorizontalAlign="Left" HeaderText="EndDate" DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" SortExpression="EndDate" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="Duration" ItemStyle-HorizontalAlign="Left" HeaderText="Duration" SortExpression="Duration" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="ProjectCost" ItemStyle-HorizontalAlign="Left" HeaderText="ProjectCost" HtmlEncode="False" DataFormatString="{0:N}" SortExpression="ProjectCost" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="Currency" ItemStyle-HorizontalAlign="Left" HeaderText="Currency" SortExpression="Currency" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="PercentageOfCompletion" ItemStyle-HorizontalAlign="Left" HeaderText="% of Completion" HtmlEncode="False" DataFormatString="{0:P}" SortExpression="PercentageOfCompletion" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="PhaseType" ItemStyle-HorizontalAlign="Left" HeaderText="PhaseType" SortExpression="PhaseType" >

<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>

                <asp:TemplateField HeaderText="Type" SortExpression="Type">
                    <ItemTemplate>
                        <asp:Label ID="Type" runat="server" Text='<%# Bind("Type") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ProjectTypeID" runat="server" SelectedValue='<%# Bind("ProjectTypeID") %>' DataTextField="Type" DataValueField="ProjectTypeID" DataSourceID="SqlDataSource2"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>



                         <asp:TemplateField HeaderText="State" SortExpression="StateName">
                    <ItemTemplate>
                        <asp:Label ID="StateName" runat="server" Text='<%# Bind("StateName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="StateID" runat="server" SelectedValue='<%# Bind("StateID") %>' DataTextField="StateName" DataValueField="StateID" DataSourceID="SqlDataSource3"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="LGA" SortExpression="LGName">
                    <ItemTemplate>
                        <asp:Label ID="LGName" runat="server" Text='<%# Bind("LGName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="LGAID" runat="server" SelectedValue='<%# Bind("LGAID") %>' DataTextField="LGName" DataValueField="LGAID" DataSourceID="SqlDataSource4"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                        <asp:TemplateField HeaderText="Community" SortExpression="CommunityName">
                    <ItemTemplate>
                        <asp:Label ID="CommunityName" runat="server" Text='<%# Bind("CommunityName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="CommunityID" runat="server" SelectedValue='<%# Bind("CommunityID") %>' DataTextField="CommunityName" DataValueField="CommunityID" DataSourceID="SqlDataSource5"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Company" SortExpression="CompanyName">
                    <ItemTemplate>
                        <asp:Label ID="CompanyName" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="CoyID" runat="server" SelectedValue='<%# Bind("CoyID") %>' DataTextField="CompanyName" DataValueField="CoyID" DataSourceID="SqlDataSource6"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                         <asp:TemplateField HeaderText="Contractor" SortExpression="Company">
                    <ItemTemplate>
                        <asp:Label ID="Company" runat="server" Text='<%# Bind("Company") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ContractorID" runat="server" SelectedValue='<%# Bind("ContractorID") %>' DataTextField="Company" DataValueField="ContractorID" DataSourceID="SqlDataSource7"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Status" SortExpression="Status">
                    <ItemTemplate>
                        <asp:Label ID="Status" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ProjectStatusID" runat="server" SelectedValue='<%# Bind("ProjectStatusID") %>' DataTextField="Status" DataValueField="ProjectStatusID" DataSourceID="SqlDataSource8"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Year" SortExpression="Year">
                    <ItemTemplate>
                        <asp:Label ID="Year" runat="server" Text='<%# Bind("Year") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="YearID" runat="server" SelectedValue='<%# Bind("YearID") %>' DataTextField="Year" DataValueField="YearID" DataSourceID="SqlDataSource9"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>

                 <asp:BoundField DataField="ProjectExistence" ItemStyle-HorizontalAlign="Left" HeaderText="Proj Existence" SortExpression="ProjectExistence" >


<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>

                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Project Relevance" SortExpression="ProjectRelevance">
                    <EditItemTemplate>
                       <asp:TextBox ID="projectrelevance" runat="server" Text='<%#Bind("ProjectRelevance")%>' Height="204px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ProjectRelevance" runat="server" Text='<%#Bind("ProjectRelevance") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Remarks" SortExpression="Remarks">
                    <EditItemTemplate>
                       <asp:TextBox ID="remark" runat="server" Text='<%#Bind("Remarks")%>' Height="204px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="remark01" runat="server" Text='<%#Bind("Remarks") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="CountDown">
                    <ItemTemplate>
                        <div id="myCountdownClass"><%# !string.IsNullOrEmpty(Eval("EndDate").ToString()) ? Convert.ToDateTime(Eval("EndDate")).ToString("MM'/'dd'/'yyyy") : "" %></div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

这是我的脚本:

<script>
        // Set the date we're counting down to
        var countDownDate = new Date("Oct 5, 2017 15:37:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function () {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("myCountdownClass").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("myCountdownClass").innerHTML = "PROJECT ENDED";
            }
        }, 1000);

    </script>

#1楼 票数:0 已采纳

这是有关如何在GridView中创建倒数计时器的快速演示。 使用TemplateField并将正确的日期放入div中。 向该div添加一个类,以便您可以在jQuery中引用它。

<asp:TemplateField>
    <ItemTemplate>
        <div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
    </ItemTemplate>
</asp:TemplateField>

和jQuery函数

<script type="text/javascript">
    $('.myCountdownClass').each(function () {
        var date = $(this).text();
        $(this).countdown(date, function (event) {
            $(this).text(event.strftime('%D days %H:%M:%S'));
        });
    });
</script>

本演示将此用作倒计时计时器: http : //hilios.github.io/jQuery.countdown/

更新

为了防止在数据库值为null,时转换为日期时间时出错null,使用三元运算符。

<%# !string.IsNullOrEmpty(Eval("myDate").ToString()) ? Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") : "" %>

更新2

<script type="text/javascript" src="/jquery.countdown.min.js"></script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<script type="text/javascript">
    $('.myCountdownClass').each(function () {
        var date = $(this).text();
        $(this).countdown(date, function (event) {
            $(this).text(event.strftime('%D days %H:%M:%S'));
        });
    });
</script>

在此处输入图片说明

  ask by Paschal translate from so

未解决问题?本站智能推荐:

1回复

如何通过ASP.NET中的计时器自动刷新Gridview?

我想通过计时器自动刷新gridview。 (我希望它像实时数据一样工作) 它不起作用。没有错误,但是gridview不会自动刷新。 如何使用计时器或其他方式刷新像实时数据这样的gridview? Aspx C#
1回复

如何在asp.net中修复Javascript计时器(母版页概念)

我试图在我的asp.net项目中添加Javascript计时器,该计时器已实现并根据需要运行,但是如果按任何键,它将对我不利。 但是计时器正在运行。 Js。 码 我从按钮控件调用它。 码 我将其显示到Label控件中。 在Page_PreInit中的“ string ti
1回复

asp.net实时倒数计时器

我有一个aspx页面,可动态创建多个具有计时器值的asp:label,例如: 这些值每5分钟刷新一次。 我想做的是让他们实时倒数,直到页面刷新。 我怀疑javascript是最好的方法,但不确定如何开始。
1回复

ASP.Net,JavaScript中GridView上的行

我试图在JavaScript中的GridView前面放置一条垂直线以控制间隔,但是该线出现在网格的下方。 可能吗? 首先,我想到了单元格边界,但这是行不通的。 我正在使用svg画线。 该表是一个GridView。 这就是我所拥有的: 这就是我要的: 我想知道是否可以在另一个
3回复

指导我在asp.net中执行此计时器应用程序

我会说出我的想法。 如果该人以“ YYYY:MM:DD:HH:MM:SS”格式输入出生时间,我的应用程序将显示:Ur life timer是:“ 26:11:13:02:03:55”
4回复

在ASP.Net中对GridView中的TextBox进行JavaScript验证

我有一个GridView,其中在模板字段中有四个文本框。 我在GridView下有一个按钮。 单击按钮时如何验证GridView中的文本框?
1回复

从ASP.NET中的ClientSide(Javascript)刷新GridView

我已经在WebPage上添加了Gridview控件。 我通过调用PageMethod删除任何行(一次一行),如下所示: 其中“ row_id ”是该行的入门键。 它完美地显示了警报,但没有删除较少的行刷新Gridview。 我应该写什么代码来更新gridview? 注意:我不
1回复

在JavaScript的Asp.net标签中显示Gridview列总计

我想显示Gridview列总Label是外面Gridview 。 我写了波纹管函数,并在模糊时调用它,但是for循环未执行,它没有进入for循环,因此感谢任何帮助。