如何根据另一个下拉列表的第一个选择过滤下拉列表中的信息[关闭]

Question

我在第二个下拉列表中过滤信息时遇到问题，该信息应取决于第一个下拉列表的第一个选择，我想知道如何过滤该信息

这是我的代码：

c#控制器：

 [HttpGet]
        public IActionResult SubTrails()
        {
            try
            {

                var n = _unitOfWork.SubTrails.GetAll().ToList();
                if (n == null)
                {
                    return NoContent();
                }



                return new ObjectResult(n);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex.ToString());
                return StatusCode(StatusCodes.Status500InternalServerError, new { Message = "Internal Server Error" });

            }
        }

        [HttpGet]
        public IActionResult Levels()
        {
            try
            {
                var n = _unitOfWork.Levels.GetAll().ToList();
                if (n == null)
                {
                    return NoContent();
                }



                return new ObjectResult(n);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex.ToString());
                return StatusCode(StatusCodes.Status500InternalServerError, new { Message = "Internal Server Error" });

            }
        }

        [HttpGet]
        public IActionResult Trails()
        {
            try
            {
                var n = _unitOfWork.Trails.GetAll().ToList();
                if (n == null)
                {
                    return NoContent();
                }



                return new ObjectResult(n);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex.ToString());
                return StatusCode(StatusCodes.Status500InternalServerError, new { Message = "Internal Server Error" });

            }
        }

cshtml:

@model DefinityFirst.Mobile.Admin.Web.Services.Marvel.Contracts.ListTrailSubTrailLevelContract
@inject DefinityFirst.Mobile.Admin.Web.Services.Marvel.IMarvelServices DropDownDataHelper

