c# - Setting a value to a HiddenField in ASP.NET 4.5

Question

I'm having some issues setting a value to a HiddenField in ASP.NET 4.5.

From what I've seen I've tried the following without any luck:

In ASPX:

<asp:HiddenField ID="HiddenField" runat="server" value="" />
<script type="text/javascript">
    function SetHiddenField() {
        var vv = "HELLO WORLD";
        document.getElementById('<%=HiddenField.ClientID%>').value = vv;            
    }
</script>

In code-behind:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "alert", "alert('" + HiddenField.ClientID + "');", true);

This alerts garbage in the ClientID.

The other solution I've tried is the following.

In .ASPX:

<asp:HiddenField ID="HiddenField" runat="server" value="" />
<script type="text/javascript">
    function SetHiddenField() {
        var vv = "HELLO WORLD";
        document.getElementById('HiddenField').value = vv;            
    }
</script>

One issue here is that .value does not exist in the IntelliSense, only .ValueOf.

In code-behind:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "alert", "alert('" + HiddenField.Value + "');", true);

Nothing happens, probably an error in the JavaScript, since no alert is shown.

Can anyone point me to the right direction, please?

Answer 1

Your first markup is good:

<asp:HiddenField ID="HiddenField" runat="server" value="" />
<script type="text/javascript">
    function SetHiddenField() {
        var vv = "HELLO WORLD";
        document.getElementById('<%=HiddenField.ClientID%>').value = vv;
    }
</script>

Change the code to this (check the second line):

 ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
 ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "alert", "alert(document.getElementById('" + HiddenField.ClientID + "').value);", true);

And the output should be like this:

EDIT : In your scenario, you can run javascript to get a value and force a postback to use the value in your code. I would change my markup to this:

<script type="text/javascript">
    function SetHiddenField() {
        var vv = "HELLO WORLD";
        document.getElementById('<%=HiddenField.ClientID%>').value = vv;
        __doPostBack('<%=HiddenField.ClientID%>', '')
    }
</script>

And in code my Page_Load is like below:

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {
        // Register JavaScript which will collect the value and assign to HiddenField and trigger a postback
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true); 
    }
    else 
    {
        //Also, I would add other checking to make sure that this is posted back by our script
        string ControlID = string.Empty;
        if (!String.IsNullOrEmpty(Request.Form["__EVENTTARGET"]))
        {
            ControlID = Request.Form["__EVENTTARGET"];
        }
        if (ControlID == HiddenField.ClientID) 
        { 
            //On postback do our operation
            string myVal = HiddenField.Value;
            //etc...
        }
    }

}