Does too many hidden inputs affect the page render

问题:

I'm at the point where I'll need to keep some data about my control in hidden fields. I'm using MVC 3 for the record. My worry is that I'll be using the hidden fields like a poor man's viewstate. In doing that, I feel that I'll be running the risk of causing the page to renderly slowly (or slower). An example of what I'm talking about is below.

So in short, will having a lot of hidden fields on a page cause the page to run/render slowly?

An example of what one row will look like:

<div>
    <div>1.</div>
    <div>
        Enter the measurements for the bridge legs (record from left to right, top, then bottom):
        (I am one of many rows in this form.)</div>
    <div><input type="text" id="1" name="leg" /><input type="hidden" id="1" name="dataid" value="101" />
        <input type="text" id="2" name="leg" /><input type="hidden" id="2" name="dataid" value="102" />
        <input type="text" id="3" name="leg" /><input type="hidden" id="3" name="dataid" value="103" />
        <input type="text" id="4" name="leg" /><input type="hidden" id="4" name="dataid" value="104" />
        <input type="text" id="5" name="leg" /><input type="hidden" id="5" name="dataid" value="105" />
        <input type="text" id="6" name="leg" /><input type="hidden" id="6" name="dataid" value="106" />
        <input type="text" id="7" name="leg" /><input type="hidden" id="7" name="dataid" value="107" />
        <input type="text" id="8" name="leg" /><input type="hidden" id="8" name="dataid" value="108" />
        <input type="text" id="9" name="leg" /><input type="hidden" id="9" name="dataid" value="109" />
        <input type="text" id="10" name="leg" /><input type="hidden" id="10" name="dataid" value="110" /></div>
    <div><input type="submit" value="Submit" /></div>
</div>

I will end up having a page that has 80 rows and each row having multiple controls. Given this situation am I overworrying or do I have a legitimate concern?

回答1:

You can avoid those extra hidden fields using custom attributes for your visible inputs

<input type="text" id="1" name="leg" data-id="101" />

Using jquery, you would get the data-id attribute like this

var id = $('#1').data('id');

As a side note and since you said that you have multiple rows, be sure you're not repeating your input ids.

回答2:

I too would strongly suggest using the jQuery-HTML5 data() API.

You should be using it if these values are complementary data.

See my answer to this question.

As for passing it to the controller, you could pass it via Ajax, if that's an option you can try.

$.ajax({
  url : '/Controller/Action/',
  data : { param1 : 'Hello' }
});