How to fill dropdown using JQUERY on partial View dropdown html

Hello,

Please check step by step :

Create main view and include partial view inside main view:

@{
    ViewBag.Title = "Index";
}

Index


    @Html.Partial("_DropdownPartial", Model.DropdownItems)
 

Create partial view with dropdown :

@model IEnumerable


    Select an option
    @foreach (var item in Model)
    {
        @item.Text
    }

Write Jquery function to fetch data from your controller action method,

Create a Database call to get data and send to jquery call:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // Pass an empty list initially
        var model = new YourViewModel
        {
            DropdownItems = new List()
        };
        return View(model);
    }

    [HttpGet]
    public JsonResult GetDropdownData()
    {
        // Fetch your data from a database or any other source as per your requirement
        // Here I have created sample data
        var items = new List
        {
            new SelectListItem { Value = "1", Text = "Value 1" },
            new SelectListItem { Value = "2", Text = "Value 2" },
            new SelectListItem { Value = "3", Text = "Value 3" }
        };
        
        return Json(items, JsonRequestBehavior.AllowGet);
    }
}

Please follow above step carefully your data will load into your dropdown

Hi Asht, 

 --- Controller 

[HttpGet]
    public ActionResult GetCities(int stateId)
    {
        var cities = db.Cities.ToList();
        List cityList = new List();
        foreach (City city in cities)
        {
            cityList.Add(new SelectListItem
            {
                Text = city.CityName,
                Value = city.CityId.ToString()

            });
        }
        ViewBag.City = cityList;
        return View("_City");
    }

partial View



    @Html.LabelFor(model => model.CityName, htmlAttributes: new { @class = "control-label col-md-2" })
    

        @Html.DropDownListFor(model => model.CityName, (IEnumerable)ViewBag.City, "Select City", new { @class = "form-control col-md-3", @id = "ddlCities" })
    

 --- View  page