根據下拉列表選擇更新視圖

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 ，然后使用基於Model.ObjectiveList的數據填充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>