Multi-Select List/Drop Down in Asp.Net MVC4

This article is basically focused on how we can use Multi-Select List/ Drop Down using Asp.Net MVC4 and Bootstrap.

Basic steps for selecting multiple values from Multi-Select List/Drop Down List using Asp.Net MVC and Bootstrap.

Step 1:- Create the model class with name as MoviesModel

public class MoviesModel
{
// This will hold the selected values in List/Drop Down Box 
public string[] SelectMovies { get; set; }
Public IEnumerable AllMovies { get; set; }
}

Step 2:- Create new controller with name as MoviesController

public class MoviesController : Controller
{
   // GET: /Movies
         public ActionResult Index()
         {
               MoviesModel movmod=new MoviesModel();
               movmod.SelectMovies= new string[] { "1","2" };
               movmod.AllMovies = GetAllMovies();
               return View(movmod);
         }

         private IEnumerable<SelectListItem> GetAllMovies()
        {
            List<SelectListItem> allmov = new List<SelectListItem>();
            allmov.Add(new SelectListItem { Value = "1", Text = "Terminator" });
            allmov.Add(new SelectListItem { Value = "2", Text = "Harry Potter" });
            allmov.Add(new SelectListItem { Value = "3", Text = "Matrix" });
            allmov.Add(new SelectListItem { Value = "4", Text = "Fast and Furious" });
            allmov.Add(new SelectListItem { Value = "5", Text = "Tokyo Drift" });
            allmov.Add(new SelectListItem { Value = "6", Text = "Spider Man" });
            allmov.Add(new SelectListItem { Value = "7", Text = "Men In Black" });
            return allmov.AsEnumerable();
        }
      
  // POST: /Movies
         [HttpPost]
        public ActionResult Index(MoviesModel movmodel)
        {            
               movmodel.AllMovies = GetAllMovies();
               return View(movmodel);
        }

}

Step 3:- Create new view with name as Index


     @{
         ViewBag.Title = "Index";
      }

      <h2>Example of Multiselect List/ Drop down in Asp.Net MVC4</h2>

      @model MvcAssign.Models.MoviesModel

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"   rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
      <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
      <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

        @using (Html.BeginForm())
        { 
             <div class="form-group">
              <label class="col-lg-2 control-label" for="movies">Movies:</label>
               <div class="col-lg-10">
                @Html.ListBoxFor((m => m.SelectMovies), new SelectList(Model.AllMovies, "Value", "Text", Model.SelectMovies), new { @class = "multiselect", multiple = "multiple", id = "lstMovies" })
            
                 @*@Html.DropDownListFor((m => m.SelectMovies), new SelectList(Model.AllMovies, "Value", "Text", Model.SelectMovies), new { @class = "multiselect", multiple = "multiple", id = "lstFruits",allowmultiple=true })*@

                </div>
             </div>
             <br />    
             <input type="submit" value="Submit" style="margin-left:48px;" />
        }


   <script type="text/javascript">
        $(function () {
          $('[id*=lstMovies]').multiselect({
              includeSelectAllOption: true                
               });
           });
    </script>

 

After running the above code you will get the following output

MultiSelectDropDown_1

MultiSelectDropDown_2

After Http Post(i.e on button click) we will get the selected item in List/Drop Down box as shown below.

MultiSelectDropDown_3

In the next article we will see the filtering and List/Drop Down box value through JQuery.

Reference for Multi-Select Bootstrap js
http://davidstutz.github.io/bootstrap-multiselect/

🙂 Happy Coding…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s