如何使用 MVC Core 使用 Select2 自动回发

Question

我正在尝试在我的 MVC 6（核心）项目中使用 Select2.js，如果用户在第一个列表框中选择一个值（或多个值），那么他们会在第二个列表框。例如......如果用户从制造商列表框中选择“福特”和“雷诺”，那么它们只会在品牌列表框中提供相关值，例如蒙迪欧、野马、克里奥、梅甘娜等

我的视图语法是：

@model MyProject.ViewModels.MyViewModel

<script type="text/javascript">
    $(document).ready(function () {
        $('#ManufacturerID').select2({
            placeholder: 'Please make a selection...',
            width: 500
        });
        $('#BrandID').select2({
            placeholder: 'Please make a selection...',
            width: 500
        });
    });
</script>

<form asp-action="Generation">
    <div class="form-horizontal">
        <div class="col-md-10">
            @Html.ListBoxFor(model => model.ManufacturerID, Model.ManufacturerNames)
            @Html.ListBoxFor(model => model.BrandID, Model.BrandNames)
        </div>
    </div>

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

如果我单击提交按钮，则 post 操作方法成功获取制造商 ID 的列表：

// POST: MyController/Generation
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Generation(MyViewModel myViewModel, IEnumerable<int> manufacturerID) 
{
    return RedirectToAction("Generation");
}

但我真正想要的是类似于 Web 窗体中的 AJAX 更新面板，其中对控制器发布操作方法的调用是在从列表框中选择一个选项时立即执行的，而不是在用户单击提交时。

非常感谢您的帮助。

问候， X22

Answer 1

$(document).ready(function(){
  pageInit();
});

function pageInit(){
  $('#ManufacturerNames').off();
  $('#ManufacturerNames').on('change', function(e){
    //ajax request here
    //call pageInit() in your callback to reattach select2
    //and event handler if you are fully replacing the dropdown.
  });

  $('#BrandNames').off();
  $('#BrandNames').on('change', function(e){
    //ajax request here
    //same as callback above depending on how you go about doing this.
  });
}

这是手动方式，但由于您使用的是 select2 之类的库，它们可能会提供一种在初始化时进行设置的简单方法。