C# MVC 填充数据表中的下拉列表组

C# MVC Populate group of dropdown lists in datatable

本文关键字：下拉列表数据表 MVC 填充更新时间：2023-09-26

所以我使用 jquery.dataTables.js 显示大约一千行，而一次只显示大约二十行。问题在于每一行的下拉列表大约需要 10 秒才能加载页面，并在加载时显示更多记录。我想过在使用 ajax 加载页面后执行此操作，但不确定如何使用所有这些干净利落地执行此操作。任何想法。

@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>                
}

Jquery UI 自动完成的应用程序：

!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" />

在 MVC 操作中：

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