ListBox HTML Helper in ASP.NET MVC

Back to: ASP.NET MVC Tutorial For Beginners and Professionals

Creating ListBox using ListBox HTML Helper in ASP.NET MVC

In this article, I am going to discuss how to create a ListBox using ListBox HTML Helper in the ASP.NET MVC application. Please read our previous article before proceeding to this article, where we discussed how to create a checkbox using CheckBox HTML Helper in the MVC application. 

What is a ListBox?

A ListBox is a graphical control element that allows the user to select one or more items from the list box. The user clicks inside the box on an item to select it, sometimes in combination with the Shift or Ctrl, in order to make multiple selections. Clicking an item that has already been selected unselects it.

Let us understand ListBox HTML Helper in MVC with an example.

To understand the ListBox HTML Helper in the ASP.NET MVC application, we are going to use the following City Table.

We need to generate the following list box. Notice that each city in the City table has an entry in the list box, as shown in the image below. 
 

Business Requirements:

We need to allow the user to select one or more cities from the ListBox. Once the user selects the cities and clicks on the Submit button,  then we need to display the CityIds of the selected cities separated by a comma. If the user doesn’t select any city and clicks on the Submit button, then the No Cities are Selected message should be displayed.

For this demo, we are going to use the following “City” entity that we created using the ADO.NET Entity Framework in our previous article. 

 

Creating a View Model:

First, we need to create a View Model. In ASP.NET MVC, the view models are nothing but a mechanism to shuttle data between the controller and the view. To create the View Model, right-click on the Models folder, then add a new class file named CitiesViewModel. Once you create the CitiesViewModel, copy and paste the following code. This is the class that is going to be the Model for our view.

namespace HTML_HELPER.Models
{
    public class CitiesViewModel
    {
        public IEnumerable<string> SelectedCities { get; set; }
        public IEnumerable<SelectListItem> Cities { get; set; }
    }
}

Modify the Home Controller as shown below

namespace HTML_HELPER.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            CityDBContext dbContext = new CityDBContext();
            List<SelectListItem> citiesSelectListItems = new List<SelectListItem>();

            foreach (City city in dbContext.Cities.ToList())
            {
                SelectListItem selectList = new SelectListItem()
                {
                    Text = city.City_Name,
                    Value = city.City_ID.ToString(),
                    Selected = city.IsSelected
                };
                citiesSelectListItems.Add(selectList);
            }
            CitiesViewModel citiesViewModel = new CitiesViewModel()
            {
                Cities = citiesSelectListItems
            };
            return View(citiesViewModel);
        }

        [HttpPost]
        public string Index(IEnumerable<string> selectedCities)
        {
            if (selectedCities == null)
            {
                return "No cities selected";
            }
            else
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("You selected - " + string.Join(",", selectedCities));
                return sb.ToString();
            }
        }
    }
}

Copy and paste the following code in the “Index.cshtml” view

@model HTML_HELPER.Models.CitiesViewModel
@{
    ViewBag.Title = "Index";
}
<div style="font-family:Arial">
    <h2>Index</h2>
    @using (Html.BeginForm())
    {
        @Html.ListBoxFor(m => m.SelectedCities, Model.Cities, new { size = 7 })
        <br />
        <input type="submit" value="Submit" />
    }
</div>

Note: In order to select multiple items from the list box, you need to hold down the CTRL Key. Run the application and see if everything is working as expected.

In the next article, I am going to discuss Editor HTML Helper in ASP.NET MVC application. In this article, I explain how to create ListBox using ListBox HTML Helper in ASP.NET MVC with an example. I hope this ListBox HTML Helper in MVC article will help you with your needs.