ASP.NET: How to retain values set on server controls with javascript after post back

Question

I'm creating an ASP.NET website which will does some calculations (if it's relevant it uses some formulas to calculate retirement plans) the first page, has a bunch of fields and labels that the user will input the numbers, and on key-down i have the JavaScript code running calculations and updating the labels with the numbers. Then I want to pass these values over to the next page where they will be parsed and put into a bar graph for a summary, However I keep getting the default value of the labels. I know this is related to the postback of the page.

I have tried using hidden fields, to store the values but they also are being reset. A lot of the solutions I've seen that are similar to that here I've also tried to no avail.

The javascript code is as follows:

function RATotal() {
    $('#lblRATotal').text("$" + (masterRANQAptERI + masterRAPTQptERI + 
                                 masterRARQAptERI + lumpsum).format());

    masterRATotal = (masterRANQAptERI + masterRAPTQptERI + masterRARQAptERI + lumpsum);

    document.getElementById('<%= hiddenRAtotal.ClientID %>').value = masterRATotal;
    document.getElementById('hideRAtotal').value = masterRATotal;
}

the ASP/HTML:

<tr>
  <td>
    <span>Total After-Tax Equivalent Contribution: </span>
    <asp:Label runat="server" ID="lblRAATTotal" Text="$X.XX" Font-Bold="true" />
  </td>
  <td>
    <span>Total Pre-Tax Equivalent Contribution: 
      <asp:Label runat="server" ID="lblRAPTTotal" Text="$X.XX" Font-Bold="true" />
    </span>
  </td>
  <td>
    <span>Total Retirement Retirement Income:</span>
    <br />
    <asp:Label runat="server" ID="lblRATotal" Text="0.00" Font-Bold="true" />
    <asp:HiddenField runat="server" ID="hiddenRAtotal" EnableViewState="True" />
    <input id='hideRAtotal' name='hideRAtotal' type='hidden' />
  </td>
</tr>

The C# code is as follows

protected void btnSummary_Click(object sender, EventArgs e)
{
    string RAOtotal2 = hiddenRAtotal.Value.ToString();
    Session["RAOtotal"] = RAOtotal2
    Response.Redirect("ChartDataQuery.cshtml");
}

Based on everything I've read, this should do the trick... but I am actually just getting a "," or null when I try to play around with it. I've deducted the "," isn't a miscalc because when I set the value to a manually defined string i would also just get a ",". I am still learning these kinds of things, and I would appreciate any help! Thanks!

Have you tried adding ```EnableViewState="True" ``` for the HiddenField? — JohnPete22, Aug 22 '19 at 19:55
@JohnPete22 No i had not, I just tried it and I am getting the value as "" or null. :\ — Arkayik, Aug 22 '19 at 20:28
Just to clarify with the ASP/HTML code you provided, is that how your .aspx page actually looks? In other words, are you putting in both the asp:HiddenField along with the input hidden field at the same time, or in this example are you just showing that you're putting in the asp:HiddenField and when the page loads it is replaced by the input hidden field? — Doug F, Aug 22 '19 at 20:28
Have you tried doing a console.log(masterRATotal) in the RATotal function just to make sure the number it's sending to the hidden fields are correct? — Doug F, Aug 22 '19 at 20:33
@DougF i hve tested that the variable is not empty. I have also tried making it equal to string of random text just to see if it would come over but it is not. Yes that is how they are laid out, I put them right next to the label (lblRATotal) that is in the beginning portion of the code. and that one also shows the value, so i kn that it is the correct variable. I tried originally parsing that label, but that's when I ran into the issue of it returning to the default value when the page posts back. I cant really use the if (!IsPostBack) method, because I dont have that number stored anywhere. — Arkayik, Aug 23 '19 at 02:38
Have you got something in PageInit or PageLoad that is clearing the value of your hidden control before execution gets to the Click handler ? — sh1rts, Aug 23 '19 at 05:21
Show all page markup. We need to see how all methods are being called. Also how you are going to the next page. — wazz, Aug 23 '19 at 05:54
You said "However I keep getting the default value of the labels." When? Where? — wazz, Aug 23 '19 at 05:56
@sh1rts no, I do not have have anything defined in the PageLoad or PageInit. — Arkayik, Aug 23 '19 at 13:57
@wazz I have updated the original post to include more of the code. Please see if that offers more clarity. The default text is "0.00" when I try to parse just that label, without doing anything else, that is what is passed. The hidden fields also return null but I'm sure that's because I never defined a default text, and if I did, it would pass that and not the update value. — Arkayik, Aug 23 '19 at 14:04
Still hard to say what's going on but try this `Response.Redirect("ChartDataQuery.cshtml", false);`. — wazz, Aug 23 '19 at 22:21
You can also turn the 1st two lines of C# into one line: `Session["RAOtotal"] = hiddenRAtotal.Value.ToString();`. — wazz, Aug 23 '19 at 22:22
At the end of the javascript add these two lines to make sure you're getting the right results: `alert("$('#lblRATotal').text: " + $('#lblRATotal').text);` `alert("masterRATotal: " + masterRATotal);`. — wazz, Aug 23 '19 at 22:28
@wazz Ok, so I am making some progress. I don't think the false flag makes a difference, since the value of the hidden field is not being updated. I loged the value of masterRATotal, and it is holding the desired value. However, I get the following error now... `TypeError: document.getElementById(...) is null` — Arkayik, Aug 26 '19 at 13:54
@wazz i figured it out! The line with the `<%= hiddenRAtotal.ClientID %>' was what was breaking it. I removed this line, and it worked like a charm! — Arkayik, Aug 26 '19 at 14:20
For some reason, it was saying it didn't exist, because it was coming up as null... and then the rest of the code wouldn't execute, I used a console.log in the beginning and end of the code and it didn't log the second, when I removed it it finished the function and moved the number over also. I think because I named the two fields with the same, that the second line changed them both potentially? I'm not entirely sure. — Arkayik, Aug 27 '19 at 19:22

score 0 · Accepted Answer · answered Aug 26 '19 at 14:22

0

Thanks to @wazz for helping me out with this one.

the line, document.getElementById('<%= hiddenRAtotal.ClientID %>').value = masterRATotal; is what was breaking this. I removed the line, and it is now working.

answered Aug 26 '19 at 14:22

Arkayik

105
1
7

Curious as to why you were using document.getElementById when you're using jQuery to access DOM elements just a few lines above ? – sh1rts Aug 28 '19 at 22:04
2

@sh1rts as I said in the question I am new to JavaScript. This is the first thing I've ever written entirely by myself in JS. The reason why is, that `.value` doesn't seem to work when i call it using the `$('#element')` method. So that is why I've used both methods. I'm not entirely sure of the difference, I would love an explanation as to why you think that is wrong, or how I could improve it! To be honest, I've been a .NET guy for a while but JS is new to me. I'm not sure I entirely understand the nuances/difference between JS and jQ, but like I'm open to your feedback! Thanks! – Arkayik Sep 10 '19 at 20:08
That's because you need to use .val() with jQuery - https://stackoverflow.com/questions/7322078/jqueryid-val-vs-getelementbyidid-value - for me it's about consistency, if you use .val() you're using a consistent method for accessing DOM element values. – sh1rts Sep 10 '19 at 22:00

ASP.NET: How to retain values set on server controls with javascript after post back

1 Answers1