ASP.NET MVC multiple select dropdown

Question

I am using the following code to let user select multiple locations on the form.

@Html.DropDownListFor(m => m.location_code, Model.location_type, new { @class = "form-control", @multiple = "multiple" }).

location_code is an List<int> and location_type is List<SelectListItem> populated with data.

The code does return me the selected values in the controller, but when the user clicks on edit button the object passed does not show the selected values but instead shows the normal initialized dropdown with nothing selected.

What i actually want is that once the user submits the form (including the multiple selected values) it goes to a page where user confirms if the details are correct.If not he presses edit button and the object is again passed to controller.In this phase it should show the multiple values selected.Other fields behave properly .

Any insight on this ?

Why don't you use the @Html.ListBoxFor to generate a multiselect dropdown ? — Panayotis
– Panayotis, Commented Jul 29, 2014 at 10:50
@Panayotis How to render it as dropdown with multiple select? — knowledgeseeker
– knowledgeseeker, Commented Jul 29, 2014 at 11:18

ataravati · Accepted Answer · 2016-02-19 15:16:14Z

36

In your view:

@Html.ListBoxFor(m => m.location_code, Model.location_type)

That's all you need. You're using a ListBox control so it's already a multiple select list.

Then back in your controller you can get the selected items like this:

[HttpPost]
public string SaveResults(List<int> location_code)
{

    if (location_code!= null)
    {
        return string.Join(",", location_code);
    }
    else
    {
        return "No values are selected";
    }
}

edited Feb 19, 2016 at 15:16

ataravati

9,1759 gold badges60 silver badges94 bronze badges

answered Jul 29, 2014 at 12:12

Panayotis

1,7831 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

knowledgeseeker Over a year ago

ListBoxFor did the trick !! thanks @panayotis . In addition this link also helped. mehmetkurtipek.blogspot.in/2012/09/…

Gibson Ndemanga · Accepted Answer · 2022-06-22 18:03:03Z

I am assuming you already know the general MVC stuff, so with that in mind:

First get this library and set it up: https://select2.org/getting-started/basic-usage

In your view you can use this

@Html.DropDownListFor(model => model.DistrictId, new SelectList(new List<object>(), "Id ", "Description"), "Select District", htmlAttributes: new
                                {
                                    @class = "js-example-placeholder-multiple col-sm-12 form-select form-control",
                                    @multiple="multiple",
                                    id = "DistrictDropDownList"
                                })

You can then add a property viewmodel for the model.DistrictId used in the control above as a List of string as follows

public class Places
{
   //Other ViewModel properties
    public List<string> DistrictId {get;set;}
   
}

When you submit your ViewModel back to the controller, you will have the multiple selected Ids as a list of strings.

Manish Kumar Gurjar · Accepted Answer · 2020-12-24 12:11:39Z

MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net :

first we will create a new mvc application and add the a model class file in model folder. In this model class file add the below code.

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

namespace MvcApplication1.Models
{
    public class CountryModel
    {
        public List<Country> CountryList { get; set; }
        public string SelectedCountryId { get; set; }
    }
    public class Country
    {
        public string CountryName { get; set; }
    }
}

Now add a controller class file and add the below code.

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

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

        public ActionResult Index()
        {
            CountryModel objcountrymodel = new CountryModel();
            objcountrymodel.CountryList = new List<Country>();
            objcountrymodel.CountryList = CountryDate();
            return View(objcountrymodel);
        }
        public List<Country> CountryDate()
        {
            List<Country> objcountry = new List<Country>();
            objcountry.Add(new Country { CountryName = "America" });
            objcountry.Add(new Country { CountryName = "India" });
            objcountry.Add(new Country { CountryName = "Sri Lanka" });
            objcountry.Add(new Country { CountryName = "China" });
            objcountry.Add(new Country { CountryName = "Pakistan" });
            return objcountry;
        }
    }
}

In above code I have created a collection of country. This list we will bind with the dropdown list. Now create the view and add the below code into the view.

@model MvcApplication1.Models.CountryModel          
@{
    ViewBag.Title = "MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net";
}
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../../Scripts/jquery.sumoselect.js" type="text/javascript"></script>
<link href="../../Css/dropdownliststyle.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
     $(document).ready(function () {
         window.asd = $('.ddlMultiSlectBox).SumoSelect({ csvDispCount: 4 });
     });
    </script>
Country:
@Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.CountryList, "CountryName", "CountryName"), new {@multiple="multiple",@placeholder="Please select country", @class="ddlMultiSlectBox" })

Here in this code I have added the css and jQuery library reference and used sumoselect function to show multi select dropdown list.

Now we have done run the application to check the output.

where is the link of this plugin? where did you get this from? and where is the coding for dropdownliststyle.css and sumoselect.js ? How to put the <script ... and <link .... ?

Collectives™ on Stack Overflow

ASP.NET MVC multiple select dropdown

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related