2017-02-14 102 views
-1

我有一个第二个下拉过滤信息的问题,筛选信息,这些信息应该取决于第一个下拉的第一选择,我想知道我怎么能筛选信息如何在下拉取决于另一个下拉列表的第一选择

这是我的代码:

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

但是,当我进入查看加载所有数据只有一次,当你在下拉菜单中更改选项不会重新加载使用不引人注目的AJAX 数据View

+0

研究[本DotNetFiddle代码中的状态列表(https://dotnetfiddle.net/1bPZym) –

+0

的可能的复制[获取使用JavaScript在下拉列表中选择值?(http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-列表使用的JavaScript) –

回答

1

我已经在我的项目中实现级联下拉列表这个例子是一个国家列表居住在服务器上(也被填充的状态,如果国家已被选中)。如果国家下拉菜单选择是通过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); 

} 
相关问题