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

【问题标题】：C# ASP.NET Core Refresh DropdownlistC# ASP.NET Core 刷新下拉列表
【发布时间】：2020-06-19 14:07:59
【问题描述】：

当另一个组合选择被更改时，我尝试刷新组合。两个组合不相关不依赖。

我想要做的是每当 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") });
}

【问题讨论】：

标签： c# jquery asp.net-core-mvc

【解决方案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) { }
    });
}

【讨论】：