我在第二个下拉列表中过滤信息时出现问题，该信息应该取决于第一个下拉列表的第一个选择，我想知道如何过滤该信息
这是我的代码：
c＃Controller：
[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">×</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
答案 0 :(得分：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);
}