Add Dynamic Dropdown List when Iterating over models passed in MVC C#

Question

I have a problem that I have been trying to figure out and I was hoping for some help. I have the following Model

public class SampleModel
{
  [Required]
  public int Id {get;set;}
  [Required]
  public string Name {get;set;}
  [Required]
  public int TypeId {get;set}
  public int? SubTypeId {get;set;}
}

I have the API calls to get All Available Types, then API call to get Available SubTypes based on a passed TypeId.

The Controller has the Index set up that I pass the appropriate set of types in a ViewBag.AvailableTypes. I also have the Razor View:

@model IEnumerable<Models.SampleModel>

@{
    ViewBag.Title = "SetSampleModels";
}

<h2>Set Sample Models</h2>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Id)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TypeId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SubTypeId)
        </th>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
       <td>
           @Html.DisplayFor(modelItem => item.Id)
       </td>
       <td>
           @Html.DisplayFor(modelItem => item.NaME)
       </td>
       <td>
           @Html.DropDownListFor(modelItem => item.TypeId,AvailableTypes)
       </td>
       <td>
           ??????@Html.DropDownListFor(.....)?????
       </td>
    </tr>
    }
</table>

I have jquery that can replace a select dropdown on the fly, but I don't know how to code the target for the jquery and have the controller read in the correct item. I also am unfamiliar with how to allow "null" options since I do not require a subtype.

Any help would be greatly appreciated as it is frustrating to solve this.

Thanks all! Jon

You have to implement cascading dropdownlists. Refer [this DotNetFiddle](https://dotnetfiddle.net/1bPZym) (and use a view model containing properties for your SelectLists, not `ViewBag`) — , Feb 12 '18 at 04:22
I understand how to do that with one model, but for this question, how do I do that for every model that I iterate over. Thank you very much though for a good part of it! — Jon, Feb 12 '18 at 05:54
Its still the same principal - you need to handle the change event of the first dropdown, get its value and call a server method to populate the 2nd using relative jquery selectors — , Feb 12 '18 at 06:03
As a side note, your view code will not bind to anything. A `foreach` loop will not work. Refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) answer to understand how to bind to collection — , Feb 12 '18 at 06:04
You will need to wrap your dropdownlists inside a container element and give the dropdownlists a class name so that you can use `$('.firstSelectClassname').change(function) { var secondSelect = $(this).closest('.containerClassname').find('.secondSelectClassname'); ....` — , Feb 12 '18 at 06:07
And if you expect the same values to be selected in the first dropdownlist, you can consider caching the results to avoid making the same ajax call again - refer [better way to load 2 dropdown in mvc](http://stackoverflow.com/questions/28627421/better-way-to-load-2-dropdown-in-mvc/28640420#28640420) — , Feb 12 '18 at 06:09
In addition, your first dropdownlist will not shown the correct selected option (if your editing existing data, or need to return the view because `ModelState` is invalid). Refer [MVC5 Razor html.dropdownlistfor set selected when value is in array](https://stackoverflow.com/questions/37407811/mvc5-razor-html-dropdownlistfor-set-selected-when-value-is-in-array/37411482#37411482) for how to use `DropDownListFor()` in a collection — , Feb 12 '18 at 06:11
So those are elements from some working code specifically, the foreach works right now (4.7). I really like class wrapper idea! Thanks so much! — Jon, Feb 12 '18 at 06:37
The `foreach` cannot possibly work - it will never bind to your model when you submit (read the links I gave you) — , Feb 12 '18 at 06:38

Add Dynamic Dropdown List when Iterating over models passed in MVC C#

0 Answers0