Use Strongly Typed MultiSelect Posted through a Form

Environment

Product	Telerik UI for ASP.NET Core MultiSelect
Product Version	Created with version 2024.4.1112

Description

How can I integrate and use a strongly typed MultiSelect editor in a form?

Solution

Using a strongly typed variable means that the form is bound to a specific model rather than a loosely typed structure like ViewBag. This approach ensures better type safety, validation, and maintainability. Follow the next steps to implement it.

1. Create ViewModels to store both the available items and the selected values that will be submitted.
2. Configure and bind the MultiSelect component to the respective model property.
3. Process the form submission by accessing the selected values from the strongly typed model on the server.

Razor

	@model Telerik.Examples.Mvc.Areas.MultiSelectFormPostStronglyTyped.Models.CountryInfo

	@using (Html.BeginForm())
	{
		<p>Posted values: @(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.PostedCities ?? new int[] {}))</p>
		@(Html.Kendo().MultiSelectFor(m => m.SelectedCities)
				.DataValueField("ID")
				.DataTextField("Name")
				.BindTo(Model.Cities))
		<br />
		<button>Post</button>
	}

Razor

    @addTagHelper *, Kendo.Mvc
	@model Telerik.Examples.Mvc.Areas.MultiSelectFormPostStronglyTyped.Models.CountryInfo
	
	<p>Posted values: @(string.Join(",", ViewBag.PostedCities ?? new int[] { }))</p>

	<form action="/" method="post">
		<kendo-multiselect for="SelectedCities"
						   datatextfield="Name"
						   datavaluefield="ID"
						   bind-to="Model.Cities">
		</kendo-multiselect>
		<button>Post</button>
	</form>

Models

	public class CountryInfo
 	{
    	public int[] SelectedCities { get; set; }
    	public List<City> Cities { get; set; }
 	}

 	public class City
 	{
    	public int ID { get; set; }
    	public string Name { get; set; }
 	}

C#

	public IActionResult Index()
 	{
    	return View(new CountryInfo
    	{
        	Cities = GetCities(),
        	SelectedCities = new int[] { 1, 3 }
     	});
 	}

 	[HttpPost]
 	public ActionResult Index(int[] SelectedCities)
 	{
    	ViewBag.PostedCities = SelectedCities;
    	return View(new CountryInfo
    	{
        	Cities = GetCities(),
        	SelectedCities = SelectedCities
     	});
 	}

	public List<City> GetCities()
 	{
    	return new List<City>()
    	{
        	new City() { ID = 1, Name= "Sao Paulo" },
        	new City() { ID = 2, Name= "Toronto" },
        	new City() { ID = 3, Name= "New York" },
        	new City() { ID = 4, Name= "Vancouver" }
     	};
 	}

For the complete implementation of how to integrate and use the MultiSelect in a form, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. You can use this application as a starting point to configure the same behavior in an ASP.NET Core project.

More ASP.NET Core MultiSelect Resources

• ASP.NET Core MultiSelect Documentation

• ASP.NET Core MultiSelect Demos

• ASP.NET Core MultiSelect Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the MultiSelect for ASP.NET Core

• Server-Side API Reference of the MultiSelect for ASP.NET Core

• Server-Side TagHelper API Reference of the MultiSelect for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base