基於下拉列表選擇更新視圖

Question

對不起，如果我的問題標題不是很清楚，因爲我不知道如何總結。

因此，我在這裏的場景是提供一個供用戶選擇的checkbox選擇列表。此選擇列表將根據dropdownlist選擇而有所不同。到目前爲止，這是我實現，但我真的不知道如何使用jQuery操縱從視圖選擇列表：

查看：

 <div class="form-group"> 
     @Html.LabelFor(model => model.moduleID, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
      @Html.DropDownListFor(model => model.moduleID, new SelectList(Model.ModuleList, "value", "text"), 
    "- Please select a Module -", new { @onchange = "PopulateObj()", @class = "form-control" }) 
      </div> 
     </div> 

     <table class="table"> 
     @for (int i = 0; i < Model.ObjectiveList.Count(); i++) 
     { 
      <tr> 
       <td> 
        @Html.CheckBoxFor(model => model.ObjectiveList[i].isAssigned) 
        @Html.DisplayFor(model => model.ObjectiveList[i].text) 
        @Html.HiddenFor(model => model.ObjectiveList[i].text) 
       </td> 
      </tr> 
     } 
    </table> 

腳本：

<script> 
     function PopulateObj() { 
      var moduleID = $('#moduleID').val(); 
      //implementation to change Model.ObjectiveList 
     } 
    </script> 

基本上，我想從dropdownlist選項中獲得model.moduleID，然後用基於的數據填充。我應該怎麼做？

Answer 1

你需要使用Ajax：

<script> 
     function PopulateObj() { 
      var _moduleID = $('#moduleID').val(); 

      $.ajax({ 
        type: 'POST', 
        cache: false, 
        url: '@Url.Action("Action", "Controller")', 
        data: {moduleID: moduleID}, 
        success: function (response) { 
         $("#DivResultat").empty(); 
         $("#DivResultat").html(response); 
        } 
       }); 

     } 
</script> 

在行動：

[HttpPost] 
public ActionResult Action(string moduleID) 
{ 
    var model = new myModel(); 
    model.ObjectiveList = //get your list 
    return PartialView("path_of_partialView", model) 
} 

局部視圖：

<table class="table"> 
@for (int i = 0; i < Model.ObjectiveList.Count(); i++) 
    { 
<tr> 
     <td> 
      @Html.CheckBoxFor(model => model.ObjectiveList[i].isAssigned) 
      @Html.DisplayFor(model => model.ObjectiveList[i].text) 
      @Html.HiddenFor(model => model.ObjectiveList[i].text) 
     </td> 
</tr> 
} 
</table> 

主視圖：

<div class="form-group"> 
     @Html.LabelFor(model => model.moduleID, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
      @Html.DropDownListFor(model => model.moduleID, new SelectList(Model.ModuleList, "value", "text"), 
    "- Please select a Module -", new { @onchange = "PopulateObj()", @class = "form-control" }) 
      </div> 
     </div> 
<div id="DivResultat"> 

</div>