MVCのドロップダウン選択に応じて部分ビューをロード

Question

私はお詫びします。私はまだMVCにはまだかなり新しいです。私は現在いくつかのオプションを持つドロップダウンリストを持っています。私がしたいことは、私が選択したドロップダウンリストの値に応じて、部分的なビューをレンダリングできるはずです。ユーザーがドロップダウンリストから選択するとすぐに部分ビューをロードします。

また、部分ビューをレンダリングすることはできますが、必要な情報が返されません。私がドロップダウンリストから選択すると、functionIDには関係なく、すべての項目が返されます。

functionIDに基づいて部分ビューをレンダリングする必要があります。

ありがとうございました。どのような助けも非常に感謝しています。

メインビュー

@Html.DropDownListFor(m => m.FunctionID, new 
    SelectList(Model.functionList, "FunctionID", "Name"), "Select 
    Function", new {@id="id"}) 


     <div id="partialPlaceHolder"> 

     </div> 

部分図

 @foreach (var items in Model.itemTypeList) 
     { 

      <pre> @items.Definitions</pre> 



     } 

コントローラ

[HttpGet] 
    public ActionResult ViewOverview() 
    { 


     List<Function> functionList; 
     List<ItemType> itemTypeList; 


     using (BusinessLogic BLL = new BusinessLogic()) 
     { 


      functionList = BLL.GetFunctionList(); 
      itemTypeList = BLL.GetItemTypesList(); 

     } 


     Words viewModel = new Words(); 
     MetricDefinitions(viewModel); 

     return View(viewModel); 


    } 


[HttpGet] 
    public ActionResult GetWords() 
    { 

     List<Function> functionList; 
     List<ItemType> itemTypeList; 


     using (BusinessLogic BLL = new BusinessLogic()) 
     { 


      functionList = BLL.GetFunctionList(); 
      itemTypeList = BLL.GetItemTypesList(); 


     } 


     Words viewModel = new Words() 
     { 

      itemTypeList = itemTypeList, 
      functionList = functionList 

     }; 


     return PartialView("_ViewWords", viewModel); 
    } 




    private void MetricDefinitions(Words model) 
    { 
     List<Function> functionList; 
     List<ItemType> itemTypeList; 




     using (BusinessLogic BLL = new BusinessLogic()) 
     { 


      functionList = BLL.GetFunctionList(); 
      itemTypeList = BLL.GetItemTypesList(); 

     } 

     model.functionList = functionList; 
     model.itemTypeList = itemTypeList; 



    } 

javascript

$(document).ready(function() { 

$('#id').change(function() { 

    var selectedID = $(this).val(); 
    $.get('/Home/GetWords/' + selectedID, function (data) { 
     $('#partialPlaceHolder').html(data); 
     /* little fade in effect */ 
     $('#partialPlaceHolder').fadeIn('fast'); 
    }); 
    }); 
}); 

Answer 1

NetFiddleを追加しました。それは動作します

アクションにselectedItem paramを追加し、jquery​​関数を使用してターゲット要素に部分的な結果を得ることができますか？

[HttpGet] 
public ActionResult GetWords(int selectedItem) // add your selectedVal value in controller 
{ 
     ..... 
} 

jqueryの

// it is going to parse partial view into target div 
$("#id").on("change", function(){ 

    var url = '@Url.Action("GetWords", "Home")' + "?selectedItem=" + $(this).val(); 

    $("#partialPlaceHolder").load(url, function(){ 
     console.log("It worked"); 
     $('#partialPlaceHolder').fadeIn('fast'); 
    }) 
})