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>