gridview asp.net中的javascript计时器
在我的产品表中,我有一个开始日期和结束日期。我想在我的asp.net gridview中显示一个倒计时计时器,当它过期时,它将显示“项目结束” 它显示了:但是如何删除硬编码日期以从sql数据库中选择日期。此外,硬编码日期在gridview表的第一行中只显示一次。 这是aspx页面:gridview asp.net中的javascript计时器,javascript,c#,asp.net,Javascript,C#,Asp.net,在我的产品表中,我有一个开始日期和结束日期。我想在我的asp.net gridview中显示一个倒计时计时器,当它过期时,它将显示“项目结束” 它显示了:但是如何删除硬编码日期以从sql数据库中选择日期。此外,硬编码日期在gridview表的第一行中只显示一次。 这是aspx页面: <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="Grid" AutoGenerateColumns="False
<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>
<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>
<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>
//确定我们倒计时的日期
var countDownDate=新日期(“2017年10月5日15:37:25”).getTime();
//每1秒更新一次倒计时
var x=设置间隔(函数(){
//获取今天的日期和时间
var now=new Date().getTime();
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在;
//天、小时、分钟和秒的时间计算
变量天数=数学楼层(距离/(1000*60*60*24));
可变小时数=数学楼层((距离%(1000*60*60*24))/(1000*60*60));
var分钟=数学楼层((距离%(1000*60*60))/(1000*60));
var秒=数学楼层((距离%(1000*60))/1000);
//使用id=“demo”在元素中显示结果
document.getElementById(“myCountdownClass”).innerHTML=days+“d”+hours+“h”
+分钟+米+秒+秒;
//如果倒计时结束,写一些文字
如果(距离<0){
净间隔(x);
document.getElementById(“myCountdownClass”).innerHTML=“项目结束”;
}
}, 1000);
下面是如何在GridView中创建倒计时计时器的快速演示。使用TemplateField
并将正确的日期放置在div中。向该div添加一个类,以便在jQuery中引用它
<asp:TemplateField>
<ItemTemplate>
<div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
</ItemTemplate>
</asp:TemplateField>
更新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>
这里是一个如何在GridView中创建倒计时计时器的快速演示。使用TemplateField
并将正确的日期放置在div中。向该div添加一个类,以便在jQuery中引用它
<asp:TemplateField>
<ItemTemplate>
<div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
</ItemTemplate>
</asp:TemplateField>
更新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>
如果我是你,我会开始寻找jQuery倒计时计时器。每秒刷新整个页面以显示倒计时是一个巨大的服务器负载。@VDWWD谢谢。现在使用jquery倒计时。如何从sql数据库自动获取日期。如果我是你,我会开始寻找jQuery倒计时计时器。每秒刷新整个页面以显示倒计时是一个巨大的服务器负载。@VDWWD谢谢。现在使用jquery倒计时。如何从sql数据库中自动获取日期。非常感谢。我面临这个挑战,我的数据库中的一些结束日期列为空。因此,我收到此错误消息“对象无法从DBNull转换为其他类型”。我如何设置条件以绕过该条件,并为数据库中“结束日期”列中有日期的对象提供倒计时。更新了我的答案。感谢您的即时回答。我很感激。我的gridview现在正在显示。但是倒计时列显示的是结束日期,而不是倒计时计时器的显示和滴答声