ASP.NET MVC 多选下拉菜单

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 ?

Answer 1

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";
    }
}

Answer 2

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.

Answer 3

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.