Razor, JQuery and form : how to set and bind DropDownListFor?

Question

I'm trying to do something that seems to be a little bit tricky and since i'm a complete beginner in ASP.NET, JQuery and so on, i'm here to have some advices.

I've rceated a formular that is displayed that way :

The code looks like that :

<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>

So the aim of what I want to do is to update all the fields "assigned user" to the name of the user that is selected at the bottom of the table. How to do that easily ?

Thanks !

Answer 1

It's ok now, thanks to ataravati. I had to change the solution a little bit. Here is the 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>

And here is the new version of the code that display the page :

<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>

And now, it's working fine ! Thanks !

Answer 2

Add a class to your DropDownLists in the loop like this:

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

Then, add this script to your page:

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