How to Handle Huge Number of Dropdowns in ASP.NET MVC

Question

We're moving to ASP.NET MVC from Webforms.

Our main page can have up to 130 dropdown lists, each with anywhere from 5 to 50 values in their lists.

In webforms/code behind this is a simple matter. But in MVC, with no server controls in a code behind, it seems like the only way to handle this is to pass in a giant json string indexed on the field name, then relying on jQuery to parse things out.

Any advice?

There is no code behind because MVC de-couples the UI from the code behind. You can still drop as many dropdowns on a view as you need. Just use your controller and business services to set a property on the model for each of the list of "SelectListItems" you need each drop down to bind to. — Wheels73, Apr 03 '17 at 13:40
In web forms we were passing more data then mvc, on MVC this is more simple and clean, refer http://stackoverflow.com/questions/14654873/asp-net-mvc-4-viewmodel-with-dropdownlist-data? — Anil, Apr 03 '17 at 13:49

score 0 · Answer 1 · answered Apr 03 '17 at 13:46

you can add Html helper in View

in controller

public ActionResult Index(string val, bool? inStock)
    {
        var viewModel = new ItemSearchViewModel();
        viewModel.ListOfItems = new SelectList(_service.GetListOfItem(), "ItemID", "ItemName"); //field to use ItemID as value ItemName as text
        return View(viewModel);
    }

in View

@Html.DropDownList("ItemDropdown1", Model.ListOfItems, "Select Item...")

you can look more tutorial for dropdown in here

Jason Evans · Answer 2 · 2017-04-03T14:23:39.447

Just to expand a bit on the answer by @fedri .....

Since you have so many dropdowns, I strongly suggest you make use of a viewmodel class to organise the dropdowns. (I won't go into why you have so many dropdowns, as it does seem like an excessive amount, But I guess the design has it's reasons).

Firstly, a viewmodel is simply a class e.g.

public class IndexViewModel
{
    public List<SelectListItem> Dropdown1 { get; set; }

    public string Dropdown1SelectedItem { get; set; }
}

I make use of this viewmodel by passing an instance of it to the view.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var viewModel = new IndexViewModel();

        viewModel.Dropdown1 = new List<SelectListItem>();

        viewModel.Dropdown1.Add(new SelectListItem() { Text = "Item 1", Value = "23" });

        return View(viewModel);
    }
}


@model WebApplication3.Controllers.IndexViewModel

@using (Html.BeginForm())
{
    @Html.DropDownList(nameof(Model.Dropdown1SelectedItem), Model.Dropdown1, "Select item...")
    <input type="submit" value="Save" />
}

When I post back the data, the selected value of Dropdown1 is stored in Dropdown1SelectedItem.

[HttpPost]
public ActionResult Index(IndexViewModel viewModel)
{
    //viewModel.Dropdown1SelectedItem will contain the Value property of the item you selected.

    return View();
}

That's simple enough to get you up and running. The hard part is organising your viewmodel to cater for so many dropdowns, in case you end up getting lost. However, if you name the dropdown properties well enough, then I guess it shouldn't be too bad.

EDIT:

If you must pass dropdown data back via AJAX/jQuery, rather then a from postback, then I can't see how not using a JSON structure to pass the data will work. In that case, I would strongly look at the design and review whether 100+ dropdowns is sensible to be posting back data for in one hit.

How to Handle Huge Number of Dropdowns in ASP.NET MVC

2 Answers2