[RESOLVED]Am I correct that an <input type="hidden' id="hf1" /> is not maintained upon postback, but an <asp:HiddenField ID="hf1" runat="server" /> is?

Am I correct that an <input type="hidden’ id="hf1" /> is not maintained upon post back, but an <asp:HiddenField ID="hf1" runat="server" /> is?

That is correct. 

The <input> element that you provided is just going to be a pure HTML element and unless you explicitly specify, it will not be maintained or stored by ASP.NET. The HiddenField Control on the other-hand will be.

Thanks!

Hi,

This is because only fields with a name attribute are posted back to the server.  And even if not explicitely included if you use "view source" in your browser you’ll see that :

<asp:HiddenField ID="hf1" runat="server" />

does create an input field with a name attribute.

If using <input type="hidden’ id="hf1" runat="server" /> the name attribute should be also generated for you and the page should automatically repopulate the field with the value you posted (as you have two steps that is posting actually the field value
to the web server and having the web server to use this value to repopulate the control with it).

So you are saying that if I added the "name" attribute it would be posted back to the server and its status maintained?

You can always try it yourself… but yes the old way  (classic ASP) still works in ASP.NET.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClassicPost.aspx.cs" Inherits="DemoWebApp.ClassicPost" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="hidden" id="hf1" name="hf1" value="test" /><br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DemoWebApp
{
    public partial class ClassicPost : System.Web.UI.Page
    {
        protected void Page_PreLoad(object sender, EventArgs e)
        {
            Label1.Text = Request["hf1"];
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = Request["hf1"];
        }
    }
}

No, it would just allow the value to be posted to the web server. You would still need to use this value inside your markup to populate the control value (basically you are just rendering some text, the web page doesn’t know anything about this markup).

Or just use runat="server" and both are done for you (ie adding a name attribute and using the posted value to automatically reassign the posted value to this control). Here the server side page model knows that you have a control and can handle this automatically
for you.

I would use the runat="server" except that I am creating Hiddenfields on the fly with javascript/jquery,  I don’t know of a way to add a server side control with JavaScript of jquery. If there is a way, then please let me know.

JavaScript is executed on the client side which means that the code you do with it (input type=hidden, etc) is executed on the front end (client browser) instead of the web server. A server side control such as textbox is executed on the
server side (on server). In other words, you can’t "add" a server side control via js.

Maybe you can explain what exactly you need to do so that we understand the problem.

Hi,

Some more context could help. For example you could perhaps hide those fields and reveal them client side as needed. If this is a kind of "array editing" you could also do your updates using AJAX etc…

But basically it’s true for web forms that you have a server side model and a client side HTML page pretending to be the "same" page but there is no hard connection between them. I meant the server page is just rendered as HTML markup and a form just postback
it fields to the web server. The ASP.NET infrastructure does the job that gives – at least usually ;-) – the illusion that you really have the same page on both sides.

It is confusing for sure.  One of the things I am noticing is that if I dynamically create a hidden field in JavaScript as follows:


strAppend = '<input type="hidden" id="hf1" name="hf1" value="100" />'
$('#divHiddenFields').append(strAppend);
	        

But if during a PostBack I have the following in codebehind (vb) :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim test As String = Request.Form("hf1")
End Sub

Test shows the correct value of the hiddenfield (hf1).

But if in javascript pageLoad() function I have the following:

function pageLoad()  
    {
	alert($('input[id$=hf1]').val());
}

I get undefined after the postback So the control is destroyed sometime between the master pageLoad and the javascript pageLoad() of the master page.

Where is it getting lost, and how can I retain it?

As you noted  sending data to the server in the classic style is pretty easy but there is no mechanism to retain the client side tags.  For that, you have to write the server side code.  First retrieve the values and then add the markup to the response object.
 

I’m not sure what you’re doing but you might want to look into creating page level web methods to execute whatever server side processing.  That’s what web methods and AJAX are for.

Thanks

JAYHAWKER

function pageLoad()
    {
	alert($('input[id$=hf1]').val());
    }

I think the problem here is different than postback.

You try to query a control ‘input[id$=hf1]‘ which does not exist in the DOM. 

It exists only after you run $(‘#divHiddenFields’).append(); so if you want to query a POST-value which you got using Request.Form(“hf1″) you should use the same code on client 

function pageLoad()  
{
alert("<%=Request.Form("hf1")%>");
}

Thanks for your effort. I don’t get an error, but the alert shows no value after postback though in page_Load of the master codebehind does show the value.  Any idea what I am doing wrong?

Here’s a demo

aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<!doctype html>
<html>
<head>
    <title></title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <form id="Form1" runat="server">
        <input id="btn" type="button" value="click to append hidden field" /> 
        <div id="divHiddenFields"></div>
        <script>
            $("#btn").click(function () {
                var strAppend = '<input type="hidden" id="hf1" name="hf1" value="100" />'
                $('#divHiddenFields').append(strAppend);
            });

            alert("<%=Request.Form("hf1")%>");
        </script> 
        <asp:Button ID="Button1" runat="server" Text="Submit Form" />
    </form>
</body>
</html>

code behind

Partial Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim test As String = Request.Form("hf1")
        Response.Write("code behind=" & test)
    End Sub
 
End Class

at initial load you will get an empty alert, then click on the 1st button to append hidden control to the DOM and then on Submit to submit the forum.

You will get the value from the code behind as well as alert from the client.

It seems to me that you create this control client side and then does a postback. So the page is rendered again WITHOUT this control. So for now I would sya that you have to keep track that you created this control so that you can render it immediately from
the server side when the page is shown again after a postback.

Most often it’s easier to help when having a big picture of what you are trying to do (adding dynamically rows to an editable table or whatever etc…)

Leave a Reply