選択部分の更新時に部分的な表示が更新されます

Question

私の主な部分表示では、言語ドロップダウンリストが1つあり、その後に言語プロパティがドロップダウンリスト選択値と一致する条件付きでこのページの子項目を示す部分表示があります。デフォルトでは、すべての子アイテムが表示されます。

<div class="rtd"> 
        @{ 
        var slang=new SelectList(
        new List<SelectListItem> 
        { 
         new SelectListItem { Selected = true, Text = "All", Value = ""}, 
         new SelectListItem { Selected = false, Text = "English", Value = "English"}, 
         new SelectListItem { Selected = false, Text = "Gujarati", Value = "Gujarati"}, 
         new SelectListItem { Selected = false, Text = "Hindi", Value = "Hindi"}, 
        }, "Value" , "Text", 1); 
        @Html.DropDownList("drpLang", @slang, new { @class = "dropdown"}) 

</div> 

<div class="list"> 
     @Html.Partial("_List") 
</div> 

したがって、ビューはdropdownlistの値に従ってリフレッシュされる必要があります。だから、これはどうやって達成できますか？

Partialviewは以下のようになります。

@{ var selection = CurrentPage.Children.Where("Visible").Where("language=\"English\""); } 

@if (selection.Any()) 
{ 
<ul> 
     @foreach (var story in selection) 
     { 
     <li class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><a href="@story.Url" class="st-text"> @story.Name</a></li> 
     } 


</ul> 
} 

Answer 1

あなたはSelectListのの変更イベントをバインドするためにjqueryのスクリプトを書くことができます：

function BindSelectChange(){ 
     $('select').on('change',function(){ 
      // make an ajax call to your controller action 
      $.ajax({ 
       url:'/ControllerName/Action', 
       .... 
      }); 
     }); 
} 

はどのようにしbind a partial view via ajaxを見つけるために、このリンクを見てみましょう。

コントローラのアクションにオプションIDまたはテキストを渡します。 select要素の選択されたオプションを取得する方法については、Webを参照してください。

あなたがステップまたはseudoコードについて考える場合： //クライアント 1.バインドselect要素の変更イベント 2.選択されたオプションIDまたはテキストを取得する - あなたは 3. AJAXを作りたいかに応じて、コントローラーのアクションを呼び出すと、成功時に部分的なビューを再バインドします。

//コントローラアクション 1.オプションのID /オプションのテキストはあなたが必要なデータを取得するとのviewmodel /ビューを返すために - >これは