.Net MVC Html.ListBox tutorial with examples

In .NET MVC, the Html.ListBox helper is used to create a multi-select list box in an HTML form. This helper generates the necessary HTML code for creating a list box control, and also populates the control with the specified data.

Here is an example of how to use Html.ListBox in .NET MVC: First, create a view with a form that includes a multi-select list box:

@model MyViewModel

@using (Html.BeginForm())
{
    @Html.ListBoxFor(m => m.SelectedValues, Model.AvailableValues)
    
}

In this example, MyViewModel is the model that is passed to the view. The Html.ListBoxFor helper creates a multi-select list box control for the SelectedValues property of the model, and populates the control with the data in the AvailableValues property.

Next, create a controller that will receive the form submission:

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        var model = new MyViewModel();
        model.AvailableValues = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "Option 1" },
            new SelectListItem { Value = "2", Text = "Option 2" },
            new SelectListItem { Value = "3", Text = "Option 3" }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // Get the selected values from the list box control
        var selectedValues = model.SelectedValues;

        // Do something with the selected values

        return View(model);
    }
}

In this example, the Index action of the HomeController is used to handle both the GET and POST requests for the view. The HttpGet version returns the view with a new instance of the MyViewModel model. The HttpPost version receives the submitted form data as an instance of the MyViewModel model. The SelectedValues property can be accessed to get the selected values from the list box control.

Html.ListBox Example in .Net MVC

@Html.ListBox("myListBox", new List<SelectListItem>
{
    new SelectListItem{ Text="India", Value = "1" },
    new SelectListItem{ Text="USA", Value = "2" },
    new SelectListItem{ Text="France", Value = "3" },
})
    

Generated HTML Tag

     
    India     
    USA     
    France 

Output

Html.ListBox setting value checked

In this example we will see how to set any value/option checked when @Html.ListBox loads for first time.

@Html.ListBox("myListBox", new List<SelectListItem>
{
    new SelectListItem{ Text="India", Value = "1" },
    new SelectListItem{ Text="USA", Value = "2",Selected=true },
    new SelectListItem{ Text="France", Value = "3",Selected=true },
})
    

Generated HTML Tag

     
    India     
    USA     
    France 

Output

Html.ListBox applying CSS style

In this example we will see how apply CSS styles to @Html.ListBox.

@Html.ListBox("myListBox", new List<SelectListItem>
{
    new SelectListItem{ Text="India", Value = "1" },
    new SelectListItem{ Text="USA", Value = "2" },
    new SelectListItem{ Text="France", Value = "3" },
}, "Select Country", new { style = "width: 250px;color:red;" })
    

Generated HTML Tag

    
    Select Country     
    India     
    USA     
    France 
    

Output

In conclusion, the Html.ListBox helper is a useful tool for creating a multi-select list box control in an HTML form in .NET MVC. The helper simplifies the process of populating the control with data, and also provides an easy way to access the selected values from the control in the controller.