New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Use Strongly Typed MultiSelect Posted through a Form

Environment

ProductTelerik UI for ASP.NET Core MultiSelect
Product VersionCreated 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>
	}

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

See Also