c# - Razor、JQuery 和表单：如何设置和绑定 DropDownListFor？

Question

我正在尝试做一些看起来有点棘手的事情，因为我是 ASP.NET、JQuery 等方面的完整初学者，所以我在这里寻求一些建议。

我已经找到了一个以这种方式显示的公式：

代码如下所示：

<table class="table table-striped table-bordered">
    <thead>
        <tr>
             <th>
                Room
            </th>
            <th>
                Room name
            </th>
            <th>
               User
            </th>
        </tr>
    </thead>
    <tbody>
         @for (int i = 0; i < Model._listPerson.Count(); i++) {
            <tr>
                <td>
                    @Html.EditorFor(m => m._listPerson[i].myValue.isSelected)
                </td>
                <td>
                    @Html.DisplayFor(m => m._listPerson[i].myValue.name)
                    @Html.HiddenFor(m => m._listPerson[i].myValue.name)
                    @Html.HiddenFor(m => m._listPerson[i].myKey)
                </td>
                <td>                       
                    <!--Obtain the KeyValuePair<int, List<PersonModel>> that correspond to the index.-->
                    @Html.DropDownListFor(m => m.selectedPerson[i], new SelectList(Model._list[i].myValue, "id", "name"))                   
                </td>

            </tr>
        }

    </tbody>
</table>
<p>Assign all selected rooms to user  @Html.DropDownListFor(m => m.useless, new SelectList(Model._list[0].myValue, "id", "name"))</p>

所以我想要做的目的是将所有字段“分配的用户”更新为在表格底部选择的用户的名称。如何轻松做到这一点？

谢谢 ！

Answer 1

在循环中向 DropDownLists 添加一个类，如下所示：

@Html.DropDownListFor(m => m.selectedPerson[i], new SelectList(Model._list[i].myValue, "id", "name"), new { @class = "ddl" })      

然后，将此脚本添加到您的页面：

<script type="text/javascript">
  $(document).ready(function () {
    $('#useless').change(function () {
      var selected = $(this).val();
      $(".ddl").val(selected);
    });
  });
</script>

Answer 2

现在好了，感谢 ataravati。我不得不稍微改变一下解决方案。这是javascript：

<script type="text/javascript">
  $(document).ready(function () {
    $('#useless').change(function () {
        var selected = $(this).val();
        $(':checkbox').each(function () {
            var tag = $(this).attr('id');
            tag = tag.replace(/^select/, "");
            tag = ".ddl" + tag;
            console.log("tag : " + tag);
            if ($(this).attr('checked'))
                $(tag).val(selected);
        });
    });
  });
</script>

这是显示页面的新版本代码：

<tbody>
         @for (int i = 0; i < Model._listPerson.Count(); i++) {
            <tr>
                <td>
                    @Html.CheckBoxFor(m => m._listPerson[i].myValue.isSelected, new { id = "select"+i })
                </td>
                <td>
                    @Html.DisplayFor(m => m._listPerson[i].myValue.name)
                    @Html.HiddenFor(m => m._listPerson[i].myValue.name)
                    @Html.HiddenFor(m => m._listPerson[i].myKey)
                </td>
                <td>                       
                    @Html.DropDownListFor(m => m.selectedPerson[i], new SelectList(Model._list[i].myValue, "id", "name"), new { @class = "ddl"+i })                   
                </td>

            </tr>
        }
    </tbody>

现在，它工作正常！谢谢 ！