Populate dropdown list using Jquery and Asp.net mvc

Jquery is most power full javascrpit library and able to communicate with server using its ajax function. In this tutorial i will show you how to make ajax request to server and bind server response to HTML dropdown list

First create a table in database to store dropdown items

Sql Script

CREATE TABLE [dbo].[categories](
	[Category_ID] [bigint] IDENTITY(1,1) NOT NULL,
	[Category_Name] [nvarchar](max) NULL,
	[Is_Active] [bit] NOT NULL,
	[Is_Deleted] [bit] NOT NULL,
	[Created_Date] [datetime] NOT NULL,
	[Modified_Date] [datetime] NOT NULL,
	[Modified_By] [nvarchar](max) NULL,
 CONSTRAINT [PK_dbo.categories] PRIMARY KEY CLUSTERED 
(
	[Category_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

Now create a new MVC project in visual studio. and Connect with database using Entity-framework database first approach

You can learn how to connect with database using Entity-framework database first approach in my this Article

Controller Code

[HttpGet]
        public JsonResult ProductCategories()
        {
            try
            {
                using (DataContext dbcontext=new DataContext())
                {
                    List FetchAllCateg=new List();
                    var CategoriesList=(from cat in dbcontext.Categories
                   where cat.Is_Deleted!=true
                   && cat.Is_Active!=false
                   select new{ cat.Category_ID,cat.Category_Name}).ToList();

                    if (CategoriesList!=null)
                    {
                        return Json(CategoriesList,JsonRequestBehavior.AllowGet);
                    }
                    else
                    {
                        return Json(CategoriesList, JsonRequestBehavior.AllowGet);
                    }
                }
            }
            catch (Exception)
            {
                
                throw;
            }
        }

JsonResult used to return Json formatted string.

Below is Jquery AJAX code which you can write in separate JS file and include it in view where you want to bind HTML DropDown.

jquery AJAX method Request

$(document).ready(function () {
 $.ajax({
        type: "GET",
        url: "/Categories/ProductCategories",
        contentType: "application/json; charset=utf-8",
        dataType: "json",

    })
         .success(function (data) {
             DisplayCategories(data);

         })
         .error(function () {
             AjaxErrorMessage();

         });
});

Function which used to display records in html control

function DisplayCategories(response) {
   var GetData = response;
    if (GetData.length > 0) {
        var CategoriesHTML = "";
        CategoriesHTML = "";
        for (var i = 0; i < GetData.length; i++) {
            CategoriesHTML += "";
        }
        $("#ProductCategory").html(CategoriesHTML);
    }
}

AjaxErrorMessage() function called when their is something wrong with our ajax request

function AjaxErrorMessage() {
 alert("Error in application");
}

Razor view code

  <select id="ProductCategory" required  name="ProductCategory"></select>
  

Before using this code make sure you add jquery reference