MVCコアを使用してSelect2で自動ポストバックする方法

Question

MVC 6（コア）プロジェクト内でSelect2.jsを使用しようとしています。ユーザーが最初のリストボックス内で値（複数の値）を選択すると、 2番目のリストボックス内の値の更新リストが提供されます。たとえば、ユーザーがメーカーリストボックスから「Ford」と「Renault」を選択すると、ブランドリストボックスに関連する値のみが表示されます。モンデオ、マスタング、クリオ、メガネなど

マイビューの構文は次のとおりです。

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

私は送信ボタンをクリックすると、ポストアクションメソッドが正常にメーカー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のようなライブラリを使用しているので、彼らはあなたの初期化でこれを設定する簡単な方法を提供することができます。