c# - Set an asp:HiddenField value from codebehind and access in javascript function - Stack Overflow

admin管理员组

文章数量:1316351

I'm trying to setup a countdown timer for an asp:Timer which will refresh the page upon finishing. What I'm doing is setting the timer interval and a hidden value when it initializes, and then calling a javascript function which starts the countdown timer using the hiddenfield's information.

The interval gets set, and the hidden field value gets set, but after trying various things, the results I get are a problem where the hiddenfield value is uninitialized when the javascript runs. It's uninitialized when I try to call the function directly on document load as well.

Here is the code I'm currently using.

codebehind

DateTime refreshTime;
protected void refreshHidden_Init(object sender, EventArgs e)
{
    refreshTime = DateTime.Now.AddSeconds(60);
    refreshHidden.Value = refreshTime.ToString();
    int timeToFresh = (int)(refreshTime - DateTime.Now).TotalMilliseconds;
    refreshTimer.Interval = timeToFresh;
    refreshTimerJS();
}

protected void refreshTimerJS()
{
    StringBuilder script = new StringBuilder();
    script.Append("<script type=\"text/javascript\">");
    script.Append("var dt='");
    script.Append(refreshTime.ToString());
    script.Append("';");
    script.Append("</script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DateVars", script.ToString());
}

the page

<div id="autopriseUpdate" class="content">
    <asp:Timer runat="server" ID="refreshTimer" Interval="600000" OnTick="refreshTimer_Tick"></asp:Timer>
    <asp:Label runat="server" ID="refreshLabel" Text="1m 0s"></asp:Label>
    <asp:HiddenField runat="server" ID="refreshHidden" OnInit="refreshHidden_Init"/>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/refresh.js"></script>

javascript

$(document).ready(function () {
    refreshJS();
});

function refreshJS(){
    var dt = new Date($('#refreshHidden').value);
    $('#refreshLabel').countdown(dt).on('update.countdown', function (event)
    {
        $(this).html(event.strftime('%M:%S'));
    });
}

The hiddenfield value is set and the asp:Timer interval counts down and refreshes right on the dot, but the countdown timer doesn't start up. My best guess is that there's something I need to fix in the order things happen, but I haven't got a clue.

I can't just hardcode the countdown value because I'm going to make the refreshTime variable, so the user can choose how many minutes are between page refreshes.

If anybody has an idea for how to get my javascript working or how to get the DateTime value from codebehind some other way and utilize it, I would really appreciate the help!

I'm trying to setup a countdown timer for an asp:Timer which will refresh the page upon finishing. What I'm doing is setting the timer interval and a hidden value when it initializes, and then calling a javascript function which starts the countdown timer using the hiddenfield's information.

The interval gets set, and the hidden field value gets set, but after trying various things, the results I get are a problem where the hiddenfield value is uninitialized when the javascript runs. It's uninitialized when I try to call the function directly on document load as well.

Here is the code I'm currently using.

codebehind

DateTime refreshTime;
protected void refreshHidden_Init(object sender, EventArgs e)
{
    refreshTime = DateTime.Now.AddSeconds(60);
    refreshHidden.Value = refreshTime.ToString();
    int timeToFresh = (int)(refreshTime - DateTime.Now).TotalMilliseconds;
    refreshTimer.Interval = timeToFresh;
    refreshTimerJS();
}

protected void refreshTimerJS()
{
    StringBuilder script = new StringBuilder();
    script.Append("<script type=\"text/javascript\">");
    script.Append("var dt='");
    script.Append(refreshTime.ToString());
    script.Append("';");
    script.Append("</script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DateVars", script.ToString());
}

the page

<div id="autopriseUpdate" class="content">
    <asp:Timer runat="server" ID="refreshTimer" Interval="600000" OnTick="refreshTimer_Tick"></asp:Timer>
    <asp:Label runat="server" ID="refreshLabel" Text="1m 0s"></asp:Label>
    <asp:HiddenField runat="server" ID="refreshHidden" OnInit="refreshHidden_Init"/>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/refresh.js"></script>

javascript

$(document).ready(function () {
    refreshJS();
});

function refreshJS(){
    var dt = new Date($('#refreshHidden').value);
    $('#refreshLabel').countdown(dt).on('update.countdown', function (event)
    {
        $(this).html(event.strftime('%M:%S'));
    });
}

The hiddenfield value is set and the asp:Timer interval counts down and refreshes right on the dot, but the countdown timer doesn't start up. My best guess is that there's something I need to fix in the order things happen, but I haven't got a clue.

I can't just hardcode the countdown value because I'm going to make the refreshTime variable, so the user can choose how many minutes are between page refreshes.

If anybody has an idea for how to get my javascript working or how to get the DateTime value from codebehind some other way and utilize it, I would really appreciate the help!

• javascript
• c#
• jquery
• asp
• timer

Share Improve this question Follow edited Jun 22, 2015 at 19:03 haln asked Jun 22, 2015 at 18:00 halnhaln 5011 silver badge88 bronze badges 2

• I think I see a syntax error in this line script.Append("var dt='");.. Shouldn't this be script.Append("var dt=' ' "); – Guruprasad J Rao Commented Jun 22, 2015 at 18:09
• 1 Ah, no, the next line refreshTime.ToString() fills in the space inbetween the ' '. – haln Commented Jun 22, 2015 at 18:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As an alternative to Mike's answer you could also set ClientIDMode to static and your jQuery will work as is. (Assuming you're using .NET 4.0 or above)

<asp:HiddenField runat="server" ClientIDMode="Static" ID="refreshHidden" OnInit="refreshHidden_Init"/>

Nope !

Your JavaScript can't access the value using:

var dt = new Date($('#refreshHidden').value);

It's called refreshHidden in the ASP.Net world, but when the page is rendered, it'll have a different name.

Here's what your code should look like:

var hiddenField = $("#<%= refreshHidden.ClientID %>").val();
var dt = new Date(hiddenField);

本文标签： cSet an aspHiddenField value from codebehind and access in javascript functionStack Overflow