C# MVC Populate group of dropdown lists in datatable

Question

So im using jquery.dataTables.js to display about a thousand rows, while only showing about twenty at a time. The problem is with the dropdownlist on every line it takes about 10 seconds to load the page and shows a lot more of the records while loading. I thought about doing it after page load with ajax but not sure how to do that cleanly with all of them. Any ideas.

@for (int i = 0; i < Model.billVersion.Count; i++)
{<tr>
    <td>@Html.DisplayFor(model => model.billVersion[i].billNumber)@Html.HiddenFor(model => model.billVersion[i].billNumber)</td>
    <td>@Html.DisplayFor(model => model.billVersion[i].lrNumber)</td>
    <td>@Html.DisplayFor(model => model.billVersion[i].previousYear)</td>
    <td>@Html.DisplayFor(model => model.billVersion[i].committeeRec)</td>
    <td>@Html.DropDownListFor(model => model.billVersion[i].committeeID, @Model.committeDropDown, "")</td>
    <td>@Html.CheckBoxFor(model => model.billVersion[i].save_Remove)</td>
</tr>                
}

Answer 1

An application of Jquery UI autocomplete:

!function ($) {
    var cache = {};

    $("[data-options]").each(constructAjaxOptions);

    function constructAjaxOptions() {

        var el = $(this),
            acEl = $(el.clone(false)),
            url = el.attr('data-options'),
            initialLabel = el.attr('data-initial-label') || el.val(),
            myCache = cache[url];

        if (!myCache) {
            myCache = cache[url] = {};
        }

        el.hide();

        acEl
        .removeAttr('id').removeAttr('name')
        .val(initialLabel)
        .insertAfter(el)
        .autocomplete({
            autoFocus: true,
            minLength: 0,
            source: function (request, response) {
                var term = request.term;
                if (term in myCache) {
                    response(myCache[term]);
                    return;
                }
                $.getJSON(url, request, function (data, status, xhr) {
                    myCache[term] = data;
                    response(data);
                });
            },
            focus: function (event, ui) {
                // Overridden to keep the value of the field
                // from flashing in the textbox.
                return false;
            },
            select: function (event, ui) {
                acEl.val(ui.item.label);
                el.val(ui.item.value);
                return false;
            }
        });
    }
}(jQuery);

.cshtml

<input type="text" id="@Html.IdFor(model => model.billVersion[i].committeeID)" name="@Html.NameFor(model => model.billVersion[i].committeeID)" value="@Value"
data-options="@Url.Action("BillVersions", "Options")" data-initial-label="@model => model.billVersion[i].commiteeName" />

Within an MVC action:

var model = billVersions.Select(o => new
    {
        value = o.committeeID,
        label = o.commiteeName
    })
    .ToList();

return new JsonResult { JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = model };