We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind ejDropDownList to a MVC list?

Platform: ASP.NET MVC |
Control: DropDownList |
Published Date: April 17, 2015 |
Last Revised Date: May 8, 2019

Description

Populate the DropDownList control by using generic list.

 

Solution

To bind the DropDownList by using MVC generic list, the list of values from controller to the view is passed as illustrated in the following code example.

 

CS

List<Bikes> bike = new List<Bikes>();             // Create the list to add the dropdown items
public ActionResult DropdownlistFeatures()
{
bike.Add(new Bikes { bikeid = "bk1", text = "Apache RTR" });
bike.Add(new Bikes { bikeid = "bk2", text = "CBR 150-R" });
bike.Add(new Bikes { bikeid = "bk3", text = "CBZ Xtreme" });
bike.Add(new Bikes { bikeid = "bk4", text = "Discover" });
bike.Add(new Bikes { bikeid = "bk5", text = "Dazzler" });
return View(bike);
}

 

Create the class “Bikes” and define the properties in that class section, so that it is used in the controller. Refer to the following code to define the class.

public class Bikes

{

public string text { get; set; }

public string bikeid { get; set; }

}

 

Create the strongly typed view by using generic list class, to get the list of values as illustrated in the following code example.

CSHTML

@model  List<Bikes>
<div class="ctrllabel">
Select a Bike</div>
@*Element to Render Dropdown list*@
<input type="text" id="bikeList" />
</div>
<script>
$(function () {
// Get and assign the MVC List data to local data variable
var data=@Html.Raw(Json.Encode(Model));
$('#bikeList').ejDropDownList({
//Assign the DataSource value to dropdownlist control.
dataSource: data,
// Mapping the fields
fields: { id: "bikeid", text: "text", value: "text" }
});
});
</script>

 

In the dropdown list fields property, you can pass the following parameters other than id, text, value;

htmlAttributes,imageAttributes, imageUrl,selected,SpriteCssClass,tableName

 

API Reference: http://help.syncfusion.com/UG/JS_CR/ejDropDownList.html

Demo: http://mvc.syncfusion.com/demos/web/dropdownlist/databindinglocal  

UG documentation: http://help.syncfusion.com/ug/js/index.html#!Documents/overview20.htm

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon