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...
        }
    }

}

Answer 2

In the hidden field tag add clientid static like this -

<asp:HiddenField ID="HiddenField" runat="server" value="" ClientIDMode="Static" />

This way ASP.Net will not replace it with dynamic ID and always have the id that you provided, so it will now have ID HiddenField. Then your second attempt should work.

More can be found here -

http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx