C# ASP.NET Core 刷新下拉列表

Question

当另一个下拉框的选择发生改变时，我想刷新组合框。这两个组合框没有关联。

我想做的是每当DropDownListFor TypeOfServiceId被更改时，我想刷新-重新填充DropDownListFor LevelDegreeId

我使用通用方法来填充DropDownListFor。

以下是我的代码来填充下拉列表:

public IEnumerable<SelectListItem> GetDropDownList<O>(string text, string value, 
                                                     Expression<Func<O, bool>> filter = null) 
                                                     where O : class
{
    IEnumerable<O> result = _dbContext.Set<O>();

    if (filter != null)
    {
        result = result.AsQueryable().Where(filter);
    }

    var query = from e in result
                select new
                {
                    Value = e.GetType().GetProperty(value).GetValue(e, null),
                    Text = e.GetType().GetProperty(text).GetValue(e, null)
                };

    return query.AsEnumerable()
        .Select(s => new SelectListItem
        {
            Value = s.Value.ToString(),
            Text = s.Text.ToString()
        });
}

在控制器中，我有一个名为Upsert的AddEdit方法

public IActionResult Upsert(int? id)
{
    ServicesVM = new ServicesVM()
    {
        Services = new Services(),
        DepartmentList = _repository.GetDropDownList<Department>("DepartmentName", "Id"),
        TypeOfServicList = _repository.GetDropDownList<TypeOfService>("Description", "Id"),
        LevelDegreeList = _repository.GetDropDownList<LevelDegree>("LevelDegreeFull", "Id"),
        TaxList = _repository.GetDropDownList<Tax>("VatName", "Id")
    };

    if (id != null)
    {
        ServicesVM.Services = _repository.Get(id.GetValueOrDefault());
    }

    return View(ServicesVM);
}

这里是Upsert View的一部分。

@model School.Models.ViewModels.ServicesVM

@{
    var title = "Add New";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form method="post" asp-action="Upsert">
    <div class="row">

        @await Component.InvokeAsync("HeaderName", new { name = "Services" })



        @if (Model.Services.Id != 0)
        {
            <input type="hidden" asp-for="Services.Id" />

            title = "Edit record";
        }

        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">@title</h3>
                </div>
                <div class="card-body col-6">
                    <div class="form-group row">
                        <div class="col-4">
                            <label asp-for="Services.TypeOfServiceId"></label>
                        </div>
                        <div class="col-8">
                            @Html.DropDownListFor(m => m.Services.TypeOfServiceId, Model.TypeOfServicList,
                                                    "- Please Select -", new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-4">
                            <label asp-for="Services.LevelDegreeId"></label>
                        </div>
                        <div class="col-8">
                            @Html.DropDownListFor(m => m.Services.LevelDegreeId, Model.LevelDegreeList,
                                                    "- Please Select -", new { @class = "form-control" })
                        </div>
                    </div>

我尝试了这个，但没有成功：

loadLevelDegree: function () {
    $.ajax({

        url: "/admin/service/GetLevelDegree",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        datatype: JSON,
        success: function (data) {
            $(data).each(function () {
                $("#Services_LevelDegreeId").append($("<option></option>").val(this.Value).html(this.Text));
            });
        },
        error: function (data) { }
    });
}

这是我的GetLevelDegree操作

public IActionResult GetLevelDegree()
{
    return Json(new { data = _repository.GetDropDownList<LevelDegree>("LevelDegreeFull", "Id") });
}

- user3782230

Answer 1

您在ajax中返回的数据包含两层，将其更改如下：

loadLevelDegree: function () {
    $.ajax({
        url: "/admin/service/GetLevelDegree",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        datatype: JSON,
        success: function (data) {
            $("#Services_LevelDegreeId").empty();
            $("#Services_LevelDegreeId").append($("<option>- Please Select -</option>"));
            $(data.data).each(function () {
                $("#Services_LevelDegreeId").append($("<option></option>").val(this.value).html(this.text));
            });
        },
        error: function (data) { }
    });
}

- mj1313