Submit large amount of elements MVC

Question

Edit: jqueryval is the culprit (unobtrusive huh?). Not sure why it's affecting anything, as we disabled it on the checkboxes in the settings. However, commenting the reference makes the loadtime unnoticable. I've tried several fixes with no luck.

This is the function that causes the slowdown, line 532 in jquery.validate.js

elements: function() {
            *snip*
            return $( this.currentForm )
            .find( "input, select, textarea" )
            .not( ":submit, :reset, :image, [disabled], [readonly]" )
            .not( this.settings.ignore )  //performance murderer
            *snip*
        },

*Note - I snipped the filter function that comes after this, because in testing I didn't use it and still got the slowdown, so it's not really relevant.

I am also removing the checkboxes from validation:

    $.validator.setDefaults({
        ignore: ":hidden, input[type=checkbox]" //do not validate checkboxes
    });

I have an mvc app that is going to be posting around 2000+ checkboxes back to the server. This is normally not a problem, interactions with the site via jquery selectors run perfectly fine, and load times are fast. However, submit causes some kind of reflow issue where every single textbox and their labels offsetHeight and offsetWidth get checked. This compounds to an over 5 second load time on creating and saving edits.

Start...

End...

(I'm pretty sure it just gave up at the end there, but there's like 2000 more events you can scroll it for minutes)

The initial load is going to hurt but as the users use the site more, many of these checkboxes will become "disabled" which I understand to mean that they will no longer post back. Unfortunately, disabling these textboxes is not causing the number of elements to post back to drop. I have a feeling this is MVC related, but here's the code:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()


    <fieldset>
        <legend><input type="submit" value="Create"/> | @Html.ActionLink("Back to List", "Index", "CatManager")</legend>

        @if (Model.CategoryViewModel.ChildCategoryNodes.Any())
        {
            for (int i = 0; i < Model.CategoryViewModel.ChildCategoryNodes.Count(); i++)
            {
                @Html.HiddenFor(model => model.CategoryViewModel.ChildCategoryNodes[i].Id)
                @Html.HiddenFor(model => model.CategoryViewModel.ChildCategoryNodes[i].Description)
                <label @(Model.CategoryViewModel.ChildCategoryNodes[i].CategoryId != null ? "disabled" : "")>
                    @if (!Model.CategoryViewModel.ChildCategoryNodes[i].AlreadyTaken)
                    {
                       @Html.CheckBoxFor(model => model.CategoryViewModel.ChildCategoryNodes[i].Selected, new Dictionary<string, object> {{"data-id", Model.CategoryViewModel.ChildCategoryNodes[i].Id}, {"data-description", Model.CategoryViewModel.ChildCategoryNodes[i].Description}}) 
                    }
                    else
                    {
                        @Html.CheckBoxFor(model => model.CategoryViewModel.ChildCategoryNodes[i].Selected, new Dictionary<string, object>{{"data-id", Model.CategoryViewModel.ChildCategoryNodes[i].Id}, {"data-description", Model.CategoryViewModel.ChildCategoryNodes[i].Description}, {"disabled","disabled"}})
                    }
                    @Model.CategoryViewModel.ChildCategoryNodes[i].Id - @Model.CategoryViewModel.ChildCategoryNodes[i].Description
                </label>
            }
        }
    </fieldset>
}

Anyone have any idea how to reduce the amount of junk that's being posted back, or how to avoid this mega-slow offset reflow?

Edit: As usual, I'm getting harassed by people who think they know what's going on here but they clearly don't, so here's some example code that runs in less than a second that's operating on my dom every time a character is typed into a textbox.

    $("#filter").on("keyup", function() {
        ValidateTextBoxes();
    });

    function ValidateTextBoxes() {
        $("input[type=checkbox]").each(function() {
            var val = $("#filter").val();
            var id = $(this).data("id");
            var description = $(this).data("description");
            if (val != null && id != null && description != null) {
                if (id.toString().indexOf(val.toString()) > -1 || description.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1){
                    $(this).parent().show();
                } else {
                    $(this).parent().hide();
                }
            }
        });
    }

So THANKS, no more comments about the number of elements PLEASE.

Answer 1

I'm going to take the risk of trying to provide a helpful answer to this question, even if the OP doesn't want to hear it. I responded to the last question you posted regarding these same 2k checkboxes, and I still strongly believe that you are trying to solve the wrong problem. Maybe that's why so many people are giving you answers you don't seem to want to hear.

In your last question you indicated that the long wait times were making it very frustrating for you to debug and develop. I suggested that you rethink your UI, to which I was greeted with the statement to the effect of "If I wanted help writing a better UI, I would have asked for it". You also stated that you plan to rewrite the UI, but in the meantime, these browser performance issues were bottlenecking you from doing your intermediate work.

One thing you can do is to temporarily alter your test data or controller action so that it only returns 20 checkboxes instead of 2000. Something like that should help you work faster until a time when you can redesign your User Experience. If you are planning to render out 2000 checkboxes onto a page for your users in production, expect them to have a poor UX.

I don't know the answer to the question about jqueryval, so please feel free to downvote this answer because of that. However I do know that browser javascript engines (IE especially) will choke on very large DOM's when trying to scan and do work with them. Technology will only take you so far, you have to be willing to compromise and meet the browser somewhere in the middle.

Another thing I would suggest if you haven't done it already is to read the jqueryval source code.

Update:

It looks like the default value for this.settings.ignore is ':hidden', as shown below:

$.extend($.validator, {

    defaults: {
        messages: {},
        groups: {},
        rules: {},
        errorClass: "error",
        validClass: "valid",
        errorElement: "label",
        focusInvalid: true,
        errorContainer: $([]),
        errorLabelContainer: $([]),
        onsubmit: true,
        ignore: ":hidden", // HERE
        ignoreTitle: false,
        onfocusin: function( element, event ) {

Instead of forking jqueryval, see if doing this improves performance:

$.validator.setDefaults({ ignore: '' });

References are:

asp.net mvc: why is Html.CheckBox generating an additional hidden input

jQuery Validate - Enable validation for hidden fields

If the ignore setting really is the performance murderer, then I would expect setting it to an empty string should short-circuit the filtering selector and get you back to "normal" performance for 2k+ checkboxes (plus 2k+ hidden inputs, for a total of 4k+ elements necessary to render all your categories).

Answer 2

Alright, so...

The issue being jqueryval, our answer is to add the cancel class on the submit button to block the jqueryval on this page specifically, then use the ValidatorContext to validate the model when it comes into the controller.

We rehydrate the properties that can't be posted back (the contents of a dropdownlist, for instance), and post it back to the user to be handled by the normal mvc validationsummary.

    [HttpPost]
    public ActionResult Create(EditFirstChildCategoryViewModel editFirstChildCategoryViewModel)
    {
        if (!ModelState.IsValid)
        {
            var categories = _categoryDataService.GetRootCategoryModels();

            editFirstChildCategoryViewModel.ExistingCategoryDropDown =
                _selectListFactory.CreateSelectList(categories, RootCategoryValueExpression,
                    RootCategoryTextExpression);

            return View(editFirstChildCategoryViewModel);
        }
        //etc...
    }

The user gets to fix any issues, and we get our terrible terrible 2000 checkbox design to behave.