@{
    ViewBag.Title = "Create";
}@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> @Html.ValidationMessage("Error")
    </div>
}
<h2>Create</h2>
<p>New TrailSubTRailLEvel</p>
@using (Html.BeginForm("TrailSubTrailLevel", "TrailSubTrailLevel", FormMethod.Post, new { id = "demoForm" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Trail</h4>

        <div class="form-group">
            @Html.Label("", "Trail", new { @class = "control-label col-md-2" })
            <div class="col-md-10" id = "partialDiv">
                @*@Html.DropDownListFor(model => model.TrailContract.Responsable.Id, Model.ManagersList, "Select one", new { @class = "form-control" })*@
                @Html.DropDownListFor(model => model.TrailId, await DropDownDataHelper.GetTrailsDdl(), "Select one", new { @class = "form-control", onchange = "SelectedIndexChanged()" })

                @Html.ValidationMessageFor(model => model.TrailId, "", new { @class = "text-danger" })
            </div>
        </div>



            <div class="form-group">
                @Html.Label("", "SubTrail", new { @class = "control-label col-md-2", @name = "Subtrail", @id= "Subtrail" })
                <div class="col-md-10">
                    @*@Html.DropDownListFor(model => model.TrailContract.Responsable.Id, Model.ManagersList, "Select one", new { @class = "form-control" })*@
                    @Html.DropDownListFor(model => model.SubtrailId, await DropDownDataHelper.SubTrailDdl(), "Select one", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.SubtrailId, "", new { @class = "text-danger" })
                </div>
            </div>

        <div class="form-group">
            @Html.Label("", "Level", new { @class = "control-label col-md-2", @name = "Level", @id = "Level" })
            <div class="col-md-10">
                @*@Html.DropDownListFor(model => model.TrailContract.Responsable.Id, Model.ManagersList, "Select one", new { @class = "form-control" })*@
                @Html.DropDownListFor(model => model.LevelId, await DropDownDataHelper.LevelsDdl(), "Select one", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.LevelId, "", new { @class = "text-danger" })
            </div>
        </div>





            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-success" />
                </div>
            </div>

</div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <script type="text/javascript">

        $('#SubtrailId').hide();
        $('#LevelId').hide();
        $("#Subtrail").hide();
        $("#Level").hide();

        $('#TrailId').on('change', function () {
           // alert("este valor es de trail", this.value)
            if (this.value != 0) {
                $("#Subtrail").show();
                $('#SubtrailId').show();

               alert(this.value)

            } else {
                $('#SubtrailId').hide();
                $('#LevelId').hide();
                // alert("no es diferente ")
            } 
        })
        $('#SubtrailId').on('change', function () {
            //alert("este valor es de subtrail", this.value)
            if (this.value != 0) {

                $("#Level").show();
                $('#LevelId').show();
                //alert(this.value)

            } else {

                $('#LevelId').hide();
                // alert("no es diferente ")
            }
        })

        function SelectedIndexChanged() {
            //Form post  
            //alert("esta validacion jala", this.value)
            document.demoForm.submit();
        }

    </script>
}

但是当我进入视图时，所有数据只加载一次，当你更改下拉菜单中的选项时，不会重新加载数据View

Answer 1

我在我的项目中使用不显眼的 ajax 实现了级联下拉菜单 此示例是在服务器上填充的国家/地区列表（如果已选择国家/地区，也会填充状态）。如果国家/地区下拉选择被更改，则状态列表下拉列表由 ajax 更新

CompanyInfoViewModel 具有这些属性（为简洁起见，省略了一些）

public IList<SelectListItem> AvailableCountries { get; set; }
public string CompanyCountry { get; set; } = string.Empty;
public IList<SelectListItem> AvailableStates { get; set; }
[StringLength(200, ErrorMessage = "State/Region has a maximum length of 200 characters")]
public string CompanyRegion { get; set; } = string.Empty;

在controller我填充初始数据

var model = new CompanyInfoViewModel();

model.CompanyRegion = selectedSite.CompanyRegion;
model.CompanyCountry = selectedSite.CompanyCountry;

model.AvailableCountries.Add(new SelectListItem { Text = sr["-Please select-"], Value = "" });
var countries = await geoDataManager.GetAllCountries();
var selectedCountryGuid = Guid.Empty;
foreach (var country in countries)
{
    if (country.ISOCode2 == model.CompanyCountry)
    {
        selectedCountryGuid = country.Id;
    }
    model.AvailableCountries.Add(new SelectListItem()
    {
        Text = country.Name,
        Value = country.ISOCode2.ToString()
    });
}

if (selectedCountryGuid != Guid.Empty)
{
    var states = await geoDataManager.GetGeoZonesByCountry(selectedCountryGuid);
    foreach (var state in states)
    {
        model.AvailableStates.Add(new SelectListItem()
        {
            Text = state.Name,
            Value = state.Code
        });
    }
}

需要jquery unobtrusive ajax 这是我的自定义unobtrusivecascade script：

$(function () {
    var $elems = $('select[data-cascade-childof]');
    if ($elems) {
        $elems.each(function (index, ele) {
            var $parent = $('#' + $(ele).data('cascade-childof'));
            var serviceUrl = $(ele).data('cascade-serviceurl');
            var origVal = $(ele).data('cascade-orig-val');
            var selectLabel = $(ele).data('cascade-select-label');
            var disableOnEmptyParent = $(ele).data('cascade-disableonemptyparent');
            var emptyParentValue = $(ele).data('cascade-parent-emptyvalue');
            $parent.change(function () {
                $.getJSON(serviceUrl + $parent.val(), function (data) {
                    var items = '<option>' + selectLabel + '</option>';
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.value + "'>" + item.text + "</option>";
                    });
                    $(ele).html(items);
                    if (origVal.length > 0) {
                        var found = $(ele).find("option[value=" + origVal + "]").length > 0;
                        if (found) {
                            $(ele).val(origVal);
                        }
                    }
                });
                if (disableOnEmptyParent) {
                    var emptyParent = ($parent.val() === emptyParentValue);
                    if (emptyParent) {
                        $(ele).prop("disabled", true);
                    }
                    else {
                        $(ele).prop("disabled", false);
                    }
                }

            });
        });
    }
});

the view 中的标记是这样的：

<div class="form-group">
    <label asp-for="CompanyCountry" class="col-md-2 control-label">@sr["Country"]</label>
    <div class="col-md-10">
        <select id="CompanyCountry" asp-for="CompanyCountry"
                asp-items="Model.AvailableCountries" class="form-control"></select>
        <span asp-validation-for="CompanyCountry" class="text-danger"></span>
    </div>
</div>
<div class="form-group">
    <label asp-for="CompanyRegion" class="col-md-2 control-label">@sr["State"]</label>
    <div class="col-md-10">
        <select id="CompanyRegion" class="form-control"
                asp-for="CompanyRegion"
                asp-items="Model.AvailableStates"
                data-cascade-childof="CompanyCountry"
                data-cascade-serviceurl='@Url.Content("~/CoreData/GetStatesJson/?countryCode=")'
                data-cascade-orig-val="@Model.CompanyRegion"
                data-cascade-select-label="-Please select-"></select>
        <span asp-validation-for="CompanyRegion" class="text-danger"></span>
    </div>
</div>

另一个controller用于返回基于所选国家的州列表的json数据

[HttpGet]
[AllowAnonymous]
public async Task<IActionResult> GetStatesJson(
   string countryCode)
{
    var country = await dataManager.FetchCountry(countryCode);
    List<IGeoZone> states;
    if (country != null)
    {
        states = await dataManager.GetGeoZonesByCountry(country.Id);
    }
    else
    {
        states = new List<IGeoZone>(); //empty list
    }

    var selecteList = new SelectList(states, "Code", "Name");

    return Json(selecteList);

}