2017-02-14 11 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> 
} 

Но когда я ввожу вид нагрузку всех данных только один раз, и при изменении параметров в раскрывающемся списке не перезагружать данные View

+0

изучить код в [этой DotNetFiddle ] (https://dotnetfiddle.net/1bPZym) –

+0

Возможный дубликат [Получить выбранное значение в раскрывающемся списке с использованием JavaScript?] (http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown- список использующих-Javascript) –

ответ

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); 

}