How to Bind ListBox In MVC3 Razor with Example

In this article i will show you how you can bind a listbox control in mvc application, and how you can get the selected value of the listbox in controller.

So here we go. First you needed to create a new mvc3 application. In this add controller and model. In your model add the below model code.

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

namespace ListBox_In_MVC3.Models
{
    public class CountryModel
    {
        public SelectList CountryList { get; set; }
        public string[] SelectedCountry { get; set; }
    }
    public class Country
    {
        public int Id { get; set; }
        public string CountryName { get; set; }
    }
}

Now in your controller add the below code

public ActionResult Index()
        {
            CountryModel objcountrymodel = new CountryModel();
            objcountrymodel.CountryList = GetAllCountryList();
            return View(objcountrymodel);
        }

Now prepare the country list 

    public SelectList GetAllCountryList()
        {
            List<Country> objcountry = new List<Country>();
            objcountry.Add(new Country { Id = 1, CountryName = "India" });
            objcountry.Add(new Country { Id = 2, CountryName = "USA" });
            objcountry.Add(new Country { Id = 3, CountryName = "Pakistan" });
            objcountry.Add(new Country { Id = 4, CountryName = "Nepal" });
            SelectList objselectlist = new SelectList(objcountry, "Id", "CountryName");
            return objselectlist;
        }

Now put the post action result method.

[HttpPost]
        public ActionResult Index(CountryModel objcountrymodel)
        {
            objcountrymodel.CountryList = GetAllCountryList();
            //Now we will get the selected name for display
            string SelectedCountryName = "";
            var countrylistname = objcountrymodel.CountryList.Where(m => objcountrymodel.SelectedCountry.Contains(m.Value)).Select(m => m.Text);
            foreach (var item in countrylistname)
            {
                SelectedCountryName += item + ",";
            }
            ViewBag.Country = "Your Selected Country Name "+SelectedCountryName;
            return View(objcountrymodel);
        }

The above action will take  place when page post back take place.  After post back we will get all the value in you model.
CountryModel objcountrymodel.
Now you controller will look as shown below

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

namespace ListBox_In_MVC3.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            CountryModel objcountrymodel = new CountryModel();
            objcountrymodel.CountryList = GetAllCountryList();
            return View(objcountrymodel);
        }
        [HttpPost]
        public ActionResult Index(CountryModel objcountrymodel)
        {
            objcountrymodel.CountryList = GetAllCountryList();
            //Now we will get the selected name for display
            string SelectedCountryName = "";
            var countrylistname = objcountrymodel.CountryList.Where(m => objcountrymodel.SelectedCountry.Contains(m.Value)).Select(m => m.Text);
            foreach (var item in countrylistname)
            {
                SelectedCountryName += item + ",";
            }
            ViewBag.Country = "Your Selected Country Name "+SelectedCountryName;
            return View(objcountrymodel);
        }
        public SelectList GetAllCountryList()
        {
            List<Country> objcountry = new List<Country>();
            objcountry.Add(new Country { Id = 1, CountryName = "India" });
            objcountry.Add(new Country { Id = 2, CountryName = "USA" });
            objcountry.Add(new Country { Id = 3, CountryName = "Pakistan" });
            objcountry.Add(new Country { Id = 4, CountryName = "Nepal" });
            SelectList objselectlist = new SelectList(objcountry, "Id", "CountryName");
            return objselectlist;
        }

    }
}

Now create the view for index method and put the below code.

@model ListBox_In_MVC3.Models.CountryModel
@{
    ViewBag.Title = "Index";
}
<h3>
    bind listbox in mvc3 razor</h3>
@using (Html.BeginForm("Index", "Home"))
{
    @Html.ListBoxFor(m => m.SelectedCountry, new SelectList(Model.CountryList, "Value", "Text", Model.CountryList.SelectedValue), new { @Id = "lstcountry", @style = "width:200px;height:60px;" })
    <br /> <input type="submit" value="Submit" title="submit" />
    <div style="color: Red; font-weight: bold;">@ViewBag.Country</div>
}

Now we have done. Now run the application



Now select the country and click on submit you will get the selected country value in your controller.




Here is the final output.