MVC Performance Issue with many fields

Question

I have a form that dynamics generates a lot of checkboxes (700+). The form loads very slowly in IE (but barely loads in chrome), and when I post the form it pretty much locks up my web browser.

How can i debug this or am I doing something wrong that’s causing this performance issue? Or is this expected with a huge form and I should try to split it up.

Here is my controller:

public ActionResult Create(int id)
    { 
            var model = new TaskRequestViewModel
                {
                    Task = new Task(),
                    Components = db.Component.ToList()
                       …. 
                 }
            return View(model);           
    }

To briefly explain my model, I have about 10 components, each component has about 10 sub-components, and each sub- component has about 10 options (checkboxes) available. Resulting in said 700+ fields (and then a few hidden fields). It worked OK when there were fewer checkboxes (100ish).

My view is something like this (with 3 nested loops):

           @for (int cI = 0; cI < Model.Components.Count; cI++)
           {  
                    @Html.HiddenFor(x => Model.Components[cI].ComponentId)  

                    @for (int scI = 0; scI < Model.Components[cI].SubComponents.Count; scI++)
                    { 
                            @Html.DisplayFor(x => Model.Components[cI].SubComponents[scI].Name)                                 
                            @Html.HiddenFor(x => Model.Components[cI].SubComponents[scI].SubComponentId)

                            @for (int t = 0; t < Model.Components[cI].SubComponents[scI].TaskTypes.Count; t++)
                            {
                                @Html.HiddenFor(x => Model.Components[cI].SubComponents[scI].TaskTypes[t].SubComponentTaskTypeId)
                                @Html.HiddenFor(x => Model.Components[cI].SubComponents[scI].TaskTypes[t].TaskTypeId)
                                @Html.CheckBoxFor(x => Model.Components[cI].SubComponents[scI].TaskTypes[t].Active)
                           } 

                    }

          }

Answer 1

Another thing to watch out for is Html.HiddenFor when using client side validation.

When you are using jquery.validate.unobtrusive.js using the default bundle that ships in MVC project, you will be using a script render like this:

@Scripts.Render("~/bundles/jqueryval")

(note: you may well have changed the name, this is the default)

When you have this, any Html.HiddenFor will render like this:

<input data-val="true" data-val-required="The XYZ field is required." name="XYZ" type="hidden" value="">

Needless to say, these fields do not need client side validation enabled. The user can't see them, and can't interact with them, and should always be filled by your model.

The way to get around this is easy enough:

@Html.HiddenFor(x => x.XYZ, new { data_val = "false" })

If you do not need client side validation, just make sure the bundle is not included.

More reading on this here.