MultiSelectFor

17 Feb 20227 minutes to read

The MultiSelectFor control can be rendered by passing values and data from the model. The selected values can be retrieved during form submit using the post method.

In the following sample, MultiSelectFor control is rendered.

<form method="post">
    <div class="control-wrapper">
        <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'>
            <ejs-multiselect id="dropdown" name="Values" ejs-for="Values" dataSource="ViewBag.data" placeholder="Select a country">
                <e-multiselect-fields value="Name"></e-multiselect-fields>
            </ejs-multiselect>
            <div id="submitbutton">
                <ejs-button id="submitButton" content="Submit"></ejs-button>
            </div>
        </div>
    </div>
</form>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        Countries model = new Countries();
        public ActionResult Index()
        {
            ViewBag.data = new Countries().CountriesList();
            model.Values = new string[] { "Cameroon" };
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(Countries model)
        {
            ViewBag.data = new Countries().CountriesList();
            model.Values = model.Values;
            return View(model);
        }
    }
}

Data Annotation

Data Annotations help us to define the rules to the model classes or properties for data validation and displaying suitable messages to end users.

Data Annotations includes built-in validation attributes for different validation rules, which can be applied to the properties of model class. ASP.NET Framework will automatically enforce these validation rules and display validation messages in the view.

Using value property gets or sets the value of the selected item in the control.

<form method="post">
    <div class="control-wrapper">
        <div id="default" style='padding-top:75px;margin:0 auto;width:250px;'>
            <ejs-multiselect id="EnquiringAboutSelect" ejs-for="EnquiringAboutSelect" name="EnquiringAboutSelect" dataSource="@Model?.EnquiringAboutSelectListItems" floatLabelType="Auto" placeholder="Please Select Enquiring About" popupHeight="230px">
                <e-multiselect-fields text="Text" value="Value"></e-multiselect-fields>
            </ejs-multiselect>
            <span asp-validation-for="EnquiringAboutSelect" class="text-danger"></span>
            <div id="submitbutton">
                <ejs-button id="submitButton" content="Submit"></ejs-button>
            </div>
        </div>
    </div>
</form>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public ActionResult Index()
        {
            DataModel model = new DataModel();
            model.EnquiringAboutSelectListItems = new ListItems().getListItems();
            model.EnquiringAboutSelect = new string[] {"104"};
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(DataModel model)
        {
            model.EnquiringAboutSelectListItems = new ListItems().getListItems();
            model.EnquiringAboutSelect = model.EnquiringAboutSelect;
            return View(model);
        }
    }
    public class DataModel
    {
        [Required(ErrorMessage = "The value is Required")]
        public string[] EnquiringAboutSelect { get; set; }
        public List<ListItems> EnquiringAboutSelectListItems { get; set; }

    }

    public class ListItems
    {
        public string Text { get; set; }
        public string Value { get; set; }
        public List<ListItems> getListItems()
        {
            List<ListItems> items = new List<ListItems>();
            items.Add(new ListItems() { Text = "Aberdeen", Value = "103" });
            items.Add(new ListItems() { Text = "Alexandria", Value = "102" });
            items.Add(new ListItems() { Text = "Albany", Value = "101" });
            items.Add(new ListItems() { Text = "Beacon ", Value = "104" });
            items.Add(new ListItems() { Text = "Brisbane ", Value = "105" });
            return items;
        }
    }
}