Forced to use too many hidden fields; looking for an alternative approach

Question

I am looking for a better approach to do this.

I have around 70 to 80 hidden fields in my page. This hidden fields are initialized at the server side and then used at the client side for validations, calculations, etc,. using java script.

I wanted to know if there is any other alternative approach to using hidden fields in asp.net. I guess, these many hidden fields are increasing the page size and hence affecting the performance of my web page and I want to do away with it.

FYI: I am working on an asp.net web application.

Answer 1

validations, calculations using javascript are better done when taking JSON as base data. Just assign to a JS variable a JSON generated server-side, then use it in your JS as an object or array.

Answer 2

I was going to suggest that you describe the information as a data structure, serialize it to JSON, include it in a <script> element (assigned to a variable you can access with your validation code).

… but you'd still be getting the data to the client, so the performance issues don't really go away.

You could look at providing it in an external file, so it can be cached, but I don't know enough about how reusable the data is to say if that is feasible.

Answer 3

In the head of your HTML add some javascript initializing variables with the data you need:

<script type="text/javascript">
    var option1 = true;
    var option2 = 'some text';
    ...
</script>

You can then access these variables for your javascript validations.

Answer 4

Agree with the JSON and JS data ideas promoted here - you'd be sending down the information needed for your calcs and validation in a lean format, and it wouldn't be posted back.

This provides a direct means to access your data, rather than some jQuery/DOM search to get your hidden field values, boosting the performance of calcs.

If you're talking about performance in terms of download and render time, and if the JSON representation of your client-side data is huge, then your only other option is making AJAX calls to do the calcs and validations server side, so that your large dataset never travels down the wire in either direction. Be wary though about the AJAX roundtrip time to get an answer back to the user.