如何在不触发另一个 AJAX 调用的情况下填充和重新填充子字段？答案

【问题标题】：How can I populate and re-populate sub-fields without firing another AJAX call?如何在不触发另一个 AJAX 调用的情况下填充和重新填充子字段？
【发布时间】：2017-06-11 14:38:22
【问题描述】：

我有一个级联下拉菜单，到目前为止效果很好。现在我需要填充如下所示的文本框。

AJAX 代码

   $('#CommonHerpsDropdown').change(function () {
        $('#SpeciesDropdown').empty();

        $.ajax({
            type: "POST",
            url: '@Url.Action("GetGenericSpeciesByCommonId")',
            datatype: "Json",
            data: { cAnimalId: $('#CommonHerpsDropdown').val() },
            success: function (genericSpecies) {
                $.each(genericSpecies, function (index, value) {
                    $('#SpeciesDropdown').append('<option value="' + value.SpeciesId + '">' + value.StandardName + '</option>');
                    $('#ScientificClass').val(value.ScientificClassification);
                    $('#ScientificOrder').val(value.ScientificOrder);
                    $('#ScientificFamily').val(value.ScientificFamily);
                    $('#ScientificGenus').val(value.ScientificGenus);
                    $('#ScientificSpecies').val(value.ScientificSpecies);
                });
            }
        });

    });

MVC 控制器 Json 方法

 public JsonResult GetGenericSpeciesByCommonId(int cAnimalId)
        {
            //Lets get the species data based on CommonHerpID.
            var genericSpecies = (from x in _context.ReptileSpeciesList 
                                 where x.CommonHerpId == @cAnimalId 
                                 select x).OrderBy(x => x.StandardName);   
            return Json(genericSpecies);
        }

我的问题是如何设置分类和顺序字段以在物种选择发生变化时填充/重新填充而不使用对 db 表的另一个调用。

【问题讨论】：

当前代码有什么问题？您似乎也在填充文本框
代码有效。但我试图看看是否有办法避免 $('#SpeciesDropdown').change(functon(){ //Ajax 调用和字段绑定)} 所以我不必绑定这些文本字段多个单独更改函数中的时间
参考this answer中的第二个和第三个选项

标签： json ajax asp.net-mvc

【解决方案1】：

您可以将数据列表对象作为视图包传递给视图，您将在视图中获取数组对象，然后您可以将filter 函数用于您的数组，然后您将获得一个与您使用的过滤器匹配的数组，然后对该数组执行 foreach 函数，而不是您从 ajax 获得的函数并填充您的下拉列表像这样的

//ViewBag.genericSpecies is coming from _context.ReptileSpeciesList without applying any filter
 // I use json.encode to encode your list into json object
  var AllGenericSpecies= @Html.Raw(Json.Encode(ViewBag.genericSpecies)); 
//then onchange 
 $('#CommonHerpsDropdown').change(function () {
        $('#SpeciesDropdown').empty();
var HerpID = $('#CommonHerpsDropdown').val();
//filter all generic species, apply the filter 
AllGenericSpecies.filter(function(spiece){
return spiece.CommonHerpId  == HerpID;
}).forEach(function(value) {
( 
 $('#SpeciesDropdown').append('<option value="' + value.SpeciesId + '">' + value.StandardName + '</option>');
                    $('#ScientificClass').val(value.ScientificClassification);
                    $('#ScientificOrder').val(value.ScientificOrder);
                    $('#ScientificFamily').val(value.ScientificFamily);
                    $('#ScientificGenus').val(value.ScientificGenus);
                    $('#ScientificSpecies').val(value.ScientificSpecies);
//end of foreach         
)};
//end of on change listener 
)});

【讨论】：