基于下拉列表选择更新视图

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>