HiddenField Value Lost on Postback

Question

I have some JavaScript that sets the value of a HiddenField and then forces a postback. I can trace through this JavaScript and it appears to work correctly. However, when I test the value of the HiddenField from the page's Load event, it is no longer set.

Searching the web, I see a lot of posts about losing HiddenField values but none of them seemed to be doing the same thing that I am.

Here's my JavaScript function (modified):

function EditItemItem(itemId) {
    document.getElementById('<%= EditItemId.ClientID %>').value = itemId;
    __doPostBack('<%= EditItemUpdatePanel.ClientID %>', '');
}

And here's part of my markup (modified):

<div id="EditItemBox" runat="server">
    <asp:HiddenField runat="server" id="EditItemId" />
    <asp:UpdatePanel ID="EditItemUpdatePanel" runat="server"
        UpdateMode="Conditional">
        <ContentTemplate>
        <asp:Panel ID="EditItemPanel" runat="server"
            CssClass="ModalDialog" style="display:none;">
            <div>Edit an Item</div>
            <!-- ... -->
        </asp:Panel>
    </asp:UpdatePanel>
</div>

Does anyone have any ideas?

Solution 1

It's easier if you remove runat=server from the hidden field and then access it from the Form paramaters Request.Form["EditItemId"]. Then it works every time.

Your code will become:

function EditItemItem(itemId) {
    document.getElementById('EditItemId').value = itemId;
    __doPostBack('<%= EditItemUpdatePanel.ClientID %>', '');
}

<div id="EditItemBox" runat="server">
    <input type="hidden" id="EditItemId" name="EditItemId" value="" />
    <asp:UpdatePanel ID="EditItemUpdatePanel" runat="server"
        UpdateMode="Conditional">
        <ContentTemplate>
        <asp:Panel ID="EditItemPanel" runat="server"
            CssClass="ModalDialog" style="display:none;">
            <div>Edit an Item</div>
            <!-- ... -->
        </asp:Panel>
    </asp:UpdatePanel>
</div>

Solution 2

If you're expecting the value upon an AJAX post-back via the UpdatePanel then you need to put it inside the ContentTemplate...

Comments

[marto]

Jonathan. Did you get it working in the end?

[Jonathan Wood]

@marto: Not quite. It appears to have something to do with the dynamically loaded user control. I was actually able to better define the problem and even reproduce the issue in a small test project. I've posted a new question here.

[Jonathan Wood]

I'm assuming Page_Load is being called in response to the AJAX postback. I tried moving the HiddenField controls directly inside the ContentTemplate and even tried again inside EditItemPanel, but I'm getting the same result.

[Jonathan Wood]

Well, aside from the warning I get when a HiddenField control has no runat="server" attribute, even this is not working for me. At this point, I can't tell if the problem is related to AJAX or what. Request.Form['EditItemId] always returns null.

[marto]

Sorry about that. You shouldn't use <asp:HiddenField but a normal html input <input type="hidden" id="EditItemId" />. I'll update the answer now.

[Jonathan Wood]

@marto: I must have something else going on as it's still null. I assume it's an AJAX postback I'm getting when it causes the Page's Load event to run. Somehow the data isn't get back to the server.

[marto]

Very odd! Have you looked in fiddler whether the value of the hidden field is even sent back to the server?

[Jonathan Wood]

I haven't used Fiddler but I can see the Request.Form.AllKeys collection does not contain the hidden field. I even set a default value in the markup but it still does not show. Must be related to being an AJAX callback?

[marto]

It must be as it usually works. Try and download fiddler (fiddler2.com/fiddler2) It really helps with debugging web applications as you can exactly see what's being sent to the server.