How to implement ListBox control in asp.net MVC?

In this article we will discuss implementing ListBox functionality in asp.net MVC application.

We will be using City table

Step 1: Create a table using the following script with data:

USE[ShoppingZone]

GO

/******Object:  Table [dbo].[City]    Script Date: 04/22/2016 18:22:41 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE TABLE [dbo].[City](

      [CityId] [int] IDENTITY(1,1) NOT NULL,

      [Name] [nvarchar](50) NOT NULL,

      [IsSelected] [bit] NOT NULL,

 CONSTRAINT[PK_City] PRIMARY KEYCLUSTERED 

(

      [CityId] ASC

)WITH(PAD_INDEX = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

SET IDENTITY_INSERT [dbo].[City]ON

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (1, N'Mumbai', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (2, N'London', 1)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (3, N'New York', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (4, N'brussels', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (5, N'sydney', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (6, N'Riyadh', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (7, N'seoul', 0)

SET IDENTITY_INSERT [dbo].[City]OFF

Step 2: Create an ado.net entity data model using table City and generate entity for that.

Step 3: Right click on the "Controllers" folder and add "ListBox" controller. Copy and paste the following code. Please make sure to include "MVC_tutorials.Models" namespace.

using MVC_tutorials.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Mvc;

 

namespace MVC_tutorials.Controllers

{

    public class ListBoxController : Controller

    {

     

        models db = new models();

 

        [HttpGet]

        public ActionResult Index()

        {

            List<SelectListItem> listSelectListItems = new List<SelectListItem>();

 

            foreach (City city in db.Cities)

            {

                SelectListItem selectList = new SelectListItem()

                {

                    Text = city.Name,

                    Value = city.CityId.ToString(),

                    Selected = city.IsSelected

                };

               listSelectListItems.Add(selectList);

            }

 

            CitiesViewModel citiesViewModel = new CitiesViewModel()

            {

                Cities = listSelectListItems

            };

 

            return View(citiesViewModel);

        }

 

        [HttpPost]

        public string Index(IEnumerable<string> selectedCities)

        {

            if (selectedCities == null)

            {

                return "No citiesselected";

            }

            else

            {

                StringBuilder sb = new StringBuilder();

                sb.Append("You selected - " +string.Join(",",selectedCities));

                return sb.ToString();

            }

        }

 

    }

}

Step 4: Right click on the "Index" action method in the "CityController" and add "Index" view. Copy and paste the following code.

@modelMVC_tutorials.Models.CitiesViewModel

@{

    ViewBag.Title = "List Box example";

}

 

<h2>List Box example</h2>

 

<div style="font-family:Arial">

<h2>List Box</h2>

@using (Html.BeginForm())

{

    @Html.ListBoxFor(m => m.SelectedCities, Model.Cities, new { size = 5 })

    <br />

    <input type="submit" value="Submit" />

}

</div>