Hidden field doubts

Here I need to confirm – Changes made at client side of a Button click, survives after the Post back completes.

Lets assume in a page below is the set of controls.

· lblHide – Expectation is to hide in JS.

· lblDeclarativeValue - Expectation is to change its value in JS

· HiddenField1 - Expectation is to change its value in JS

· TextBox1 - Expectation is to change its value in JS

· Button2 – Makes a postback to see the above chagnes made in JS at Server side

<div id="divHidden" runat="server" style="border:solid 1px red;" title="Hidden Button" >

<asp:Label ID="lblHide" runat="server" Text="Try to Make - Invisible at Cleint Side"></asp:Label><br />

<asp:Label ID="lblDeclarativeValue" runat="server"></asp:Label><br />

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

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button2" runat="server" Text="Postback" OnClientClick="SetValue();" OnClick="Button2_Click" />

</div>

Below is the required JS.

function SetValue()

{

// Make Invisible at Client Side and check at serverside if the declarative value has overridden the cleint changess

document.getElementById('lblHide').style.display='none';

// Change the value at Cleint Side and check at serverside if the declarative value has overridden the cleint changes

document.getElementById('lblDeclarativeValue').innerHTML='Changed Declarative';

document.getElementById('HiddenField1').value= 'Change';

document.getElementById('TextBox1').value="Text1";

}

Here check the effect when there is no declarative values been assigned to the controls on the page.

PostBack Results – At server side.

· Render Results - After the postback completes

• lblHide – Always visible
• lblDeclarativeValue – Invisible [as no declarative value is assigned]
• HiddenField1 - 'Change'
• TextBox1 - Text1

Now see the results when the declarative values are assigned.

<div id="divHidden" runat="server" style="border:solid 1px red;" title="Hidden Button" >

<asp:Label ID="lblHide" runat="server" Text="Try to Make - Invisible at Cleint Side"></asp:Label><br />

<asp:Label ID="lblDeclarativeValue" runat="server" Text="Declarative Label"></asp:Label><br />

<asp:HiddenField ID="HiddenField1" runat="server" Value=" Declarative Hidden " />

<asp:TextBox ID="TextBox1" runat="server" Text="Declarative Text"></asp:TextBox>

<asp:Button ID="Button2" runat="server" Text="Postback" OnClientClick="SetValue();" OnClick="Button2_Click" />

</div>

PostBack Results – At server side.

· Render Results - After the postback completes

• lblHide – Always visible
• lblDeclarativeValue – Declarative Label
• HiddenField1 - 'Change'
• TextBox1 - Text1

Summary:

· HiddenField/Textbox will survive the changes made at client side.

· Whereas label does not.

Thanks & Regards,

Arun Manglick || Tech Lead