根据下拉列表选择更新视图

时间:2016-12-27 07:25:08

标签: c# asp.net asp.net-mvc

很抱歉,如果我的问题标题不清楚,因为我不知道如何总结它。

所以我的方案是提供一个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>

基本上,我希望从model.moduleID选项中获取dropdownlist,然后使用基于Model.ObjectiveList的数据填充model.moduleID。我该怎么做?

1 个答案:

答案 0 :(得分:2)

你需要使用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>