How to bind JSON data to Dropdownlist in ASP.NET MVC using Jquery

June 15 2020 by Admin

In this article, we will explain how to bind JSON data to Dropdownlist in ASP.NET MVC using jquery with an example and a sample code.

In this article, we will explain how to bind JSON data to Dropdownlist in ASP.NET MVC using jquery with an example and a sample code. In this example, we are using the Jquery document load function . on the load we using Ajax Post Method to get data from the server-side.

Index.cshtml

We are using map function to make HTML.

ViewData["Title"] = "How to bind json data to dropdownlist in asp.net mvc using jquery";

}

$(document).ready(function () {

debugger;

$.ajax({

type: "POST",

url: '@Url.Action("GetJsonData", "Home")',

data: "",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

let output = data.map(x => "<option value='" + x.stockId + "'>" + x.stockName + "</option>");

$("#ddlstock").html('<option value="-1">All</option>');

$("#ddlstock").append(output.join(' '));

}

});

</script>

<h1 class="display-4">Stock List</h1>

</select>

</div>

Stockmodel.cs

public class Stockmodel

{

public int stockId { get; set; }

public string StockName { get; set; }

public decimal StockPrice { get; set; }

}

HomeController

public class HomeController : Controller

{

public IActionResult Index()

{

return View();

}

public JsonResult GetJsonData()

{

return Json(GetStock());

}

[NonAction]

private List<Stockmodel> GetStock()

{

List<Stockmodel> model = new List<Stockmodel>();

model.Add(new Stockmodel { stockId = 1, StockName = "Rel", StockPrice = 1200 });

model.Add(new Stockmodel { stockId = 2, StockName = "Relaxo", StockPrice = 650 });

model.Add(new Stockmodel { stockId = 3, StockName = "Tcs", StockPrice = 2100 });

model.Add(new Stockmodel { stockId = 4, StockName = "IGL", StockPrice = 500 });

model.Add(new Stockmodel { stockId = 5, StockName = "SBI", StockPrice = 200 });

return model;

}

Output

How to bind JSON data to Dropdownlist in ASP.NET MVC using Jquery

Download

Dropdown
JSON

Home > MVC > How to bind JSON data to Dropdownlist in ASP.NET MVC using Jquery