c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
asp.net MVC

How to implement ListBox control in asp.net MVC?

| | ASP-NET , CSharp , 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>