How to bind list items as JSON data in MVC DropDownList?
Description
Binding the list items as JSON data ASP.NET MVC DropDownList from the client side.
Solution
You can bind the list of values into the DropDownList by using the dataSource property of the DropDownList. This is explained in the following code example.
CSHTML
@Html.EJ().DropDownList(“bikeList”).DropDownListFields(df => df.ID(“empid”).Text(“text”)).ClientSideEvents(e => e.Create(“onCreate”))
<script>
function onCreate() {
BikeList = [
{ empid: “bk1”, text: “Apache RTR” }, { empid: “bk2”, text: “CBR 150-R” }, { empid: “bk3”, text: “CBZ Xtreme” },
{ empid: “bk4”, text: “Discover” }, { empid: “bk5”, text: “Dazzler” }, { empid: “bk6”, text: “Flame” },
{ empid: “bk7”, text: “Fazzer” }, { empid: “bk8”, text: “FZ-S” }, { empid: “bk9”, text: “Pulsar” },
{ empid: “bk10”, text: “Shine” }, { empid: “bk11”, text: “R15” }, { empid: “bk12”, text: “Unicorn” }
];
var data1 = $(“#bikeList”).data(“ejDropDownList”); //initializes the Dropdownlist.
data1.option(“dataSource”, BikeList);
}
</script>
Conclusion
I hope you enjoyed learning how to bind list items as JSON data in MVC DropDownList.
You can refer to our ASP.NET MVC Dropdownlist feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to present and manipulate data.
For current customers, you can check out ASP.NET Core components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET Core DocIo and other ASP.NET Core components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
