Multiple Ways to Bind Dropdown List in ASP.Net MVC

ASP.NET MVC provides developers with a number of ways to bind data to an HTML DropDownList control. In this article, we will explore five different ways to bind data to the DropDownList control in .NET MVC.

Using ViewData/ViewBag:

ViewData and ViewBag are two techniques to pass data from the controller to the view. We can create a List of SelectListItem in the controller and pass it to the view using ViewData or ViewBag. We can then bind the data to the DropDownList in the view.

Using Model:

We can create a model with properties for the list of items and the selected item, and then use this model to bind data to the DropDownList control. We can then use the DropDownListFor() helper method to create the DropDownList control in the view.

Using SelectList:

We can create a SelectList object in the controller and pass it to the view using ViewBag. The SelectList object contains the list of items and the selected value. We can then bind the data to the DropDownList in the view using the DropDownList() helper method.

Using ViewBag.Dynamic:

We can use the ViewBag.Dynamic property to create a dynamic property in the view and then bind the data to the DropDownList control.

Using Ajax:

We can use Ajax to bind the data to the DropDownList control dynamically without reloading the page. We can create a separate action method in the controller that returns the list of items and use Ajax to call this action method and populate the DropDownList control in the view.

By using these different techniques to bind data to the DropDownList control, we can create a more dynamic and user-friendly experience for our users.

Using ViewData/ViewBag:

Controller code:

public ActionResult Index()
{
    List<SelectListItem> items = new List<SelectListItem>();
    items.Add(new SelectListItem { Text = "Item 1", Value = "1" });
    items.Add(new SelectListItem { Text = "Item 2", Value = "2" });
    items.Add(new SelectListItem { Text = "Item 3", Value = "3" });

    ViewData["Items"] = items;
    ViewBag.Items = items;

    return View();
}

View code:

@Html.DropDownList("Items", (IEnumerable<SelectListItem>)ViewData["Items"])
@Html.DropDownList("Items", (IEnumerable<SelectListItem>)ViewBag.Items)

Using Model:

Model code:

public class MyModel
{
    public int SelectedItemId { get; set; }
    public List<SelectListItem> Items { get; set; }
}

Controller code:

public ActionResult Index()
{
    MyModel model = new MyModel();
    model.Items = new List<SelectListItem>();
    model.Items.Add(new SelectListItem { Text = "Item 1", Value = "1" });
    model.Items.Add(new SelectListItem { Text = "Item 2", Value = "2" });
    model.Items.Add(new SelectListItem { Text = "Item 3", Value = "3" });

    return View(model);
}

View code:

@model MyModel

@Html.DropDownList("myDropDown", Model.items, new { @class = "form-control" })

Using SelectList:

Controller code:

public ActionResult Index()
{
    List<SelectListItem> items = new List<SelectListItem>();
    items.Add(new SelectListItem { Text = "Item 1", Value = "1" });
    items.Add(new SelectListItem { Text = "Item 2", Value = "2" });
    items.Add(new SelectListItem { Text = "Item 3", Value = "3" });

    SelectList selectList = new SelectList(items, "Value", "Text");

    ViewBag.Items = selectList;

    return View();
}

View code:

@Html.DropDownList("Items", (SelectList)ViewBag.Items)

Using ViewBag.Dynamic:

Controller code:

public ActionResult Index()
{
    List<SelectListItem> items = new List<SelectListItem>();
    items.Add(new SelectListItem { Text = "Item 1", Value = "1" });
    items.Add(new SelectListItem { Text = "Item 2", Value = "2" });
    items.Add(new SelectListItem { Text = "Item 3", Value = "3" });

    ViewBag.Dynamic.Items = items;

    return View();
}

View code:

@Html.DropDownList("Items", (IEnumerable<SelectListItem>)ViewBag.Dynamic.Items)

Using Ajax:

Controller code:

public ActionResult GetItems()
{
    List<SelectListItem> items = new List<SelectListItem>();
    items.Add(new SelectListItem { Text = "Item 1", Value = "1" });
    items.Add(new SelectListItem { Text = "Item 2", Value = "2" });
    items.Add(new SelectListItem { Text = "Item 3", Value = "3" });

    return Json(items, JsonRequestBehavior.AllowGet);
}

View code:

@Html.DropDownList("myDropDown")


@section scripts {
    

}

Note that the above code assumes that you have included jQuery in your project. Also