ListBox in ASP.NET MVC

« Previous

In this chapter we will discuss how to implement ListBox in asp.net mvc. We will retrieve the data from table tblEmp in Employee database with sql server.

/tblemp listbox

Let’s see one example on how to set the item in the ListBox with MVC helper and when a user selects one or more employees in the ListBox and clicks on Submit button, the EmployeeID of the selected employee should be displayed. When the user doesn’t select any of the employees from the listbox and clicks on Submit button, a message of “you have not selected any employee” should be appeared.
So open your visual studio and create new MVC web application. First step is to create entity data model using ADO.NET entity framework.

navigation properties

Right click on model and add → add new item, under the visual C# data select ADO.NET entity data model. Provide some name, we have given EmployeeDataModel. Click OK. For detail please see the previous chapter.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcList.Models
{
    public class EmployeeViewModel
    {
        public IEnumerable empList { get; set; }
        public IEnumerable selectedEmp { get; set; }
    }
}

Right click on the "Controllers" folder, and add a "HomeController".

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcList.Models;
using System.Text;

namespace MvcList.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            EmployeeDBContext db = new EmployeeDBContext();
            List<SelectListItem> list = new List<SelectListItem>();
            foreach(Emp e in db.Emps)
            {
                SelectListItem item = new SelectListItem()
                {
                    Text = e.Name,
                    Value = e.EmpID.ToString(),
                    Selected=false
                };
                list.Add(item);
            }
            EmployeeViewModel viewModel = new EmployeeViewModel();
            viewModel.empList = list;
            return View(viewModel);
        }
        [HttpPost]
        public string Index(IEnumerable<string> selectedEmp)
        {
            if(selectedEmp==null)
            {
                return "You have not selected any employee";
            }
            else
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("Selected employeeID " + string.Join(" ," , selectedEmp));
                return sb.ToString();
            }
        }
    }
}

Right click on the "Index" action method in "HomeController" and select "Add View" from the context menu.
Check the checkbox create a strongly-type view and set
View Name = Index
View Engine = Razor
and click "Add".
Update as given below.

@model MvcList.Models.EmployeeViewModel
@{
        ViewBag.Title = "Employee List";
}
<h2>Employee List</h2>
<div>
    @using(Html.BeginForm())
    {
        @Html.ListBoxFor(x => x.selectedEmp, Model.empList)
        <br /><br />
        <input type="submit" value="Submit" />
    }
</div>

Run the application, you will see the following output.

Note: To select multiple items from the listbox, hold down the CTRL Key.

multiple item listbox

If you want to select multiple items from the listbox, then hold down the CTRL Key and then select the item.
Please note that the listbox is appearing with scrollbar and not showing the entire item. If you want to increase the size of list box, use the following code in view.

@Html.ListBoxFor(x =>x.selectedEmp, Model.empList, new{ size=8})

/increase listbox size

In Html.ListBoxFor helper, we have provided the third parameter, which increases the size of listbox.

« Previous

Tutorial