# Use Strongly Typed MultiSelect Posted through a Form

## Environment

<table>
	<tbody>
        <tr>
			<td>Product</td>
			<td>Telerik UI for ASP.NET MVC MultiSelect</td>
		</tr>
		<tr>
			<td>Product Version</td>
			<td>Created with version 2024.4.1112</td>
		</tr>
	</tbody>
</table>

## 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 HtmlHelper
	@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>
	}
```

```C# Model
	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# Controller
	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](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/MultiSelectFormPostStronglyTyped) in the [UI for ASP.NET MVC Examples repository](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master).

## More ASP.NET MVC MultiSelect Resources

* [ASP.NET MVC MultiSelect Documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/multiselect/overview)

* [ASP.NET MVC MultiSelect Demos](https://demos.telerik.com/aspnet-mvc/multiselect)

* [ASP.NET MVC MultiSelect Product Page](https://www.telerik.com/aspnet-mvc/multiselect)

* [Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET MVC Forums](https://www.telerik.com/forums/aspnet-mvc)

## See Also

* [Client-Side API Reference of the MultiSelect for ASP.NET MVC](https://docs.telerik.com/kendo-ui/api/ui/multiselect)

* [Server-Side API Reference of the MultiSelect for ASP.NET MVC](https://docs.telerik.com/aspnet-mvc/api/multiselect)

* [Telerik UI for ASP.NET MVC Breaking Changes](https://docs.telerik.com/aspnet-mvc/backwards-compatibility/overview)

* [Telerik UI for ASP.NET MVC Knowledge Base](https://docs.telerik.com/aspnet-mvc/knowledge-base)